Kết nối

[Bootstrap] Phần 11: Glyphicon, Badge và Label

8.393 lượt xem 
 Cập nhật lần cuối: 10/01/2017 lúc 23:58:21
Thể loại: Bootstrap, Thiết kế Web 

Trong bài viết này, chúng ta sẽ học về cách sử dụng và hiển thị các glyphicon, badge và label trong Bootstrap.

Glyphicon

Glyphicon là các font icon được dùng trong các ứng dụng web. Glyphicons Halflings là bộ chứa 260 glyphicons có sẵn miễn phí trong Bootstrap. Tuy nhiên, Glyphicons Halflings thực tế đòi hỏi bản quyền. Glyphicon có thể được dùng ở văn bản, button, toolbar, navigation, form, vân vân.

Cú pháp Glyphicon
Một glyphicon được chèn vào trang web theo cú pháp sau:

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

Giá trị glyphicon-name phải được thay bằng tên glyphicon phù hợp.

Các ví dụ về Glyphicon

glyphicon

<div class="container">
  <h2>Các ví dụ Glyphicon - dammio.com</h2>
  <p>Biểu tượng bức thư: <span class="glyphicon glyphicon-envelope"></span></p>
  <p>Biểu tượng bức thư dạng liên kết:
    <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
  </p>
  <p>Biểu tượng tìm kiếm: <span class="glyphicon glyphicon-search"></span></p>
  <p>Biểu tượng tìm kiếm ở 1 nút nhấn:
    <button type="button" class="btn btn-default">
      <span class="glyphicon glyphicon-search"></span> Tìm kiếm
    </button>
  </p>
  <p>Biểu tượng tìm kiếm ở 1 nút nhấn có phong cách:
    <button type="button" class="btn btn-info">
      <span class="glyphicon glyphicon-search"></span> Tìm kiếm
    </button>
  </p>
  <p>Biểu tượng in ấn: <span class="glyphicon glyphicon-print"></span></p>
  <p>Biểu tượng in ấn ở nút nhấn liên kết có phong cách:
    <a href="#" class="btn btn-success btn-lg">
      <span class="glyphicon glyphicon-print"></span> In ấn
    </a>
  </p>
</div>

Danh sách đầy đủ các glyphicon các bạn có thể tham khảo ở trang web http://glyphicons.com/.

Badge (huy hiệu)
Badge là các huy hiệu số chỉ ra số lượng item liên quan đến một đường dẫn. Để tạo badge bạn có thể dùng lớp .badge bên trong các phần tử .
badge

<div class="container">
	<h3>Website dammio.com</h3>
	<a href="#">Tin tức <span class="badge">5</span></a><br>
	<a href="#">Bình luận <span class="badge">10</span></a><br>
	<a href="#">Cập nhật <span class="badge">2</span></a>
</div>

Label
Các nhãn được dùng để cung cấp thông tin về 1 cái gì đó. Chúng ta có thể dùng lớp .label, theo sau 6 lớp bối cảnh .label-default, .label-primary, .label-success, .label-info, .label-warning và .label-danger, bên trong 1 phần tử span để tạo nhãn.

Liên quan:  [Bootstrap] Phần 19: Thanh điều hướng

labels

<span class="label label-default">Default Label</span>
<span class="label label-primary">Primary Label</span>
<span class="label label-success">Success Label</span>
<span class="label label-info">Info Label</span>
<span class="label label-warning">Warning Label</span>
<span class="label label-danger">Danger Label</span>

Như vậy bài này giúp các bạn học được cách tạo glyphicon, badge và label thông qua các lớp trong Bootstrap.

Trích dẫn bài viết
  • APA:
    Dammio. (2016). [Bootstrap] Phần 11: Glyphicon, Badge và Label. https://www.dammio.com/2016/10/12/bootstrap-phan-11-glyphicon-badge-va-label.
  • BibTeX:
    @misc{dammio,
    author = {Dammio},
    title = {[Bootstrap] Phần 11: Glyphicon, Badge và Label},
    year = {2016},
    url = {https://www.dammio.com/2016/10/12/bootstrap-phan-11-glyphicon-badge-va-label},
    urldate = {2025-02-08}
    }
Thẻ: , , ,
Theo dõi
Thông báo của
guest
1 Bình luận
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
1
0
Rất thích suy nghĩ của bạn, hãy bình luận.x