Tự học Bootstrap - Cơ bản - bài 19 – Menu Collapse

Collapsible cơ bản là gì?

Collapsibles hữu ích khi bạn muốn ẩn/hiện 01 lượng lớn nội dung.

Ví dụ:

<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lớp học vi tính.COM....</div>

Giải thích ví dụ:

Tự học Bootstrap - Cơ bản - bài 18 - Menu dropdown

Menu Dropdown cơ bản

01 menu dropdown là 01 menu có thể dãn ra/thu lại cho phép người dùng chọn 01 giá trị từ danh sách xác định trước.

Ví dụ:

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Ví dụ Dropdown:
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Giải thích

Tự học Bootstrap - Cơ bản - bài 17 - Thanh panel

Panels là gì

Trong bootstrap, panel là 01 hộp có đường viền với các lùi dòng bao quanh nội dung.

Panels được tạo ra bởi lớp .panel, và nội dung bên trong panel dùng lớp .panel-body

Ví dụ:

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

Lớp .panel-default được dùng để định dạng màu sắc của. Sẽ được đề cập ở cuối bài.

---

Panel Heading

Lớp .panel-heading thêm phần tiêu đề vào panel.

Tự học Bootstrap - Cơ bản - bài 16 – Các nhóm danh sách

Các nhóm danh sách cơ bản

Nhóm danh sách cơ bản nhất là danh sách k có thứ tự với các đề mục.

Để tạo ra 01 danh sách cơ bản, dùng thẻ <ul> với lớp .list-group, và thẻ <li> với lớp .list-group-item

<ul class="list-group">
  <li class="list-group-item">First item</li>
  <li class="list-group-item">Second item</li>
  <li class="list-group-item">Third item</li>
</ul>

---

Danh sách với nhãn số

Bạn cũng có thể thêm nhãn số vào 01 danh sách. Nhãn số sẽ xuất hiện bên phải danh sách.

Để tạo nhãn số , tạo 01 thẻ <span> với lớp .badge bên trong thẻ <li>

Tự học Bootstrap - Cơ bản - bài 15 – Pager – LÙI - TIẾN

Pager là gì?

Pager cũng là 01 hình thức phân trang.

Pager cung cấp nút LÙI và TIẾN (liên kết).

Để tạo nút LÙI/TIẾN , thêm lớp .pager vào thẻ <ul>

Ví dụ:

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Kết quả:

Canh lề các nút bấm

Dùng lớp .previous và .next để canh lề mỗi nút về mỗi hướng của trang web.

Ví dụ:

<ul class="pager">
  <li class="previous"><a href="#">Previous</a></li>
  <li class="next"><a href="#">Next</a></li>
</ul>

Kết quả:

Lophocvitinh.COM***Tự học Bootstrap - Phần cơ... bởi minh-nguyen48