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

Tự học Bootstrap - Cơ bản - bài 13 - Thanh phần trăm tiến trình

Thanh tiến trình cơ bản

01 thanh tiến trình có thể dùng để cho thấy 01 người dùng có thể mất bao lâu để hoàn tất 01 tiến trình.

Bootstrap cung cấp 01 loạt các thanh tiến trình.

01 thanh tiến trình trong Bootstrap trông như thế này:

Để tạo 01 thanh tiến trình mặc định, ta thêm 01 khai báo lớp .progress cho 01 thẻ <div>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="70"
  aria-valuemin="0" aria-valuemax="100" style="width:70%">
    <span class="sr-only">70% Complete</span>
  </div>
</div>

Ghi chú: thanh tiến trình không được hỗ trợ trong Internet Explorer 9 và and earlier (bởi vì chúng dùng hiệu ứng động trong CSS3).

Ghi chú: để giúp tăng tính chính xác cho người dùng , bạn nên thêm tiền tố vào thuộc tính aria-*

---

Progress Bar With Label

01 thanh tiến trình với nhãn chữ trông giống như thế này:

Tự học Bootstrap - Cơ bản - bài 12 – Nhãn số và nhãn chữ

Nhãn số

Nhãn số lượng là phần số chỉ ra có bao nhiêu phần tử tương ứng với liên kết đó:

Các con số 5, 10, và 2 là các nhãn số.

Dùng lớp .badge trong thẻ <span> để tạo ra các nhãn số.

Ví dụ:

<a href="#">News <span class="badge">5</span></a><br>
<a href="#">Comments <span class="badge">10</span></a><br>
<a href="#">Updates <span class="badge">2</span></a>

Tự học Bootstrap - Cơ bản - bài 11 – Các biểu tượng cơ bản trong web

Các biểu tượng cơ bản(Glyphicons)

Bootstrap cung cấp 260 biểu tượng trong bộ sưu tập Glyphicons Halflings.

Các biểu tượng có thể được sử dụng trong văn bản, các nút bấm, các thanh công cụ, menu điều hướng, các biểu mẫu...

Sau đây là vài ví dụ:

Biểu tượng Hộp thư:

Biểu tượng In:

Biểu tượng Tìm Kiếm:

Biểu tượng Tải Xuống:

---

Cú pháp

01 biểu tượng được chèn với cú pháp như sau:

<span class="glyphicon glyphicon-name"></span>

Phần name trong cú pháp trên sẽ được thay thế bởi tên của biểu tượng.

---

Ví dụ về biểu tượng

Tự học Bootstrap – Cơ bản – bài 10 – Định dạng nhóm nút bấm

Nhóm các nút bấm

Bootstrap cho phép bạn nhóm 01 loạt các nút lại với nhau (trên cùng 01 dòng) trong 01 nhóm nút:

Dùng 01 thẻ <div> với lớp .btn-group để tạo 01 nhóm nút bấm.

Ví dụ:

<div class="btn-group">
  <button type="button" class="btn btn-primary">Apple</button>
  <button type="button" class="btn btn-primary">Samsung</button>
  <button type="button" class="btn btn-primary">Sony</button>
</div>

Mẹo: Thay vì thiết lập cỡ nút trên từng nút bấm trong nhóm, bạn có thể sử dụng lớp .btn-group-lg|sm|xs để định dạng kích cỡ cho tất cả nút trong nhóm.