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.học bootstrap. Show
Nội dung chính ShowShow
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. 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.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. 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ơn và responsive dễ dàng hơn.
#1: THIẾT LẬP DỰ ÁN BOOTSTRAPVà 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ý =)) ). 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. Bước #1: Tạo trang HTML đơn giảnBước #2: Đặt file HTML này làm Template Bước #3: Lưu filehtml lang="en"> Bước #3: Lưu filehead> head>> Bước #3: Lưu filebody> body>> #2. HỆ THỐNG LƯỚI CỦA BOOTSTRAPhtml> 2.1. Hệ thống lưới Bootstrap là gì? 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.Lưu ý #1: Luôn bao gồm thẻ 2.4. Hành vi Column WappingLư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 TemplateBước #3: Lưu file #2. HỆ THỐNG LƯỚI CỦA BOOTSTRAP 2.1. Hệ thống lưới Bootstrap là gì? 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. 2.4. Hành vi Column WappingSubresource 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. 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. 2.6. Lồng cột trong cộtGhi 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 fileBâ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 .txt 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 .txt 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 .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 source và Bootstrap compiled. Bạn có thể tải xuống tệp Bootstrap 4 tại đây.Bootstrap source và Bootstrap 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 ( Sử dụng các tệp 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!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 BOOTSTRAPHệ 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. 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.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ả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. Bảng trên cho thấy một điều quan trọng. Việc áp dụng bất kỳ lớp Tương tự, lớp 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:
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>div class="col-md-6">Cột tráidiv> Cột phảidiv class="col-md-6">Cột phảidiv>div class="col-md-6">Cột phảidiv> div>> <div class="row"> Cột tráidiv class="col-md-6">Cột tráidiv>div class="col-md-4">Cột tráidiv> Cột phảidiv class="col-md-6">Cột phảidiv>div class="col-md-8">Cột phảidiv> div>> <div class="row"> Cột tráidiv class="col-md-6">Cột tráidiv>div class="col-md-3">Cột tráidiv> Cột phảidiv class="col-md-6">Cột phảidiv>div class="col-md-9">Cột phảidiv> div>> Cột tráidiv class="col-md-4">Cột tráidiv>div> Cột phảidiv class="col-md-8">Cột phảidiv> Cột tráidiv class="col-md-3">Cột tráidiv>Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột ( </body> 1 và <meta> 2) và chỉ các cột mới có thể là con ngay lập tức của các hàng (head 5). Các hàng phải được đặt bên trong head 4 (chiều rộng cố định) hoặc </body> 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ẻ.Cột phảidiv class="col-md-9">Cột phảidiv> Cột tráidiv> Cột phải Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột ( 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 ( 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. <div class="row"> Cột tráidiv class="col-md-6">Cột tráidiv>div class="col-lg-4">Cột tráidiv> Cột phảidiv class="col-md-6">Cột phảidiv>div class="col-lg-4">Cột giữadiv> Cột tráidiv class="col-md-4">Cột tráidiv>div class="col-lg-4">Cột phảidiv> div>> <div class="row"> Cột phảidiv class="col-md-8">Cột phảidiv>div class="col-lg-2">Cột tráidiv> Cột tráidiv class="col-md-3">Cột tráidiv>div class="col-lg-8">Cột giữadiv> Cột phảidiv class="col-md-9">Cột phảidiv>div class="col-lg-2">Cột phảidiv> div>> <div class="row"> Cột tráidiv> div 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-md-9">Cột phảidiv>div class="col-lg-2">Cột phảidiv> div>> Cột tráidiv class="col-md-4">Cột tráidiv>div> Cột phảidiv class="col-md-8">Cột phảidiv>Lư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. Cột tráidiv class="col-md-3">Cột tráidiv>Cột phảidiv class="col-md-9">Cột phảidiv> Cột tráidiv> <div class="row"> Cột phảidiv class="col">Cột 1div> Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột ( div>> <div class="row"> Cột phảidiv class="col">Cột 1div> Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột ( Với một ít CSS để cho đẹp hơn ta được bố cục như thế này:div class="col">Cột 3div> div>> Cột tráidiv class="col-md-4">Cột tráidiv>div> Cột phảidiv class="col-md-8">Cột phảidiv> Cột phảidiv class="col-md-9">Cột phảidiv> Cột tráidiv> <div class="row"> Cột phảidiv class="col">Cột 1div> Lưu ý: Trong bố cục dạng lưới, nội dung phải được đặt bên trong các cột ( div>> <div class="row"> Cột phảidiv class="col">Cột 1div> Cột phảidiv class="col-sm-6">Cột 2div>div class="col-sm-6">Cột 2div> div class="col">Cột 3div>div class="col">Cột 3div> div>> Cột tráidiv> div> Cột phải 2.4. Hành vi Column WappingBâ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 ≤ 768px), nó sẽ áp dụng các class<meta> 3 768px), nó sẽ áp dụng các class <meta> 3 768px), nó sẽ áp dụng các class <meta> 3Do đó chúng ta có hàng đầu tiên có 2 cột, hàng thứ hai có 2 cột <div class="row"> Cột 1div class="col-sm-4 col-md-3">Cột 1div>div class="col-sm-4 col-md-3">Cột 1div> Cột 2div class="col-sm-8 col-md-6">Cột 2div>div class="col-sm-8 col-md-6">Cột 2div> Cột 3div class="col-sm-12 col-md-3">Cột 3div>div class="col-sm-12 col-md-3">Cột 3div> div>> Cột 1div> div> Cột 2
Cột 3
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à 3 + 9 + 12 = 24 lớn hơn 12 Do đó div thứ ba có lớp 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.Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng. 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.
2.5. Tạo bố cục nhiều cột với Bootstrap 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. Hãy xem hình minh họa sau: 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ị. 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. 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. 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. 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. 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="row"> Cột 1div class="col-sm-4 col-md-3">Cột 1div>div class="col-lg-4"><p>Hộp 1p>div> Cột 2div class="col-sm-8 col-md-6">Cột 2div>div class="col-lg-4"><p>Hộp 2p>div> Cột 3div class="col-sm-12 col-md-3">Cột 3div>div class="col-lg-4"><p>Hộp 3p>div> Cột 1div> div class="col-lg-4"><p>Hộp 4p>div> Cột 2div class="col-lg-4"><p>Hộp 5p>div> Cột 3div class="col-lg-4"><p>Hộp 6p>div> Hiển thị ở trên màn hình lớn:div class="col-lg-4"><p>Hộp 7p>div> Hiển thị ở trên màn hình nhỏ (điện thoại quay ngang):div class="col-lg-4"><p>Hộp 8p>div> 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à 3 + 9 + 12 = 24 lớn hơn 12div class="col-lg-4"><p>Hộp 10p>div> Do đó div thứ ba có lớp 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.div class="col-lg-4"><p>Hộp 12p>div> div>> Cột 1div> div> Cột 2 Cột 3 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à 3 + 9 + 12 = 24 lớn hơn 12 <div class="row"> Cột 1div class="col-sm-4 col-md-3">Cột 1div>div class="col-lg-4 col-md-6"><p>Hộp 1p>div> Cột 2div class="col-sm-8 col-md-6">Cột 2div>div class="col-lg-4 col-md-6"><p>Hộp 2p>div> Cột 3div class="col-sm-12 col-md-3">Cột 3div>div class="col-lg-4 col-md-6"><p>Hộp 3p>div> Cột 1div> div class="col-lg-4 col-md-6"><p>Hộp 4p>div> Cột 2div class="col-lg-4 col-md-6"><p>Hộp 5p>div> Cột 3div class="col-lg-4 col-md-6"><p>Hộp 6p>div> Hiển thị ở trên màn hình lớn:div class="col-lg-4 col-md-6"><p>Hộp 7p>div> 3 + 9 + 12 = 24 lớn hơn 12div class="col-lg-4 col-md-6">Hộp 8p>div>div class="col-lg-4 col-md-6"><p>Hộp 8p>div> Do đó div thứ ba có lớp 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.div class="col-lg-4 col-md-6">Hộp 10p>div>div class="col-lg-4 col-md-6"><p>Hộp 10p>div> Còn trên các màn hình lớn thì lúc này các lớp 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">Hộp 12p>div>div class="col-lg-4 col-md-6"><p>Hộp 12p>div> div>> Cột 1div> div> Cột 3 <div class="row"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 1p>div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 2p>div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 3p>div> div class="col-lg-4 col-md-6 col-xl-3">Hộp 4p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 4p>div> Hiển thị ở trên màn hình lớn:div class="col-lg-4 col-md-6 col-xl-3">Hộp 5p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 5p>div> Hiển thị ở trên màn hình nhỏ (điện thoại quay ngang):div class="col-lg-4 col-md-6 col-xl-3">Hộp 6p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 6p>div> 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à 3 + 9 + 12 = 24 lớn hơn 12div class="col-lg-4 col-md-6 col-xl-3">Hộp 8p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 8p>div> Do đó div thứ ba có lớp 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.div class="col-lg-4 col-md-6 col-xl-3">Hộp 10p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 10p>div> Còn trên các màn hình lớn thì lúc này các lớp 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 col-xl-3">Hộp 12p>div>div class="col-lg-4 col-md-6 col-xl-3"><p>Hộp 12p>div> div>> Cột 1div> div> Cột 2 Cột 3Cá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ó. Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div> <div class="row"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col-sm-8">Cột tráidiv> <div class="col-sm-4"> <div class="row"> div>div class="col-12">div> div>> <div class="row"> div>div class="col-6">div> div>div class="col-6">div> div>> div>> div>> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div>
div class="col-lg-4 col-md-6 col-xl-3">Hộp 4p>div>
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à
3 + 9 + 12 = 24 lớn hơn 12div class="col-lg-4 col-md-6 col-xl-3">Hộp 8p>div> Do đó div thứ ba có lớp 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.div class="col-lg-4 col-md-6 col-xl-3">Hộp 10p>div> <div class="row justify-content-md-center"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col-md-3">Cột tráidiv> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col-md-auto">Cột có chiều rộng biến đổidiv> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col-md-3">Cột phảidiv> div>> <div class="row"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col">Cột tráidiv> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col-auto">Cột có chiều rộng biến đổidiv> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col">Cột phảidiv> div>> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div> div class="col-lg-4 col-md-6 col-xl-3">Hộp 4p>div>Hiển thị ở trên màn hình lớn:div class="col-lg-4 col-md-6 col-xl-3">Hộp 5p>div>đầu, giữa và dưới cùng của vùng chứa. <div class="row align-items-start"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col">Cột 1div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col">Cột 2div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col">Cột 3div> div>> <div class="row align-items-center"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col">Cột 1div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col">Cột 2div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col">Cột 3div> div>> <div class="row align-items-end"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col">Cột 1div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col">Cột 2div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col">Cột 3div> div>> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div> div class="col-lg-4 col-md-6 col-xl-3">Hộp 4p>div> <div class="row"> Cột 1div class="col-lg-4 col-md-6 col-xl-3">Hộp 1p>div>div class="col align-self-start">Cột 1div> Cột 2div class="col-lg-4 col-md-6 col-xl-3">Hộp 2p>div>div class="col align-self-center">Cột 2div> Cột 3div class="col-lg-4 col-md-6 col-xl-3">Hộp 3p>div>div class="col align-self-end">Cột 3div> div>> Cột tráidiv> div> Như bạn thấy, trong một hàng chúng ta có 2 cột:Cột trái chiếm 8 phầnbên trái, chính giữa và bên phải của vùng chứa tương ứng.bên trái, chính giữa và bên phải của vùng chứa tương ứng. Cột phải chiếm 4 phần <div class="row justify-content-start"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-4">Cột 2div> div>> <div class="row justify-content-center"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-4">Cột 2div> div>> <div class="row justify-content-end"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-4">Cột 2div> div>> Cột tráidiv> div> Như bạn thấy, trong một hàng chúng ta có 2 cột: Cột trái chiếm 8 phầnbên trái, chính giữa và bên phải của vùng chứa tương ứng. Cột phải chiếm 4 phần <div class="row justify-content-around"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-4">Cột 2div> div>> <div class="row justify-content-between"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-2">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-2">Cột 2div> Cột trái chiếm 8 phầndiv class="col-2">Cột 3div> 1 hàng chiếm toàn bộ cột phảidiv class="col-2">Cột 1div>div class="col-2">Cột 4div> div>> Cột tráidiv> div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-2">Cột 2div>flexbox để biết căn chỉnh các flex items. Kết quả như hình minh họa sau:div class="col-2">Cột 3div>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: 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div> <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col order-last">Cột đầu nhưng xếp ở cuốidiv> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col">Cột thứ 2, nhưng không có thứ tựdiv> Cột trái chiếm 8 phầndiv class="col order-first">Cột cuối, nhưng được đặt ở đầudiv> div>> Cột tráidiv> div> Như bạn thấy, trong một hàng chúng ta có 2 cột: Cột trái chiếm 8 phầnbên trái, chính giữa và bên phải của vùng chứa tương ứng. Cột phải chiếm 4 phần <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col order-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col">Cột 2div> Cột trái chiếm 8 phầndiv class="col order-1">Cột 3div> 1 hàng chiếm toàn bộ cột phảidiv class="col-2">Cột 1div>div class="col order-3">Cột 4div> div>> Cột tráidiv> div> Như bạn thấy, trong một hàng chúng ta có 2 cột: Cột trái chiếm 8 phầnbên trái, chính giữa và bên phải của vùng chứa tương ứng. Cột phải chiếm 4 phầnTuy nhiên, trong cột phải còn được chia thành 2 hàng: 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div> Cột trái chiếm 8 phần <div class="row"> <div class="col-md-8 offset-md-4"> col-md-8 offset-md-4 div>> div>> Cột tráidiv> div> Như bạn thấy, trong một hàng chúng ta có 2 cột: Cột trái chiếm 8 phầnbên trái, chính giữa và bên phải của vùng chứa tương ứng. <div class="container"> <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-md-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-md-4 ml-auto">Cột 2div> div>> <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-auto mr-auto">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-auto">Cột 2div> div>> Cột tráidiv> div> Cột trái chiếm 8 phầnLư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. Kết quả như hình minh họa sau:div class="col-2">Cột 3div>Cột phải chiếm 4 phần 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. 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div> <div class="row no-gutters"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col-4">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col-4">Cột 2div> Cột trái chiếm 8 phầndiv class="col-4">Cột 3div> 1 hàng chiếm toàn bộ cột phảidiv class="col-2">Cột 1div>div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-2">Cột 2div> Kết quả như hình minh họa sau:div class="col-2">Cột 3div> 2.7. Tạo cột có chiều rộng biến đổi với biếndiv class="col-2">Cột 4div>Như bạn thấy, trong một hàng chúng ta có 2 cột:flexbox để biết căn chỉnh các flex items. Cột trái chiếm 8 phần <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col">Cột 2div> Cột trái chiếm 8 phầndiv class="col">Cột 3div> 1 hàng chiếm toàn bộ cột phảidiv class="col-2">Cột 1div>div class="col">Cột 4div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-2">Cột 2div>div class="col">Cột 5div> div>> 1 hàng chiếm toàn bộ cột phảidiv class="col-2">Cột 1div>div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-2">Cột 2div> Kết quả như hình minh họa sau:div class="col-2">Cột 3div> <div class="row"> 1 hàng chiếm toàn bộ cột phảidiv class="col-4">Cột 1div>div class="col">Cột 1div> 1 hàng nữa có 2 cột đều nhau bên trongdiv class="col-4">Cột 2div>div class="col">Cột 2div> div>div class="w-100">div> div class="col">Cột 4div>div class="col">Cột 4div> 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:div class="col">Cột 5div>div class="col">Cột 5div> div>> div> div> 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: Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ: 2.12. Ngắt các cột thành hàng mới 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 Ví dụ, đầu tiên ta có các cột như thế này:
Hiển thị như sau:Bây giờ, ta ngắt dòng ở cột 3 như sau: Kết quả ta được: Tiếp đến, một khái niệm nữa bạn cần nắm được đó là #3. SỬ DỤNG Ở 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.p>Chiều rộng cố định, tùy thuộc theo kích thước màn hìnhp>p>Chiều rộng cố định, tùy thuộc theo kích thước màn hìnhp> div> div> 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: Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ:2.12. Ngắt các cột thành hàng mới
Tiếp đến, một khái niệm nữa bạn cần nắm được đó là #3. SỬ DỤNG Ở 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.p>Chiều rộng cố định, tùy thuộc theo kích thước màn hìnhp>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> div> 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: Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ: 2.12. Ngắt các cột thành hàng mới 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:tự 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à Cột 4 Cột 5 Hiển thị như sau: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. Bây giờ, ta ngắt dòng ở cột 3 như sau: Kết quả ta được:KHÓA HỌC FRONT END chuyên nghiệp với ReactTiếp đến, một khái niệm nữa bạn cần nắm được đó làCách Responsive Web cho người mới bắt đầu #3. SỬ DỤNG Ở 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.p>Chiều rộng cố định, tùy thuộc theo kích thước màn hìnhp> Nhưng khi có .no-gutters thì khoảng trống này bị loại bỏ: 2.12. Ngắt các cột thành hàng mới Class #3. SỬ DỤNG Ở 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.p>Chiều rộng luôn bằng 100%p> 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. |