Kết nối

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

2.052 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.

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.

Thẻ: , , ,

Bình luận Facebook

1
Để lại bình luận

avatar
1000
0 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors
  Subscribe  
newest oldest most voted
Notify of