10 lỗi thường gặp khi dùng Bootstrap và những điểm mạnh của bootstrap 4

Khi nhìn sơ qua Bootstrap có vẻ đơn giản. Sự thật là, cũng không quá khó để bắt đầu dùng Bootstrap. Có tài liệu tốt ở đây Bootstrap documentation, nhiều ví dụ về HTML, CSS, và JavaScript. Đa số những lỗi quan trọng đều được đề cập trong tài liệu trên, nhưng cũng có những lỗi khá nhạy cảm, hoặc gây ra những sự nhập nhằng. Như vậy, bạn phải tìm hiểu kĩ còn không thì gặp lỗi là chuyện thường. Chúng ta sẽ xem xét 10 lỗi vấn đề và quan niệm sai lầm khi sử dụng Bootstrap.

Nội dung chính

Lỗi #1: Những quan niệm sai lầm căn bản về framework này
Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer
Lỗi #3: Thay đổi file CSS của Bootstrap
Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấp
Lỗi #5: Dùng hộp hội thoại sai cách
Lỗi #6: Vấn đề với nút chọn file để upload
Lỗi #7: Phức tạp hóa bằng việc viết thêm code JavaScript và bỏ qua những thuộc tính "data-"
Lỗi #8: Không dùng tools giúp làm việc với Bootstrap dễ dàng
Lỗi #9: Lỗi không tương thích với IE8 và những trình duyệt cũ hơn
Lỗi #10: Bỏ qua những khuôn mẫu tốt

Lỗi #1: Những quan niệm sai lầm căn bản về framework này

Bạn hiểu sai khái niệm vì tài liệu bootstrap không nói rõ, hoặc bạn không có đủ thời gian để đọc kĩ dẫn đến bạn không hiểu đúng, làm sai, và đổ lỗi cho framework. Bootstrap tổng hợp đủ mọi thứ, nhưng dung lượng nó không quá lớn.
Bootstrap đi kèm với những mẫu thiết kế HTML và CSS cơ bản mô tả cách dùng những thành phần giao diện (UI = User Interface) phổ biến. Chúng bao gồm Typography (định dạng văn bản), Tables (bảng), Forms, Buttons, Glyphicons (những icon biểu tượng nhỏ), Dropdowns, Buttons và Input Groups, Navigation (các dạng điều hướng/liên kết), Pagination (phân trang), Labels và Badges (nhãn và huy hiệu), Alerts (thông báo), Progress Bars (thanh tiến trình), Modals (hộp hội thoại), Tabs, Accordions, Carousels, và nhiều cái khác. Bạn có thể chọn một vài thành phần, và sử dụng những cấu hình mặc định của chúng để nhanh chóng tạo UI hỗ trợ đa trình duyệt, đa thiết bị truy cập web, và đa độ phân giải theo một định dạng tốt.
Bootstrap không làm mọi việc cho bạn, nhưng nó cung cấp một số lượng hợp lí các mẫu mặc định để bạn chọn, như vậy nó giúp developers tập trung nhiều hơn vào công việc phát triển so với việc lo lắng về thiết kế, và giúp họ có được 1 website đẹp, sẵn sàng hoạt động một cách nhanh chóng.
Bootstrap giúp cho việc tạo mẫu nhanh, nhưng nó giúp thiết kế hoàn thiện website, chứ không chỉ là việc tạo mẫu. Nó cho phép mở rộng, theo đó chúng ta có thể mở rộng nó tùy theo nhu cầu. Lúc mới ra đời, bootstrap có nhược điểm và việc mở rộng rất phức tạp. Nhưng càng ngày thì điều này càng được cải thiện.

Lỗi #2: Cho rằng không cần biết CSS vẫn dùng được Bootstrap và không cần một designer

Nếu bạn nghĩ dùng Bootstrap không cần biết CSS, thì bạn đã sai. Bất kỳ front-end developer nào cũng cần học CSS và HTML. Bootstrap bỏ đi rất nhiều phần CSS trick (như là những tiền tố riêng của trình duyệt và cung cấp các định dạng mặc định cơ bản, do đó bạn vẫn cần phải hiểu CSS. Bạn không cần biết truy xuất theo thiết bị (media queries) hoạt động như thế nào, nhưng bạn cần hiểu thiết kế tương ứng (responsive design) hoạt động như thế. Bootstrap được làm ra không phải để dạy bạn CSS, nhưng nó có thể giúp nếu bạn muốn. Xem source code với dạng LESS hoặc SASS là một cách bắt đầu tốt.
Một việc tương tự, bạn không cần một designer, và bạn có thể lý luận rằng bạn không cần một designer với Bootstrap. Tuy nhiên nếu có thể, hãy dùng sự trợ giúp của một designer. Một than phiền phổ biến với Bootstrap là những sites dùng Bootstrap nhìn giống nhau. Điều này có thể xảy ra. Hàng triệu websites được xây dựng bằng Bootstrap. Những ví dụ tốt cho thấy những thiết kế khác nhau có được bằng cách nào được trình bày ở Bootstrap Expo, một trang tập hợp những sites dùng Bootstrap. Hãy xem xét, lấy cảm hứng, và bắt đầu xây dựng thiết kế riêng biệt của bạn.

Lỗi #3: Thay đổi file CSS của Bootstrap

Đơn giản là: Không được sửa file bootstrap.css
Nếu bạn thay đổi file bootstrap.css, mọi thứ sẽ sớm trở nên phức tạp. Toàn bộ thiết kế sẽ bị hư khi bạn muốn nâng cấp những file Bootstrap. Bạn có thể viết đè (overwrite) trong trang định dạng (stylesheet) của riêng bạn những thiết lập mặc định của Bootstrap về colors (màu sắc), styles (định dạng), margins (lề ngoài), paddings (lề trong), mọi thứ khác. Không việc gì phải đụng đến file bootstrap.css.

Lỗi #4: Dùng HẾT mọi thứ Bootstrap cung cấp

Như đã nói ở trên, Bootstrap tổng hợp nhiều thứ, UI components (những thành phần giao diện), HTML and CSS design templates (những mẫu thiết kế HTML và CSS), và JavaScript plugins. Nhưng hãy sử dụng CÓ CHỌN LỌC. Bạn không cần phải dùng mọi thứ của Bootstrap.
Đặc biệt với plugins. Chỉ dùng những plugins mà bạn cần, và đừng dùng mọi thứ vì chúng trông đẹp và hay. Website của bạn sẽ bị làm quá (overdone). Hãy bắt đầu bằng việc không dùng file bootstrap.js, và tạo site chỉ bằng HTML và CSS. Sau đó, thêm thành phần nào cần cho những việc cụ thể, từng cái một.

Lỗi #5: Dùng hộp hội thoại sai cách

Bootstrap modals (hộp hội thoại) cung cấp những khung hội thoại linh hoạt với tính năng yêu cầu tối thiểu, và nó kèm theo những mặc định thông minh (smart defaults). Mặc dù modal thì dễ dùng và cung cấp những hiệu chỉnh phong phú, có một vài điều chúng ta cần nhớ để tránh những cách dùng sai phổ biến.

Hiển thị nhiều hơn một modal

Bootstrap không hỗ trợ hiển thị chồng (overlapping) modals. Chỉ một modal tại một thời điểm có thể hiển thị. Hiển thị nhiều hơn một modal tại một thời điểm có thể đạt được, nhưng cần chỉnh sửa code để thực hiện điều này một cách đúng đắn.

Modal Bootstrap xuất hiện sai (bên dưới phần nền)

Nếu đối tượng chứa modal hoặc thành phần cha của nó có thuộc tính position là fixed hoặc relative, modal sẽ không hiển thị đúng. Luôn luôn chắc rằng đối tượng chứa modal và thành phần cha của nó không dùng thuộc tính position đặc biệt. Cách tốt nhất là đặt mã HTML của modal ngay trước thẻ đóng < /body>, hoặc tốt hơn nữa là ngay sau thẻ mở < body>. Đây là cách tốt nhất để tránh những thành phần khác ảnh hưởng tới giao diện và tính năng của modal.

Modal trên thiết bị di động (mobile devices)

Có một số cảnh báo mà developers cần biết khi làm việc với modals trên thiết bị di động dùng bàn phím ảo mobile devices with virtual keyboards. Đặc biệt chú ý các thiết bị chạy iOS, có một lỗi hiển thị, những thành phần có thuộc tính position là fixed sẽ không được thay đổi thuộc tính này khi bàn phím ảo xuất hiện. Bootstrap không xử lý vấn đề này, nên developer sẽ phải xử lý những vấn đề này trong code.

Lỗi #6: Vấn đề với nút chọn file để upload

Bootstrap không thiết kế sẵn thành phần tương ứng với nút upload file. Một cách đơn giản để có được nút upload file đẹp mắt là đoạn HTML và CSS sau:


<span class="btn btn-default btn-file">
    Browse <input type="file" />
</span>

.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ụ mẫu khác để làm được việc tương tự. Ví dụ mẫu này là của Cory LaViska, chi tiết về nó thì bạn đọc tại site của anh ấy. Cũng có một ví dụ mẫu mở rộng khác cung cấp nhiều tính năng hơn thông qua việc sử dụng thêm mã JavaScript.

Lỗi #7: Phức tạp hóa bằng việc viết thêm code JavaScript và bỏ qua những thuộc tính "data-"

Designers, hoặc developers JavaScript mới vào nghề, nếu họ không hiểu về JavaScript, họ sẽ không biết cách sử dụng và phức tạp hóa JavaScript. Phải CHÚ Ý rằng mọi plugins của Bootstrap có thể áp dụng chỉ đơn thuần thông qua HTML, không cần viết thêm dù chỉ 1 dòng code JavaScript. Đây gọi là API thứ tự đầu tiên của Bootstrap (Bootstrap’s first-class API) và bạn phải xem đây là giải pháp trước nhất khi làm việc với plugins.
Ví dụ, chúng ta có thể kích hoạt 1 modal, không dùng code JavaScript, như sau, thiết lập thuộc tính data-toggle="modal" cho đối tượng kích hoạt như button hay liên kết <a></a>, data-target="#myModal" là thiết lập modal có id là myModal sẽ được kích hoạt/hiển thị, data-backdrop="static" là không đóng modal khi user click ra ngoài modal, và data-keyboard="false" là không đóng modal khi user nhấn phím escape. 4 thuộc tính được bỏ trong 1 tag HTML kích hoạt duy nhất:


<button type="button" data-toggle="modal" data-target="#myModal" data-backdrop="static" data-keyboard="false">Launch my modal</button>

Lỗi #8: Không dùng tools giúp làm việc với Bootstrap dễ dàng

Developers mắc nhiều lỗi khi dùng Bootstrap. Do đó, Bootstrap tạo ra Bootlint, 1 tool kiểm tra cấu trúc HTML của những projects dùng Bootstrap. Bootlint có thể dùng thông qua browser hoặc thông qua dòng lệnh trên nền Node.js. Bootlint giúp bạn làm việc nhanh hơn.
Cao cấp hơn, nếu bạn muốn đóng góp vào project Bootstrap, bạn nên tìm hiểu Rorschach. Rorschach là công cụ tự động kiểm tra tính hợp lệ của một bản đóng góp code, nó sẽ thực thi một số kiểm tra đối với mỗi bản đóng góp code. Nếu nó thấy không thỏa mãn tính hợp lệ, nó sẽ comment báo lỗi gì và sửa ra sao, và đóng yêu cầu đóng góp code.

Lỗi #9: Lỗi không tương thích với IE8 và những trình duyệt cũ hơn

Bootstrap hoạt động tốt nhất trên những trình duyệt mobile và máy tính mới. Những trình duyệt cũ sẽ hiển thị giao diện với định dạng khác đi, nhưng mọi thứ vẫn hoạt động bình thường. Sự hỗ trợ bao gồm Internet Explorer 8 và 9, với CHÚ Ý rằng một số thuộc tính CSS3 và một số thành phần HTML5 không được hỗ trợ đầy đủ trên những trình duyệt này.

Để có sự hỗ trợ đầu đủ cho Internet Explorer 8 và những trình duyệt cũ hơn khác, bạn cần dùng tool hỗ trợ cho những truy xuất CSS3 (CSS3 Media Queries) là Respond.js, HTML 5 shim, những tool này cho phép hiển thị những thành phần HTML5, và thêm một thẻ <meta> để đảm bảo IE không chạy trong chế độ compatibility mode. Phần mã HTML head trông sẽ như sau:


<head>
    ...
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

Khi dùng Respond.js, CHÚ Ý những cảnh báo sau khi phát triển & xuất bản ứng dụng.

Lỗi #10: Bỏ qua những khuôn mẫu tốt

Một câu hỏi phổ biến trên Stack Overflow là làm cách nào để menu Bootstrap xổ xuống khi rê chuột qua, chứ không đợi tới khi click. Vấn đề này không quá phức tạp và được giải quyết bằng CSS, nhưng khuôn mẫu tốt là không nên giải quyết nó. Tính năng này bị Bootstrap bỏ ra rìa là có lý do, đặc biệt khi Bootstrap là framework ưu tiên hỗ trợ mobile (mobile first framework). Lý do ở đây là thiết bị cảm ứng không có hành động rê chuột, mà chỉ có hành động chạm (only touch events). Nên trên mobile nó sẽ không làm việc đúng.

Kết luận

Trong bài hướng dẫn ngắn ngọn này, tôi hy vọng giúp bạn tránh được một số lỗi phổ biến, tránh hiểu sai những khái niệm căn bản, và sử dụng framework hiệu quả nhất. CHÚ Ý rằng, Bootstrap không phải dành cho mọi người, cũng không phải phù hợp cho mọi project. Khi chọn một framework, bạn phải dành thời gian đọc tài liệu, và "chơi" framework để cảm nhận nó và hình dung nó hoạt động như thế nào. Bootstrap cũng cần làm như vậy. Đọc tài liệu, chơi và thí nghiệm với những ví dụ mẫu, hiểu đúng những vấn đề căn bản, và thích thú/tận hưởng khi tạo ra những thiết kế mới và đẹp.

Bài viết được tham khảo tại: https://techtalk.vn/10-loi-thuong-gap-khi-dung-bootstrap.html

Những điểm mạnh của boostrap 4

Chắc hẳn những ai làm về Front-end đều biết về một Framework CSS rất nổi tiếng đó là Bootstrap. Với sức mạnh hỗ trợ Responsive tốt bởi hệ Grid của Bootstrap cùng với một loạt các class phong phú, Bootstrap đã trở thành một framework quen thuộc đối với các lập trình viên Front-end. Và sau một thời gian Bootstrap 3 làm mưa làm gió thì đến nay Bootstrap 4 đã ra đời, với những cải tiến đáng kể để tăng thêm tính tiện lợi, tính thời đại, ưu việt hơn so với bản cũ của nó trước đó. Và sau một thời gian tìm hiểu, tôi thấy Bootstrap 4 có một số đặc điểm đáng chú ý sau:

1. Thật gọn nhẹ chỉ với 88KB

Khi dùng bất cứ Framework hay Plugin nào việc bất kỳ Coder nào cũng mong muốn đều là một phiên bản thật nhẹ để khi thêm vào web sẽ load nhanh hơn và không bị nặng web. Nếu như bạn đã nghe câu "Xóa code chính là debug code" thì trong trường hợp này Bootstrap đã hoàn thành xuất sắc quá trình cải tiến cho phiên bản 4 của chính phiên bản tiền nhiệm trước đó của nó. So sánh với phiên bản ổn định gần đây nhất của Bootstrap là 3.3.7 thì ta sẽ thấy được dung lượng file Bootstrap.min.css giảm đi đáng kể, từ 121KB trên phiên bản cũ, và giờ đây chỉ còn 88KB ở phiên bản Beta mới này. Như thế khi dùng sẽ load nhanh hơn phải không nào.

2. Sử dụng Sass thay thế LESS

Nếu như ở phiên bản Bootstrap 3 là sử dụng LESS làm engine để tiền xử lý cho CSS thì đến phiên bản 4 này, Bootstrap đã có bước thay đổi đáng kể, đó là chuyển từ LESS sang SASS. So với LESS thì SASS sẽ dễ sử dụng hơn đồng thời cung cấp nhiều khả năng tùy biến hơn. Mặt khác Libsass Sass Compiler được viết bằng ngôn ngữ C/C++ chính vì thế mà bootstrap 4 sẽ được biên soạn (Compile) nhanh hơn trước nhiều.

3. Cải tiến hệ grid

Với ai đã dùng quen Bootstrap thì đều hiểu rằng phiên bản cũ 3, Bootstrap chia làm 12 column, và hệ Grid được chia làm 4 loại, tương ứng với 4 độ phân giải màn hình khác nhau, nhưng trải qua quá trình refator code, sang đến phiên bản Bootstrap 4, đã được sửa đổi và bổ sung thêm một hệ mới nhằm nâng cao khả năng responsive cho website khi sử dụng Framework này và nó được chia như sau:

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	Extra large ≥1200px
Max container width	None (auto)	540px	720px	960px	1140px
Class prefix	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Column ordering	Yes

thật tiện lợi phải không nào!

4. Không còn hỗ trợ cho IE8

Chắc hẳn đây sẽ là tin vui cho các developer, bởi nỗi khổ mà các nhà làm web đều gặp phải khi web làm ra hiển thị bị lỗi trên IE8. Có lẽ đây là một sự thay đổi thông minh đến từ Bootstrap 4 bởi giờ đây CSS sẽ được chuyển sang đơn vị tính tương đối. Thay vì phải dùng đơn vị px như trước kia thì Bootstrap 4 sẽ chuyển sang sử dụng đơn vị EM hoặc REM, điều này sẽ giúp các thành phần trong một website có thể thay đổi được kích thước tương ứng với kích thước màn hình mà không ảnh hưởng đến cấu trúc của bản thiết kế. Và tôi tin rằng từ nay, các nhà phát triển web hay người dùng sẽ không còn phải quan tâm tới phiên bản IE đời cũ rích này nữa, một sản phẩm lỗi mà Microsoft đã khai tử

5. Điểm mới về Bootstrap card

Chắc hẳn là khi sử dụng Bootstrap 3, chúng ta có thể đã từng dùng tới các Components như Wells, Thumbnails hay Panel rồi nhưng sang đến Bootstrap 4, những components này sẽ được loại bỏ và thay thế bằng một Component hoàn toàn mới đó là cards. Bootstrap Cards được tạo ra với nhiều sự lựa chọn đa dạng phục vụ cho nhiều mục đích sử dụng của người dùng là một điểm hữu ích đến từ Bootstrap 4 này:


<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Text in here</p>
    <a href="#" class="btn btn-primary">OK</a>
  </div>
</div>

Chúng ta có thể tìm hiểu nhiều hơn về Component thú vị này tại: https://getbootstrap.com/docs/4.3/components/card/

6. Hỗ trợ flexbox

Bootstrap 4 đã support Flexbox và Flexbox thực sự rất tuyệt vời cho các nhà phát triển web, bởi các thành phần nằm trong container sẽ được sắp xếp, căn chỉnh gọn gàng đẹp đẽ ngay cả khi kích thước của thành phần chưa được xác định trước. Với việc hỗ trợ đa dạng mục đích sử dụng người dùng, Flexbox cho phép các nhà phát triển web, sắp xếp các phần tử trên web một cách linh hoạt theo ý đồ của chính họ, chỉ với vài dòng lệnh đơn giản, các phần tử của website đã được sắp xếp theo đúng ý đồ của chúng ta và cũng đảm bảo việc Responsive cho các phần tử đó trên web, giảm tải việc code cho các nhà phát triển. Cá nhân tôi nghĩ Flexbox sẽ trở thành tương lai của Website.
Một đặc điểm đáng lưu ý ở đây là Flexbox chỉ hỗ trợ IE từ phiên bản 11 trở lên nên nếu phát triển website chạy trên Browser mới nhất của IE thì dùng Flexbox là sự lựa chọn tốt nhất.
Chi tiết xem tại: https://getbootstrap.com/docs/4.3/utilities/flex/

7. Bổ sung các Class mới

Một điểm cộng xứng đáng nữa cho Bootstrap 4 so với phiên bản cũ đó là việc bổ sung thêm một số class tiện ích nữa như .clear-fix. Ngoài ra một đặc điểm quá hay của Bootstrap 4 đó là Spacing Class, thật tuyệt vời khi chúng ta có thể thay đổi margin hay padding cho thành phần nào đó, nếu như ở Bootstrap 3, chúng ta phải vào file css, tự thay đổi bằng cách viết thêm thuộc tính cho thành phần đó thì giờ đây, chúng ta chỉ việc đặc thêm classs cho nó theo quy luật sau, việc còn lại Bootstrap 4 sẽ lo nhé:


[margin hoặc padding]-[hướng]-[kích thước]

Ví dụ để set margin là 0 cho tất cả các hướng của một phần tử nào đó, ta sẽ thêm class m-all-0 là ok

8. Hướng dẫn đóng modal hiện tại, mở modal khác (close modal curent and open new modal)


  var showModal2 = false;
  $('#myModal1').on('hidden.bs.modal', function () {
    if (showModal2) {
      $('#myModal2').modal('show')
      showModal2 = false
    }
  });
  // 
  $("#btnModal2").click(function() {
    $('#myModal1').modal('hide')
    showModal2 = true
  })

Bootstrap 4 thực sự thú vị đó, các bạn hãy dùng thử để trải nghiệm nhé. Chúc các bạn thành công!

Bài viết được tham khảo tại: https://viblo.asia/p/nhung-diem-manh-cua-bootstrap-4-oOVlYdorZ8W