Các thành phần
Hơn một tá các thành phần có thể tái sử dụng được xây dựng để cung cấp iconography, menu sổ xuống, nhóm input, thanh điều hướng, tin nhắn thông báo và nhiều hơn thế nữa
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.
Các ví dụ
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>Căn chỉnh
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>Tiêu đề
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>Vô hiệu hóa các phần tử của menu
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ẻ
<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.
Thành phần điều hướng dạng thẻ
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ẻ.
Thành phần điều hướng dạng viên thuốc
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>Căn đều
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>Vô hiệu hóa liên kết
Đố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>Sử dụng menu sổ xuống
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 mặc định
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.
Đò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.
Forms
Đặ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 và .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.
Nút
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> và <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.
Text
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>Các liên kết không điều hướng
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 thành phần
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.
Cố định bên trên
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.
Cố định bên dưới
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.
Không cố định
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>Thanh điều hướng đảo ngược
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 :before và content.
<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="#">«</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="#">»</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="#">«</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>«</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="#">← Older</a></li>
<li class="next"><a href="#">Newer →</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="#">← Older</a></li>
<li class="next"><a href="#">Newer →</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.
<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>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.
<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.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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".
Warning! Better check yourself, you're not looking too good.
<div class="alert alert-warning alert-dismissable" role="alert">
<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</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".
Liên kết trong tin nhắn
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.
Well done! You successfully read this important alert message.
Heads up! This alert needs your attention, but it's not super important.
Warning! Better check yourself, you're not looking too good.
Oh snap! Change a few things up and try submitting again.
<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
<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 đủ.
<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 đủ.
<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.
<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.
<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).
<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.
<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.
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.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.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).
-
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.
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.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.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. -
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.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
List group item heading
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
<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>Panel có footer
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 |
<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 |
<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>