Tự học Bootstrap - Cơ bản - bài 14 - Phân trang

Phân trang cơ bản

Nếu bạn có 01 trang web với nhiều trang con, Bạn có thể phải thêm phần phân trang vào mỗi trang con.

01 phân trang cơ bản trong Bootstrap trông như thế này đây:

Để tạo 01 phân trang cơ bản, ta thêm lớp .pagination vào 01 phần tử <ul>

Ví dụ:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

---

Trang hiện hành State

Trang hiện hành là trang đang thao tác:

Thêm lớp .active để người dùng biết họ đang ở trang nào:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

---

Trang bị cấm

01 liên kết bị vô hiệu là không thể bấm vô được.Trong ví dụ này là liên kết trang 4

Thêm lớp .disabled nếu 01 liên kết do lí do nào đó bị vô hiệu.

Ví dụ:

<ul class="pagination">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li class="disabled"><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

Kích cỡ phân trang

Khối phân trang có thể định kích cỡ lớn hơn hoặc nhỏ hơn.

Thêm lớp .pagination-lg cho khối lớn hơn hoặc .pagination-sm cho khối nhỏ hơn.

Ví dụ:

<ul class="pagination pagination-lg">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

<ul class="pagination pagination-sm">
  <li><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
</ul>

---

Thanh menu Breadcrumbs

01 hình thức phân trang khác là breadcrumbs-> giống thanh menu

Lớp .breadcrumb chỉ ra vị trí của trang hiện hành bên trong thanh điều hướng (lớp active).

Ví dụ:

<ul class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Private</a></li>
  <li><a href="#">Pictures</a></li>
  <li class="active">Vacation</li>
</ul>

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