Glyphicons

Các glyph sẵn có

Hỗ trợ 200 glyph dạng font từ tập hợp Glyphicon Halflings. Thực tế, Glyphicons Halflings không miễn phí, tuy nhiên nó được làm miễn phí cho Bootstrap. Vì vậy, chúng tôi sẽ rất cảm ơn nếu bạn gắn một liên kết tới Glyphicons nếu có thể.

  • glyphicon glyphicon-asterisk
  • glyphicon glyphicon-plus
  • glyphicon glyphicon-euro
  • glyphicon glyphicon-minus
  • glyphicon glyphicon-cloud
  • glyphicon glyphicon-envelope
  • glyphicon glyphicon-pencil
  • glyphicon glyphicon-glass
  • glyphicon glyphicon-music
  • glyphicon glyphicon-search
  • glyphicon glyphicon-heart
  • glyphicon glyphicon-star
  • glyphicon glyphicon-star-empty
  • glyphicon glyphicon-user
  • glyphicon glyphicon-film
  • glyphicon glyphicon-th-large
  • glyphicon glyphicon-th
  • glyphicon glyphicon-th-list
  • glyphicon glyphicon-ok
  • glyphicon glyphicon-remove
  • glyphicon glyphicon-zoom-in
  • glyphicon glyphicon-zoom-out
  • glyphicon glyphicon-off
  • glyphicon glyphicon-signal
  • glyphicon glyphicon-cog
  • glyphicon glyphicon-trash
  • glyphicon glyphicon-home
  • glyphicon glyphicon-file
  • glyphicon glyphicon-time
  • glyphicon glyphicon-road
  • glyphicon glyphicon-download-alt
  • glyphicon glyphicon-download
  • glyphicon glyphicon-upload
  • glyphicon glyphicon-inbox
  • glyphicon glyphicon-play-circle
  • glyphicon glyphicon-repeat
  • glyphicon glyphicon-refresh
  • glyphicon glyphicon-list-alt
  • glyphicon glyphicon-lock
  • glyphicon glyphicon-flag
  • glyphicon glyphicon-headphones
  • glyphicon glyphicon-volume-off
  • glyphicon glyphicon-volume-down
  • glyphicon glyphicon-volume-up
  • glyphicon glyphicon-qrcode
  • glyphicon glyphicon-barcode
  • glyphicon glyphicon-tag
  • glyphicon glyphicon-tags
  • glyphicon glyphicon-book
  • glyphicon glyphicon-bookmark
  • glyphicon glyphicon-print
  • glyphicon glyphicon-camera
  • glyphicon glyphicon-font
  • glyphicon glyphicon-bold
  • glyphicon glyphicon-italic
  • glyphicon glyphicon-text-height
  • glyphicon glyphicon-text-width
  • glyphicon glyphicon-align-left
  • glyphicon glyphicon-align-center
  • glyphicon glyphicon-align-right
  • glyphicon glyphicon-align-justify
  • glyphicon glyphicon-list
  • glyphicon glyphicon-indent-left
  • glyphicon glyphicon-indent-right
  • glyphicon glyphicon-facetime-video
  • glyphicon glyphicon-picture
  • glyphicon glyphicon-map-marker
  • glyphicon glyphicon-adjust
  • glyphicon glyphicon-tint
  • glyphicon glyphicon-edit
  • glyphicon glyphicon-share
  • glyphicon glyphicon-check
  • glyphicon glyphicon-move
  • glyphicon glyphicon-step-backward
  • glyphicon glyphicon-fast-backward
  • glyphicon glyphicon-backward
  • glyphicon glyphicon-play
  • glyphicon glyphicon-pause
  • glyphicon glyphicon-stop
  • glyphicon glyphicon-forward
  • glyphicon glyphicon-fast-forward
  • glyphicon glyphicon-step-forward
  • glyphicon glyphicon-eject
  • glyphicon glyphicon-chevron-left
  • glyphicon glyphicon-chevron-right
  • glyphicon glyphicon-plus-sign
  • glyphicon glyphicon-minus-sign
  • glyphicon glyphicon-remove-sign
  • glyphicon glyphicon-ok-sign
  • glyphicon glyphicon-question-sign
  • glyphicon glyphicon-info-sign
  • glyphicon glyphicon-screenshot
  • glyphicon glyphicon-remove-circle
  • glyphicon glyphicon-ok-circle
  • glyphicon glyphicon-ban-circle
  • glyphicon glyphicon-arrow-left
  • glyphicon glyphicon-arrow-right
  • glyphicon glyphicon-arrow-up
  • glyphicon glyphicon-arrow-down
  • glyphicon glyphicon-share-alt
  • glyphicon glyphicon-resize-full
  • glyphicon glyphicon-resize-small
  • glyphicon glyphicon-exclamation-sign
  • glyphicon glyphicon-gift
  • glyphicon glyphicon-leaf
  • glyphicon glyphicon-fire
  • glyphicon glyphicon-eye-open
  • glyphicon glyphicon-eye-close
  • glyphicon glyphicon-warning-sign
  • glyphicon glyphicon-plane
  • glyphicon glyphicon-calendar
  • glyphicon glyphicon-random
  • glyphicon glyphicon-comment
  • glyphicon glyphicon-magnet
  • glyphicon glyphicon-chevron-up
  • glyphicon glyphicon-chevron-down
  • glyphicon glyphicon-retweet
  • glyphicon glyphicon-shopping-cart
  • glyphicon glyphicon-folder-close
  • glyphicon glyphicon-folder-open
  • glyphicon glyphicon-resize-vertical
  • glyphicon glyphicon-resize-horizontal
  • glyphicon glyphicon-hdd
  • glyphicon glyphicon-bullhorn
  • glyphicon glyphicon-bell
  • glyphicon glyphicon-certificate
  • glyphicon glyphicon-thumbs-up
  • glyphicon glyphicon-thumbs-down
  • glyphicon glyphicon-hand-right
  • glyphicon glyphicon-hand-left
  • glyphicon glyphicon-hand-up
  • glyphicon glyphicon-hand-down
  • glyphicon glyphicon-circle-arrow-right
  • glyphicon glyphicon-circle-arrow-left
  • glyphicon glyphicon-circle-arrow-up
  • glyphicon glyphicon-circle-arrow-down
  • glyphicon glyphicon-globe
  • glyphicon glyphicon-wrench
  • glyphicon glyphicon-tasks
  • glyphicon glyphicon-filter
  • glyphicon glyphicon-briefcase
  • glyphicon glyphicon-fullscreen
  • glyphicon glyphicon-dashboard
  • glyphicon glyphicon-paperclip
  • glyphicon glyphicon-heart-empty
  • glyphicon glyphicon-link
  • glyphicon glyphicon-phone
  • glyphicon glyphicon-pushpin
  • glyphicon glyphicon-usd
  • glyphicon glyphicon-gbp
  • glyphicon glyphicon-sort
  • glyphicon glyphicon-sort-by-alphabet
  • glyphicon glyphicon-sort-by-alphabet-alt
  • glyphicon glyphicon-sort-by-order
  • glyphicon glyphicon-sort-by-order-alt
  • glyphicon glyphicon-sort-by-attributes
  • glyphicon glyphicon-sort-by-attributes-alt
  • glyphicon glyphicon-unchecked
  • glyphicon glyphicon-expand
  • glyphicon glyphicon-collapse-down
  • glyphicon glyphicon-collapse-up
  • glyphicon glyphicon-log-in
  • glyphicon glyphicon-flash
  • glyphicon glyphicon-log-out
  • glyphicon glyphicon-new-window
  • glyphicon glyphicon-record
  • glyphicon glyphicon-save
  • glyphicon glyphicon-open
  • glyphicon glyphicon-saved
  • glyphicon glyphicon-import
  • glyphicon glyphicon-export
  • glyphicon glyphicon-send
  • glyphicon glyphicon-floppy-disk
  • glyphicon glyphicon-floppy-saved
  • glyphicon glyphicon-floppy-remove
  • glyphicon glyphicon-floppy-save
  • glyphicon glyphicon-floppy-open
  • glyphicon glyphicon-credit-card
  • glyphicon glyphicon-transfer
  • glyphicon glyphicon-cutlery
  • glyphicon glyphicon-header
  • glyphicon glyphicon-compressed
  • glyphicon glyphicon-earphone
  • glyphicon glyphicon-phone-alt
  • glyphicon glyphicon-tower
  • glyphicon glyphicon-stats
  • glyphicon glyphicon-sd-video
  • glyphicon glyphicon-hd-video
  • glyphicon glyphicon-subtitles
  • glyphicon glyphicon-sound-stereo
  • glyphicon glyphicon-sound-dolby
  • glyphicon glyphicon-sound-5-1
  • glyphicon glyphicon-sound-6-1
  • glyphicon glyphicon-sound-7-1
  • glyphicon glyphicon-copyright-mark
  • glyphicon glyphicon-registration-mark
  • glyphicon glyphicon-cloud-download
  • glyphicon glyphicon-cloud-upload
  • glyphicon glyphicon-tree-conifer
  • glyphicon glyphicon-tree-deciduous

Cách sử dụng

Vì lý do hiệu năng, toàn bộ các biểu tượng yêu cầu một class cơ sở và class cụ thể cho các biểu tượng đó. Để sử dụng, hãy thêm đoạn code sau đây vào nơi bạn sử dụng. Để hiển thị được tốt, bạn hãy nhớ luôn thêm một khoảng trắng vào giữa biểu tượng và text.

Đừng kết hợp với các thành phần khác

Các class biểu tượng không thể kết hợp trực tiếp với các thành phần khác. Cũng không nên sử dụng chúng với các class khác trên cùng một phần tử. Thay vì thế, hãy thêm <span> vào bên trong của phần tử đó và sử dụng các class biểu tượng trên <span> đó.

Chỉ sử dụng trên các phần tử rỗng

Các class biểu tượng chỉ nên được sử dụng trên các phần tử không chứa nội dung hoặc chứa các phần tử khác.

Thay đổi nơi lưu trữ font biểu tượng

Mặc định các tập tin font biểu tượng được lưu trữ trong thư mục ../fonts/ nằm ở vị trí tương đối với các tập tin CSS. Ví dụ, nếu như tập tin CSS của bạn được lưu trữ ở http://example.com/foobar/css/bootstrap.css, thì các tập tin font biểu tượng sẽ được lưu trữ tại http://example.com/foobar/fonts/glyphicons-halflings-regular.woff.

Nêu như bạn đang lưu trữ các tập tin font biểu tượng ở đâu đó (khác mặc định) hoặc thay đổi tên của tập tin, bạn sẽ phải thay đổi @icon-font-path và/hoặc các biến Less @icon-font-name tương ứng.

@importing Bootstrap thông qua Less có thể yêu cầu việc điều chỉnh nơi lưu trữ font biểu tượng

Nếu như bạn @import mã nguồn Less của Bootstrap vào các tập tin Less của riêng bạn, bạn sẽ phải thay đổi biến số Less @icon-font-path để các đường dẫn tương đối trong url(...) có thể hoạt động được.

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

Các ví dụ

Hãy sử dụng chúng trên các nút, các nhóm nút cho một thanh công cụ, thanh điều hướng hay các input cho phép gắn icon biểu tượng vào đằng trước.

<button type="button" class="btn btn-default btn-lg">
  <span class="glyphicon glyphicon-star"></span> Star
</button>

Menu sổ xuống

Các menu ngữ cảnh hoặc menu đóng/mở (toggleable menu) được sử dụng để hiển thị danh sách các liên kết.Thành phần này có thể tương tác với plugin dropdown.

Hãy bọc menu sổ xuống và phần tử kích hoạt menu bằng một .dropdown, hoặc bằng một phần tử khác được thiết lập position: relative;. Rồi sau đó, bạn hãy thêm mã HTML chơ menu đó.

<div class="dropdown">
  <button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

Mặc định, một menu sổ xuống sẽ tự động được định vị vị trí 100% tính từ bên trên và dọc theo bên trái của phần tử cha. Hãy thêm .dropdown-menu-right vào một .dropdown-menu để căn phải menu sổ xuống.

Có thể yêu cầu thêm việc tùy biến vị trí

Các menu sổ xuống thương được định vị bằng CSS trong document. Điều này có nghĩa là menu sổ xuống có thể bị cắt bỏ bởi phần tử cha của chúng với giá trị overflow nào đó hoặc hiển thị vượt ra khỏi khung nhìn. Khi những vấn đề này xuất hãy, bạn hãy chủ động tự mình giải quyết.

Loại bỏ căn chỉnh theo .pull-right

Trong phiên bản v3.1.0, chúng ta đã loại bỏ class .pull-right trên các menu sổ xuống. Để căn phải một menu, hãy sử dụng class .dropdown-menu-right. Right-aligned nav components in the navbar use a mixin version of this class to automatically align the menu. To override it, use .dropdown-menu-left.

<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>

Thêm một tiêu đề cho từng phần nhỏ trong menu của bạn.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu2">
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
  <li role="presentation" class="divider"></li>
  <li role="presentation" class="dropdown-header">Dropdown header</li>
  ...
</ul>

Hãy thêm class .disabled vào một <li> trong menu để vô hiệu hóa liên kết đó.

<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu3">
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Regular link</a></li>
  <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Disabled link</a></li>
  <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another link</a></li>
</ul>

Nhóm nút

Gộp một chuỗi các nút lại cùng nhau trên cùng một dòng bằng cách sử dụng nhóm nút. Bạn cũng có biến nhóm nút thành các radio hoặc checkbox với plugin nút của chúng tôi.

Chú thích & popover trong nhóm nút yêu cầu các thiết lập đặc biệt

Khi sử dụng chú thích hoặc popover trên các phần tử nằm bên trong một .btn-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' để tránh các hiệu ứng không mong muốn (side effect) (ví dụ như các phần tử lớn dần lên hoặc bị mất góc bo tròn khi chú thích hoặc popover được kích hoạt).

Ví dụ cơ bản

Hãy đặt một chuỗi nút với class .btn bên trong một .btn-group.

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Thanh công cụ dạng nút

Kết hợp các tập hợp <div class="btn-group"> thành <div class="btn-toolbar"> đối với các thành phần phức tạp.

<div class="btn-toolbar" role="toolbar">
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
  <div class="btn-group">...</div>
</div>

Kích thước

Thay vì áp dụng các class kích thước cho từng nút trong một nhóm, hãy thêm .btn-group-* vào .btn-group.

<div class="btn-group btn-group-lg">...</div>
<div class="btn-group">...</div>
<div class="btn-group btn-group-sm">...</div>
<div class="btn-group btn-group-xs">...</div>

Lồng nhau

Hãy đặt một .btn-group bên trong một .btn-group khác khi bạn muốn menu sổ xuống kết hợp với nhóm các nút.

<div class="btn-group">
  <button type="button" class="btn btn-default">1</button>
  <button type="button" class="btn btn-default">2</button>

  <div class="btn-group">
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
      Dropdown
      <span class="caret"></span>
    </button>
    <ul class="dropdown-menu">
      <li><a href="#">Dropdown link</a></li>
      <li><a href="#">Dropdown link</a></li>
    </ul>
  </div>
</div>

Biến đổi theo chiều dọc

Làm cho một nhóm các nút hiển thị dưới dạng xếp chồng lên nhau theo hàng dọc thay vì dàn hàng ngang. Các menu dạng nút có phân chia không được hỗ trợ trong trường hợp này.

<div class="btn-group-vertical">
  ...
</div>

Nhóm nút được căn đều

Làm cho các nhóm nút có chiều rộng trải dài đúng bằng với chiều rộng của phần tử cha, cũng hoạt động với các menu sổ xuống dạng nút bên trong một nhóm các nút.

Xử lý đường viền

Do mã HTML và CSS cụ thể được sử dụng để căn đều các nút (cụ thể là display: table-cell), nên các đường viền nằm giữa các nút bị nhân đôi. Đối với các nhóm nút thông thường, margin-left: -1px được sử dụng để xếp chồng các đường viền lên nhau thay vì xóa bỏ chúng. Tuy nhiên, margin không hoạt động với display: table-cell. Kết quả là, tùy thuộc vào việc tùy chỉnh của bạn đối với Bootstrap, bạn có thể xóa bỏ hoặc đổi màu các đường viền như mong muốn.

Trình duyệt IE8 and đường viền

Trình duyệt Internet Explorer 8 không sinh ra các đường viền trong một nhóm nút được căn đều, bất kể là trên phần tử <a> hay <button>. Để giải quyết vấn đề này, bạn hãy đặt mỗi nút của bạn vào trong một .btn-group.

Hãy tham khảo #12476 để biết thêm chi tiết.

Với phần tử <a>

Hãy bọc chuỗi các phần tử a có class .btn bằng .btn-group.btn-group-justified.

<div class="btn-group btn-group-justified">
  ...
</div>

Với phần tử <button>

Để sử dụng các nhóm nút căn đều có các nút dạng <button>, bạn phải bọc mỗi nút bằng một nhóm nút. Hầu hết các trình duyệt không áp dụng CSS của Bootstrap cho việc căn đều các phần tử <button>, tuy nhiền vì chúng tôi hỗ trợ các menu dạng nút nên chúng tôi có thể xử lý vấn đề đó.

<div class="btn-group btn-group-justified">
  <div class="btn-group">
    <button type="button" class="btn btn-default">Left</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Middle</button>
  </div>
  <div class="btn-group">
    <button type="button" class="btn btn-default">Right</button>
  </div>
</div>

Menu sổ xuống dạng nút

Bạn có thể sử dụng bất kỳ phần tử nào làm phần tử kích hoạt bằng cách đặt nó nẳm bên trong .btn-group và thêm markup cho menu cho phù hợp.

Tính phụ thuộc của plugin

Các menu sổ xuống dạng nút yêu cầu plugin sổ xuống phải được tích hợp sẵn trong phiên bản Bootstrap mà bạn sử dụng.

Các menu dạng nút đơn lẻ

Biến một nút bất kỳ thành một menu sổ xuống bằng một số thay đổi cơ bản của markup.

<!-- Single button -->
<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Menu sổ xuống dạng nút có phân chia

Tương tự trường hợp trên, bạn có thể tạo ra các menu sổ xuống có phân chia bằng việc thay đổi chỉ một chút markup, chỉ áp dụng với nút dạng phân chia.

<!-- Split button -->
<div class="btn-group">
  <button type="button" class="btn btn-danger">Action</button>
  <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Kích thước

Các menu sổ xuống dạng nút có thể hoạt động với mọi kích thước của nút.

<!-- Large button group -->
<div class="btn-group">
  <button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown">
    Large button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-sm dropdown-toggle" type="button" data-toggle="dropdown">
    Small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

<!-- Extra small button group -->
<div class="btn-group">
  <button class="btn btn-default btn-xs dropdown-toggle" type="button" data-toggle="dropdown">
    Extra small button <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    ...
  </ul>
</div>

Menu sổ lên

Để kích hoạt menu sổ lên, bạn hãy thêm class .dropup vào phần tử cha.

<div class="btn-group dropup">
  <button type="button" class="btn btn-default">Dropup</button>
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <!-- Dropdown menu links -->
  </ul>
</div>

Nhóm input

Bạn có thể mở rộng các form-control bằng cách thêm text hoặc các nút vào phía trước, phía sau hoặc cả hai phía của bất kỳ input dạng này nào. Hãy sử dụng .input-group cùng với .input-group-addon để gắn thêm các phần tử vào phía trước hoặc phía sau của .form-control.

Tính tương thích với các trình duyệt

Hãy tránh sử dụng phần tử <select> trong nhóm input vì chúng có thể không được style một cách đầy đủ trên các trình duyệt WebKit.

Chú thích & popover trong nhóm input yêu cầu thiết lập đặc biệt

Khi sử dụng chú thích và popovers trên các phần tử nằm bên trong .input-group, bạn sẽ phải chỉ rõ tùy chọn container: 'body' để tránh các hiệu ứng không mong muốn (side effect) (ví dụ như phần tử trở nên lớn hơn hoặc bị mất góc bo tròn khi tooltip hoặc popover được kích hoạt).

Đừng sử dụng cùng các thành phần khác

Không nên sử dụng form-group hoặc các class của lưới với nhóm input một cách trực tiếp. Thay vì thế, hãy đặt nhóm input vào bên trong một form-group hoặc một phần tử dạng lưới.

Ví dụ cơ bản

Bạn có thể đặt một add-on hoặc một nút vào phía trước, phía sau hoặc cả hai phía của input.

Chúng tôi không hỗ trợ việc thêm nhiều add-on vào cùng một phía của một input.

Chúng tôi cũng không hỗ trợ việc sử dụng nhiều form-control trong một nhóm input đơn lẻ

@

.00

$ .00
<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
  <span class="input-group-addon">.00</span>
</div>

Kích thước

Hãy thêm các class kích thước của form vào cùng với .input-group và nội dung bên trong sẽ tự động thay đổi—không nhất thiết phải lặp đi lặp lại việc thêm các class kích thươc của form cho từng phần tử trong nhóm.

@

@

@
<div class="input-group input-group-lg">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group input-group-sm">
  <span class="input-group-addon">@</span>
  <input type="text" class="form-control" placeholder="Username">
</div>

Các addon dạng checkbox và radio

Bạn có thể đặt checkbox hoặc radio vào bên trong một addon của nhóm input thay vì text

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="checkbox">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-addon">
        <input type="radio">
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Các addon dạng nút

Các nút nằm trong nhóm input có một chút khác biệt và yêu cầu thêm một cấp lồng nhau. Thay vì .input-group-addon, bạn sẽ phải sử dụng .input-group-btn để bọc các nút.Việc này là cần thiết do các style của trình duyệt mặc định không thể bị ghi đè.

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Các nút cùng với menu sổ xuống

<div class="row">
  <div class="col-lg-6">
    <div class="input-group">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control">
      <div class="input-group-btn">
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
        <ul class="dropdown-menu dropdown-menu-right">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
        </ul>
      </div><!-- /btn-group -->
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Các nút phân đoạn

<div class="input-group">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
  <input type="text" class="form-control">
</div>

<div class="input-group">
  <input type="text" class="form-control">
  <div class="input-group-btn">
    <!-- Button and dropdown menu -->
  </div>
</div>

Thành phần điều hướng

Các thành phần điều hướng trong Bootstrap đều có dạng markup và trạng thái giống nhau, bắt đầu với class cơ sở .nav. Đổi chỗ các class để hoán đổi các style với nhau.

Hãy lưu ý rằng class .nav-tabs luôn yêu cầu class cơ sở .nav.

<ul class="nav nav-tabs" role="tablist">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Yêu cầu plugin thẻ

Đối với các thẻ cùng với nội dung, bạn phải sử dụng plugin thẻ.

Sử dụng mã HTML như trên nhưng thay vì sử dụng .nav-tabs, bạn hãy sử dụng .nav-pills:

<ul class="nav nav-pills">
  <li class="active"><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

Thành phần điều hướng dạng viên thuốc cũng có thể xếp chồng lên nhau theo hàng dọc. Để làm được điều đó, bạn chỉ cần thêm .nav-stacked.

<ul class="nav nav-pills nav-stacked">
  ...
</ul>

Khi kích thước màn hình lớn hơn 768px, bạn có thể dễ dàng biến chiều rộng của thành phần điều hướng dạng thẻ và thành phần điều hướng dạng viên thuốc bằng với chiều rộng của phần tử cha bằng cách sử dụng .nav-justified. Trên các màn hình nhỏ hơn, các liên kết điều hướng được xếp chồng lên nhau.

Trình duyệt Safari và các thành phần điều hướng căn đều responsive

Trong phiên bản v7.0.1, trình duyệt Safari có một lỗi mà khi bạn thay đổi kích thước của trình duyệt theo chiều ngang sẽ gây ra lỗi đối với các thành phần điều hướng căn đều. Lỗi này cũng được chỉ ra trong phần ví dụ về thành phần điều hướng căn đều.

<ul class="nav nav-tabs nav-justified" role="tablist">
  ...
</ul>
<ul class="nav nav-pills nav-justified">
  ...
</ul>

Đối với các thành phần điều hướng (dạng thẻ hoặc dạng viên thuốc), hãy thêm .disabled để biến các liên kết thành màu xám và không các hiệu ứng di chuột khi di chuột qua.

Tính năng liên kết không bị ảnh hưởng

Class này sẽ chỉ thay đổi về mặt hình thức của <a> chứ không ảnh hưởng đến tính năng của nó. Hãy sử dụng JavaScript để vô hiệu hóa tính năng liên kết nếu bạn muốn.

<ul class="nav nav-pills">
  ...
  <li class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

Bạn có thể thêm menu sổ xuống bằng việc sử dụng plugin sổ xuống cùng với một số ít mã HTML.

Thành phần điều hướng dạng thẻ và menu sổ xuống

<ul class="nav nav-tabs" role="tablist">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Thành phần điều hướng dạng viên thuốc và menu sổ xuống

<ul class="nav nav-pills">
  ...
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">
      Dropdown <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      ...
    </ul>
  </li>
  ...
</ul>

Thanh điều hướng

Thanh điều hướng là thành phần responsive thường được sử dụng trong phần header trong website của bạn. Thông thường, ban đầu chúng được thu gọn lại (và mở ra khi kích hoạt) trên khung nhìn của điện thoại di động và sẽ được mở rộng ra khi chiều rộng của khung nhìn tăng lên.

Nội dung bị tràn

Vì Bootstrap không biết lượng không gian mà nội dung của bạn cần trong thanh điều hướng, có thể bạn sẽ gặp lỗi nội dung bị tràn xuống dòng thứ hai. Để sửa lỗi này, bạn có thể:

  1. Giảm số lượng thành phần hoặc giảm chiều rộng của các thành phần trong thanh điều hướng
  2. Ẩn đi một số thành phần trong thanh điều hướng khi khung nhìn ở một kích thước nhất định bằng cách sử dụng các class responsive tiện ích.
  3. Thay đổi điểm mốc mà ở đó thanh điều hướng của bạn chuyển từ trạng thái mở rộng sang trạng thái thu gọn và ngược lại. Hãy tùy chỉnh biến số @grid-float-breakpoint hoặc thêm media query của riêng bạn.

Đòi hỏi JavaScript

Nếu như JavaScript bị vô hiệu hóa và kích thước khung nhìn đủ nhỏ để thanh điều hướng chuyển sang trạng thái thu gọn thì bạn sẽ không thể mở rộng thanh điều hướng và xem nội dung bên trong .navbar-collapse.

Thay đổi mốc chuyển đổi trạng thái của thanh điều hướng

Thanh điều hướng sẽ tự động chuyển về trạng thái thu gọn khi chiều rộng khung nhìn nhỏ hơn @grid-float-breakpoint, và sẽ tự động mở rộng ra như bình thường khi chiều rộng khung nhìn lớn hơn hoặc bằng @grid-float-breakpoint. Hãy điều chỉnh giá trị này trong mã nguồn Less để thay đổi mốc chuyển đổi trạng thái thu gọn/mở rộng. Giá trị mặc định là 768px (màn hình máy tính bảng).

<nav class="navbar navbar-default" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
            <li class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Tính phụ thuộc của plugin

Thanh điều hướng responsive yêu cầu plugin thu gọn phải được tích hợp trong phiên bản Bootstrap mà bạn sử dụng.

Thân thiện với người khuyết tật

Hãy thêm role="navigation" vào tất cả các thanh điều hướng để hỗ trợ sử dụng cho người khuyết tật.

Đặt nội dung của form vào bên trong .navbar-form để form được căn theo chiều dọc và có thể thu gọn khi kích thước khung nhìn đủ hẹp. Hãy sử dụng các tùy chọn căn chỉnh để xác định vị trí mà form nằm bên trong nội dung của thanh điều hướng.

.navbar-form.form-inline được viết khá giống nhau dựa trên mixin. Một số form-control như nhóm input có thể yêu cầu việc thiết lập chiều rộng cố định để hiển thị một cách tốt nhất bên tron thanh điều hướng.

<form class="navbar-form navbar-left" role="search">
  <div class="form-group">
    <input type="text" class="form-control" placeholder="Search">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

Vấn đề với các thiết bị di động

Có một số vấn đề liên quan đến việc sử dụng form-control bên trong các phần tử cố định trên các thiết bị di động. Hãy tham khảo tài liệu hỗ trợ trình duyệt của chúng tôi để biết thêm chi tiết.

Hãy luôn luôn thêm nhãn

Các trình đọc màn hình sẽ gặp lỗi với form của bạn nếu bạn không sử dụng nhãn cho tất cả các input. Đối với các form cùng dòng nằm trong thanh điều hướng, bạn có thể ẩn các nhãn đi bằng cách sử dụng .sr-only class.

Hãy thêm class .navbar-btn vào phần tử <button> không nằm bên trong <form> để tự động căn giữa chúng theo chiều dọc bên trong thanh điều hướng.

<button type="button" class="btn btn-default navbar-btn">Sign in</button>

Sử dụng theo ngữ cảnh cụ thể

Tương tự như các class cho nút, .navbar-btn có thể được sử dụng trên các phần tử <a><input>. Tuy nhiên, cả .navbar-btn và các class cho nút không nên sử dụng trên phần tử <a> nằm bên trong .navbar-nav.

Hãy bọc chuỗi các text bằng một phần tử có class .navbar-text, phần tử đó thường là thẻ <p> để hiển thị được tốt.

<p class="navbar-text">Signed in as Mark Otto</p>

Nếu bạn muốn thêm một liên kết vào bên trong thanh điều hướng nhưng không dùng để điều hướng, hãy sử dụng class .navbar-link để hiển thị màu mặc định của một liên kết phân biệt với các thành phần điều hướng.

<p class="navbar-text navbar-right">Signed in as <a href="#" class="navbar-link">Mark Otto</a></p>

Căn chỉnh các liên kết, form, nút, hoặc text trong thanh điều hướng bằng cách sử dụng các class .navbar-left hoặc .navbar-right. Cả hai class sẽ thêm thêm các thuộc tính CSS float theo các hướng cụ thể. Ví dụ, để căn chỉnh các liên kết điều hướng, hãy đặt chúng vào bên trong một <ul> riêng biệt và áp dụng các class căn chỉnh lên thẻ <ul> đó.

These classes are mixin-ed versions of .pull-left and .pull-right, but they're scoped to media queries for easier handling of navbar components across device sizes.

Căn phải nhiều thành phần

Thanh điều hướng hiện tại có một số hạn chế khi sử dụng nhiều class .navbar-right. Để nội dung được hiển thị tốt, chúng tôi sử dụng margin âm trên phần tử .navbar-right cuối cùng. Khi có nhiều phần tử sử dụng class đó, các margin này sẽ không làm việc như mong đợi.

Chúng tôi sẽ cân nhắc vấn đề này khi chúng tôi viết lại thành phần đó trong phiên bản v4.

Hãy thêm class .navbar-fixed-top và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Yêu cầu padding cho body

Thanh điều hướng cố định sẽ hiển thị đè lên trên các nội dung khác của bạn, trừ khi bạn thêm padding trên vào <body>. Hãy thử sử dụng các giá trị của bạn hoặc sử dụng đoạn mã ngắn bên dưới của chúng tôi. Lưu ý: Mặc định, thanh điều hướng có chiều cao là 50px.

body { padding-top: 70px; }

Hãy thêm đoạn mã này vào sau mã CSS lõi của Bootstrap.

Hãy thêm class .navbar-fixed-bottom và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

<nav class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Yêu cầu padding cho body

Thanh điều hướng cố định sẽ hiển thị đè lên trên các nội dung khác của bạn, trừ khi bạn thêm padding dưới vào <body>. Hãy thử sử dụng các giá trị của bạn hoặc sử dụng đoạn mã ngắn bên dưới của chúng tôi. Lưu ý: Mặc định, thanh điều hướng có chiều cao là 50px.

body { padding-bottom: 70px; }

Hãy thêm đoạn mã này vào sau mã CSS lõi của Bootstrap.

Nếu bạn muốn tạo ra một thanh điều hướng không cố định khi cuộn trang, hãy thêm .navbar-static-top và sử dụng .container hoặc .container-fluid để căn giữa và tạo khoảng đệm cho nội dung của thanh điều hướng.

Không giống như các class .navbar-fixed-*, bạn sẽ không cần phải thay đổi padding của body.

<nav class="navbar navbar-default navbar-static-top" role="navigation">
  <div class="container">
    ...
  </div>
</nav>

Bạn có thể thay đổi hình thức của thanh điều hướng bằng cách sử dụng class .navbar-inverse.

<nav class="navbar navbar-inverse" role="navigation">
  ...
</nav>

Breadcrumbs

Chỉ rõ vị trị của trang hiện tại bên trong một cấu trúc điều hướng theo cấp.

Các dấu phân cách sẽ được tự động thêm vào mã CSS thông qua :beforecontent.

<ol class="breadcrumb">
  <li><a href="#">Home</a></li>
  <li><a href="#">Library</a></li>
  <li class="active">Data</li>
</ol>

Phân trang

Cung cấp các liên kết phân trang cho website hoặc ứng dụng của bạn với thành phần phân trang, hoặc đơn giản hơn là theo dạng pager.

Phân trang mặc định

Thành phần phân trạng đơn giản lấy cảm hứng từ Rdio, rất hữu ích trong việc hiển thị kết quả tìm kiếm và cho các ứng dụng. Thành phần này được hiển thị dưới dạng các khối lớn nên rất khó để người dùng bấm trượt, ngoài ra nó cũng có thể mở rộng một cách dễ dàng.

<ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

Trạng thái đang kích hoạt và trạng thái vô hiệu hóa

Các liên kết được tùy chỉnh tương ứng với các trường hợp khác nhau. Hãy sử dụng .disabled đối với các liên kết không thể click và sử dụng .active để xác định trang nào là trang hiện tại.

<ul class="pagination">
  <li class="disabled"><a href="#">&laquo;</a></li>
  <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
  ...
</ul>

Bạn cũng có thể áp dụng các trạng thái trên lên thẻ <span> thay vì <a> để xóa bỏ tính năng liên kết của <a> mà vẫn giữ được style như mong đợi.

<ul class="pagination">
  <li class="disabled"><span>&laquo;</span></li>
  <li class="active"><span>1 <span class="sr-only">(current)</span></span></li>
  ...
</ul>

Kích thước

Bạn muốn thành phần phân trang hiển thị theo dạng lớn hay nhỏ? Hãy thêm .pagination-lg hoặc .pagination-sm tương ứng với kích thước mà bạn muốn hiển thị.

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

Pager

Các liên kết "lùi" và "tiến" được sử dụng như một kiểu phân trang đơn giản với chỉ với một chút markup và style, rất thích hợp cho các trang web dạng blog hoặc báo chí.

Ví dụ mặc định

Theo mặc định, pager sẽ tự động căn giữa các liên kết.

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

Căn chinh các liên kết

Bạn có thể căn chỉnh các liên kết về phía mà bạn muốn:

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Trạng thái vô hiệu hóa

Các liên kết pager cũng class .disabled để vô hiệu hóa liên kết khi phân trang.

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

Nhãn

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.

Default Primary Success Info Warning Danger
<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).

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

Thumbnail

Mở rộng hệ thống lưới của Bootstrap với thành phần thumbnail để dễ dàng hiển thị lưới các ảnh, video, text, và còn hơn thế nữa.

Ví dụ cơ bản

Mặc định, thumbnail của Bootstrap được thiết kế để hiển thị các ảnh có liên kết bằng một chút markup.

<div class="row">
  <div class="col-xs-6 col-md-3">
    <a href="#" class="thumbnail">
      <img data-src="holder.js/100%x180" alt="...">
    </a>
  </div>
  ...
</div>

Tùy biến nội dung

Bạn có thể thêm bất kỳ loại nội dung dạng HTML nào như tiêu đề, đoạn văn, các nút... vào trong thumbnail bằng cách bổ sung thêm một chút markup nữa.

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

Generic placeholder thumbnail

Thumbnail label

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.

Button Button

<div class="row">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <img data-src="holder.js/300x200" alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
      </div>
    </div>
  </div>
</div>

Thông báo

Cung cấp các tin nhắn theo ngữ cảnh tương ứng với các hành động đặc trưng của người dùng bằng cách sử dụng các tin nhắn thông báo linh hoạt và dễ sử dụng. Để hủy tin nhắn, hãy them khảo plugin thông báo.

Các ví dụ

Hãy bọc text bất kỳ và nút hủy tin nhắn (nếu có) bằng .alert cùng với một trong bốn class theo ngữ cảnh (e.g., .alert-success) để hiển thị các tin nhắn thông báo một cách cơ bản nhất.

Không có class mặc định

Các tin nhắn thông báo không có class mặc định, chỉ có class cơ sở và các class tùy chỉnh. Một tin nhắn thông báo có màu xám mặc định không có ý nghĩa gì cả, vì thế hãy luôn xác định rõ loại tin nhắn thông qua các class theo ngữ cảnh. Các class đó tương ứng với bốn loại tin nhắn: Thành công, thông tin, cảnh báo hoặc nguy hiểm.

<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>

Hủy tin nhắn thông báo

Bạn có thể thêm nút "hủy tin nhắn" bằng cách thêm .alert-dismissable vào tin nhắn và sử dụng nút "đóng".

<div class="alert alert-warning alert-dismissable" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Đảm bảo hoạt động tốt trên tất cả các loại thiết bị

Hãy luôn sử dụng phần tử <button> cùng với thuộc tính dữ liệu data-dismiss="alert".

Hãy sử dụng class .alert-link để nhanh chóng đổi màu liên kết một cách phù hợp trong tin nhắn.

<div class="alert alert-success" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
  <a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
  <a href="#" class="alert-link">...</a>
</div>

Thanh tiến trình

Cung cấp phản hồi được cập nhật liên tục theo tiến trình của một luồng xử lý hoặc hành động bằng cách sử dụng thanh tiến trình đơn giản mà linh hoạt.

Tính tương thích với các trình duyệt

Thanh tiến trình sử dụng CSS3 transition và animation để tạo ra hiệu ứng. Các thuộc tính này không được hỗ trợ trong trình duyệt Internet Explorer 9 (cũng như các phiên bản cũ hơn) hoặc các phiên bản cũ của trình duyệt Firefox. Ngoài ra, trình duyệt Opera cũng không hỗ trợ animation.

Ví dụ cơ bản

Thanh tiến trình mặc định

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

Thanh tiến trình có gắn nhãn

Hãy xóa bỏ class .sr-only bên trong thanh tiến trình để hiển thị giá trị phần trăm đạt được. Đối với các giá trị phần trăm nhỏ, hãy cân nhắc sử dụng min-width để chắc chắn rằng nhãn sẽ được hiển thị đầy đủ.

60%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

Giá trị phần trăm nhỏ

Thanh tiến trình hiển thị giá trị phần trăm nhỏ dưới dạng số có một chữ số, như 0%, và thiết lập min-width: 20px; để đảm bảo giá trị phần trăm sẽ được hiển thị đầy đủ.

0%
2%
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
    0%
  </div>
</div>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="width: 2%;">
    2%
  </div>
</div>

Các thanh tiến trình theo ngữ cảnh

Thanh tiến trình cũng sử dụng các class theo ngữ cảnh tương tự như đối với nút và tin nhắn thông báo để đảm bảo tính thông nhất về style.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete</span>
  </div>
</div>

Thanh tiến trình dạng kẻ sọc

Thanh tiến trình dạng kẻ sọc được tạo ra bằng cách sử dụng gradient, vì thế thanh tiến trình loại này không được hỗ trợ trong trình duyệt Internet Explorer 8.

40% Complete (success)
20% Complete
60% Complete (warning)
80% Complete (danger)
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress progress-striped">
  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

Thanh tiến trình có hiệu ứng động

Hãy thêm .active vào .progress-striped để tạo hiệu ứng chuyển động cho kẻ sọc theo chiều từ trái sang phải. Thanh tiến trình này không được hỗ trợ trong trình duyệt Internet Explorer 9 (cũng như các phiên bản cũ hơn).

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

Thanh tiến trình dạng chồng lên nhau

Hãy đặt các thanh tiến trình khác nhau vào trong một .progress để xếp chúng chồng lên nhau.

35% Complete (success)
20% Complete (warning)
10% Complete (danger)
<div class="progress">
  <div class="progress-bar progress-bar-success" style="width: 35%">
    <span class="sr-only">35% Complete (success)</span>
  </div>
  <div class="progress-bar progress-bar-warning" style="width: 20%">
    <span class="sr-only">20% Complete (warning)</span>
  </div>
  <div class="progress-bar progress-bar-danger" style="width: 10%">
    <span class="sr-only">10% Complete (danger)</span>
  </div>
</div>

Media

Các style trừu tượng được sử dụng để xây dựng lên nhiều loại thành phần khác nhau (như bình luận trong blog, Tweet,...) đặc trưng bằng một hình ảnh được căn trái hoặc phải bên cạnh nội dung dạng text.

Media mặc định

Các media mặc định thiết lập các đối tượng như hình ảnh, video, audio căn về bên trái hoặc bên phải của khối nội dung.

Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image

Nested media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
<div class="media">
  <a class="pull-left" href="#">
    <img class="media-object" src="..." alt="...">
  </a>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

Danh sách các media

Bạn có thể sử dụng media bên trong một danh sách (rất hữu ích đối với các chủ đề bình luận hoặc danh sách tin tức).

  • Generic placeholder image

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.

    Generic placeholder image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
    Generic placeholder image

    Nested media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
  • Generic placeholder image

    Media heading

    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
  <li class="media">
    <a class="pull-left" href="#">
      <img class="media-object" src="..." alt="...">
    </a>
    <div class="media-body">
      <h4 class="media-heading">Media heading</h4>
      ...
    </div>
  </li>
</ul>

Nhóm danh sách

Nhóm group là một thành phần rất mạnh và linh hoạt trong việc hiển thị không chỉ các danh sách đơn giản, mà còn có các danh sách phức tạp với nội dung tùy biến nữa.

Ví dụ cơ bản

Nhóm danh sách cơ bản nhất là một danh sách các hạng mục không có thứ tự cùng với các class thích hợp. Các nhóm danh sách khác được xây dựng dựa trên dạng cơ bản này bằng cách kết hợp với các tùy chọn được nói đến dưới đây và CSS của riêng bạn nếu cần.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

Badge

Bạn có thể thêm thành phần badget vào bất kỳ mục nào trong nhóm danh sách và nó sẽ tự động được căn chỉnh về phía bên phải.

  • 14 Cras justo odio
  • 2 Dapibus ac facilisis in
  • 1 Morbi leo risus
<ul class="list-group">
  <li class="list-group-item">
    <span class="badge">14</span>
    Cras justo odio
  </li>
</ul>

Các hạng mục có liên kết

Bạn có thể liên kết hóa các hạng mục trong nhóm danh sách bằng cách sử dụng danh sách các thẻ <a> (điều đó có nghĩa là bạn phải sử dụng phần tử cha là <div> thay vì <ul>), không cần thiết phải thêm phần tử cha cho từng liên kết trong nhóm danh sách.

<div class="list-group">
  <a href="#" class="list-group-item active">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Vô hiệu hóa hạng mục

Hãy thêm .disabled vào các .list-group-item để đổi màu chúng thành màu xám, có nghĩa là hạng mục đó đã bị vô hiệu hóa.

<div class="list-group">
  <a href="#" class="list-group-item disabled">
    Cras justo odio
  </a>
  <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item">Morbi leo risus</a>
  <a href="#" class="list-group-item">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item">Vestibulum at eros</a>
</div>

Các class theo ngữ cảnh

Hãy sử dụng các class theo ngữ cảnh để style cho các hạng mục trong danh sách theo dạng mặc định hoặc có liên kết. Ngoài ra, bạn cũng có thể thêm trạng thái đang kích hoạt bằng cách sử dụng class .active.

  • Dapibus ac facilisis in
  • Cras sit amet nibh libero
  • Porta ac consectetur ac
  • Vestibulum at eros
<ul class="list-group">
  <li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
  <li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li>
  <li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
  <li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul>
<div class="list-group">
  <a href="#" class="list-group-item list-group-item-success">Dapibus ac facilisis in</a>
  <a href="#" class="list-group-item list-group-item-info">Cras sit amet nibh libero</a>
  <a href="#" class="list-group-item list-group-item-warning">Porta ac consectetur ac</a>
  <a href="#" class="list-group-item list-group-item-danger">Vestibulum at eros</a>
</div>

Tùy chỉnh nội dung

Bạn có thể thêm bất kỳ mã HTML nào vào bên trong các hạng mục của nhóm danh sách tương tự như ví dụ bên dưới.

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Panel

Hãy sử dụng thành phần panel khi bạn muốn đặt nội dung của bạn vào bên trong một chiếc hộp.

Ví dụ cơ bản

Theo mặc định, toàn bộ những gì .panel làm là thiết lập một số đường viền cơ bản và padding để chứa nội dung của bạn.

Basic panel example
<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

Panel có tiêu đề

Bạn có thể thêm tiêu đề cho panel bằng cách sử dụng .panel-heading. Bạn cũng có thể sử dụng các thẻ từ <h1> tới <h6> cùng với class .panel-title để style thêm cho tiêu đề.

Panel heading without title
Panel content

Panel title

Panel content
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

Hãy bọc các nút và text bổ sung vào bên trong .panel-footer. Lưu ý rằng, footer của panel không kế thừa màu sắc và đường viền khi sử dụng các biến thể theo ngữ cảnh.

Panel content
<div class="panel panel-default">
  <div class="panel-body">
    Panel content
  </div>
  <div class="panel-footer">Panel footer</div>
</div>

Biến thể theo ngữ cảnh

Tương tự như các thành phần khác, bạn có thể dễ dàng tạo ra các panel theo ngữ cảnh cụ thể bằng cách sử dụng các class trạng thái theo ngữ cảnh.

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content

Panel title

Panel content
<div class="panel panel-primary">...</div>
<div class="panel panel-success">...</div>
<div class="panel panel-info">...</div>
<div class="panel panel-warning">...</div>
<div class="panel panel-danger">...</div>

Panel và bảng

Bạn có thể thêm bất kỳ phần tử .table không có đường viền nào vào bên trong một panel để đảm bảo tính thống nhất về giao diện. Nếu như có một .panel-body cùng với bảng, chúng tôi sẽ thêm một đường viền trên cho bảng để phân tách nội dung.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Nếu như không có .panel-body, panel sẽ được hiển thị một cách bình thường.

Panel heading
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>

  <!-- Table -->
  <table class="table">
    ...
  </table>
</div>

Panel và nhóm danh sách

Bạn có thể dễ dàng thêm danh sách nhóm được thiết lập full-width vào bên trong bất kỳ một panel nào.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

  <!-- List group -->
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Thành phần nhúng responsive

Thành phần này cho phép các trình duyệt xác định kích thước của video hoặc slideshow dựa trên chiều rộng của block chứa chúng bằng cách tạo ra một tỷ lệ mà có thể thay đổi một cách thích hợp trên các loại thiết bị khác nhau.

Các quy tắc được áp dụng trực tiếp trên các phần tử <iframe>, <embed>, và <object>; Khi bạn muốn ghép style cho các thuộc tính khác, hãy sử dụng class .embed-responsive-item.

Lưu ý! Bạn không cần phải thêm frameborder="0" trong phần tử <iframe> của bạn vì chúng tôi đã làm sẵn điều đó cho bạn rồi.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

Wells

Well mặc định

Hãy sử dụng well khi bạn muốn tạo ra hiệu ứng đổ bóng vào trong một cách đơn giản.

Look, I'm in a well!
<div class="well">...</div>

Các class tùy chọn

Bạn có thể thay đổi padding và góc bo tròn bằng cách sử dụng hai class tùy chọn.

Look, I'm in a large well!
<div class="well well-lg">...</div>
Look, I'm in a small well!
<div class="well well-sm">...</div>