Đệm-dưới bootstrap

Trong bài viết này, chúng ta sẽ tìm hiểu về cách chia khoảng cách và chia lớp 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à lớp chia trong Bootstrap
• Hướng dẫn chi tiết
  • Chia khoảng cách trong Bootstrap
  • A number of other section in Bootstrap
    • Jumbotron – Nhấn mạnh nội dung
    • Pagination – Danh sách phân trang
    • Tiến trình và thanh tiến trình – Thanh tiến trình
    • Tooltips – Chú thích
    • Accordion – nhiều tập hợp sụp đổ

Video – Khoảng cách và lớp chia trong Bootstrap

Hướng dẫn chi tiết

"Người ta tắt AdsBlock không phải vì người ta dại, mà người ta quý mình nên coi quảng cáo"

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 lề và đệm giữa các khối, chúng ta sử dụng lớp có cấu trúc như sau

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

+ m là lề, p là đệm

+ t là trên, l là trái, r là phải, b là dưới

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…

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

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 đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

+ 3 là 3 rem, đơn vị đo lường theo Tỷ lệ phần trăm trong Bootstrap

Default default layer 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 default lần lượt là 1, 2, 3

A number of other section in 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

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

Các bạn có thể sử dụng jumbotron hiện có trên trang hướng dẫn của Bootstrap. at here

Copy and paste khá đơn giản, trong code mẫu cuối bài viết, mình cũng đang 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 kể các định dạng trang nằm ngang khá thuận lợi. Mã để sử dụng mình đặt bên dưới luôn nhé

Pagination – Danh sách phân trang

Cách sử dụng

 aria-label="Page navigation example">
   class="pagination">
     class="page-item"> class="page-link" href="#">Previous
     class="page-item"> class="page-link" href="#">1
     class="page-item"> class="page-link" href="#">2
     class="page-item"> class="page-link" href="#">3
     class="page-item"> class="page-link" href="#">Next
  

Tiến trình và thanh tiến trình – Thanh tiến trình

To show process, we used process

Tiến trình và thanh tiến trình – Thanh tiến trình

Progress gồm 2 phần là

+ Khối div bao ngoài có class=”tiến trình”

+ 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″. current value

Chiều dài thanh tiến trình thiết lập bằng chiều rộng thuộc tính. 25% or used class w-25

Bạn có thể tham khảo đoạn mã sau

Hoặc trang progress bootstrap

Tooltips – Chú thích

Mục đích sử dụng. Tạo nút chú thích cho nút hoặc liên kết bất kỳ khi di chuột vào

Phần button

Demo tooltips

Js section

Add file popper. tối thiểu. js to before the script bootstrap. tối thiểu. js. (các bạn mở link popper. tối thiểu. js, sau đó nhấn chuột phải, lưu thành. )

Add the tag script and code after

Accordion – nhiều tập hợp sụp đổ

Tập hợp nhiều thẻ thu gọn với nhau được gọi là đàn 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 nào mà crash 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é

mẫu mã. Tải xuống

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