Trong bài giảng trước,
chúng tôi đã tìm hiểu về thiết kế đáp ứng.
Chúng tôi cũng đề cập ngắn gọn rằng hệ thống lưới Bootstrap được
thiết kế để hỗ trợ các trang web đáp ứng.
Làm thế nào để Bootstraps grid hỗ trợ điều này?
Và chính xác những gì Bootstrap lưới liên quan đến,
cho phép chúng tôi thiết kế các trang web đáp ứng?
Hãy nói một chút chi tiết hơn về hệ thống lưới Bootstrap,
và làm thế nào nó hỗ trợ đáp ứng tiếp theo.
Chúng tôi đã thấy việc sử dụng thẻ meta viewport trong bài học trước đó,
khi chúng tôi đã thực hiện bài tập ban đầu về việc thiết lập Bootstrap trong trang index.html của chúng tôi.
Tôi ngắn gọn đề cập đến dòng đặc biệt này trong mã sau đó.
Hãy cố gắng hiểu lý do tại sao chúng tôi sử dụng điều này trong trang index.html của chúng tôi.
Những gì chúng tôi đang chỉ định ở đây là,
khi trang web của chúng tôi đang được trình duyệt hiển thị trong một thiết bị cụ thể, sau đó,
hiển thị của chúng trong trình duyệt sẽ tính đến kích thước của màn hình và
tự động điều chỉnh việc hiển thị trang với chiều rộng màn hình thiết bị.
Bằng cách đó, sau đó chúng tôi có các lớp học đáp ứng, các
lớp CSS được xây dựng trong khuôn khổ giao diện người dùng của chúng tôi,
sau đó sẽ đảm bảo rằng trang web của chúng tôi được
kết xuất chính xác cho kích thước màn hình cụ thể.
Đây là nơi mà hệ thống lưới Bootstrap đến để giải cứu chúng tôi và
cho phép chúng tôi thiết kế các trang web đáp ứng.
Vì vậy, một lần nữa, nhấn mạnh điểm này,
lưới Bootstrap được thiết kế để đáp ứng.
Bạn đã thấy điều này có nghĩa là gì trong bài giảng trước đó,
và điện thoại di động đầu tiên, mà chúng tôi đã thảo luận trong bài giảng trước đó và sau đó chất lỏng,
tự động thích nghi với chiều rộng màn hình.
Lưới Bootstrap tận dụng cách bố trí CSS flexbox.
Bố cục CSS flexbox đang được hỗ trợ bởi
các phiên bản gần đây hơn của các trình duyệt khác nhau,
cho phép các tùy chọn bố cục đơn giản hơn và linh hoạt hơn trong CSS.
Bây giờ, các cuộc thảo luận thực tế về
cách bố trí CSS flexbox hoạt động là vượt quá phạm vi của khóa học này,
chúng tôi sẽ hạn chế bản thân như thế nào CSS flexbox đang được
thúc đẩy bởi Bootstrap cho hệ thống lưới của nó.
Trước đó Bootstrap đã có hệ thống lưới riêng của mình mà là predating bố cục CSS flexbox,
nhưng phiên bản mới nhất của Bootstrap
đã làm cho CSS flexbox bố cục làm tiêu chuẩn cho lưới Bootstrap.
Bố cục flexbox này có thể dễ dàng xử lý
nội dung động và có thể thích ứng các container với nội dung động,
và cũng có thể dễ dàng thích ứng với kích thước không xác
định của nội dung thực tế kèm theo bên trong container.
Bố cục flexbox cũng hỗ trợ bố cục theo hướng bất khả tri.
Những gì bố trí flexbox mang đến cho lưới Bootstrap là khả năng
thực hiện dễ dàng căn chỉnh theo chiều dọc của nội dung trong một phần tử cha.
Chúng ta sẽ thấy việc sử dụng điều này trong bài tập sau.
Ngoài ra, nó cho phép dễ dàng sắp xếp lại nội dung
trên các thiết bị khác nhau và độ phân giải màn hình với sự trợ giúp của các truy vấn phương tiện.
Một lần nữa chúng ta sẽ thấy một chút về điều đó trong bài tập về cách Bootstrap
tận dụng điều đó để hỗ trợ những cách thú vị để đặt ra nội dung.
Ngoài ra, nội dung đó chính nó,
các thùng chứa nội dung cũng có thể được thiết kế để có chiều cao bằng nhau cột sao cho
các thùng chứa nội dung có chiều cao lớn nhất xác
định chiều cao của tất cả các thùng chứa còn lại được đặt ra trong cùng một hàng.
Bây giờ chúng ta hãy nói thêm một chút chi tiết về lưới Bootstrap và làm thế nào nó thực sự hoạt động.
Cách lưới Bootstrap hoạt động,
là bằng cách áp dụng một container cộng với lớp ngoài cùng.
Chúng tôi có thể sử dụng một div để
xác định các yếu tố mà chúng tôi áp dụng các lớp container nói chung.
Thùng chứa là đơn vị ngoài cùng trong đó nội dung thực tế được đặt ra.
Bootstrap hỗ trợ cả lớp chứa đó là một bố cục chiều rộng cố định,
có nghĩa là nội dung chính nó bị giới hạn ở một chiều rộng cố định trên màn hình.
Lớp chứa này cho phép chiều rộng cố định này tự động thích ứng với
kích thước của màn hình bằng cách sử dụng các truy vấn phương tiện để đó
là nơi thiết kế đáp ứng đi vào giải cứu của chúng tôi.
Sau đó, chúng ta sẽ thấy cách container này sẽ điều chỉnh theo kích thước màn hình khác nhau.
Bây giờ, chúng tôi cũng có sự linh hoạt của việc sử dụng trong
các chất lỏng container cổ điển khác cho
phép container tự động thích ứng với kích thước của màn hình.
Nhưng thùng chứa chiều rộng cố định,
sửa chữa kích thước của chiều rộng bố trí thực tế.
Bên trong container, nội dung sẽ được đặt ra dưới dạng hàng,
vì vậy thông thường những gì chúng tôi sẽ làm là bên trong
và ra khỏi div mà chúng tôi áp dụng các lớp container, chúng tôi
sẽ bao gồm một div bên trong mà chúng tôi sẽ áp dụng các lớp hàng.
Vì vậy, nội dung chính nó sẽ được chia theo chiều dọc thành nhiều hàng.
Và một khi điều này được chia thành các hàng, trong mỗi hàng,
sau đó bạn có thể bố trí nội dung bằng cách sử dụng các cột.
Vì vậy, mỗi hàng trong Bootstrap,
sẽ được chia thành 12 cột có kích thước bằng nhau.
Bây giờ, bạn có thể thiết kế nội dung của mình để chiếm bất kỳ số nào trong 12 cột này.
Vì vậy, và thực tế là nội dung chính nó thích nghi với
chiều rộng màn hình và hàng chính nó được
bao bọc bên trong thùng chứa sẽ tự động thích ứng với chiều rộng màn hình,
cũng như các cột,
12 cột sẽ được xác định.
Chiều rộng của chúng sẽ được xác định bởi hàng của chính nó.
Vì vậy, điều đó có nghĩa là đối với một kích cỡ màn hình khác nhau,
bất kỳ nội dung nào bạn bố trí tất cả 12 cột
đó sẽ tự động điều chỉnh chính nó theo chiều rộng được cho phép đối với nội dung.
Vì vậy, đây là cách đáp ứng được xây dựng
vào lưới Bootstrap cách đặt ra nội dung.
Vì vậy, chính xác làm thế nào để chúng ta bố trí nội dung?
Chúng ta sẽ nói về điều đó trong vài slide tiếp theo.
Các Bootstrap lưới chính nó,
làm cho có sẵn cho chúng tôi năm lớp để xác định kích thước màn hình khác nhau theo mặc định.
Có một lớp mặc định nhắm mục tiêu tất cả các kích thước màn hình,
bắt đầu từ quá nhỏ đến quá lớn.
Vì vậy, toàn bộ phạm vi của màn hình chiều rộng theo thuật ngữ Bootstrap,
được chia thành các
kích thước màn hình nhỏ, nhỏ, trung bình, lớn và cực lớn.
Sau đó, nhìn vào cách các lớp khác nhau
của kích thước màn hình được xác định chi tiết trong một trong các trang trình bày sau này.
Vì vậy, trong mã của bạn,
bạn sẽ xác định đặc điểm kỹ thuật bố trí bằng cách
chỉ định sm cho kích thước màn hình nhỏ,
md cho trung bình, lg cho lớn,
và xx cho kích thước màn hình lớn thêm.
Vì vậy, khi bạn thực hiện bố cục,
như chúng ta đã thấy trong slide trước đó,
mỗi hàng trong một hệ thống lưới Bootstrap được chia thành 12 cột.
Bây giờ, chúng ta sẽ bố trí nội dung bằng cách sử dụng những gì được gọi là các lớp cột.
Đối với các lớp cột,
chúng ta có thể xác định cách bố trí được thực hiện cho độ rộng màn hình khác nhau.
Xem chi tiết của điều này trong các trang chiếu tiếp theo sau.
Nhưng hãy để tôi nhanh chóng thu hút sự chú ý của bạn đến cách chúng tôi chỉ định kích thước cột.
Họ có thể xác định kích thước cột như col,
đó là một trong những lớp họ sẽ nói col-sm cho
nhỏ và col-md cho trung bình và lớn và thêm lớn và như vậy.
Bây giờ, các lớp cột này được sử dụng để
xác định chính xác bao nhiêu cột trong một hàng sẽ mỗi phần nội dung chiếm.
Làm thế nào để làm việc này?
Chúng ta sẽ thấy điều đó trong slide tiếp theo.
Vì vậy, quay trở lại Bootstrap Grid của chúng tôi,
giả sử chúng tôi có một phần nội dung và chúng tôi muốn đặt ra sự bình an của nội dung.
Chúng ta có thể xác định rằng nội dung được bao bọc bên trong một div khác,
mà chúng ta áp dụng lớp cột,
như ví dụ, col-sm-5.
Vì vậy, trong trường hợp đó, những gì chúng tôi đang chỉ định là cho kích thước màn hình nhỏ đến cực lớn,
phần nội dung này sẽ chiếm năm cột trong số 12 cột đó.
Bây giờ, bạn sẽ ngay lập tức hỏi tôi,
những gì về việc hút thuốc thêm?
Nếu nó không được chỉ định rõ ràng cho lockette thông minh thêm
bởi toàn bộ chiều rộng của 12 cột,
họ có thể xác định rõ ràng từ
phạm vi mà bố trí cột sẽ chiếm bao nhiêu cột.
Vì vậy, trong trường hợp đặc biệt này,
khi tôi chỉ định tôi chỉ gọi chúng là sm-5, những
gì tôi có nghĩa là nội dung đặc biệt này được bao bọc bên trong những div,
sẽ chiếm năm cột cho tất cả các kích thước màn hình,
từ nhỏ tất cả các cách để thêm lớn.
Bây giờ, chúng ta thấy rằng trong số 12 cột,
chúng ta đã chiếm năm cột.
Vẫn còn 7 cột nữa.
Tôi có thể lấy một phần của nội dung và sau đó vị trí nó ở bên phải của điều này,
bằng cách bảo vệ một div và sau đó áp dụng cột sm-7.
Bây giờ, trong trường hợp này,
bạn thấy rằng 5 cộng 7 bằng 12.
Vì vậy, hai phần nội dung được bao bọc trong hai divs,
bây giờ sẽ được định vị cạnh nhau,
và tổng số chúng chiếm toàn bộ chiều rộng cột 12.
Vì vậy, đây là cách chúng ta có thể chỉ định và làm việc với 12 cột
trong việc xác định bố trí của tầng hiện tại.
Với việc sử dụng bố trí hộp CSS flex,
Bootstrap cũng hỗ trợ những gì được gọi là cột tự động bố trí.
Vì vậy, trong trường hợp này,
tôi chỉ có thể chỉ định
cột sm mà không xác định có bao nhiêu cột nó được cho là chiếm.
Nhưng trong trường hợp tôi chỉ định ba Doobs chiều rộng cột sm trong heml của tôi 5,
sau đó lưới bootstrap sẽ tự động định vị các nội dung này bên trong những divs
, cạnh nhau, do
đó, mỗi người trong số họ được một phần ba tổng chiều rộng.
Vì vậy, vì chúng ta có 12 cột ở đây,
mỗi cột trong ba sẽ nhận được bốn cột mỗi cột.
Và điều này được tự động chăm sóc bởi cơ chế bố trí bootstraps.
Bây giờ, chúng ta có thể xác
định rõ ràng số lượng cột một phần nội dung cụ thể chiếm.
Vì vậy, ví dụ, giả sử tôi chỉ định ba lớp cột,
nhưng một trong những giữa tôi chỉ định cột sm 6.
Sau đó, điều xảy ra là, khi bootstrap thực hiện bố cục, phần
giữa sẽ chiếm sáu cột,
và sau đó phần bên trái và bên phải của nội dung sẽ chiếm bất cứ thứ gì còn lại.
Vì vậy, trong số 12 cột mà chúng tôi có,
nếu 6 cột chiếm bởi phần giữa của nội dung,
sau đó chúng tôi đã để lại với chúng tôi 6 cột nữa và đó sẽ được
chia đều giữa nội dung và hai bên của cột giữa này.
Vì vậy, mỗi người trong số họ sẽ nhận được các cột trống của không gian mỗi.
Vì vậy, đó là cách bố trí được tự động thực hiện với Bootstrap.
Trong bài tập, chúng ta sẽ thấy các kết hợp khác nhau của việc sử dụng các loại
thông số kỹ thuật này của bao nhiêu cột mỗi phần nội dung sẽ chiếm trong bố cục màu sắc.
Bảng này tóm tắt cách Bootstrap xử lý
lưới màn hình khác nhau và tương ứng cách bạn xác định các lưới màn hình này.
Vì vậy, như tôi đã chỉ định trước đó,
Bootstrap chia toàn bộ phạm vi chiều rộng màn hình thành 5 lớp.
Các màn hình nhỏ phụ là những màn hình có lưới dưới 776 pixel.
Màn hình nhỏ là những màn hình nằm giữa 576 và dưới 768 pixel.
Màn hình trung bình từ 768 đến 992,
lớn từ 992 đến 1200 và bất cứ điều gì khoảng 1200 pixel chiều rộng
được coi là một màn hình lớn thêm.
Vì vậy, đây là cách mặc định Bootstrap Grid được cấu hình.
Bây giờ, một khi bạn cảm thấy thoải mái với Bootstrap,
bạn cũng có thể tự cấu hình các bộ phận này.
Nhưng đối với khóa học này,
chúng tôi sẽ ở lại với cấu hình mặc định mà bootstrap hỗ trợ.
Bây giờ, hành vi lưới trong trường hợp này,
là bất cứ điều gì được đặt ra cho thêm nhỏ,
sẽ nằm ngang ở mọi thời điểm,
đối với các bit cao hơn họ sẽ được thu gọn để 2start chiều rộng,
nhưng ngang về các điểm ngắt.
Chúng ta sẽ thấy cách này hoạt động trong một thời gian ngắn với một số ví dụ.
Bây giờ, chúng tôi đã thấy việc sử dụng các container trong slide trước đó.
Đối với màn hình nhỏ thêm,
chiều rộng thùng chứa được tự động xác định bởi chiều rộng màn hình.
Nhưng đối với nhỏ, trung bình,
lớn và lớn,
chiều rộng thùng chứa được quy định.
Vì vậy, nếu bạn sử dụng div với một container lớp,
sau đó cho màn hình nhỏ nó là 540 pixel.
Vì vậy, bạn sẽ nhận thấy rằng nếu bạn có chiều rộng màn hình giữa 576 đến 768,
nội dung của bạn sẽ được bố trí trong 540 pixel,
sẽ được tập trung vào chiều rộng màn hình.
Vì vậy, không gian còn sót lại sẽ được để lại dưới dạng lề ở hai bên của nội dung này.
Tương tự như vậy, đối với môi trường nó là 720 pixel và vân vân.
Bây giờ, sau đó bạn chỉ định có bao nhiêu cột mỗi nội dung chiếm.
Sau đó, các tiền tố lớp cột mà bạn sẽ sử dụng
là.col cho thêm nhỏ, .col-sm cho nhỏ,
tất cả các cách để thêm lớn.
Nếu bạn chỉ định một cái gì đó với.col-md,
sau đó áp dụng cho các màn hình trung bình đến siêu lớn.
Vì vậy, bất cứ khi nào bạn chỉ định bất kỳ col- và một số số,
sau đó áp dụng cho rằng kích thước màn hình cụ thể và tất cả mọi thứ về kích thước màn hình đó.
Bây giờ, trong tất cả các trường hợp kích thước màn hình,
số cột được xác định là 12 cột.
Lưới trong trường hợp bootstrap được thiết kế là 12 cột và đó là cấu hình,
nhưng giá trị mặc định là 12 cột.
Lý do để chọn 12 là 12 là một bội số tốt của hai, ba,
bốn và như vậy.
Vì vậy, nó cung cấp cho bạn rất nhiều sự linh hoạt
về số cột bạn chọn để bố trí nội dung của bạn.
Giữa mỗi cột, vì vậy nếu bạn đặt
ra hai phần nội dung cạnh nhau với divs của họ,
giữa hai phần nội dung họ sẽ là một máng xối nhỏ sẽ được để lại.
Khoảng trắng trống mà sẽ được để lại chiều rộng của máng xối,
mà chỉ là 30 pixel theo mặc định.
Vì vậy, 15 pixel là từ một phần nội dung và 15 pixel từ phần nội dung khác.
SumTotal cùng 30 pixel
khoảng trắng sẽ được để lại giữa hai phần nội dung.
Hãy suy nghĩ về cách bố cục cột báo
được thực hiện và bạn bắt đầu thấy sự tương ứng giữa
bố cục cột báo được thực hiện và cách
lưới của bootstrap thực hiện bố cục nội dung trên sân đó.
Lưới của Bootastrap cho phép bạn thực hiện nội dung cấp độ tiếp theo,
vì vậy bạn có thể kèm theo nội dung bên trong nội dung và sau đó thực hiện bố cục nội dung lồng nhau.
Ngoài ra, nó hỗ trợ bù đắp.
Chúng ta sẽ thấy việc sử dụng các bù đắp cũng trong một số ví dụ sau đó.
Vì vậy, chúng ta hãy nhìn vào ví dụ đầu tiên của chúng tôi về cách bạn sẽ áp dụng các lớp cột bootstraps,
và làm thế nào họ sẽ thực sự được hiển thị trên các kích thước màn hình khác nhau.
Dưới đây là một ví dụ về một tình huống mà tôi áp dụng cho hai divs,
cột gạch nối 12 và sau đó cột gạch nối sm năm cho
phần màu đỏ của nội dung và cho
một trong những khác tôi áp dụng cột gạch nối 12 và cột sm bảy.
Vì vậy, cách nội dung này sẽ được bố trí là cho
các màn hình nhỏ thêm, hai phần nội dung sẽ được xếp chồng lên nhau trên đầu kia.
Vì vậy, màu đỏ sẽ được xếp chồng lên nhau trên đầu trang của biển màu xanh lá cây một.
Nhưng đối với màn hình nhỏ đến lớn,
hai phần nội dung sẽ được đặt cạnh nhau.
Lý do cho điều này là bởi vì chúng tôi đã nói cột sm năm và cột sm bảy cho hai.
Vì vậy, đối với nhỏ đến lớn, chúng được đặt cạnh nhau để
nội dung màu đỏ sẽ chiếm
5 cột ngoài cùng bên trái và nội dung màu xanh biển sẽ chiếm 7 cột bên phải của hàng của bạn,
tất cả các cách từ kích thước màn hình nhỏ đến cực lớn.
Vì vậy, đây là cách chúng tôi sẽ chỉ định bố cục nội dung cho kích thước màn hình khác nhau.
Bootstrap cũng cung cấp các lớp học bổ sung được gọi là
các lớp học nối thứ tự cho phép bạn sắp xếp lại nội dung trên màn hình.
Vì vậy, ví dụ, nếu bạn áp dụng một thứ tự sm đầu tiên,
một thứ tự một số lớp cuối cùng để divs,
như được hiển thị trong ví dụ ở đây, trong trường hợp này,
div mà bạn áp dụng thứ tự sm cuối cùng sẽ được đẩy sang
phía bên phải của màn hình và thứ tự
sm div đầu tiên sẽ được đẩy sang phía bên trái của màn hình.
Vì vậy, áp dụng các lớp thứ tự này cho phép bạn sắp xếp lại nội dung trên kịch bản.
Không chỉ thế này, thứ tự sm cũng cho phép bạn chỉ định cùng một thứ tự sm một để
đặt hàng sm 12 để xác định thứ tự mà nội dung cần được hiển thị trên màn hình.
Vì vậy, bằng cách sử dụng một số lớn hơn,
bạn có thể dịch chuyển nội dung sang phía bên phải của
hàng và một số nhỏ hơn sẽ dịch chuyển nội dung sang phía bên trái của hàng.
Chúng ta sẽ thấy một ví dụ về điều này cũng trong bài tập.
Sự hỗ trợ thú vị hỗn hợp mà Bootstrap Grid mang lại với việc sử dụng
bố cục Flexbox là sự liên kết theo chiều dọc của nội dung.
Các phiên bản Bootstrap trước đó,
như Bootstrap 3 và trước đó,
không có khả năng làm căn chỉnh theo chiều dọc của nội dung.
Với việc sử dụng Flexbox để thiết kế Bootstrap Grid trong Bootstrap four,
chúng tôi có được sự linh hoạt mà CSS Flexbox mang lại trong điều kiện làm căn chỉnh dọc.
Vì vậy, nếu bạn muốn nội dung được trung tâm theo chiều dọc,
sau đó đến hàng,
bạn sẽ áp dụng các lớp được gọi là “align items center”.
Vì vậy, trong trường hợp này, bất kể nội dung được đặt ra,
sẽ được đặt ra thẳng đứng liên kết trong hàng cụ thể đó.
Vì vậy, nội dung mà chiếm
chiều cao lớn nhất sẽ là một trong đó những người còn lại sẽ được
căn chỉnh khi nó được đặt ra trong hàng đó hoặc nếu bạn xác định trước chiều cao của hàng,
sau đó tất cả các nội dung sẽ được tập trung theo chiều dọc trong hàng cụ thể đó ở đó.
Không chỉ vậy, Bootstrap của Grid còn hỗ trợ sự liên kết ngang của nội dung.
Hãy nhìn vào một ví dụ.
Vì vậy, nếu bạn chỉ định nội dung của bạn như thế này.
Nói, bạn có ba cột và một trong những đầu tiên bạn chỉ định div class cột ba,
sau đó là giữa một bạn sẽ nói div class cột tự động.
Tôi sẽ quay trở lại cột tự động trong một thời gian ngắn.
Và một trong những bên phải nói cột lớp div 3.
Vì vậy, trong trường hợp này, những gì chúng tôi đang chỉ định là
các phần bên trái và bên phải của nội dung sẽ chiếm ba cột mỗi.
Ở giữa, khi tôi nói, “cột tự động”,
nó có nghĩa là số cột mà div cụ thể này
chiếm sẽ được tự động xác định bởi nội dung được bao bọc bên trong đó.
Vì vậy, dựa trên nội dung,
số cột bị chiếm bởi div sẽ tự động điều chỉnh chính nó.
Trong trường hợp cụ thể này, trong cách bố trí này,
nội dung cụ thể đó đang được chứa trong bốn cột.
Vì vậy, bây giờ bạn có bốn cột được sử dụng bởi div trung tâm,
ba cột bên trái và ba cột bên phải.
Vì vậy, tổng hợp tổng cộng, bạn có 10 cột.
Vì vậy, bạn có hai cột được để trống.
Bây giờ, nếu bạn chỉ định cho hàng,
bạn chỉ định biện minh cho trung tâm nội dung, sau đó,
toàn bộ nội dung trong hàng cụ thể này sẽ được
căn giữa đối với hàng ngang.
Bạn cũng có thể có nội dung trái căn cứ,
phải căn cứ và một vài tùy chọn khác.
Chi tiết nằm trong tài liệu bootstraps.
Bootstrap cũng cho phép bạn thực hiện bù đắp cột.
Làm thế nào để làm việc này? Hãy nhìn vào một ví dụ.
Trong cột này bù đắp,
chúng ta có thể chỉ định một phần của nội dung,
thêm vào đó nếu chúng ta áp dụng các lớp như offset gạch nối sm một.
Những gì chúng tôi đang chỉ định là cho các màn hình nhỏ đến lớn,
phần nội dung này nên được dịch chuyển sang phải bởi một cột.
Vì vậy, khi nội dung này được đặt ra, như bạn có thể thấy,
cột ngoài cùng bên trái được để trống và nội dung được dịch chuyển sang phải bởi một cột.
Và bạn có thể bố trí nội dung còn lại ở phía bên phải.
Vì vậy, tổng cộng, bạn có thể thấy rằng hai divs sẽ
chiếm 11 cột nhưng một cột offsetted ở bên phải.
Vì vậy, đó là cách chúng ta có thể kiểm soát bố cục của nội dung bằng cách sử dụng một cột bù.
Vì vậy, như bạn có thể thấy,
sử dụng các thông số kỹ thuật kích thước cột
,
sự liên kết dọc và ngang, bù đắp, đẩy và kéo,
và flex đầu tiên và flex cuối cùng,
chúng tôi có thể nhận được rất nhiều kiểm soát về cách chúng tôi bố trí
nội dung cho độ rộng màn hình khác nhau và kích thước màn hình khác nhau .
Bootstrap đi xa hơn nữa bằng cách cho phép bạn làm tổ nội dung bên trong divs.
Vì vậy, ví dụ, nếu bạn chỉ định hai divs,
như bạn thấy với cột sm năm và cột sm bảy,
hai nội dung sẽ được đặt ra như đã thấy ở đây.
Bây giờ, bên trong div bên phải,
tôi một lần nữa có thể đi vào và chia
chiều rộng của div thành một hàng và sau đó hàng đó sẽ tự động cung cấp cho tôi
một 12 cột cho phần đó của màn hình và sau đó tôi có thể làm bố trí bằng cách sử dụng làm
tổ của divs và làm bố trí cho các phần khác nhau của cột đó .
Vì vậy, làm tổ như thế này,
mang đến cho bạn sự linh hoạt hơn trong cách bạn bố trí nội dung trong quảng cáo của bạn.
Với tất cả các cuộc thảo luận về Bootstrap Grid System và cách
Bootstrap Grid hỗ trợ nhiều cách khác nhau
để đặt ra nội dung, chúng ta sẽ bây giờ, chuyển sang tập tiếp theo của chúng tôi các bài tập.
Chúng tôi sẽ áp dụng lưới Bootstrap để trang index.html của chúng tôi
để làm bố trí nội dung bên trong hoặc trang index.html.
Chúng tôi cũng sẽ sử dụng một số lớp CSS tùy chỉnh.