Search for “Bootstrap 4 Snippets” via the “Package Control: Install Packages” menu. Note: If you don't have Sublime Package Control installed, you can find out how to install it here https://sublime.wbond.net/installation Show
UsageStart typing Hiện nay số lượng người sử dụng thiết bị di động lướt web càng ngày càng tăng, chính vì thế việc thiết kế responsive trong Bootstrap cho trang web càng trở nên quan trọng hơn bao giờ hết. Để làm được vậy, bạn sẽ cần sự trợ giúp từ Bootstrap. Vậy Bootstrap là gì? Cách sử dụng Bootstrap, cách nhúng Bootstrap vào HTML và các plugin hỗ trợ viết code Bootstrap là gì? Bài viết này sẽ cho bạn câu trả lời. Hãy cùng tôi tìm hiểu về Bootstrap ngay nhé! Bootstrap là một loại front-end framework rất phổ biến. Nó được dùng để xây dựng trang web chuẩn responsive và Mobile First. Bootstrap thuộc dạng open-source và miễn phí sử dụng. Dự án này được Twitter tạo và lưu trữ trên GitHub. Nó bao gồm các template HTML, CSS và JavaScript có sẵn.  Tìm hiểu bootstrap là gì? Các template này chứa các yếu tố thiết kế web cơ bản bên trong như form, grid, button,…và các cài đặt về giao diện như màu sắc, độ cao, kích thước,… Các designer có thể dựa vào các thành tố có sẵn này để dễ dàng xây dựng web một cách nhanh chóng nhưng vẫn mang tính sáng tạo riêng biệt. 2. Lịch sử của BootstrapBootstrap được xây dựng bởi Twitter. Cha đẻ của sản phẩm này là Mark Otto và Jacob Thornton. Sau khi open-source được phát hành vào ngày 19/8/ 2011 với cái tên Twitter Blueprint, framework này đã nhanh chóng trở nên phổ biến nhờ tính linh hoạt và dễ vận dụng của nó. Kể từ khi ra đời, bootstrap đã cho ra hơn hai mươi bản phát hành, bao gồm ba bản viết lại chính là phiên bản 2, 3 và 4:
3. 3 file chính của BootstrapCấu trúc Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các file được biên dịch trước, các file này dễ dàng tích hợp vào các dự án xây dựng web để công việc thiết kế được diễn ra nhanh chóng. Bên cạnh file CSS và JS, Bootstrap còn có file phông chữ từ Glyphicons. Các file của bootstrap Khi tải bootstrap 3 và bootstrap 4 về, giải nén sẽ cho ra các folder tương tự như hình trên. Trong đó sẽ có folder CSS, JS và font (Glyphicons) 3.1 Bootstrap.CSSHTML và CSS là bộ đôi cần xuất hiện cùng nhau để có thể thực hiện một hành động xác định. Chức năng của HTML là quản lý cấu trúc còn CSS có chức năng là xử lý bố cục trang web. Bạn có thể sử dụng file CSS này để tạo giao diện mà không phải tốn quá nhiều thời gian. Bootstrap cung cấp các file có định dạng CSS ở folder CSS, chúng bao gồm nhiều class khai báo sẵn. Bootstrap.min.css là file quan trọng nhất trong folder này. 3.2. Bootstrap.JSJS (JavaScript) có chức năng quản lý việc tương tác của trang web. Các designer thường sử dụng jQuery để rút ngắn thời gian viết JS. Khi sử dụng Bootstrap, bạn sẽ cần sự hỗ trợ từ jQuery để thiết kế Responsive. Chúng sẽ có một số chức năng như:
Folder JS của Bootstrap sẽ bao gồm các file JS mà trong đó có rất nhiều hàm khai báo sẵn. Bootstrap.min.js là file quan trọng nhất trong folder này. 3.3. GlyphiconsKhi thiết kế website, icon là một trong những phần không thể thiếu để giúp trang trở nên sinh động hơn. Bạn có thể liên kết chúng với dữ liệu nhất định hoặc khớp với hành động của người dùng để tăng độ linh hoạt của trang. Bộ icon tại Glyphicons này xuất hiện trong bootstraps 3. Qua bootstrap 4 chúng được thay thế bởi các loại icon khác. Bạn cũng có thể tìm mua thêm các bộ icon premium để sử dụng cho trang web của mình. 4. Cấu trúc, tính năng của Bootstrap là gì?Ở phần này tôi sẽ tập trung vào phiên bản biên dịch trước, bạn có thể tải về tại . Khi đã tải xuống và giải nén, cấu trúc tệp cơ bản sẽ như sau: bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2 Như đã nói ở phần trước, cấu trúc của Bootstrap khá đơn giản và dễ hiểu. Nó bao gồm các tệp được biên dịch trước và dễ áp dụng vào xây dựng trang web. Ngoài 3 loại file chính là CSS, JS và font chữ từ Glyphicons , nó còn bao gồm chủ đề khởi động Bootstrap. Bạn có thể kết hợp cấu trúc này vào các tệp dự án riêng của mình một cách dễ dàng bằng cách giữ nguyên các file Bootstrap như trong file. Nếu bạn muốn nó phù hợp hơn với dự án, bạn có thể sắp xếp lại các tệp này và đặt vào vị trí mà bạn cho là phù hợp. Lưu ý: thư mục font chữ phải ở cùng cấp với thư mục CSS. 5. Vì sao nên sử dụng Bootstrap?Bootstrap là framework rất nổi tiếng và được sử dụng rộng rãi trên thế giới. Vậy lý do khiến Bootstrap được ưa chuộng là gì? Có 8 lý do chính có thể kể đến như sau: 5.1. Responsive Grid của BootstrapKhông cần tốn nhiều thì giờ để tự mình coding grid nữa – Bootstrap cung cấp cho bạn hệ thống lưới riêng biệt. Bây giờ bạn chỉ việc bắt đầu lấp đầy những chỗ trống trong thiết kế của mình bằng những đoạn mã này. Việc xác định điểm ngắt (breakpoint) tùy chỉnh cho mỗi cột sẽ được tiến hành trong nháy mắt. Bootstrap cung cấp các loại break nhỏ, siêu nhỏ, vừa, lớn và siêu lớn để bạn có thể áp dụng tùy chỉnh. Nếu bạn không có yêu cầu chi tiết thì sử dụng file mặc định cũng sẽ đáp ứng đủ nhu cầu trang web. 5.2. Responsive Image của BootstrapBootstrap chứa các code riêng, các code này sẽ tự động thay đổi kích thước hình ảnh tùy theo màn hình thiết bị. Bạn chỉ cần thêm lớp .img-responsive vào hình ảnh, các quy tắc CSS (được xác định trước) sẽ giúp bạn hoàn thành công việc còn lại. Bootstrap thậm chí có thể thay đổi cả hình dạng của ảnh bằng cách bổ sung các lớp như img-circle và img-round vào hình ảnh (mà bạn không cần phải vừa sửa code vừa sửa ảnh trong phần mềm thiết kế). 5.3. Các thành phần của BootstrapCác thành phần của Bootstrap là gì? Bootstrap đi kèm với rất nhiều thành phần mà bạn có thể dễ dàng đưa vào trang web của mình. Ví dụ như:
…và còn nhiều những thành phần khác nữa! Bạn không chỉ dễ dàng thêm các yếu tố thiết kế đẹp mắt vào trang web mà còn có thể yên tâm về chất lượng hiển thị của chúng trên các loại màn hình thiết bị. Bạn sẽ không phải lo lắng về việc nó hiển thị trên điện thoại có đẹp như khi bạn xem trên màn hình máy tính hay không. Rõ ràng, những chức năng này được tạo sẵn ra để bạn sử dụng! Nếu bạn muốn biết đầy đủ hơn về các tính năng bổ sung, bạn có thể tham khảo ở bảng tài liệu thành phần. 5.4. JavaScript của BootstrapBạn thấy những chức năng được liệt kê ở bảng thành phần vẫn chưa đủ thu hút? Hãy sử dụng thêm JQuery! Bootstrap cho phép các nhà phát triển tận dụng lợi thế của JQuery plugins. JQuery sẽ cung cấp cho bạn nhiều chức năng hơn nữa để bạn có thể nâng tầm tương tác của trang web. Nó đưa đến các giải pháp dễ dàng để tạo cửa sổ bật, chuyển tiếp, băng chuyền hình ảnh và – một trong những mục yêu thích của các nhà thiết kế – plugin scrollspy. Plugin này tự động cập nhật thanh điều hướng khi bạn cuộn trang. 5.5. Tài liệu BootstrapTài liệu Bootstrap là một trong số những tài liệu được cho là hoàn chỉnh nhất. Mọi đoạn mã đều được mô tả và giải thích rõ ràng trên trang web của họ. Các phần giải thích cũng đi kèm các ví dụ triển khai cơ bản, giúp đơn giản hóa quá trình cho những người mới bắt đầu. Tất cả những gì bạn cần làm là chọn một thành phần sau đó sao chép và dán mã vào trang của mình. 5.6. Khả năng tùy chỉnh của BootstrapMột trong những khuyết điểm của những framework như Bootstrap là: kích thước. Vì kích thước file lớn nên chúng sẽ làm chậm ứng dụng của bạn trong lần tải đầu tiên. Ví dụ: Phiên bản hiện tại của file CSS Bootstrap 3 là 119KB. Mặc dù con số này nghe có vẻ không hề lớn khi so với các file hình ảnh và video, nhưng đối với một file CSS, con số này là quá lớn! Tuy vậy, Bootstrap lại gỡ gạc lại được nhờ việc cho phép người dùng tùy chỉnh chức năng khi download. Tức là bạn có thể lựa chọn các chức năng mà bạn muốn đưa vào bản tải xuống. Bạn có thể kiểm tra và tùy chỉnh ngay trang web Bootstrap và bỏ đi các tính năng không dùng tới để giảm trọng lượng file. Khả năng tùy chỉnh này đã giúp người sử dụng Bootstrap tiết kiệm được nhiều thời gian tải. Ở đây, tùy chỉnh chính là chìa khóa giúp Bootstrap nổi bật hơn với các framework khác. 5.7. Cộng đồng BootstrapCũng như các dự án open-source khác, Bootstrap có một cộng đồng người sử dụng lớn (lập trình viên và các nhà phát triển). Framework này được lưu trữ trên GitHub, nhờ đó mà các nhà phát triển có thể dễ dàng sửa đổi và đóng góp cho codebase của Bootstrap. Với lượng người dùng lớn, các câu hỏi đặt ra cũng nhận được nhiều lượt trả lời và tương tác hơn. Sự giao lưu giữa các người dùng cũng được thể hiện rõ ràng qua các topic Bootstrap đông người tham gia. Ngoài ra, Bootstrap cũng có một trang Twitter đang hoạt động, một Blog Bootstrap và có hẳn một phòng Slack chuyên dụng. Từng đó là chưa đủ để nói đến độ phổ biến của Framework này. Ở Stack Overflow – cộng đồng hỏi đáp giúp đỡ lập trình viên lớn nhất thế giới – bạn có thể tìm thấy câu trả lời cho những câu hỏi đơn giản như Bootstrap nghĩa là gì đến các câu hỏi về hướng dẫn dùng Bootstrap cơ bản như tạo vùng chứa trong tag Bootstrap-4, sử dụng thư viện Bootstrap, nhúng Bootstrap vào HTML, thiết kế giao diện responsive trong Bootstrap… 5.8.Template bên ngoài BootstrapKhi sự phổ biến của Bootstrap ngày càng tăng, mọi người bắt đầu tạo các template dựa theo framework này để đẩy nhanh quá trình phát triển web. Có rất nhiều trang web dành riêng cho việc chia sẻ và mua bán các template tùy chỉnh dựa trên Bootstrap như:
Template bên ngoài của Bootstrap 6. Lý do không nên sử dụng Bootstrap là gì?Đến thời điểm này, có lẽ bạn đang nghĩ rằng việc sử dụng Bootstrap là quyết định đúng đắn, không cần phải bàn cãi! Nhưng đồng tiền nào cũng có hai mặt Như hầu hết tất cả mọi thứ xung quanh ta, Bootstraps cũng có những mặt trái. Hãy cùng tôi tìm hiểu nhanh những khuyết điểm mà người dùng phàn nàn về Bootstrap là gì nhé: 6.1. Cú pháp Bootstrap dễ gây nhầm lẫnTrước khi bạn sử dụng quen Bootstrap, một số cú pháp của nó có thể gây nhầm lẫn. Ví dụ: Khi sử dụng hệ thống grid, để tạo một cột chiếm một phần ba màn hình, bạn sẽ phải thêm lớp .col-md-4 vào nó. 4? Tại sao lại là 4? Một phần 3 màn hình thì có liên quan gì đến 4? Cú pháp này sẽ khiến bạn nghĩ rằng cột sẽ chiếm một phần tư màn hình chứ không phải là một phần ba. Bạn nghĩ rằng cú pháp này rõ ràng chẳng có ý nghĩa gì hết. Nhưng không, thực tế nó lại đúng. Bootstrap sử dụng hệ thống 12 cột. Vì thế 4 là một phần ba của 12. Giống như bạn, có nhiều người mới gặp không ít khó khăn với những cú pháp này! 6.2. Tệp Bootstrap quá lớn!Như đã đề cập ở phần trước, các tệp Bootstrap có thể hơi… lớn nếu bạn tải toàn bộ chức năng của nó. Điều này có thể dẫn đến tăng thời gian tải cho các trang web, đặc biệt là trên các mạng chậm. Người mới bắt đầu có thể gặp khó khăn trong việc xác định và khắc phục vấn đề này; Tuy nhiên, như đã đề cập ở trên, công cụ tùy chỉnh trên trang web của Bootstrap có thể giúp loại bỏ mọi đoạn mã không cần thiết. Chỉ cần bạn biết mình đang cần gì! 6.3. Bootstrap ngăn cản bạn thực sự học code!Có một rủi ro hiện hữu là bạn sẽ rơi vào chu kỳ tái chế. Khi sử dụng Bootstrap, bạn sẽ quen với việc tái chế mã hiện có mà không thực sự hiểu nó là gì. Vì thế, bằng cách dành thời gian để thực sự tìm hiểu những đoạn code bạn đang làm, bạn có thể sử dụng Bootstrap như một cách để tăng tốc quá trình học của mình, thay vì cản trở nó đấy! Bootstrap có ngăn cản bạn học code 7. Cách cài đặt BootstrapBạn đã xem qua những kiến thức cơ bản liên quan Bootstrap, bây giờ chúng ta cần thực hành. Có hai cách để bạn có thể cài đặt Bootstrap vào trang web của mình 7.1. Download Bootstrap từ trang webNếu bạn muốn tự mình tải và lưu trữ Bootstrap, hãy truy cập getbootstrap.com và làm theo hướng dẫn. Hoặc bạn có thể: 7.2. Cách dùng Bootstrap thông qua CDNNếu bạn không muốn tải và lưu trữ Bootstrap, bạn có thể thêm chúng từ CDN (Content Delivery Network – Mạng phân phối nội dung). Có nhiều dịch vụ CDN mà bạn có thể lựa chọn (ví dụ như CloudFlare, MaxCDN,..). Ví dụ như MaxCDN, dịch vụ này cung cấp hỗ trợ phân phối nội dung cho CSS và Javascript của Bootstrap. Bạn cũng sẽ cần thêm jQuery (Bootstrap sử dụng jQuery cho các plugin JavaScript. Tuy nhiên, nếu bạn chỉ sử dụng phần CSS của Bootstrap, bạn không cần jQuery): MaxCDN:<!– Latest compiled and minified CSS –> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”> <!– jQuery library –> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <!– Latest compiled JavaScript –> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js”></script> Có nhiều lập trình viên chọn cách này để tiết kiệm băng thông. Khi sử dụng bootstrap thông qua CDN, bootstrap sẽ được tải từ bộ nhớ cache khi người dùng truy cập trang web của bạn, dẫn đến thời gian tải nhanh hơn. Ngoài ra, hầu hết các CDN sẽ đảm bảo rằng khi người dùng yêu cầu một tệp, tệp đó sẽ được phục vụ từ máy chủ gần họ nhất, điều này cũng dẫn đến thời gian tải nhanh hơn. 8. Bootstrap 4 có gì mới?Twitter của Bootstrap đã đăng thông báo về việc phát hành Bootstrap 4 vào ngày 19/1/2018: We never stopped believing, and hope you didn’t either! Bootstrap 4.0.0 has finally landed! https://t.co/zFAOxpyhvD — Bootstrap (@getbootstrap) January 18, 2018 Bản Bootstrap 4 này được nâng cấp với nhiều tính năng mới và thú vị hơn so với những phiên bản cũ như sau:
9. Hướng dẫn sử dụng Bootstrap 4Nếu bạn đã tải mã nguồn của Bootstrap 4, thì cấu trúc file sẽ như bên dưới: Cấu trúc file của bootstrap
Cách tạo trang web với Bootstrap 4:Ví dụ:<html lang = “en”> <head> <!– Meta tags –> <meta charset = “utf-8”> <meta name = “viewport” content = “width=device-width, initial-scale = 1, shrink-to-fit = no”> <!– Bootstrap CSS –> <link rel = “nofollow,stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity =” sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin = “anonymous”> <title>Bootstrap 4 Example</title> </head> <body> <h2>Hello, world!!! Welcome to Tutorialspoint…</h2> <!– jQuery first, then Popper.js, then Bootstrap JS –> <script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity = “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin = “anonymous”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity = “sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49” crossorigin = “anonymous”> </script> <script src = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity = “sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin = “anonymous”> </script> </body> </html> Nó sẽ cho ra output như bên dưới: Kết quả chương trình chạy bằng Bootstrap 9.1. Mobile-first của Bootstrap 4:Bootstrap 4 thiết kế chú trọng vào việc nâng cao trải nghiệm lướt web cho các thiết bị di động. Ở đây Mobile-first Index đóng vai trò quan trọng. Để đạt được hiệu quả hiển thị, bạn cần thêm thẻ <meta> vào sau <head> và thiết lập thu phóng. <meta name=“viewport” content=“width=device-width, initial-scale=1”>
9.2. Container của Bootstrap 4:Bootstrap sử dụng các lớp container hoặc để bao bọc nội dung trang. Có hai lớp container là:
Ví dụ về container và container-fluid Ví dụ vùng chứa có chiều rộng cố định và vùng chứa có chiều rộng đầy đủBạn có thể sử dụng WAMP hoặc XAMPP để chạy localhost và tạo file example.html cho ví dụ dưới đây. Hoặc bạn có thể đưa đoạn mã bên dưới vào notepad sau đó lưu tên dưới dạng .html và mở bằng trình duyệt (chrome, coccoc hay bất cứ browser nào bạn đang dùng đều được) Dưới đây là ví dụ vùng chứa có chiều rộng cố định <html lang = “en”> <head> <!– Meta tags –> <meta charset = “utf-8”> <meta name = “viewport” content = “width = device-width, initial-scale = 1, shrink-to-fit = no”> <!– Bootstrap CSS –> <link rel = “nofollow,stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin = “anonymous”> <title>Bootstrap 4 Example</title> <style> .container { background: a52c644a;text-align: center; padding-top: 100px; padding-bottom: 100px; } </style> </head> <body> <div class = “container”> <h2>Fixed Width Container</h2> This is a simple web page with fixed width container by using <code>.container</code> class. </div> <!– jQuery first, then Popper.js, then Bootstrap JS –> <script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity = “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin = “anonymous”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity = “sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49” crossorigin = “anonymous”> </script> <script src = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity = “sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin = “anonymous”> </script> </body> </html> Output sẽ hiển thị như hình dưới đây:Ví dụ vùng chứa có chiều rộng cố định Dưới đây là ví dụ vùng chứa có chiều rộng đầy đủ: <html lang = “en”> <head> <!– Meta tags –> <meta charset = “utf-8”> <meta name = “viewport” content = “width = device-width, initial-scale = 1, shrink-to-fit = no”> <!– Bootstrap CSS –> <link rel = “nofollow,stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin = “anonymous”> <title>Bootstrap 4 Example</title> <style> .container-fluid { background: a52c644a;text-align: center; padding-top: 100px; padding-bottom: 100px; } </style> </head> <body> <div class = “container-fluid”> <h2>Full Width Container</h2> This is a simple web page with full width container by using <code>.container-fluid</code> class. </div> <!– jQuery first, then Popper.js, then Bootstrap JS –> <script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity = “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin = “anonymous”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity =” sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49″ crossorigin = “anonymous”> </script> <script src = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity = “sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin = “anonymous”> </script> </body> </html> Output sẽ hiển thị như hình dưới đây:Ví dụ vùng chứa có chiều rộng đầy đủ 9.3. Hệ thống Grid của Bootstrap 4Grid system (hệ thống lưới) của Bootstrap 4 được xây dựng với Flexbox nhằm tăng web responsive và mở rộng lên 12 cột (theo kích thước thiết bị). Nó cung cấp hệ thống lưới linh hoạt, tự động tăng kích thước cột khi kích thước thiết bị hoặc khung nhìn tăng. Mô hình Grid System Bootstrap 4 Mô hình Grid System Bootstrap 4 Hệ thống lưới của Bootstrap 4 có 5 lớp
Cấu trúc lưới cơ bản của Bootstrap 4 <div class = “container”> <div class = “row”> <div class = “col-*-*”></div> <div class = “col-*-*”></div> </div> <div class = “row”> <div class = “col-*-*”></div> <div class = “col-*-*”></div> <div class = “col-*-*”></div> </div> <div class = “row”>…</div> </div> Còn dưới đây là ví dụ về cấu trúc lưới của Bootstrap 4 <html lang = “en”> <head> <!– Meta tags –> <meta charset = “utf-8”> <meta name = “viewport” content = “width = device-width, initial-scale = 1, shrink-to-fit = no”> <!– Bootstrap CSS –> <link rel = “nofollow,stylesheet” href = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css” integrity = “sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO” crossorigin = “anonymous”> <title>Bootstrap 4 Example</title> </style> .grid_system div[class^=”col”] { border: 1px solid white; background: e4dcdc;text-align: center; padding-top: 5px; padding-bottom: 5px } </style> </head> <body> <div class = “grid_system”> <div class = “row”> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> <div class = “col-sm-1”>.col-sm-1</div> </div> <div class = “row”> <div class = “col-sm-3”>.col-sm-3</div> <div class = “col-sm-3”>.col-sm-3</div> <div class = “col-sm-3”>.col-sm-3</div> <div class = “col-sm-3”>.col-sm-3</div> </div> <div class = “row”> <div class = “col-sm-4”>.col-sm-4</div> <div class = “col-sm-4”>.col-sm-4</div> <div class = “col-sm-4”>.col-sm-4</div> </div> <div class = “row”> <div class =” col-sm-3″>.col-sm-3</div> <div class = “col-sm-3”>.col-sm-3</div> <div class = “col-sm-6”>.col-sm-6</div> </div> <div class = “row”> <div class = “col-sm-5”>.col-sm-5</div> <div class = “col-sm-7”>.col-sm-7</div> </div> <div class = “row”> <div class = “col-sm-6”>.col-sm-6</div> <div class = “col-sm-6”>.col-sm-6</div> </div> <div class = “row”> <div class = “col-sm-12”>.col-sm-12</div> </div> </div> <!– jQuery first, then Popper.js, then Bootstrap JS –> <script src = “https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity = “sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin = “anonymous”> </script> <script src = “https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js” integrity = “sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49” crossorigin = “anonymous”> </script> <script src = “https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js” integrity = “sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy” crossorigin = “anonymous”> </script> </body> </html> Output sẽ hiển thị Cấu trúc lưới của Bootstrap 4 10. Cách nhúng Bootstrap vào website10.1. Nhúng từ liên kết của BootstrapFramework này có sẵn các đường link để bạn có thể nhúng vào trang web của mình. Hạn chế của cách làm này là khiến cho website bị chậm lại (do tải liên kết ngoài). Ví dụ: <html lang=”vi”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Chào mừng bạn đến với Ironhack</title> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css”/> </head> <body> <h1>Chào mừng bạn đến với Ironhack</h1> <script src=”//code.jquery.com/jquery.js”></script> <!– Bootstrap JavaScript –> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script> </body> </html> 10.2. Nhúng Bootstrap bằng cách tự lưu trữĐối với cách này, bạn sẽ cần tải bộ Bootstrap về máy và thiết lập cấu trúc thư mục như hình dưới đây Cấu trúc thư mục Bootstrap Bước tiếp theo, bạn mở tập tin Index.html ra và nhập cấu trúc như sau: <html lang=”vi”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Chào mừng bạn đến với Ironhack</title> <link rel=”stylesheet” href=”css/bootstrap.min.css”/> <link rel=”stylesheet” href=”css/style.css”/> </head> <body> <h1>Chào mừng bạn đến với Ironhack</h1> <script src=”js/jquery.min.js”></script> <script src=”js/bootstrap.min.js”></script> </body> </html> Với cách này, website sẽ hoạt động mượt mà và tải nhanh hơn so với cách một. 11. Các Plugin hỗ trợ code bootstrapĐể quá trình viết chương trình được nhanh hơn, các nhà lập trình viên thường tìm đến các công cụ hỗ trợ soạn thảo code. Có một số công cụ soạn thảo code phổ biến có thể kể đến như Notepad++, Eclipse, PHPStorm, MS Word,… và không thể không kể đến Sublime Text 3. Có nhiều nhà lập trình đánh giá cao công cụ Sublime này vì đặc điểm nhẹ, dễ cài đặt, plugin đa dạng và mạnh mẽ của nó. Đặc biệt, công cụ này cũng tích hợp nhiều plugin bổ trợ cho quá trình sử dụng Bootstrap. Các bạn có thể download nó tại đây. Sau đó cài Package Control và vào mục Preferences – Package Control – Install Package để cài đặt Plugin. Các plugin hỗ trợ code bootstrap trong Sublime Text 3 có rất nhiều, bạn có thể tham khảo từng loại plugin và lựa chọn chúng để giúp cho việc viết code bootstrap được nhanh chóng hơn: Emmet, Bootstrap Snippets, AutoFileName, Sidebar Enhancement, Alignment, Color Picker,… Kết luậnQua bài giới thiệu Bootstrap này, bạn đã tìm thấy câu trả lời cho câu hỏi Bootstrap là gì chưa? Nói ngắn gọn, Bootstrap là một framework được ưa chuộng và sử dụng rộng rãi trong thiết kế trang web, nhất là các trang web chuẩn responsive. Nó dễ sử dụng và linh hoạt, là công cụ hữu hiệu để giúp bạn xây dựng web một cách nhanh chóng hơn! Hy vọng bài viết này có thể đem đến cho bạn cái nhìn rõ ràng hơn về Bootstrap và cách ứng dụng chúng! |
