Some tricks of bootstrap 3x

Bài đăng này đã không được cập nhật trong 6 năm

Bootstrap 4 đã được release cách đây không lâu, tuy nhiên sẽ có những có những bạn chưa quen lắm với những thuộc tính mới của bs4(bootstrap 4), đặc biệt là flex. Chính vì vậy, có một phần cộng đồng front end vẫn lựa chọn bootstrap 3x cho project vì nó ổn định và thân thuộc hơn. Nhưng rồi thì chúng ta cũng sẽ đều sử dụng bs4 cả, vì thực sự bs4 sẽ giúp ích cho các frontend rất nhiều, nên dù muốn hay không, chúng ta cũng sẽ chuyển sang bs4 như là một framework không thể thiếu cho project của mình. Để tiếp cận với bs4 từ bs 3x mình có liệt kê một số tricks về layout mà ta khai thác từ bs 3x với 2 mục đích chính : Sử dụng bs 3x dễ dàng hơn và một số phần trong đó là sẽ có tính năng tương tự bs4

Bootstrap Grid

How to make columns same height

Đây là một vấn đề thường thấy nhất trong grid. Chúng ta có các blocks với nội dung khác nhau nhưng ta muốn chúng có cùng chiều cao.Giải pháp cho vấn đề này là sử dụng flexbox, cái mà đã được sử dụng mặc định trong bs4. Cách sử này bao gồm các bước sau:

Tạo ra một .row-flex và áp dụng nó vào parent block của box nội dung.
Cột trong hàng .row-flex sẽ có chiều cao giống nhau ngay lập tức.
Để làm cho mọi thứ hoạt động chính xác, tất cả những gì bạn cần làm là set chiều cao: 100% cho các box nội dung bên trong.

/* display this row with flex and use wrap (= respect columns' widths) */

.row-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}


/* vertical spacing between columns */

[class*="col-"] {
  margin-bottom: 30px;
}

.content {
  height: 100%;
  padding: 20px 20px 10px;
  color: #fff;
}

Pen: https://codepen.io/buiduccuong30051989/pen/EwBpEO

How to add vertical spacing to columns

Để thêm khoảng cách ở dưới mỗi column trong bootstrap, ta sử dụng thuộc tính css sau để set global cho tất cả các col-...:

/* vertical spacing between columns */

[class*="col-"] {
  margin-bottom: 30px;
}

How to use your own classes instead of columns and rows

Nhiều người không thích viết theo các class của bootstrap vì nó có vẻ dài dòng, mà họ không thực sự dùng hết, ví dụ như :

<div class="row">
  <div class="col-sm-8 col-lg-9">
    <p>Main content</p>
  </div>
  <div class="col-sm-4 col-lg-3">
    <p>Right column</p>
  </div>
</div>

Thay vào đó là :

<div class="content">
  <div class="main">
    <p>Main content</p>
  </div>
  <div class="right-column">
    <p>Right column</p>
  </div>
</div>

Note: Để sử dụng được nó bạn sẽ phải sử dụng Bootstrap {LESS} .make-row () và .make - * - column () mixins.

.content {
  .make-row();
}

.main {
  .make-sm-column(8);
  .make-lg-column(9);  
}

.right-column {
  .make-sm-column(4);
  .make-lg-column(3);
}

How to change ordering of columns on mobile

Một tính năng hữu ích của mạng Bootstrap là khả năng sắp xếp các cột khác nhau trên các thiết bị di động và trên máy tính để bàn. Tất cả những gì chúng ta cần làm là sử dụng các class .col- (breakpoint) -push- (số) và .col- (breakpoint) -pull- (số) để đẩy hoặc kéo các cột trên điểm breakspoint đã chỉ định ra khỏi vị trí ban đầu của nó. Nghe có vẻ phức tạp một chút, dưới đây là một ví dụ đơn giản Trong đoạn code sau đây, cột đầu tiên sẽ xuất hiện đầu tiên trên điện thoại di động nhưng sẽ ở vị trí thứ hai trên máy tính bảng và máy tính để bàn.

Trong mã sau đây, cột đầu tiên sẽ xuất hiện dưới dạng mục đầu tiên trên điện thoại di động nhưng là mục thứ hai trên máy tính bảng và máy tính để bàn.

<div class="row">
    <div class="col-sm-4 col-sm-push-8 ">
      <div class="content colour-1">4 cols wide right column appears second on SM+ devices<br>but appears first on mobile
      </div>
    </div>
    <div class="col-sm-8 col-sm-pull-4">
      <div class="content colour-2">8 cols wide left column appears first on SM+ devices<br>but appears second on mobile
      </div>
    </div>
</div>

How to show or hide elements on mobile

Nếu bạn cần nhanh chóng và dễ dàng để ẩn một phần tử trên các thiết bị (xs), thì có một class .hidden-xs mà bạn có thể sử dụng. Tương tự như vậy, bạn có thể sử dụng một class .hidden- (breakpoint) cho phần còn lại của breakpoints quá và kết hợp chúng với nhau, tức là sử dụng các class .hidden-lg, .hidden-md, .hidden-sm. Mặt khác, nếu bạn chỉ muốn hiển thị một phần tử trên các thiết bị nhất định, bạn có thể sử dụng các lớp hiển thị. (Breakpoint) - (visible). Lưu ý bạn phải sử dụng một thuộc tính hiển thị ở đó. Các giá trị có thể cho phần (hiển thị) của class đó sẽ phải là block, inline-block và inline. Vì vậy, nếu bạn cần hiển thị một phần tử như một khối trên các thiết bị lớn, chỉ cần thêm một lớp ẩn.

How to disable responsiveness

Có thể chúng ta sẽ có các tình huống như là bạn muốn trang của mình hoạt động không hỗ trợ responsive, fix width ở một khung hình nào đó mà không thay đổi ở các khung hình khác. Nó có thể là khi ta cần trang web của bạn để in hoặc tạo PDF.

Các bước cơ bản để vô hiệu hóa responsive: