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.
Nội dung chính
Video – Khoảng cách và chia layer trong Bootstrap
Hướng dẫn chi tiết
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
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.
"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé. Link đăng ký: NHẬN NGAY ƯU ĐÃI Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn
+ 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.