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

"Thăm ngàn, kẹp ngần nhưng vẫn không đủ chai ni (trả nợ)" nên dành vài dòng cho QUẢNG CÁO

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký hosting từ link quảng cáo, mình sẽ có một ít tiền để duy trì và "chai ni".

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.

Bài viết cùng chủ đề

Bài 11: Scrollspy – Hiệu ứng điều hướng khi…

Bài 10: Navbar – Tạo menu đa cấp với hiệu…

"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.

Khoảng cách và chia layer trong Bootstrap - Một số thành phần khác jumbotron — Jumbotron – Nhấn mạnh nội dung

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é.

Khoảng cách và chia layer trong Bootstrap - Một số thành phần khác pagination — Pagination – Danh sách phân trang

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.

Khoảng cách và chia layer trong Bootstrap - Một số thành phần khác progress — Progress và progress bar – Thanh tiến trình

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>