Component

Glyphicons

Glyphicons là thư viện phổ biến để tạo ra các icon thông dụng và được đính kèm trong TB framework. Để sử dụng các icon này chúng ta chỉ cần định nghĩa các class tương ứng với các class của icon đó. Bạn có thể truy cập vào địa chỉ: http://getbootstrap.com/components/#glyphicons để xem danh sách tên các class ứng với từng icon.

Ví dụ để tạo một icon cho trang chủ bạn có thể sử dụng đoạn HTML như dưới đây:

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

Lưu ý: Khi bạn nhúng TB framework vào website không sử dụng CDN mà tải source code về máy thì bạn cần tải cả thư mục fonts để có thể sử dụng được Glyphicons.

Phân Trang

Phân trang trang web được sử dụng để chia nội dung một trang web thành nhiều phần khác nhau, phổ biến với các trang tin khi số lượng tin trên một trang là quá nhiều (Ví dụ khi bạn gõ một từ tìm kiếm trên Google bạn sẽ thấy Google chia kết quả thành nhiều trang khác nhau).

TB giúp việc tạo thanh phân trang trở nên dễ dàng hơn bao giờ hết. Đoạn mã HTML phía dưới dùng để tạo một thanh phân trang đơn giản:

<nav>
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <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>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>

Với đoạn code trên, TB sẽ tạo ra một thanh phân trang như hình dưới:

Twitter Bootstrap Phân Trang Cơ Bản

Bạn cũng có thể sử dụng các class khác như pagination-lgpagination-sm để thay đổi kích cỡ của thanh phân trang, ví dụ đoạn mã HTML dưới đây:

<nav>
    <ul class="pagination pagination-lg">...</ul>
  </nav>
<nav>
    <ul class="pagination">...</ul>
  </nav>
<nav>
    <ul class="pagination pagination-sm">...</ul>
</nav>

Sẽ tạo ra 3 thanh phân trang với kích cỡ như sau:

Twitter Bootstrap Phân Trang

Alert

Với Twitter Bootstrap, bạn có thể dễ dàng tạo một hộp thoại cảnh báo để gửi gây chú ý hoặc gửi thông tin quan trọng cho người truy cập. Dưới đây là đoạn mã HTML dùng để tạo ra 4 loại hộp thoại cảnh báo khác nhau:

<div class="alert alert-success" role="alert">Hộp thoại success</div>
<div class="alert alert-info" role="alert">Hộp thoại info</div>
<div class="alert alert-warning" role="alert">Hộp thoại warning</div>
<div class="alert alert-danger" role="alert">Hộp thoại danger</div>

Với đoạn mã trên, chúng ta sẽ có giao diện với 4 hộp thoại alert như sau:

Twitter Bootstrap Alert

Twitter Bootstrap
Thêm Bình Luận: