Hướng dẫn what is bootstrap - bootstrap là gì

Hướng dẫn what is bootstrap - bootstrap là gì
Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người. Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất. Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.

Show

Hướng dẫn what is bootstrap - bootstrap là gì
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook
Hướng dẫn what is bootstrap - bootstrap là gì
Facebook

Là một lập trình viên web Full stack hay là lập trình viên Front end thì bạn đều sẽ cần học bootstrap.học bootstrap.

Nhưng ai cũng biết, sử dụng đầy đủ tính năng của Bootstrap lại làm cho web có hiệu năng không tốt.

Vì thế, thay vào đó các lập trình viên chỉ sử dụng hệ thống lưới của bootstrap để giúp dàn layout website tốt hơn và responsive dễ dàng hơn.hệ thống lưới của bootstrap để giúp dàn layout website tốt hơnresponsive dễ dàng hơn.

Và trong bài này mình sẽ giúp bạn học bootstrap và hiểu nó trong 10 phút (Câu view tý =)) ).

Hướng dẫn what is bootstrap - bootstrap là gì

#1: THIẾT LẬP DỰ ÁN BOOTSTRAP

Bây giờ chúng ta sẽ tạo một Bootstrap template cơ bản bằng cách thêm các tệp Bootstrap CSS và JS, cũng như JavaScript phụ thuộc khác như jQuery và Popper.js thông qua CDN.

Mình khuyên bạn nên thêm Bootstrap trong dự án của mình thông qua CDN (Mạng phân phối nội dung) vì CDN mang lại lợi ích về hiệu suất bằng cách giảm thời gian tải, vì họ đang lưu trữ tệp trên nhiều máy chủ trên toàn cầu để khi người dùng yêu cầu, tệp sẽ được phân phát từ máy chủ gần họ nhất.

Bước #1: Tạo trang HTML đơn giản

Mở VSCode (hoặc trình soạn thảo yêu thích của bạn) và tạo một tệp HTML mới với tên basic.html

Sử dụng .containerhtml lang="en">

Sử dụng .containerhead>

Sử dụng .container

Sử dụng .containerhead>

Sử dụng .containerbody>

Sử dụng .container

Sử dụng .containerbody>

 html>
 

Sau đó, trong phần head và phần body ta thêm nội dung cơ bản như sau:

> Lưu ý #1: Luôn bao gồm thẻ viewport bên trong phần head để cho phép phóng to và đảm bảo hiển thị phù hợp trên thiết bị di động.Lưu ý #1: Luôn bao gồm thẻ viewport bên trong phần head để cho phép phóng to và đảm bảo hiển thị phù hợp trên thiết bị di động.

> Lưu ý #2: Nếu bạn không xem được thì bạn cần vào Codepen.io, vượt captcha và quay lại đây tải lại trang nhé.Lưu ý #2: Nếu bạn không xem được thì bạn cần vào Codepen.io, vượt captcha và quay lại đây tải lại trang nhé.

Bước #2: Đặt file HTML này làm Template

Để làm cho file HTML đơn giản này trở thành Template Bootstrap, bạn chỉ cần thêm các tệp Bootstrap CSS và JS cũng như jQuery và Popper.js bắt buộc bằng cách sử dụng link CDN.

Bạn nên bao gồm các tệp JavaScript ở cuối trang, ngay trước thẻ đóng để cải thiện hiệu suất tải trang, như được hiển thị trong ví dụ sau:

Tất cả đã sẵn sàng!

Sau khi thêm các tệp CSS và JS của Bootstrap cũng như thư viện jQuery và Popper.js cần thiết, chúng ta có thể bắt đầu lập trình web ngay với Bootstrap Framework.

Thuộc tính integritycrossorigin đã được thêm vào link CDN để triển khai (SRI - Subresource Integrity). Đây là một tính năng bảo mật cho phép bạn giảm thiểu nguy cơ tấn công bắt nguồn từ các CDN bị xâm phạm, bằng cách đảm bảo rằng các tệp mà trang web của bạn tìm nạp (từ CDN hoặc bất kỳ nơi nào) đã được phân phối mà không có các sửa đổi bất ngờ hoặc độc hại.Subresource Integrity). Đây là một tính năng bảo mật cho phép bạn giảm thiểu nguy cơ tấn công bắt nguồn từ các CDN bị xâm phạm, bằng cách đảm bảo rằng các tệp mà trang web của bạn tìm nạp (từ CDN hoặc bất kỳ nơi nào) đã được phân phối mà không có các sửa đổi bất ngờ hoặc độc hại.

Nó hoạt động bằng cách cho phép bạn cung cấp mã băm mà tệp được tìm nạp phải khớp.

> Ghi chú: Nếu khách truy cập vào trang web của bạn đã tải xuống tệp CSS và JS của Bootstrap từ cùng một CDN. Khi truy cập các trang web khác, nó sẽ được tải từ bộ nhớ cache của trình duyệt thay vì lại phải tải xuống, dẫn đến thời gian tải nhanh hơn.Ghi chú: Nếu khách truy cập vào trang web của bạn đã tải xuống tệp CSS và JS của Bootstrap từ cùng một CDN. Khi truy cập các trang web khác, nó sẽ được tải từ bộ nhớ cache của trình duyệt thay vì lại phải tải xuống, dẫn đến thời gian tải nhanh hơn.

Bước #3: Lưu file

Bây giờ hãy lưu tệp trên màn hình của bạn dưới dạng 'bootstrap-template.html'.

Để mở tệp này trong trình duyệt web, hãy điều hướng đến tệp, sau đó nhấp chuột phải vào tệp và chọn open. Ngoài ra, bạn có thể mở trình duyệt của mình và kéo tệp này vào đó.

> Lưu ý: Điều quan trọng đảm bảo phần mở rộng chính xác là .html. Nếu không, một số trình soạn thảo văn bản, chẳng hạn như Notepad trên Windows, sẽ tự động lưu nó dưới dạng .txtLưu ý: Điều quan trọng đảm bảo phần mở rộng chính xác là .html. Nếu không, một số trình soạn thảo văn bản, chẳng hạn như Notepad trên Windows, sẽ tự động lưu nó dưới dạng .txt

Ngoài ra, bạn cũng có thể tải xuống các tệp CSS và JS của Bootstrap từ trang web chính thức của họ và đưa vào dự án của bạn.

Có hai phiên bản có sẵn để tải xuống, Bootstrap source và Bootstrap compiled. Bạn có thể tải xuống tệp Bootstrap 4 tại đây.Bootstrap sourceBootstrap compiled. Bạn có thể tải xuống tệp Bootstrap 4 tại đây.

Tải xuống được biên dịch chứa phiên bản đã được biên dịch và rút gọn của các tệp CSS và JavaScript để giúp web nhanh hơn.

Tuy nhiên, phiên bản đã biên dịch không bao gồm bất kỳ phụ thuộc JavaScript tùy chọn nào như jQuery và Popper.js. Trong khi đó, bản Bootstrap source chứa các tệp nguồn gốc cho tất cả CSS và JavaScript, cùng với bản sao cục bộ của tài liệu.

Tải xuống và giải nén bản Bootstrap compiled. Bây giờ nếu bạn nhìn vào bên trong các thư mục, bạn sẽ thấy nó chứa các tệp CSS và JS đã biên dịch (bootstrap.*), cũng như CSS và JS đã biên dịch và rút gọn (bootstrap.min.*).

Sử dụng các tệp 0 và 1.

Sử dụng phiên bản rút gọn của các tệp CSS và JS sẽ cải thiện hiệu suất trang web của bạn và tiết kiệm băng thông do HTTP request và kích thước tải xuống nhỏ hơn.

> Lưu ý: XCác plugin JavaScript của Bootstrap yêu cầu phải có jQuery. Bạn có thể tải xuống phiên bản mới nhất của jQuery tại đây https://jquery.com/download/. Bạn cũng cần thêm Popper.js trước JS của Bootstrap để các chú giải hoạt động!https://jquery.com/download/. Bạn cũng cần thêm Popper.js trước JS của Bootstrap để các chú giải hoạt động!

OK. Bây giờ bạn đã cài đặt xong, hãy đi vào cùng tìm hiểu về

#2. HỆ THỐNG LƯỚI CỦA BOOTSTRAP

Hệ thống lưới Bootstrap là cách nhanh nhất và dễ dàng để tạo bố cục trang web responsive. là cách nhanh nhất và dễ dàng để tạo bố cục trang web responsive.

2.1. Hệ thống lưới Bootstrap là gì?

Phiên bản Bootstrap 4 mới nhất giới thiệu hệ thống lưới flexbox mới dành cho thiết bị di động có tỷ lệ thích hợp lên đến 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên.flexbox mới dành cho thiết bị di động có tỷ lệ thích hợp lên đến 12 cột khi kích thước thiết bị hoặc khung nhìn tăng lên.

Bootstrap 4 bao gồm các lớp lưới được xác định trước để nhanh chóng tạo bố cục lưới cho các loại thiết bị khác nhau như điện thoại di động, máy tính bảng, máy tính xách tay và máy tính để bàn, v.v.

Ví dụ:

  • Bạn có thể sử dụng các lớp 2 để tạo cột lưới cho các thiết bị cực nhỏ như điện thoại di động ở chế độ dọc.điện thoại di động ở chế độ dọc.

  • Tương tự, bạn có thể sử dụng các lớp 3 để tạo cột lưới cho các thiết bị màn hình nhỏ như điện thoại di động ở chế độ ngangđiện thoại di động ở chế độ ngang

  • Các lớp 4 cho các thiết bị màn hình trung bình như máy tính bảngmáy tính bảng

  • Các lớp 5 cho các thiết bị lớn như máy tính để bànmáy tính để bàn

  • Và các lớp 6 cho màn hình máy tính cực lớn.màn hình máy tính cực lớn.

Bảng sau đây tóm tắt một số tính năng chính của hệ thống lưới Bootstrap mới.

Hướng dẫn what is bootstrap - bootstrap là gì

Bảng trên cho thấy một điều quan trọng.

Việc áp dụng bất kỳ lớp 3 nào cho một phần tử sẽ không chỉ ảnh hưởng đến kiểu dáng của phần tử đó trên các thiết bị nhỏ mà còn ảnh hưởng cả trên các thiết bị vừa, lớn và cực lớn có chiều rộng màn hình lớn hơn hoặc bằng 540px, nếu bạn không thêm tùy chỉnh lớp 4, 5 hoặc 6 cho nó.

Tương tự, lớp 4 sẽ không chỉ ảnh hưởng đến kiểu dáng của các phần tử trên các thiết bị vừa mà còn trên các thiết bị lớn và cực lớn nếu không có lớp 5 hoặc 6

Bây giờ câu hỏi đặt ra là làm thế nào để tạo hàng và cột bằng cách sử dụng hệ thống lưới responsive 12 cột này?

Câu trả lời khá đơn giản:

  • Lúc đầu hãy tạo một container hoạt động như một trình bao bọc cho các hàng (row) và cột (column) của bạn bằng cách sử dụng lớp head4

  • Sau đó tạo các hàng bên trong vùng chứa bằng cách sử dụng lớp head5 và để tạo các cột bên trong bất kỳ hàng nào bạn có thể sử dụng các lớp 2, 3, 4, 5 và 6.

Các cột là khu vực nội dung thực tế nơi chúng ta sẽ đặt nội dung của mình vào đó.

Hãy xem nó thực sự hoạt động như thế nào qua ví dụ sau (thêm đoạn code này vào phần body của bạn):

<div class="row">

Cột tráidiv class="col-md-6">Cột tráidiv>

Cột phảidiv class="col-md-6">Cột phảidiv>

div>

<div class="row">

Cột tráidiv class="col-md-4">Cột tráidiv>

Cột phảidiv class="col-md-8">Cột phảidiv>

div>

<div class="row">

Cột tráidiv class="col-md-3">Cột tráidiv>

Cột phảidiv class="col-md-9">Cột phảidiv>

div>

Cột tráidiv>
 

Cột phải

Hướng dẫn what is bootstrap - bootstrap là gì

 Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột (1 và 2) và chỉ các cột mới có thể là con ngay lập tức của các hàng (head5). Các hàng phải được đặt bên trong head4 (chiều rộng cố định) hoặc 5 (chiều rộng đầy đủ) để có khoảng đệm và căn chỉnh thích hợp.> Mẹo: Chiều rộng cột lưới được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là gutter) để kiểm soát không gian giữa các cột riêng lẻ.

Với một ít CSS để cho đẹp hơn ta được bố cục như thế này:

> Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột (1 và 2) và chỉ các cột mới có thể là con ngay lập tức của các hàng (head5). Các hàng phải được đặt bên trong head4 (chiều rộng cố định) hoặc 5 (chiều rộng đầy đủ) để có khoảng đệm và căn chỉnh thích hợp.> Mẹo: Chiều rộng cột lưới được đặt theo tỷ lệ phần trăm, vì vậy chúng luôn linh hoạt và có kích thước tương ứng với phần tử mẹ của chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là gutter) để kiểm soát không gian giữa các cột riêng lẻ.

Vì hệ thống lưới Bootstrap dựa trên 12 cột, do đó, để giữ các cột trên một dòng (tức là cạnh nhau), tổng số cột lưới trong một hàng không được lớn hơn 12.

Nếu bạn chú ý kỹ ở ví dụ trên, bạn sẽ tìm thấy số cột lưới (tức là 6) cộng lại sẽ bằng 12 (thử lấy 6 + 6, 4 + 8 và 3 + 9 xem) cho mỗi hàng.

2.2. Tạo bố cục 3 cột bằng bootstrap grid

Tương tự, bạn có thể tạo các bố cục khác dựa trên nguyên tắc trên.

Ví dụ, Ví dụ sau thường sẽ tạo bố cục ba cột cho màn hình máy tính xách tay và máy tính để bàn.

<div class="row">

Cột tráidiv class="col-lg-4">Cột tráidiv>

Cột phảidiv class="col-lg-4">Cột giữadiv>

Cột phảidiv class="col-lg-4">Cột phảidiv>

div>

<div class="row">

Cột tráidiv class="col-lg-2">Cột tráidiv>

Cột phảidiv class="col-lg-8">Cột giữadiv>

Cột phảidiv class="col-lg-2">Cột phảidiv>

div>

<div class="row">

Cột tráidiv class="col-lg-3">Cột tráidiv>

Cột phảidiv class="col-lg-7">Cột giữadiv>

Cột phảidiv class="col-lg-2">Cột phảidiv>

div>

Cột tráidiv>
 

Cột phảiLưu ý: Nếu bạn cố tình đặt nhiều hơn 12 cột trong một hàng, thì nhóm cột thừa sẽ nằm trên một dòng mới.

2.3. Bố cục tự động

Bạn cũng có thể tạo các cột có chiều rộng bằng nhau cho tất cả các thiết bị (cực nhỏ, nhỏ, vừa, lớn và cực lớn) bằng cách sử dụng lớp 1 mà không cần chỉ định bất kỳ số cột nào.

Hãy thử ví dụ sau để hiểu cách hoạt động chính xác của nó:

<div class="row">

Cột 1div class="col">Cột 1div>

Cột 2div class="col">Cột 2div>

div>

<div class="row">

Cột 1div class="col">Cột 1div>

Cột 2div class="col">Cột 2div>

Cột 3div class="col">Cột 3div>

div>

Cột 1div>
 

Cột 2

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 3

 

Kết quả:

<div class="row">

Cột 1div class="col">Cột 1div>

Cột 2div class="col">Cột 2div>

div>

<div class="row">

Cột 1div class="col">Cột 1div>

Cột 2div class="col-sm-6">Cột 2div>

Cột 3div class="col">Cột 3div>

div>

Cột 1div>
 

Cột 2

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 3

 

Kết quả:

Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau.

Bạn có thể sử dụng các lớp lưới được xác định trước hoặc độ rộng nội tuyến.

Nếu bạn thử có kéo ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp 1 sẽ tự thay đổi chiều rộng bằng nhau. 768px), nó sẽ áp dụng các class 3

Như bạn thấy ở hàng bên dưới, khi kích thước màn hình thay đổi Cột 1, và Cột 3 luôn có kích thước bằng nhau.

<div class="row">

Cột 1div class="col-sm-4 col-md-3">Cột 1div>

Cột 2div class="col-sm-8 col-md-6">Cột 2div>

Cột 3div class="col-sm-12 col-md-3">Cột 3div>

div>

Cột 1div>
 

Cột 2

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 3

Hướng dẫn what is bootstrap - bootstrap là gì

 

  • Kết quả:

Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau.

Bạn có thể sử dụng các lớp lưới được xác định trước hoặc độ rộng nội tuyến.

Nếu bạn thử có kéo ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp 1 sẽ tự thay đổi chiều rộng bằng nhau.

Như bạn thấy ở hàng bên dưới, khi kích thước màn hình thay đổi Cột 1, và Cột 3 luôn có kích thước bằng nhau.

2.4. Hành vi Column Wapping

Bây giờ chúng ta sẽ tạo các bố cục linh hoạt hơn thay đổi hướng cột dựa trên kích thước khung nhìn.

Ví dụ sau sẽ tạo bố cục ba cột (cùng một hàng) trên các thiết bị lớn như máy tính xách tay và máy tính để bàn, cũng như trên máy tính bảng (ví dụ: Apple iPad) ở chế độ ngang.

Nhưng trên các thiết bị nhỏ như điện thoại ở chế độ ngang (576px ≤ chiều rộng màn hình

Hướng dẫn what is bootstrap - bootstrap là gì

≤ 768px), nó sẽ áp dụng các class 3

Do đó chúng ta có hàng đầu tiên có 2 cột, hàng thứ hai có 2 cột

Hiển thị ở trên màn hình lớn:

Hiển thị ở trên màn hình nhỏ (điện thoại quay ngang):

Như bạn có thể thấy trong ví dụ trên, tổng các số cột của lưới trung bình (tức là 6) là:

3 + 9 + 12 = 24 lớn hơn 12

Do đó div thứ ba có lớp integrity1 là cột bổ sung trong một head5

Nó sẽ nằm trên một dòng mới liền kề trên các thiết bị có kích thước màn hình trung bình.

Còn trên các màn hình lớn thì lúc này các lớp integrity3, integrity4 và integrity3 sẽ được áp dụng.

<div class="row">

Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng.div class="col-lg-4"><p>Hộp 1p>div>

Tương tự, bạn có thể tạo nhiều bố cục thích ứng hơn cho các trang web của mình bằng cách sử dụng tính năng wrapping của Bootstrap.div class="col-lg-4"><p>Hộp 2p>div>

2.5. Tạo bố cục nhiều cột với Bootstrapdiv class="col-lg-4"><p>Hộp 3p>div>

Với hệ thống lưới bootstrap 4 mới, bạn có thể dễ dàng kiểm soát cách bố cục trang web của mình sẽ hiển thị trên các loại thiết bị khác nhau có kích thước màn hình hoặc khung nhìn khác nhau như điện thoại di động, máy tính bảng, máy tính để bàn, v.v.div class="col-lg-4"><p>Hộp 4p>div>

Hãy xem hình minh họa sau:div class="col-lg-4"><p>Hộp 5p>div>

Trong hình minh họa ở trên, có tổng cộng 12 hộp nội dung trong tất cả các thiết bị, nhưng vị trí của nó thay đổi tùy theo kích thước màn hình thiết bị.div class="col-lg-4"><p>Hộp 6p>div>

Giống như trong thiết bị di động, bố cục được hiển thị dưới dạng bố cục lưới một cột có 1 cột và 12 hàng được đặt trên nhau.div class="col-lg-4"><p>Hộp 7p>div>

Trong khi trong máy tính bảng, nó được hiển thị dưới dạng bố cục lưới hai cột có 2 cột và mỗi cột có 6 hàng.div class="col-lg-4"><p>Hộp 8p>div>

Hơn nữa, trong các thiết bị có kích thước màn hình lớn như máy tính xách tay và máy tính để bàn, nó được hiển thị dưới dạng bố cục lưới ba cột có 3 cột và 4 hàng.div class="col-lg-4"><p>Hộp 9p>div>

Cuối cùng, trong các thiết bị màn hình cực lớn như máy tính để bàn lớn, nó được hiển thị dưới dạng bố cục lưới bốn cột có 4 cột và 3 hàng.div class="col-lg-4"><p>Hộp 10p>div>

Bây giờ câu hỏi là làm thế nào chúng ta có thể tạo các bố cục đáp ứng như vậy bằng cách sử dụng hệ thống lưới mới Bootstrap?div class="col-lg-4"><p>Hộp 11p>div>

Trước tiên, hãy bắt đầu với thiết bị đích chính.div class="col-lg-4"><p>Hộp 12p>div>

div>

Cột 1div>
 

Cột 2

Cột 3

 

Kết quả:

Ngoài ra, bạn cũng có thể đặt chiều rộng của một cột và để các cột anh chị em tự động thay đổi kích thước xung quanh nó bằng nhau.

Bạn có thể sử dụng các lớp lưới được xác định trước hoặc độ rộng nội tuyến.

Nếu bạn thử có kéo ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp 1 sẽ tự thay đổi chiều rộng bằng nhau.

<div class="row">

Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng.div class="col-lg-4 col-md-6"><p>Hộp 1p>div>

Tương tự, bạn có thể tạo nhiều bố cục thích ứng hơn cho các trang web của mình bằng cách sử dụng tính năng wrapping của Bootstrap.div class="col-lg-4 col-md-6"><p>Hộp 2p>div>

2.5. Tạo bố cục nhiều cột với Bootstrapdiv class="col-lg-4 col-md-6"><p>Hộp 3p>div>

Với hệ thống lưới bootstrap 4 mới, bạn có thể dễ dàng kiểm soát cách bố cục trang web của mình sẽ hiển thị trên các loại thiết bị khác nhau có kích thước màn hình hoặc khung nhìn khác nhau như điện thoại di động, máy tính bảng, máy tính để bàn, v.v.div class="col-lg-4 col-md-6"><p>Hộp 4p>div>

Hộp 5div class="col-lg-4 col-md-6"><p>Hộp 5p>div>

Hộp 6div class="col-lg-4 col-md-6"><p>Hộp 6p>div>

Hộp 7div class="col-lg-4 col-md-6"><p>Hộp 7p>div>

Hộp 8div class="col-lg-4 col-md-6"><p>Hộp 8p>div>

Hộp 9div class="col-lg-4 col-md-6"><p>Hộp 9p>div>

Hộp 10div class="col-lg-4 col-md-6"><p>Hộp 10p>div>

Hộp 11div class="col-lg-4 col-md-6"><p>Hộp 11p>div>

Hộp 12div class="col-lg-4 col-md-6"><p>Hộp 12p>div>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

<div class="row">

 div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 1p>div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 2p>div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 3p>div>

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 4p>div>

Hộp 5div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 5p>div>

Hộp 6div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 6p>div>

Hộp 7div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 7p>div>

Hộp 8div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 8p>div>

Hộp 9div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 9p>div>

Hộp 10div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 10p>div>

Hộp 11div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 11p>div>

Hộp 12div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 12p>div>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

Hộp 1

<div class="row">

 div class="col-sm-8">Cột tráidiv>

<div class="col-sm-4">

<div class="row">

<div class="col-12">div>

div>

<div class="row">

<div class="col-6">div>

<div class="col-6">div>

div>

div>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

  • Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.
  • Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

Hộp 1

  • Hộp 2
  • Hộp 3

Hộp 4

Hướng dẫn what is bootstrap - bootstrap là gì

> Mẹo: Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động. Vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 mà không cần có các lớp 2 hoặc 3.

2.6. Lồng cột trong cột

Các cột Bootstrap cũng có thể lồng vào nhau, có nghĩa là bạn có thể đặt các hàng và cột bên trong một cột hiện có.

<div class="row justify-content-md-center">

 div class="col-md-3">Cột tráidiv>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-md-auto">Cột có chiều rộng biến đổidiv>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col-md-3">Cột phảidiv>

div>

<div class="row">

 div class="col">Cột tráidiv>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-auto">Cột có chiều rộng biến đổidiv>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col">Cột phảidiv>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

Hướng dẫn what is bootstrap - bootstrap là gì

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

Hộp 1

Hộp 2đầu, giữadưới cùng của vùng chứa.

<div class="row align-items-start">

 div class="col">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col">Cột 3div>

div>

<div class="row align-items-center">

 div class="col">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col">Cột 3div>

div>

<div class="row align-items-end">

 div class="col">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col">Cột 3div>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

Hướng dẫn what is bootstrap - bootstrap là gì

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

Hộp 1

<div class="row">

 div class="col align-self-start">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col align-self-center">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col align-self-end">Cột 3div>

div>

 div>
 

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.

Hướng dẫn what is bootstrap - bootstrap là gì

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.bên trái, chính giữabên phải của vùng chứa tương ứng.

Hộp 1

<div class="row justify-content-start">

 div class="col-4">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-4">Cột 2div>

div>

<div class="row justify-content-center">

 div class="col-4">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-4">Cột 2div>

div>

<div class="row justify-content-end">

 div class="col-4">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-4">Cột 2div>

div>

 div>
 

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.

Hướng dẫn what is bootstrap - bootstrap là gì

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.

Hộp 1

Hộp 2

<div class="row justify-content-around">

 div class="col-4">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-4">Cột 2div>

div>

<div class="row justify-content-between">

 div class="col-2">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col-2">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col-2">Cột 3div>

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.div class="col-2">Cột 4div>

div>

 div>
 

Hộp 1

Hướng dẫn what is bootstrap - bootstrap là gì

Hộp 2flexbox để biết căn chỉnh các flex items.

Hộp 3

Hộp 4

> Mẹo: Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động. Vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 mà không cần có các lớp 2 hoặc 3.

2.6. Lồng cột trong cột

<div class="row">

Các cột Bootstrap cũng có thể lồng vào nhau, có nghĩa là bạn có thể đặt các hàng và cột bên trong một cột hiện có.div class="col order-last">Cột đầu nhưng xếp ở cuốidiv>

Tuy nhiên, công thức đặt các cột sẽ giống nhau, tức là tổng số cột phải bằng 12 hoặc ít hơn trong một hàng.div class="col">Cột thứ 2, nhưng không có thứ tựdiv>

Cột tráidiv class="col order-first">Cột cuối, nhưng được đặt ở đầudiv>

div>

 div>
 

Như bạn thấy, trong một hàng chúng ta có 2 cột:

Hướng dẫn what is bootstrap - bootstrap là gì

Cột trái chiếm 8 phần

Cột phải chiếm 4 phần

Tuy nhiên, trong cột phải còn được chia thành 2 hàng:

<div class="row">

 div class="col order-4">Cột 1div>

> Mẹo: Để thuận tiện, hãy thiết lập cho thiết bị chính trước. Sau đó mới thiết lập dần cho thiết bị khác như mình đang làm ở đây.div class="col">Cột 2div>

Tương tự, bạn có thể tùy chỉnh bố cục cho các thiết bị cực lớn như màn hình máy tính để bàn lớn bằng cách thêm lớp integrity7 trên mỗi cột.div class="col order-1">Cột 3div>

Vì mỗi hàng trong bố cục thiết bị cực lớn của chúng ta chứa 4 cột. Đây là code cuối cùng sau khi kết hợp toàn bộ quá trình.div class="col order-3">Cột 4div>

div>

 div>
 

Hộp 1

Hộp 2

Hộp 3

Hướng dẫn what is bootstrap - bootstrap là gì

Hộp 4

> Mẹo: Theo hình minh họa trên, không cần tùy chỉnh bố cục cho điện thoại di động. Vì các cột trên các thiết bị nhỏ hơn sẽ tự động nằm ngang và được hiển thị dưới dạng bố cục lưới cột 1x12 mà không cần có các lớp 2 hoặc 3.

Các lớp này bù trừ các cột bằng cách tăng lề trái của nó theo số cột được chỉ định.

Ví dụ: Lớp .html9 trên cột .txt0 di chuyển nó sang bên phải bốn cột từ vị trí ban đầu của nó.

Hãy thử ví dụ sau để xem nó hoạt động như thế nào:

 div class="row">

 div class="col-md-8 offset-md-4">

col-md-8 offset-md-4

 div>

 div>

 div>
 

Kết quả ta được:

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.

Đây là một ví dụ:

 div class="container">

 div class="row">

 div class="col-md-4">Cột 1div>

Kết quả ta được:div class="col-md-4 ml-auto">Cột 2div>

 div>

 div class="row">

 div class="col-auto mr-auto">Cột 1div>

Kết quả ta được:div class="col-auto">Cột 2div>

 div>

 div>
 

Kết quả ta được:

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.Lưu ý: Bạn có thể sử dụng lớp .col-auto để tạo các cột chỉ chiếm không gian khi cần thiết, tức là kích thước của chính cột dựa trên nội dung.

Đây là một ví dụ:

Cột 1

Cột 2

Đây là một ví dụ:

 div class="row no-gutters">

 div class="col-4">Cột 1div>

Kết quả ta được:div class="col-4">Cột 2div>

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.div class="col-4">Cột 3div>

 div>
 

Kết quả ta được:

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.

Hướng dẫn what is bootstrap - bootstrap là gì

Đây là một ví dụ:

Cột 1

Cột 2

 div class="row">

 div class="col">Cột 1div>

Kết quả ta được:div class="col">Cột 2div>

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.div class="col">Cột 3div>

Đây là một ví dụ:div class="col">Cột 4div>

Cột 1div class="col">Cột 5div>

 div>

 div>
 

Kết quả ta được:

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.

 div class="row">

 div class="col">Cột 1div>

Kết quả ta được:div class="col">Cột 2div>

 div class="w-100">div>

Đây là một ví dụ:div class="col">Cột 4div>

Cột 1div class="col">Cột 5div>

 div>

 div>
 

Kết quả ta được:

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.

Đây là một ví dụ:

Cột 1

Cột 2

  • Kết quả ta được tương tự như sau:
  • > Lưu ý: Bạn có thể sử dụng lớp .col-auto để tạo các cột chỉ chiếm không gian khi cần thiết, tức là kích thước của chính cột dựa trên nội dung.

2.11. Tạo các cột nhỏ gọn

Bạn có thể loại bỏ gutter mặc định giữa các cột để tạo bố cục nhỏ gọn bằng cách thêm lớp .txt1 trên head5.

Lớp này loại bỏ các lề âm khỏi hàng và phần đệm ngang khỏi tất cả các cột con ngay lập tức.

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 3

Bình thường, nếu không có class .no-gutters thì chúng ta sẽ có kết quả tương tự như thế này:h2>Sử dụng .containerh2>

Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ:p>Chiều rộng cố định, tùy thuộc theo kích thước màn hìnhp>

 div>
 

Kết quả ta được:

Bạn cũng có thể offset các cột bằng cách sử dụng các lớp tiện ích căn lề. Các lớp này hữu ích trong các trường hợp mà độ rộng của phần bù không cố định.

Đây là một ví dụ:

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 3

Sử dụng .containerdiv class="container-fluid">

Bình thường, nếu không có class .no-gutters thì chúng ta sẽ có kết quả tương tự như thế này:h2>Sử dụng .container-fluidh2>

Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ:p>Chiều rộng luôn bằng 100%p>

 div>
 

2.12. Ngắt các cột thành hàng mới

Hướng dẫn what is bootstrap - bootstrap là gì

Bạn cũng có thể tạo các cột có chiều rộng bằng nhau kéo dài nhiều hàng bằng cách chèn một div với lớp .txt3 ở nơi bạn muốn các cột ngắt thành một dòng mới.

Ví dụ, đầu tiên ta có các cột như thế này:

Hướng dẫn what is bootstrap - bootstrap là gì

Cột 4

Cột 5tự học Bootstrap 4 này mình đã giúp bạn tìm hiểu về cách thiết lập dự án responsive web sử dụng Bootstrap, cách chia layout với hệ thống lưới của bootstrap và 2 class quan trọng là head4 và 5.

Hiển thị như sau:

Bây giờ, ta ngắt dòng ở cột 3 như sau:

Tiếp đến, một khái niệm nữa bạn cần nắm được đó làBootstrap 4, sau đó sử dụng CSS thuần, Flexbox... vừa giúp bạn tránh phụ thuộc framework vừa nâng cao giá trị của chính bạn.

#3. SỬ DỤNG head4 VÀ 5

Ở trên, bạn đã biết là Bootstrap yêu cầu một phần tử để bao bọc nội dung trang web.KHÓA HỌC FRONT END chuyên nghiệp với React

Và phần tử này sẽ cần phải có 1 trong hai class head4 hoặc 5, trong đó:Cách Responsive Web cho người mới bắt đầu

Class head4 làm cho vùng chứa có chiều rộng cố định, responsive

Class 5 làm cho vùng chứa kéo dài toàn bộ chiều rộng của khung nhìn (width là 100%)

3.1. Sử dụng .container

Sử dụng class head4 để tạo một vùng chứa đáp ứng, có chiều rộng cố định.

Lưu ý là chiều rộng của nó (chiều rộng tối đa) sẽ thay đổi trên các kích thước màn hình khác nhau:0383.180086

Ví dụ:

Sử dụng .container

Chiều rộng cố định, tùy thuộc theo kích thước màn hình