Bài 12: Khoảng cách và chia layer trong Bootstrap

Trong bài này, chúng ta sẽ tìm hiểu về cách chia khoảng cách và chia layer trong Bootstrap. Ngoài ra, mình sẽ hướng dẫn những thành phần cuối cùng của Bootstrap như Jumbotron, pagination, progress, tooltips.

Video – Khoảng cách và chia layer trong Bootstrap

Hướng dẫn chi tiết

Chia khoảng cách trong Bootstrap

Để thêm margin và padding giữa các khối, chúng ta dùng class có cấu trúc như sau.

Ví dụ: class=”mt-3″

+ m là margin, p là padding.

+ t là top, l là left, r là right, b là bottom.

+ 3 là 3 rem, đơn vị đo theo tỷ lệ phần trăm trong Bootstrap.

Chia layer mặc định của Bootstrap

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Ngoài ra, các trạng thái như default, hover, active sẽ có z-index mặc định lần lượt là 1, 2, 3.

Một số thành phần khác trong Bootstrap

Jumbotron – Nhấn mạnh nội dung

Thành phần này của Bootstrap khá đơn giản. Mục đích sử dụng chủ yếu để nhấn mạnh nội dung quan trọng, cần truyền tải và kêu gọi hành động từ người dùng.

Các bạn có thể sử dụng jumbotron làm sẵn trên trang hướng dẫn của Bootstrap. Tại đây

Copy và paste khá đơn giản, trong code mẫu cuối bài viết, mình cũng có làm phần jumbotron này.

Pagination – Danh sách phân trang

Bootstrap cung cấp sẵn cho chúng ta cách tạo ra 1 danh sách đáng số các trang dạng nằm ngang khá tiện lợi. Code để sử dụng mình đặt bên dưới luôn nhé.

Cách sử dụng:

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul></nav>

Progress và progress bar – Thanh tiến trình

Để thể hiện tiến trình, chúng ta sử dụng progress.

Progress gồm 2 phần là

+ Khối div bao ngoài có class=”progress”

+ Khối div bên trong có class=”progress-bar”. Có các thuộc tính quan trọng

• aria-valuemin=”0″: giá trị thấp nhất
• aria-valuemax=”100″: giá trị cao nhất
• aria-valuenow=”0″ : giá trị hiện tại

Chiều dài thanh tiến trình thiết lập bằng thuộc tính width: 25% hoặc dùng class w-25

Bạn có thể tham khảo đoạn code sau:

<div class="progress mb-3">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar w-50" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>

Hoặc trang progress bootstrap

Tooltips – Chú thích

Mục đích sử dụng: Tạo chú thích cho button hay link nào đó khi hover vào.

Phần button

<button class="btn btn-dark" type="button" data-toggle="tooltip" data-placement="top" title="Delete button">Demo tooltips</button>

Phần js

Thêm file popper.min.js vào trước thẻ script bootstrap.min.js. (các bạn mở link popper.min.js, sau đó nhấn chuột phải, lưu thành ..)

Thêm thẻ script và đạon code sau

<script src="jquery-3.3.1.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function () {
   $('[data-toggle="tooltip"]').tooltip()
})
</script>

Accordion – tập hợp nhiều collapse

Tập hợp nhiều thẻ collapse với nhau gọi là accordion.

Phần code accordion khá dài, bạn nên tham khảo trang Bootstrap docs phần Collapse nhé. Còn cách mà collpase hoạt động các bạn xem bài 5.

Ngoài ra còn có input group và list group. Những thành phần này rất đơn giản, bạn có thể tự tìm hiểu nhé.

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ