Điều này sẽ cung cấp cho bạn một trang web cơ bản. Tuy nhiên, điều thực sự khiến Bootstrap trở nên ấn tượng là rất nhiều thành phần trang web có thể được thêm vào trang web. Vì Bootstrap đã có sẵn CSS và Javascript, nên các thành phần đã được tạo kiểu và hoạt động. Tất nhiên, bạn có thể chỉnh sửa CSS và Javascript để tùy chỉnh trang web của mình theo sở thích của mình
Hệ thống lưới Bootstrap
Bootstrap dựa vào hệ thống lưới để chia tỷ lệ các thành phần phù hợp cho các màn hình xem khác nhau. Điều này nghe có vẻ khó hiểu, nhưng chúng tôi sẽ phân tích cách thức hoạt động của hệ thống lưới trong bài viết này
Hệ thống lưới Bootstrap được tạo thành từ các vùng chứa, hàng và cột, tất cả đều được sử dụng để xác định bố cục của trang web
Hộp đựng
Các thùng chứa Bootstrap được sử dụng để thiết lập chiều rộng cho bố cục. Các phần tử được thêm vào trong vùng chứa và sẽ bị ảnh hưởng bởi chiều rộng của vùng chứa. Vùng chứa là một phần tử Các vùng chứa có phần đệm 15 pixel theo mặc định, vùng đệm này sẽ đệm nó từ cuối trang và từ các vùng chứa khác Hàng và cột sẽ được thêm vào bên trong vùng chứa Không lồng container trong container Vùng chứa có chiều rộng cố định mặc định sẽ thay đổi dựa trên kích thước của thiết bị xem. Chiều rộng thiết bị xem và chiều rộng vùng chứa tương ứng được liệt kê trong bảng bên dưới Nếu không muốn vùng chứa thay đổi kích thước theo chiều rộng cố định, bạn có thể sử dụng class=”container-fluid” thay vì . Làm điều này sẽ khiến các vùng chứa luôn khớp với chiều rộng của màn hình đang xem, thay vì thay đổi kích thước thành một chiều rộng cố định. class=”container”. Doing this will cause the containers to always match the width of the viewing screen, rather than resize to a fixed width. Hệ thống lưới Bootstrap cho phép tối đa 12 cột trên một trang. Các cột này có thể được sử dụng đơn lẻ hoặc được nhóm lại với nhau. Để nhóm các cột lại với nhau, bạn cần tạo các hàng. Để tạo các hàng, hãy thêm một div có class=“row” chứa mã cột. Các hàng phải luôn được đặt bên trong vùng chứa. Thí dụ Các hàng kéo dài theo chiều rộng của vùng chứa. Chúng có lề 15 pixel âm ở cuối, về cơ bản loại bỏ lề 15 pixel do vùng chứa của nó đặt. Điều này là do mỗi cột có lề 15 pixel của riêng chúng thay thế lề của vùng chứa. Các cột được căn cạnh nhau sẽ có lề 15 pixel, dẫn đến lề 30 pixel giữa hai cột. Nội dung trong cột sẽ bị ảnh hưởng bởi lề 15 pixel của cột Kích thước cột Bootstrap có thể được phân biệt bằng các lớp cột. Các lớp cột thường được thiết lập trong “col-prefix-ColumnNumber” format, which will resemble this example: Các cột phải được đặt bên trong hàng. Thay thế tiền tố và Số cột bằng tiền tố ưu tiên . Các tiền tố xác định cột dành cho thiết bị nào. Ví dụ: sm được thiết kế cho màn hình nhỏ, chẳng hạn như điện thoại. Cột và hàng
Chủ Đề