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 lớn hơn 12
2. 4. Hành vi Cột Wapping
Còn lại trên các màn hình lớn thì lúc này các lớp toàn vẹn3, toàn vẹn4 và toàn vẹn3 sẽ được áp dụng
2. 6. round column in the column
Kết quả như hình minh họa sau
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 4 phần
Left used 8 section
2. 12. Ngắt các cột thành hàng mới
2. 12. Ngắt các cột thành hàng mới
Shows as after
But when there are. no-gutters thì khoảng trống này bị loại bỏ
Bạn có thể tạo các cột có chiều rộng bằng cách kéo dài nhiều hàng bằng cách thêm một div vào lớp cũng như vậy. txt3 ở nơi bạn muốn ngắt các cộ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
Vì thế, thay vào đó, các thành viên lập trình chỉ sử dụng hệ thống lưới của bootstrap để giúp trang web bố trí dàn trang tốt hơn và đáp ứng dễ dàng hơn. hệ thống lưới của bootstrap để giúp bố cục trang web tốt hơn và đáp ứng dễ dàng hơn
Và trong bài này mình sẽ giúp các bạn học bootstrap và hiểu nó trong 10 phút (Câu view tý =)) )
#1. BOOTSTRAP THIẾT LẬP DỰ ÁN
Bây giờ chúng ta sẽ tạo một mẫu Bootstrap 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
Tôi khuyên bạn nên thêm Bootstrap vào 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 theo cách thời gian tải, vì họ đang giảm lưu trữ tệp trên nhiều máy chủ trên toàn cầu
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 tệp HTML mới với tên basic.html
<htmllang = "en">
<đầu>
đầu>
<nội dung>
cơ thể>
html>
Sau đó, trong phần đầu và phần thân 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 thu phóng 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 thu phóng 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. Set file HTML this doing Template
Để làm cho tệp HTML đơn giản này trở thành Mẫu 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 liên kết 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 quả tải trang, như được hiển thị trong ví dụ sau
Tất cả đều có sẵn
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 thiết lập web ngay với Bootstrap Framework
Thuộc tính integrity và crossorigin đã được thêm vào liên kết CDN để phát triển (SRI - Subresource Integrity). Đây là một tính năng bảo mật có tính năng 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 tải (từ CDN hoặc bất kỳ nơi nào) đã được tải xuống. . Tính toàn vẹn của tài nguyên con). Đây là một tính năng bảo mật có tính năng 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 tải (từ CDN hoặc bất kỳ nơi nào) đã được tải xuống.
Nó hoạt động bằng cách cho phép bạn cung cấp mã mũ mà tệp được tìm thấy phải khớp
> Ghi chú. Nếu khách truy cập vào trang web của bạn, 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 xuống từ bộ nhớ cache của trình duyệt thay vì 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, 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 xuống từ bộ nhớ cache của trình duyệt thay vì phải tải xuống, dẫn đến thời gian tải nhanh hơn
Bước #3. Lưu tệp
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 mở. 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ó sẵn hai phiên bản để tải xuống, nguồn Bootstrap và Bootstrap đã biên dịch. Bạn có thể tải xuống tệp Bootstrap 4 tại đây. Nguồn Bootstrap và Bootstrap biên dịch. Bạn có thể tải xuống tệp Bootstrap 4 tại đây
Tải xuống phiên bản đã được biên dịch bao gồm phiên bản đã được biên dịch và rút gọn 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ỳ tùy chọn JavaScript phụ thuộc nào như jQuery và Popper. js. Trong khi đó, nguồn Bootstrap chứa các tệp nguồn gốc cho tất cả CSS và JavaScript, cùng với sao cục bộ của tài liệu
Tải xuống và giải nén bản Bootstrap đã biên dịch. 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 (2), cũng như CSS và JS đã biên dịch và rút gọn (3)
Use files 0 and 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 cho yêu cầu HTTP 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/tải xuống/. Bạn cũng cần thêm Popper. js trước JS của Bootstrap để giải hoạt động chú thích. https. // jquery. com/tải xuống/. Bạn cũng cần thêm Popper. js trước JS của Bootstrap để giải hoạt động chú thích
ĐƯỢC RỒI. Bây giờ bạn đã cài đặt xong, hãy vào cùng tìm hiểu
#2. LƯỠI THỐNG KÊ 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 đáp ứng. là cách nhanh nhất và dễ dàng nhất để tạo bố cục trang web đáp ứng
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 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 lưới bố cục 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. dien thoai dien thoai trong vertical mode
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ư bảng máy tính bảng máy tính
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
Table on for found a important thing
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 đến cả thiết bị vừa, lớn và cực lớn có màn hình rộng
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 thiết bị vừa mà còn trên 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 đáp ứng 12 cột này?
Câu trả lời khá đơn giản
Lúc đầu, hãy tạo một vùng chứa hoạt động như một trình bao bọc cho các hàng (hàng) và cột (cột) 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 thông qua ví dụ sau (thêm đoạn mã này vào phần thân của bạn)
<divlớp = "row">
Cột tráidivlớp = "col-md-6">Cột tráidiv>
Cột phảidivlớp = "col-md-6">Cột phảidiv>
div>
<divlớp = "row">
Cột tráidivlớp = "col-md-4">Cột tráidiv>
Cột phảidivlớp = "col-md-8">Cột phảidiv>
div>
<divlớp = "row">
Cột tráidivlớp = "col-md-3">Cột tráidiv>
Cột phảidivlớp = "col-md-9">Cột phảidiv>
div>
Cột tráidiv>
Cột phải
Lưu ý . Trong lưới 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 cứ thích hợp. > Mẹ . 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ử của mẹ chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là máng xối) để 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ố trí cục bộ như thế này
> Lưu ý. Trong lưới 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 cứ thích hợp. > ghim. 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ử của mẹ chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là máng xối) để 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 lớn hơn 12
Nếu bạn chú ý kỹ ví dụ trên, bạn sẽ tìm thấy các cột lưới số (tức là 6) cộng lại sẽ bằng 12 (dùng lấy 6 + 6, 4 + 8 và 3 + 9 xem) cho mỗi hàng
2. 2. Tạo cục bộ 3 cột bằng lưới bootstrap
Tương tự, bạn có thể tạo các bố cục cục bộ 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
<divlớp = "row">
Cột tráidivlớp = "col-lg-4">Cột tráidiv>
Cột phảidivlớp = "col-lg-4">Cột giữadiv>
Cột phảidivlớp = "col-lg-4">Cột phảidiv>
div>
<divlớp = "row">
Cột tráidivlớp = "col-lg-2">Cột tráidiv>
Cột phảidivlớp = "col-lg-8">Cột giữadiv>
Cột phảidivlớp = "col-lg-2">Cột phảidiv>
div>
<divlớp = "row">
Cột tráidivlớp = "col-lg-3">Cột tráidiv>
Cột phảidivlớp = "col-lg-7">Cột giữadiv>
Cột phảidivlớp = "col-lg-2">Cột phảidiv>
div>
Cột tráidiv>
Cột phải Lưu ý . Nếu bạn cố gắng đặ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.
Với một ít CSS để cho đẹp hơn ta được bố trí cục bộ như thế này
> Lưu ý. Trong lưới 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 cứ thích hợp. > ghim. 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ử của mẹ chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là máng xối) để kiểm soát không gian giữa các cột riêng lẻ
<divlớp = "row">
Cột tráidivlớp = "col">Cột 1div>
Cột phảidivlớp = "col">Cột 2div>
div>
<divlớp = "row">
Cột tráidivlớp = "col">Cột 1div>
Cột phảidivlớp = "col">Cột 2div>
divlớp = "col">Cột 3div>
div>
Cột tráidiv>
Cột phải
Với một ít CSS để cho đẹp hơn ta được bố trí cục bộ như thế này
> Lưu ý. Trong lưới 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 cứ thích hợp. > ghim. 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ử của mẹ chúng. Ngoài ra, mỗi cột có đệm ngang (gọi là máng xối) để kiểm soát không gian giữa các cột riêng lẻ
<divlớp = "row">
Cột tráidivlớp = "col">Cột 1div>
Cột phảidivlớp = "col">Cột 2div>
div>
<divlớp = "row">
Cột tráidivlớp = "col">Cột 1div>
Cột phảidivlớp = "col-sm-6">Cột 2div>
divlớp = "col">Cột 3div>
div>
Cột tráidiv>
Cột phải
2. 4. Hành vi Cột Wapping
Bây giờ chúng ta sẽ tạo các bố cục cục bộ linh hoạt hơn là thay đổi hướng các cột dựa trên kích thước khung nhìn
Ví dụ sau sẽ tạo bố cục cục bộ 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 bảng máy tính (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 lớp 3 768px), nó sẽ áp dụng các lớp 3
Do đó chúng ta có hàng đầu tiên có 2 cột, hàng thứ hai có 2 cột
<divlớp = "row">
Cột 1divlớp = "col-sm-4 col-md-3">Cột 1div>
Cột 2divlớp = "col-sm-8 col-md-6">Cột 2div>
Cột 3divlớp = "col-sm-12 col-md-3">Cột 3div>
div>
Cột 1div>
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 số cột của lưới trung bình (tức là 6) là
3 + 9 + 12 = 24 lớn hơn 12
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 lại trên các màn hình lớn thì lúc này các lớp toàn vẹn3, toàn vẹn4 và toàn vẹn3 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 cục bộ 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 gói của Bootstrap
2. 5. Tạo nhiều cột cục bộ 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ố trí cục bộ 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 . v
Vui lòng 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 bảng máy tính, 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ị có 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 các cột có 4 cột và 3 hàng
Bây giờ câu hỏi đặt ra là làm thế nào chúng ta có thể tạo các bố cục cục bộ trả lời câu hỏi như vậy bằng cách sử dụng hệ thống lưới Bootstrap mới?
<divlớp = "row">
Cột 1divlớp = "col-lg-4"><p>Hộp 1p>div>
Cột 2divlớp = "col-lg-4"><p>Hộp 2p>div>
Cột 3divlớp = "col-lg-4"><p>Hộp 3p>div>
divlớp = "col-lg-4"><p>Hộp 4p>div>
Hiển thị ở trên màn hình lớn. divlớp = "col><p>Hộp 5p>div>
Hiển thị ở trên màn hình nhỏ (Điện thoại quay ngang). divlớp = "col><p>Hộp 6p>div>
Như bạn có thể thấy trong ví dụ trên, tổng số cột của lưới trung bình (tức là 6) là. divlớp = "col><p>Hộp 7p>div>
3 + 9 + 12 = 24 lớn hơn 12divlớp="col-lg-4"><p>Hộp 8p>div>
Div thứ ba đó có lớp integrity1 là cột bổ sung trong một head5divlớp<="col-lg-4"><p>Hộp 9p>div>
It will be on a new line liền kề trên các thiết bị có kích thước màn hình trung bình. divlớp = "col><p>Hộp 10p>div>
Vẫn 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. divlớp = "col><p>Hộp 11p>div>
Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng. divlớp = "col><p>Hộp 12p>div>
div>
Cột 1div>
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 số cột của lưới trung bình (tức là 6) là
3 + 9 + 12 = 24 lớn hơn 12
<divlớp = "row">
Cột 1divlớp = "col-lg-4 col-md-6"><p>Hộp 1p>div>
Cột 2divlớp = "col-lg-4 col-md-6"><p>Hộp 2p>div>
Cột 3divlớp = "col-lg-4 col-md-6"><p>Hộp 3p>div>
divlớp = "col-lg-4 col-md-6"><p>Hộp 4p>div>
Hiển thị ở trên màn hình lớn. divlớp = "col><p>Hộp 5p>div>
Hiển thị ở trên màn hình nhỏ (Điện thoại quay ngang). divlớp = "col><p>Hộp 6p>div>
Như bạn có thể thấy trong ví dụ trên, tổng số cột của lưới trung bình (tức là 6) là. divlớp = "col><p>Hộp 7p>div>
3 + 9 + 12 = 24 lớn hơn 12divlớp="col-lg-4 col-md-6"><p>Hộp 8p>div>
Div thứ ba đó có lớp integrity1 là cột bổ sung trong một head5divlớp<="col-lg-4 col-md-6"><p>Hộp 9p>div>
It will be on a new line liền kề trên các thiết bị có kích thước màn hình trung bình. divlớp = "col><p>Hộp 10p>div>
Vẫn 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. divlớp = "col><p>Hộp 11p>div>
Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng. divlớp = "col><p>Hộp 12p>div>
Hiển thị ở trên màn hình lớn. divlớp = "col><p>Hộp 5p>div>
Hiển thị ở trên màn hình nhỏ (Điện thoại quay ngang). divlớp = "col><p>Hộp 6p>div>
Như bạn có thể thấy trong ví dụ trên, tổng số cột của lưới trung bình (tức là 6) là. divlớp = "col><p>Hộp 7p>div>
3 + 9 + 12 = 24 lớn hơn 12divlớp="col-lg-4 col-md-6 col-xl-3"><p>Hộp 8p>div>
Div thứ ba đó có lớp integrity1 là cột bổ sung trong một head5divlớp<="col-lg-4 col-md-6 col-xl-3"><p>Hộp 9p>div>
It will be on a new line liền kề trên các thiết bị có kích thước màn hình trung bình. divlớp = "col><p>Hộp 10p>div>
Vẫn 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. divlớp = "col><p>Hộp 11p>div>
Và do 3 + 6 + 3 = 12 nên chúng ở trên cùng một dòng. divlớp = "col><p>Hộp 12p>div>
div>
Cột 1div>
Cột 2
2. 6. round column in the column
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ó
Tuy nhiên, công thức đặt các cột sẽ giống nhau, tức là cột số phải bằng 12 hoặc ít hơn trong một hàng
<divlớp = "row">
Cột tráidivlớp = "col-sm-8">Cột tráidiv>
<divlớp = "col-sm-4">
<divlớp = "row">
<divlớp = "col-12">div>
div>
<divlớp = "row">
<divlớp = "col-6">div>
<divlớp = "col-6">div>
div>
div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 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ải không
1 hàng nữa có 2 cột đều nhau trong
Kết quả như hình minh họa sau
2. 7. Create a column has width variable with a variable
Bạn có thể sử dụng các lớp crossorigin0 để định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng
<divlớp = "row justify-content-md-center">
Cột tráidivlớp = "col-md-3">Cột tráidiv>
divlớp = "col-md-auto">Cột có chiều rộng biến đổidiv>
Như bạn thấy, trong một hàng chúng ta có 2 cột. divlớp = "col>Cột phảidiv>
div>
<divlớp = "row">
Cột tráidivlớp = "col">Cột tráidiv>
divlớp = "col-auto">Cột có chiều rộng biến đổidiv>
Như bạn thấy, trong một hàng chúng ta có 2 cột. divlớp = "col>Cột phảidiv>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 4 phần
Tuy nhiên, trong cột phải còn được chia thành 2 hàng. đầu, giữa và dưới cùng của vùng chứa
<divlớp = "row align-items-start">
1 hàng chiếm toàn bộ cột phảidivlớp="col">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
div>
<divlớp = "row align-items-center">
1 hàng chiếm toàn bộ cột phảidivlớp="col">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
div>
<divlớp = "row align-items-end">
1 hàng chiếm toàn bộ cột phảidivlớp="col">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 4 phần
<divlớp = "row">
1 hàng chiếm toàn bộ cột phảidivlớp="col align-self-start">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col align-self-center">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Cột bên trái sử dụng 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 sử dụng 4 phần
<divlớp = "row justify-content-start">
1 hàng chiếm toàn bộ cột phảidivlớp="col-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-4">Cột 2div>
div>
<divlớp = "row justify-content-center">
1 hàng chiếm toàn bộ cột phảidivlớp="col-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-4">Cột 2div>
div>
<divlớp = "row justify-content-end">
1 hàng chiếm toàn bộ cột phảidivlớp="col-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-4">Cột 2div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 4 phần
<divlớp = "row justify-content-around">
1 hàng chiếm toàn bộ cột phảidivlớp="col-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-4">Cột 2div>
div>
<divlớp = "row justify-content-between">
1 hàng chiếm toàn bộ cột phảidivlớp="col-2">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-2">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
2. 7. Tạo cột có chiều rộng biến đổi với biếndivclass ="col-2">Cột 4div>
div>
Cột tráidiv>
Như bạn thấy, trong một hàng chúng ta có 2 cột. flexbox để biết cơ sở điều chỉnh các mục flex.
Left used 8 section
Cột phải sử dụng 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ải không
<divlớp = "row">
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col order-last">Cột đầu nhưng xếp ở cuốidiv>
Kết quả như hình minh họa sau. divlớp = "col>Cột thứ 2, nhưng không có thứ tựdiv>
2. 7. Tạo cột có chiều rộng biến đổi với biếndivclass ="col order-first">Cột cuối, nhưng được đặt ở đầudiv>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 4 phần
<divlớp = "row">
1 hàng chiếm toàn bộ cột phảidivlớp="col order-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col">Cột 2div>
Kết quả như hình minh họa sau. divlớp = "col>Cột 3div>
2. 7. Tạo cột có chiều rộng biến đổi với biếndivclass ="col order-3">Cột 4div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
Cột phải sử dụng 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ải không
1 hàng nữa có 2 cột đều nhau trong
Bạn có thể sử dụng các lớp crossorigin0 để định kích thước các cột dựa trên chiều rộng tự nhiên của nội dung của chúng
<divlớp = "row">
<divlớp = "col-md-8 offset-md-4">
col-md-8 bù-md-4
div>
div>
Cột tráidiv>
Như bạn đã thấy, trong một hàng chúng ta có 2 cột
Left used 8 section
<divlớp = "container">
<divlớp = "row">
1 hàng chiếm toàn bộ cột phảidivlớp="col-md-4">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-md-4 ml-auto">Cột 2div>
div>
<divlớp = "row">
1 hàng chiếm toàn bộ cột phảidivlớp="col-auto mr-auto">Cột 1div>
1 hàng nữa có 2 cột đều nhau bên trongdivlớp="col-auto">Cột 2div>
div>
Cột tráidiv>
Như bạn thấy, trong một hàng chúng ta có 2 cột. 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 cột dựa trên nội dung.
Left used 8 section
Cột phải sử dụng 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
This is a ví dụ
<divlớp = "row no-gutters">
Cột 1divlớp = "col-4">Cột 1div>
Cột 2divlớp = "col-4">Cột 2div>
Cột 3divlớp = "col-4">Cột 3div>
div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này
But when there are. 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ó thể tạo các cột có chiều rộng bằng cách kéo dài nhiều hàng bằng cách thêm div vào lớp .txt3 ở nơi bạn cũng 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
<divlớp = "row">
Cột 1divlớp = "col">Cột 1div>
Cột 2divlớp = "col">Cột 2div>
Cột 3divlớp = "col">Cột 3div>
divlớp = "col">Cột 4div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này. divlớp = "col>Cột 5div>
div>
div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này
But when there are. no-gutters thì khoảng trống này bị loại bỏ
<divlớp = "row">
Cột 1divlớp = "col">Cột 1div>
Cột 2divlớp = "col">Cột 2div>
<divlớp = "w-100">div>
divlớp = "col">Cột 4div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này. divlớp = "col>Cột 5div>
div>
div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này
But when there are. 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ó thể tạo các cột có chiều rộng bằng cách kéo dài nhiều hàng bằng cách thêm div vào lớp .txt3 ở nơi bạn cũng 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
Cột 4
Cột 5
Shows as after
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 lấy đó là
#3. SỬ DỤNG head4 VÀ 5h2> Use. vùng chứa h2>
Ở trên, bạn đã biết là Bootstrap yêu cầu một phần tử để bao bọc trang web nội dung. p> Chiều rộng số định, tùy thuộc theo kích thước màn hình p>
div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này
But when there are. 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 lấy đó là
<divlớp = "container-fluid">
#3. SỬ DỤNG head4 VÀ 5h2> Use. chất lỏng chứa h2>
Ở trên, bạn đã biết là Bootstrap yêu cầu một phần tử để bao bọc trang web nội dung. p> Chiều rộng luôn bằng 100% p>
div>
Bình thường, nếu không có lớp. no-gutters thì chúng ta sẽ có kết quả tương tự như thế này
But when there are. 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ó thể tạo các cột có chiều rộng bằng cách kéo dài nhiều hàng bằng cách thêm một div vào lớp cũng như vậy. txt3 ở nơi bạn muốn ngắt các cộ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 web đáp ứng sử dụng Bootstrap, cách chia bố cục với hệ thống lưới của bootstrap và 2 lớp quan trọng là head4 và 5
Cột 4
Cột 5
Shows as after. Bootstrap 4, sau đó sử dụng CSS thuần, Flexbox. vừa giúp bạn tránh khung phụ thuộc vừa nâng cao giá trị của chính bạn
