Hướng dẫn is bootstrap hard to learn? - bootstrap có khó học không?

Thoạt nhìn, Bootstrap có vẻ khá đơn giản. Và thực sự, không khó để bắt đầu sử dụng bootstrap. Có một tài liệu bootstrap được viết rất tốt với nhiều ví dụ mã HTML, CSS và JavaScript. Hầu hết các cạm bẫy quan trọng được đề cập ở đó, nhưng vẫn còn một số sai lầm khá tinh tế, hoặc có những nguyên nhân mơ hồ. Bởi vì Bootstrap trông rất đơn giản và dễ sử dụng, nhiều nhà phát triển đang lao vào khung, và vì vậy sai lầm xảy ra.

Chúng tôi sẽ xem xét 10 trong số các lỗi, vấn đề và quan niệm sai lầm phổ biến nhất khi các nhà phát triển bắt đầu sử dụng nó.

Sai lầm Bootstrap phổ biến #1: Những quan niệm sai lầm cơ bản về khung

Có một số quan niệm sai lầm cơ bản về khung bootstrap mà mọi người có. Điều này có thể là do nó không được quảng cáo rõ ràng trên trang web bootstrap hoặc vì mọi người không mất đủ thời gian để đọc tài liệu. Thực tế là đôi khi các nhà phát triển kết thúc ở góc làm việc sai, và sau đó đổ lỗi cho khuôn khổ. Vì vậy, hãy làm cho một số sự thật cơ bản rõ ràng.

Bootstrap là toàn diện, nhưng nó không lớn cũng không to lớn. Bootstrap đi kèm với các mẫu thiết kế HTML và CSS cơ bản bao gồm nhiều thành phần UI phổ biến. Chúng bao gồm kiểu chữ, bảng, biểu mẫu, nút, glyphicons, thả xuống, nút và nhóm đầu vào, điều hướng, phân trang, nhãn và huy hiệu, cảnh báo, thanh tiến trình, phương thức, tab, accordions, băng chuyền, và nhiều thứ khác. Bạn có thể chọn và chọn một vài trong số chúng, và với cấu hình mặc định của nó nhanh chóng tạo ra UI xử lý nhiều trình duyệt, thiết bị và độ phân giải với định dạng đẹp.

Bootstrap sẽ không làm mọi thứ cho bạn, nhưng nó cung cấp một bộ mặc định hợp lý để lựa chọn và nó sẽ giúp các nhà phát triển tập trung nhiều hơn vào công việc phát triển hơn là lo lắng về thiết kế và giúp họ có một trang web đẹp mắt và chạy nhanh. Nó cho phép tạo mẫu nhanh, nhưng nó không giới hạn các nhà phát triển trên đường.

Nó đủ mở rộng để bất cứ ai cũng có thể điều chỉnh nó để phù hợp với nhu cầu của mình. Ban đầu, Bootstrap có một số hạn chế và hồi đó, rất phức tạp để mở rộng các kiểu mặc định. Nhưng khi khung trưởng thành, khả năng mở rộng cũng được cải thiện.

Sai lầm bootstrap phổ biến #2: nghĩ rằng bạn không cần biết CSS để sử dụng bootstrap và bạn không cần một nhà thiết kế

Nếu bạn đang nghĩ rằng nếu bạn đang sử dụng bootstrap, bạn sẽ không cần biết CSS, bạn sẽ rất sai. Bất kỳ nhà phát triển phía trước nào cũng cần học CSS và HTML5. Bootstrap đang loại bỏ rất nhiều bộ phận CSS khó khăn khỏi vai các nhà phát triển (như tiền tố cụ thể của nhà cung cấp) và nó cung cấp kiểu dáng mặc định cơ bản, nhưng bạn vẫn cần phải hiểu CSS. Bạn không cần phải biết các truy vấn truyền thông hoạt động như thế nào, nhưng bạn cần hiểu cách thức thiết kế đáp ứng hoạt động. Bootstrap không có nghĩa là dạy bạn CSS, nhưng nó có thể giúp ích nếu bạn muốn. Kiểm tra mã nguồn trong ít hoặc SASS là một điểm khởi đầu tuyệt vời.

Về một chủ đề tương tự, bạn không cần phải là một nhà thiết kế và bạn có thể lập luận rằng bạn không cần một nhà thiết kế với bootstrap. Tuy nhiên, nếu có thể, hãy sử dụng trợ giúp từ một nhà thiết kế. Một khiếu nại phổ biến chống lại Bootstrap là tất cả các trang web Bootstrap trông giống nhau và dễ dàng kết thúc với một trang web trông giống như bất kỳ trang web bootstrap nào khác. Nhưng điều này không cần phải đúng. Hàng triệu trang web trên web đang được xây dựng với Bootstrap. Có thể tìm thấy những màn trình diễn tuyệt vời về cách các thiết kế khác nhau có thể đạt được trên Triển lãm Bootstrap, thu thập các trang web được xây dựng bằng bootstrap. Hãy xem, có được một số cảm hứng và bắt đầu xây dựng biến thể thiết kế của riêng bạn.

Sai lầm Bootstrap phổ biến #3: Thay đổi tệp CSS Bootstrap

Để làm cho nó đơn giản và đơn giản: Không sửa đổi tệp bootstrap.css.not modify the bootstrap.css file.

Nếu bạn thay đổi tệp bootstrap.css, mọi thứ sẽ trở nên phức tạp rất nhanh. Toàn bộ thiết kế sẽ bị hỏng khi bạn muốn nâng cấp các tệp Bootstrap. Bạn có thể ghi đè lên các màu, kiểu dáng, kiểu dáng, lề, tất cả mọi thứ. Không cần phải chạm vào bảng kiểu bootstrap.css.

Bạn có biết ít hơn hay Sass? Không có vấn đề gì, bạn có thể tạo tệp CSS của riêng mình và ghi đè bất cứ thứ gì bạn muốn từ bảng kiểu bootstrap.css gốc. Giống như chúng tôi đã đề cập trong sai lầm trước đây, biết CSS là bắt buộc. Tạo bộ chọn CSS mới của bạn, sử dụng nó trong HTML và miễn là bạn khai báo các lớp CSS của mình sau các kiểu Bootstrap, định nghĩa của bạn sẽ ghi đè lên các mặc định của Bootstrap.

Vẫn muốn biết nhiều hơn và lặn sâu hơn? Tôi thực sự đề nghị và khuyến khích bạn làm như vậy. Sử dụng mã nguồn ít hơn. Bạn sẽ hiểu rõ hơn về những gì đang diễn ra, và đâu là điều gì sẽ xảy ra nếu bạn sử dụng các nguồn ít hơn và không tĩnh.

Sai lầm Bootstrap phổ biến #4: Sử dụng mọi thứ mà Bootstrap cung cấp

Như đã đề cập trước đây, Bootstrap là toàn diện. Nó cung cấp rất nhiều thành phần UI, các mẫu thiết kế HTML và CSS và các plugin JavaScript. Nhưng xin vui lòng, hãy chọn lọc. Bạn không phải sử dụng mọi tính năng của bootstrap.

Điều này đặc biệt đúng cho các plugin. Chọn và chọn các plugin có ý nghĩa, và don lồng sử dụng mọi thứ vì nó trông đẹp và mát mẻ. Trang web của bạn có thể dễ dàng quá mức. Hãy xem xét một bắt đầu rằng bạn không bao gồm tệp bootstrap.js và tạo một trang web chỉ bằng cách sử dụng HTML và CSS đơn giản. Và sau đó, chỉ thêm các thành phần khi cần thiết cho các vai trò cụ thể, từng cái một.

Sai lầm Bootstrap phổ biến #5: Việc lạm dụng một lời nhắc phương thức

Các phương thức Bootstrap cung cấp các lời nhắc hộp thoại linh hoạt với chức năng yêu cầu tối thiểu và nó đi kèm với mặc định thông minh. Mặc dù phương thức rất dễ sử dụng và cung cấp tùy chỉnh phong phú, nhưng có một vài điều chúng ta cần ghi nhớ để tránh các hành vi lạm dụng thông thường.

Hiển thị nhiều hơn một lời nhắc phương thức tại thời điểm đó

Bootstrap không hỗ trợ các phương thức chồng chéo. Chỉ có thể nhìn thấy một phương thức tại thời điểm đó. Hiển thị nhiều hơn một phương thức tại một thời điểm có thể đạt được, nhưng nó yêu cầu mã tùy chỉnh phải được viết để xử lý điều này đúng cách.

Phương thức bootstrap xuất hiện dưới nền

Nếu thùng chứa phương thức hoặc phần tử cha của nó có vị trí cố định hoặc tương đối, phương thức sẽ không hiển thị đúng. Luôn đảm bảo rằng thùng chứa phương thức và các yếu tố cha mẹ của nó không có bất kỳ định vị đặc biệt nào được áp dụng. Cách thực hành tốt nhất là đặt một HTML phương thức Modal ngay trước khi đóng thẻ , hoặc thậm chí tốt hơn ở vị trí cấp cao nhất trong tài liệu ngay sau thẻ mở ____10. Đây là cách tốt nhất để tránh các thành phần khác ảnh hưởng đến sự xuất hiện và chức năng của phương thức.

Phương thức trên các thiết bị di động

Có một số cảnh báo rằng các nhà phát triển cần nhận thức được khi xử lý các phương thức trên các thiết bị di động với bàn phím ảo. Điều này đặc biệt đúng với các thiết bị iOS, trong đó một lỗi kết xuất tồn tại mà không cập nhật vị trí của các phần tử cố định khi bàn phím ảo được kích hoạt. Điều này không được xử lý bởi Bootstrap, do đó, tùy thuộc vào nhà phát triển để xử lý các tình huống này trong mã theo cách tốt nhất cho ứng dụng được đề cập.

Sai lầm Bootstrap phổ biến #6: Vấn đề thành phần nút đầu vào tệp

Bootstrap không có thành phần được chỉ định cho nút tải lên tệp. Một giải pháp đơn giản và thanh lịch chỉ sử dụng HTML và CSS có thể đạt được với mã mẫu sau:

  Browse 

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

Có nhiều ví dụ về làm thế nào để có được hiệu ứng tương tự. Ví dụ mã này được mượn từ Cory Laviska và trên trang web của anh ấy, bạn có thể đọc một giải thích chi tiết hơn về vấn đề này. Ngoài ra còn có một ví dụ mở rộng với nhiều chức năng hơn đang sử dụng mã JavaScript bổ sung.

Sai lầm Bootstrap phổ biến #7: Kỷ chế quá mức với JavaScript và bỏ qua các thuộc tính dữ liệu của dữ liệu

Các nhà thiết kế, hoặc chỉ các nhà phát triển JavaScript mới làm quen, có thể dễ dàng đi sâu vào phát triển web và tạo các trang web chỉ sử dụng HTML, CSS và Bootstrap. Nếu chúng không giỏi về mã hóa, chúng có thể rơi vào cái bẫy của việc lạm dụng JavaScript hoặc chỉ quá mức. Điều quan trọng là nói rằng tất cả các plugin bootstrap có thể được sử dụng hoàn toàn thông qua API đánh dấu, mà không cần viết một dòng JavaScript duy nhất. Đây là API hạng nhất Bootstrap, và nên là sự cân nhắc đầu tiên của bạn khi sử dụng các plugin.without writing a single line of JavaScript. This is Bootstrap’s first-class API and should be your first consideration when using plugins.

Ví dụ: chúng ta có thể kích hoạt hộp thoại phương thức mà không cần viết bất kỳ JavaScript nào chỉ bằng cách đặt

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

1 trên phần tử bộ điều khiển như nút hoặc neo và truyền các tham số bổ sung bằng các thuộc tính

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

2. Trong mã bên dưới, chúng tôi đang nhắm mục tiêu mã HTML với ID

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

3. Chúng tôi đã chỉ định rằng phương thức won đóng đóng khi người dùng nhấp ngoài phương thức bằng cách sử dụng tùy chọn

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

4 và chúng tôi đã vô hiệu hóa sự kiện Key Escape đóng một phương thức với tùy chọn

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

5. Tất cả trong một dòng mã HTML:

Launch my modal

Sai lầm xảy ra, và mọi nhà phát triển đều làm cho họ thỉnh thoảng. Điều này là không thể tránh khỏi, nhưng đó là cách bạn đối phó với sai lầm quan trọng. Nhóm Bootstrap nhận thấy bằng cách xem trình theo dõi vấn đề rằng mọi người đang làm một số sai lầm thường xuyên hơn. Đó là lý do tại sao họ cố gắng tự động hóa quá trình phát triển. Kết quả là bootlint, một công cụ lót HTML cho các dự án bootstrap. Bootlint có thể được sử dụng trong trình duyệt hoặc từ dòng lệnh qua Node.js và nó sẽ tự động kiểm tra các trang web bootstrapping cho nhiều lỗi sử dụng bootstrap phổ biến. Thêm bootlint vào công cụ phát triển web của bạn có thể loại bỏ rất nhiều lỗi phổ biến thường làm chậm sự phát triển của dự án.

Trong trường hợp bạn muốn đóng góp cho dự án Bootstrap, điều đáng để kiểm tra Rorschach. RorsChach là một bot kiểm tra độ lệch yêu cầu kéo bootstrap, chạy một vài kiểm tra trên mỗi yêu cầu kéo mới. Nếu kiểm tra tỉnh táo không thành công, nó sẽ để lại nhận xét thông tin về yêu cầu kéo giải thích sai lầm và cách khắc phục nó, sau đó đóng yêu cầu kéo.

Sai lầm bootstrap phổ biến #9: IE8 và các trình duyệt cũ hơn các vấn đề không tương thích

Bootstrap được xây dựng để hoạt động tốt nhất trong trình duyệt máy tính để bàn và di động mới nhất. Các trình duyệt cũ hơn có thể hiển thị các thành phần và các yếu tố được tạo kiểu khác nhau, nhưng mọi thứ nên có đầy đủ chức năng. Hỗ trợ bao gồm Internet Explorer 8 và 9, với một lưu ý quan trọng là một số thuộc tính CSS3 và các phần tử HTML5 không được hỗ trợ đầy đủ bởi các trình duyệt này.

Để nhận được hỗ trợ đầy đủ cho Internet Explorer 8 và các trình duyệt cũ hơn khác, bạn cần sử dụng polyfill cho các truy vấn truyền thông CSS3 trả lời.js, HTML 5 SHIM cho phép sử dụng các phần tử HTML5 và thẻ IE

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

6 thích hợp trong đầu HTML để đảm bảo rằng IE không chạy ở chế độ tương thích. Cuối cùng, đầu HTML của bạn sẽ trông giống như thế này:

  ...
  
  

Trong trường hợp

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 100%;
    min-height: 100%;
    font-size: 100px;
    text-align: right;
    filter: alpha(opacity=0);
    opacity: 0;
    outline: none;
    background: white;
    cursor: inherit;
    display: block;
}

7, hãy cẩn thận với những cảnh báo sau trong môi trường phát triển và sản xuất.

Sai lầm Bootstrap phổ biến #10: Bỏ qua các thực tiễn tốt nhất

Một trong những câu hỏi phổ biến trên Stack Overflow là làm thế nào để thực hiện thả xuống menu Bootstraps để mở trên máy bay lượn, thay vì nhấp chuột. Mặc dù giải pháp cho câu hỏi này không phức tạp và có thể được thực hiện bằng cách chỉ sử dụng CSS, nhưng nó không được khuyến khích. Tính năng này bị loại khỏi khuôn khổ có chủ đích, và đây là một quyết định thiết kế được đưa ra bởi nhóm phát triển. Một lần nữa, nó có thể được thực hiện, nhưng người ta cần hiểu những hậu quả và hiểu rằng các thực tiễn tốt nhất tồn tại, đặc biệt là đối với các khung đầu tiên trên thiết bị di động. Lý do đằng sau vấn đề cụ thể này là việc tạo ra mọi thứ để hoạt động trên Hover không giúp người dùng có thiết bị cảm ứng. Trên các thiết bị như vậy không có di chuột, chỉ chạm vào các sự kiện. Do đó, điều này sẽ không hoạt động đúng trên bất kỳ thiết bị hỗ trợ cảm ứng nào.

Kết luận sai lầm bootstrap

Tôi hy vọng hướng dẫn bootstrap ngắn này sẽ giúp bạn tránh một số sai lầm phổ biến, rõ ràng những quan niệm sai lầm thông thường và giúp bạn có được hầu hết các khung. Hãy nhớ rằng, Bootstrap không dành cho tất cả mọi người, cũng không phù hợp với mọi dự án. Khi chọn một khung, bạn cần dành một chút thời gian để đọc tài liệu và bạn cần dành thời gian chơi với khung để hiểu rõ hơn và hình ảnh về cách thức hoạt động. Điều này là hợp lệ cho bootstrap quá.

Đọc tài liệu, chơi và thử nghiệm với các mẫu, nhận được những điều cơ bản đúng đắn và tận hưởng việc tạo ra các thiết kế mới và đẹp.

Mất bao nhiêu thời gian để học bootstrap?

Bootstrap có khó hơn CSS không?

Tôi có thể học bootstrap trong một tuần không?

Sử dụng bootstrap dễ dàng?