Bootstrap: Nhãn, Badge, Jumbotron, Tiêu đề trang
Nhãn (Labels)
Các ví dụ
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
Example heading New
<h3>Example heading <span class="label label-default">New</span></h3>
Thay đổi hình thức của nhãn
Hãy thêm một trong các class được đề cập bên dưới để thay đổi hình thức của nhãn.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Badge
Bạn có thể dễ dàng làm nổi bật các mục mới hoặc mục chưa đọc bằng cách thêm <span class="badge"> vào các liên kết, các thành phần điều hướng của Bootstrap,...
<a href="#">Inbox <span class="badge">42</span></a>
Tự động thu gọn
Khi không có bất kỳ mục nào mới hoặc chưa đọc, badge sẽ tự động thu gọn lại (thông qua selector :empty của CSS).
Tính tương thích với các trình duyệt
Badge sẽ không tự động thu gọn lại trên trình duyệt Internet Explorer 8 vì trình duyệt này không hỗ trợ selector :empty của CSS.
Tương thích với các trạng thái đang kích hoạt của thành phần điều hướng
Badge cũng có thể được sử dụng với trạng thái đang kích hoạt của các thành phần điều hướng dạng viên thuốc.
<ul class="nav nav-pills nav-stacked">
<li class="active">
<a href="#">
<span class="badge pull-right">42</span>
Home
</a>
</li>
...
</ul>
Jumbotron
Một thành phần nhỏ gọn và linh hoạt có thể mở rộng ra bằng với kích thước khung nhìn để hiển thị nội dung chính trong site của bạn.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
Learn more
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>
Để jumbotron có chiều rộng bằng với chiều rộng của khung nhìn và không có góc bo tròn, hãy đặt nó ra bên ngoài tất cả các.container và sử dụng một .container ở bên trong.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Tiêu đề trang
Thành phần này chứa phần tử h1 được sử dụng để phân đoạn nội dung của một trang. Nó có thể tận dụng phần tử small mặc định của h1 cũng như hầu hết các thành phần khác (với một số style bổ sung).
Example page header Subtext for header
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>