Bootstrap: Container – QuanTriMang.com

Bài viết Bootstrap: Container – QuanTriMang.com thuộc chủ đề về Giải Đáp Câu Hỏi đang được rất nhiều bạn lưu tâm đúng không nào !! Hôm nay, Hãy cùng https://sotaythongthai.vn/ tìm hiểu Bootstrap: Container – QuanTriMang.com trong bài viết hôm nay nha !

Các bạn đang xem chủ đề về : “Bootstrap: Container – QuanTriMang.com”

Container là một phần không thể thiếu trong Bootstrap. Container được dùng để thiết lập lề (margin) cho nội dung, giúp nội dung thích ứng với bố cục của bạn. Container chứa phần tử row và row là container của column (còn được gọi là hệ thống lưới). Container để bao gói các phần nội dung trên website hay tạo các hộp nội dung.

Lý thuyết là như vậy, dễ hình dung nhất, nói theo kiểu nôm na hơn thì Container tạo ra một hộp chứa các phần tử khác bên trong. Chiếc hộp này có chiều rộng được thiết lập theo kích thước của màn hình hiển thị.

Có 2 class container là .container.container-fluid:

  • .container cung cấp các container được fix chiều rộng dựa trên độ rộng của màn hình hiển thị.
  • .container-fluid cung cấp các container với chiều rộng full, mở rộng toàn bộ chiều rộng vừa với vùng xem (viewpoint).

.container

dùng .container để tạo container có chiều rộng thích ứng, fix theo độ rộng của màn hình thiết bị. Lưu ý rằng độ rộng của nó (max-width) sẽ thay đổi ngay theo các kích thước màn hình khác nhau.

Bootstrap chia kích thước chiều rộng của màn hình thành 5 loại:

  • Cực nhỏ: Màn hình có chiều rộng nhỏ hơn 576px
  • Nhỏ: Màn hình có chiều rộng lớn hơn hoặc bằng 576px
  • Trung bình: Màn hình có chiều rộng lớn hơn hoặc bằng 768px
  • Rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 992px
  • Cực rộng: Màn hình có chiều rộng lớn hơn hoặc bằng 1200px

Màn hìnhCực nhỏNhỏTrung bìnhRộngCực rộngmax-width100%540px720px960px1140px

chi tiết:

  • Nếu chiều rộng màn hình nhỏ hơn 576px, container sẽ có chiều rộng 100%.
  • 576px ≤ chiều rộng màn hình < 768px, container có chiều rộng 540px và hiển thị ở giữa.
  • 768px ≤ chiều rộng màn hình < 992px, container có chiều rộng 720px và hiển thị ở giữa.
  • 992px ≤ chiều rộng màn hình < 1200px, container có chiều rộng 960px và hiển thị ở giữa.
  • Chiều rộng màn hình ≥ 1200px, container có chiều rộng 1140px và hiển thị ở giữa.

Ví dụ về cách dùng .container:

<div class=”container”> <h1>Ví dụ về .container</h1> <p>Nội dung chi tiết.</p> </div>

Một file html đầy đủ sẽ như thế này:

<!DOCTYPE html> <html lang=”vi”> <head> <title>Ví dụ Bootstrap </title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <body> <div class=”container”> <h1>Quản Trị Mạng</h1> <p><strong>Giới thiệu:</strong></p> <p>sentayho.com.vn đã trở thành mạng xã hội về khoa học công nghệ, mở rộng nội dung để đáp ứng mong muốn của các thành viên về nhiều lĩnh vực công nghệ hơn như điện thoại, thiết bị thông minh, điện tử, bảo mật máy tính,…</p> <p>thay đổi ngay kích thước trình duyệt để xem độ rộng thay đổi ngay như thế nào nha.</p> </div> </body> </html>

Bạn thử chạy code trên, thay đổi ngay kích thước cửa sổ trình duyệt để xem độ rộng của container đổi như nào nha.

.container-fluid

Bạn sẽ dùng class .container-fluid khi cần tạo tạo container với độ rộng full 100%, mở rộng nội dung toàn khung xem của màn hình (width luôn luôn là 100%).

Ví dụ về cách dùng .container-fluid:

<div class=”container-fluid”> <h1>Ví dụ về .container-fluid</h1> <p>Nội dung văn bản cần trình bày.</p> </div>

Padding của container

Padding là khoảng cách từ nội dung đến viền của container. Theo mặc định, container có padding trái và phải là 15px, không có padding trên và dưới. Nếu cần thêm padding và margin thì sẽ cần dùng các tiện ích khoảng cách để làm cho nội dung hiển thị đẹp hơn. Ví dụ, .pt-5 sẽ thêm 48px cho padding trên.

<div class=”container pt-5″></div>

Mình sẽ làm một bài chi tiết về các tiện ích khoảng cách này sau nha.

Viền và màu sắc của container

Để thêm đường viền hay thay đổi ngay màu sắc cho container chúng ta sẽ dùng tiện ích đường viền và màu sắc. Vì khá dài, mình cũng sẽ viết riêng bài sau nha.

Ví dụ về đường viền và màu sắc container:

<div class=”container p-3 my-3 border”></div> <div class=”container p-3 my-3 bg-dark text-white”></div> <div class=”container p-3 my-3 bg-primary text-white”></div>

Giả sử mình có file html dưới đây:

<!DOCTYPE html> <html lang=”vi”> <head> <title>Ví dụ Bootstrap </title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css”> <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> <script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script> <script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js”></script> </head> <body> <div class=”container p-3 my-3 border”>Thêm border cho container – sentayho.com.vn</div> <div class=”container p-3 my-3 bg-dark text-white”>Ví dụ đổi màu nền container 1 – sentayho.com.vn</div> <div class=”container p-3 my-3 bg-success text-white”>Ví dụ về đổi màu nền container 2 – sentayho.com.vn</div> </body> </html>

Khi chạy sẽ được kết quả như này:

Ví dụ về màu của container

Container thích ứng

Bạn khả năng dùng các class .container-sm|md|lg|xl để tạo các container thích ứng (responsive, thực tình mình muốn để nguyên là responsive, viết thích ứng còn thấy khó hiểu hơn :().

Khi dùng các class này thì độ rộng tối đa max-width của container sẽ thay đổi ngay theo kích thước màn hình hoặc vùng xem:

Màn hìnhCực nhỏ

Nhỏ

Trung bình

Rộng

Cực rộng

.container-sm100%540px720px960px1140px.container-md100%100%720px960px1140px.container-lg100%100%100%960px1140px.container-xl100%100%100%100%1140px

Cách dùng các class này sẽ như sau:

<div class=”container-sm”>.container-sm</div> <div class=”container-md”>.container-md</div> <div class=”container-lg”>.container-lg</div> <div class=”container-xl”>.container-xl</div>

Nếu chưa cài Bootstrap trên máy tính, bạn khả năng thử dùng CSS editor online này để xem thử các container vận hành ra sao nha.

Bài tiếp: Grid System

Bạn thấy bài viết thế nào?

Các câu hỏi về Bootstrap: Container – QuanTriMang.com

Team Sổ Tay Thông Thái mà chi tiết là Mỹ Chi đã biên soạn bài viết dựa trên tư liệu sẵn có và kiến thức từ Internet. Dĩ nhiên tụi mình biết có nhiều câu hỏi và nội dung chưa thỏa mãn được bắt buộc của các bạn.

Thế nhưng với tinh thần tiếp thu và nâng cao hơn, Mình luôn đón nhận tất cả các ý kiến khen chê từ các bạn & Quý đọc giả cho bài viêt Bootstrap: Container – QuanTriMang.com

Nếu có bắt kỳ câu hỏi thắc mắt nào vê Bootstrap: Container – QuanTriMang.com hãy cho chúng mình biết nha, mõi thắt mắt hay góp ý của các bạn sẽ giúp mình nâng cao hơn hơn trong các bài sau nha <3 Chốt lại nhen <3 Bài viết Bootstrap: Container - QuanTriMang.com ! được mình và team xem xét cũng như tổng hợp từ nhiều nguồn. Nếu thấy bài viết Bootstrap: Container - QuanTriMang.com Cực hay ! Hay thì hãy ủng hộ team Like hoặc share. Nếu thấy bài viết Bootstrap: Container - QuanTriMang.com rât hay ! chưa hay, hoặc cần bổ sung. Bạn góp ý giúp mình nha!!

Các Hình Ảnh Về Bootstrap: Container – QuanTriMang.com

Bootstrap: Container - QuanTriMang.com

Các từ khóa tìm kiếm cho bài viết #Bootstrap #Container #QuanTriMangcom

Tra cứu thêm thông tin về Bootstrap: Container – QuanTriMang.com tại WikiPedia

Bạn hãy tìm thêm nội dung chi tiết về Bootstrap: Container – QuanTriMang.com từ trang Wikipedia tiếng Việt.◄

Tham Gia Cộng Đồng Tại

💝 Nguồn Tin tại: https://sotaythongthai.vn/

💝 Xem Thêm Giải Đáp Câu Hỏi tại : https://mangraovat.edu.vn/hoi-dap/

Related Posts

About The Author

Add Comment