Các cột hoạt động như thế nào trong bootstrap?
|
Bootstrap là một khung để xây dựng trang web. Nó loại bỏ nhu cầu xây dựng cơ sở cho một trang web. Thay vào đó, bạn có thể tải các tệp Bootstrap xuống máy chủ của mình, sau đó thêm mẫu Bootstrap. Có hướng dẫn về cách thực hiện việc này trong bài viết Thiết lập Bootstrapbài báo Đ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 Show Hệ thống lưới BootstrapBootstrap 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 đựngCá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. Để sắp xếp các cột cạnh nhau, hãy đưa chúng vào cùng một hàng Cuối cùng, bạn muốn các cột của mình liên tiếp cộng lại thành mười hai Bạn cũng có thể điều chỉnh các cột của mình để chúng có độ rộng cột khác nhau cho mỗi kích thước thiết bị. Để làm điều này, bạn chỉ cần thêm một col-prefix-columnNumber khác vào lớp của mình. Nó sẽ trông giống như thế này. Trong ví dụ này, nội dung sẽ được định vị trên sáu cột đối với màn hình xem cực nhỏ, trong khi màn hình xem trung bình sẽ thay đổi nội dung để hiển thị trên bốn cột Bạn có thể lồng các cột sau khi đã thiết lập vùng chứa, hàng và cột. Để thực hiện việc này, hãy thêm một hàng mới Bootstrap là một khung CSS nguồn mở được cho phép theo giấy phép MIT. Bootstrap không phải là sản phẩm của Pair Networks, Inc. và Pair Networks không bảo hành cho Bootstrap. Xin lưu ý rằng có nhiều cấp độ khung CSS có sẵn. Vui lòng tham khảo ý kiến chuyên gia CNTT của bạn để được tư vấn và hướng dẫn về khung CSS phù hợp. Sản phẩm cụ thể này có thể hoặc không thể đáp ứng nhu cầu của bạn. Cặp mạng, Inc. đang cung cấp hỗ trợ cho hướng dẫn này để thuận tiện cho bạn và không chịu trách nhiệm về hiệu suất của Bootstrap. Vui lòng đọc kỹ các điều khoản và phạm vi dịch vụ cho bất kỳ dịch vụ hoặc sản phẩm trực tuyến nào mà bạn đang cân nhắc mua hoặc sử dụng |
