Bootstrap chỉ là css?

Là lập trình viên web Full stack hay là lập trình viên Front end thì các bạn đều cần 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 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

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

Mình 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

    

    

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 ý #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

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

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 .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

Tải xuống phiên bản đã được biên dịch bao gồm 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 (bootstrap.*), cũng như CSS và JS đã biên dịch và rút gọn (bootstrap.min.*)

Use files bootstrap.min.css and 0

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

ĐƯỢ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

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

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 1 để 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

• Tương tự, bạn có thể sử dụng các lớp 2 để 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

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

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

• Và các lớp 5 cho 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 2 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 3 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 4 hoặc 5

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 head3

• Sau đó tạo các hàng bên trong vùng chứa bằng cách sử dụng lớp head4 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 1, 2, 3, 4 và 5

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)

    

        

Cột trái

        

Cột phải

    

        

Cột trái

        

Cột phải

    

        

Cột trái

        

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 (integrity0 và 1) và chỉ các cột mới có thể là con ngay lập tức của các hàng (head4). Các hàng phải được đặt bên trong head3 (chiều rộng cố định) hoặc integrity4 (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à integrity5) 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

Nó hoạt động trong bảng máy tính ở chế độ ngang nếu độ phân giải màn hình lớn hơn hoặc bằng 992 pixel (ví dụ:. Apple ipad)

Tuy nhiên, ở chế độ dọc, các cột lưới sẽ nằm ngang như bình thường

        

Cột trái

        

Keep a

        

Cột phải

    

        

Cột trái

        

Keep a

        

Cột phải

    

        

Cột trái

        

Keep a

        

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

2. 3. Tự động bố trí địa phươ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 integrity0 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ó

    

        

Cột 1

        

Cột 2

    

        

Cột 1

        

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ử kéo ví dụ sau, bạn sẽ thấy các cột trong một hàng có lớp integrity0 sẽ tự động thay đổi chiều rộng bằng nhau

    

        

Cột 1

        

Cột 2

    

        

Cột 1

        

Cột 2

        

Cột 3

Kết quả

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

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 2

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

        

Cột 1

        

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à integrity5) là

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

Div thứ ba đó có lớp crossorigin0 là cột bổ sung trong một head4

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 crossorigin2, crossorigin3 và crossorigin2 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 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?

Trước tiên, hãy bắt đầu với thiết bị đích chính

Giả sử mục tiêu chính của thiết bị là máy tính xách tay hoặc máy tính để bàn thông thường

Vì bố cục cục bộ máy tính xách tay của chúng tôi có 3 cột và 4 hàng, tức là bố cục lưới 3x4, nên đoạn mã HTML để tạo cấu trúc lưới như vậy sẽ giống như thế này

        

Hộp 1

        

Hộp 2

        

Hộp 3

        

Hộp 4

        

Hộp 5

        

Hộp 6

        

Hộp 7

        

Hộp 8

        

Hộp 9

        

Hộp 10

        

Hộp 11

        

Hộp 12

Nếu bạn thấy kết quả của ví dụ trong máy tính xách tay hoặc máy tính để bàn có chiều rộng màn hình hoặc chế độ xem lớn hơn hoặc bằng 992px nhưng nhỏ hơn 1200px, bạn sẽ thấy bố cục có 4 hàng trong mỗi hàng đó.

Xin lưu ý, ở đây mình áp dụng lớp. col-lg-4. Có nghĩa là mình áp dụng lớp này cho màn hình lớn (Từ 992px đến nhỏ hơn 1200px)

Mỗi cột này sẽ chiếm 4 phần của 1 hàng. Vì vậy nếu có 3 cột tức là 3 + 3 + 3 = 12 thì nó chiếm toàn quyền một hàng

Từ cột thứ 4 trở đi sẽ được xuống hàng

Bây giờ, màn hình chính đã hoàn thành bố cục cục bộ, đã đến lúc tùy chỉnh bố cục cục bộ cho các thiết bị khác

Trước tiên, hãy bắt đầu bằng cách tùy chỉnh nó cho thiết bị máy tính bảng. Vì bên trong bảng máy tính, bố cục cục bộ của chúng tôi hiển thị dưới dạng lưới 2x6 (tức là 2 cột và 6 hàng)

Vì thế, hãy tiếp tục và thêm lớp crossorigin5 trên mỗi cột, như thế này

        

Hộp 1

        

Hộp 2

        

Hộp 3

        

Hộp 4

        

Hộp 5

        

Hộp 6

        

Hộp 7

        

Hộp 8

        

Hộp 9

        

Hộp 10

        

Hộp 11

        

Hộp 12

> ghim. Để 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 tăng 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 cục bộ 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 crossorigin6 trên mỗi cột

Vì mỗi hàng trong bố cục cục bộ thiết bị cực lớn của chúng ta chứa 4 cột. Đây là mã 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ộp 5

        

Hộp 6

        

Hộp 7

        

Hộp 8

        

Hộp 9

        

Hộp 10

        

Hộp 11

        

Hộp 12

> ghim. Theo hình minh họa trên, không cần thiết phải 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 1 hoặc 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

        

Cột trái

            

                

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 crossorigin9 để xác định kích thước của các cột dựa trên chiều rộng tự nhiên của nội dung của họ

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

    

        

Cột trái

        

Cột có chiều rộng biến đổi

        

Cột phải

        

Cột trái

        

Cột có chiều rộng biến đổi

        

Cột phải

Kết quả chúng ta giống như thế này

2. 8. Căn chỉnh các cột trong Bootstrap

Bạn có thể sử dụng tiện ích căn chỉnh flexbox để chỉnh sửa các cột lưới theo chiều dọc và chiều ngang trong vùng chứa. Hãy thử các ví dụ sau để hiểu cách hoạt động

Căn chỉnh theo chiều dọc của các cột

Bạn có thể sử dụng các lớp .html0, .html1 và .html2 để điều chỉnh các cột lưới theo chiều dọc tương ứng với các vị trí ở đầu, giữa và dưới cùng của vùng chứa

    

        

Cột 1

        

Cột 2

        

Cột 3

    

        

Cột 1

        

Cột 2

        

Cột 3

    

        

Cột 1

        

Cột 2

        

Cột 3

Kết quả ta sẽ tương tự như thế này

Như bạn thấy, vùng xám nhạt là vùng chứa

Khi sử dụng các lớp .html0, .html1 và .html2 thì nội dung của chúng ta tự động căn cứ vào vị trí tương ứng của cột

Các cột riêng lẻ bên trong một hàng cũng có thể được căn chỉnh theo chiều dọc. This is a ví dụ

        

Cột 1

        

Cột 2

        

Cột 3

Kết quả ta sẽ tương tự như

Căn chỉnh theo chiều ngang của các cột

Bạn có thể sử dụng các lớp .html6, .html7 và .html8 để điều chỉnh các cột lưới theo chiều ngang ở vị trí bên trái, chính giữa và bên phải của vùng chứa tương ứng

Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào

    

        

Cột 1

        

Cột 2

    

        

Cột 1

        

Cột 2

    

        

Cột 1

        

Cột 2

Kết quả ta được tương tự

Ngoài ra, bạn có thể sử dụng lớp .html9 để phân phối đồng đều các cột lưới với khoảng cách ở hai đầu

Và lớp .txt0 để phân phối đồng đều các cột, trong đó cột đầu tiên được đặt ở cuối hàng, cột cuối cùng được đặt ở cuối hàng

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

    

        

Cột 1

        

Cột 2

    

        

Cột 1

        

Cột 2

        

Cột 3

        

Cột 4

Kết quả ta giống như thế này

Bạn có thể tìm hiểu thêm về flexbox để biết căn chỉnh các mục flex

2. 9. Sắp xếp lại thứ tự các cột

Trong trường hợp cần thiết, bạn thậm chí có thể thay đổi thứ tự trực tiếp của các cột lưới mà không thay đổi thứ tự của chúng trong tệp HTML

Sử dụng lớp .txt1 để sắp xếp cột ở vị trí cuối cùng, hoặc sử dụng lớp .txt2 để sắp xếp cột ở vị trí đầu tiên

Vui lòng xem một ví dụ đơn giản

        

Cột đầu nhưng xếp ở cuối

        

Cột thứ 2, nhưng không có thứ tự

        

Cột cuối nhưng được đặt ở đầu

Kết quả ta được

Bạn có thể sử dụng các lớp .txt3 để sắp xếp các cột lưới tùy thuộc vào số thứ tự

Cột lưới có số thứ tự cao hơn đứng sau cột lưới có số thứ tự thấp hơn hoặc cột không có lớp thứ tự

Nó hỗ trợ vị trí từ 1 đến 12 trên tất cả các tầng lưới

        

Cột 1

        

Cột 2

        

Cột 3

        

Cột 4

Như bạn thấy trong HTML trên, chúng ta có thứ tự sắp xếp như Cột 1, Cột 2, Cột 3, Cột 4

Nhưng khi xuất hiện lớp .txt4 thì thứ tự sắp xếp sẽ được điều chỉnh lại khi hiển thị

Kết quả ta được như sau

2. 10. Bù lại

Bạn có thể di chuyển các cột bên phải cho mục đích căn chỉnh bằng cách sử dụng các lớp offset như .txt5, .txt6, .txt7,

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 .txt8 trên cột .txt9 di chuyển nó sang bên phải các 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

        

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 cố định

This is a ví dụ

        

Cột 1

        

Cột 2

        

Cột 1

        

Cột 2

Kết quả ta được tương tự như sau

> Lưu ý. You can't use layer. 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

2. 11. Tạo các cột thu gọn

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

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ụ

    

Cột 1

    

Cột 2

    

Cột 3

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 bootstrap.*2 tại 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 1

        

Cột 2

        

Cột 3

        

Cột 4

        

Cột 5

Shows as after

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

        

Cột 1

        

Cột 2

        

Cột 4

        

Cột 5

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 head3 VÀ integrity4

Ở trên, bạn đã biết Bootstrap yêu cầu một phần tử để bao bọc nội dung trang web

Và phần tử này cần phải có 1 trong hai lớp head3 hoặc integrity4, trong đó

• Lớp head3 làm cho vùng có chiều rộng cố định, đáp ứng

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

3. 1. Use. thùng đựng hàng

Sử dụng lớp head3 để tạo một vùng chứa câu trả lời, 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

Ví dụ

    

Use. thùng đựng hàng

    

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

Bạn thử chạy ví dụ trên trình duyệt và kéo để thấy nó thay đổi như thế nào nhé

3. 2. Use. chất lỏng chứa

Sử dụng lớp integrity4 để tạo vùng chứa có đủ chiều rộng, vùng chứa sẽ luôn kéo dài toàn bộ chiều rộng của màn hình (chiều rộng luôn là 100%)

Ví dụ

    

Use. chất lỏng chứa

    

Chiều rộng luôn bằng 100%

Kết quả ta được như hình bên dưới

Ngoài ra, bạn cũng có thể sử dụng tùy chọn bootstrap.min.*1 để đáp ứng vùng chứa tùy thuộc vào kích thước màn hình

Chiều rộng tối đa của vùng chứa sẽ thay đổi theo kích thước màn hình / chế độ xem khác nhau

Bootstrap tự học tổng hợp

Như vậy là qua bài 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à head3 và integrity4

Bootstrap 4 hỗ trợ rất nhiều thứ để giúp quá trình làm việc của bạn đơn giản hơn, nhưng mình khuyên bạn không nên sử dụng bởi nó sẽ làm giảm hiệu suất của trang web đi rất nhiều

ĐĂNG KÝ TỬ VẤN HỌC LẬP TRÌNH WEB BẢN DỊCH

Đừng sử dụng Bootstrap, thay vào đó, tận dụng hệ thống lưới của Bootstrap 4, sau đó sử dụng CSS pure, 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

Chúc bạn học tốt

> Tham khảo. KHÓA HỌC FRONT END chuyên nghiệp với React

> Đọc thêm. Cách Responsive Web cho người mới bắt đầu

---

HỌC VIỆN ĐẠO TẠO CNTT NIIT - ICT HÀ NỘI

Học lập trình chất lượng cao (Từ năm 2002). Học thực tế + Tuyển dụng ngay

Đc. Tầng 3, 25T2, N05, Nguyễn Thị Thập, Cầu Giấy, Hà Nội

SĐT. 02435574074 - 0383. 180086

E-mail. xin chào@niithanoi. giáo dục. vn

trang chủ. https. //Facebook. com/NIIT. CNTT-TT/

#niit #niithanoi #niiticthanoi #hoclaptrinh #khoahoclaptrinh #hoclaptrinhjava #hoclaptrinhphp #java #php #python