Các thành phần
Hơn một tá thành phần có thể tái sử dụng được xây dựng để cung cấp biểu tượng, danh sách thả xuống, nhóm đầu vào, điều hướng, cảnh báo và hơn thế nữa.
Hơn một tá thành phần có thể tái sử dụng được xây dựng để cung cấp biểu tượng, danh sách thả xuống, nhóm đầu vào, điều hướng, cảnh báo và hơn thế nữa.
Bao gồm hơn 250 glyph ở định dạng phông chữ từ bộ Glyphicon Halflings. Glyphicons Halflings thường không có sẵn miễn phí, nhưng người tạo ra chúng đã cung cấp miễn phí cho Bootstrap. Để cảm ơn bạn, chúng tôi chỉ yêu cầu bạn bao gồm một liên kết quay lại Glyphicons bất cứ khi nào có thể.
Vì lý do hiệu suất, tất cả các biểu tượng yêu cầu một lớp cơ sở và lớp biểu tượng riêng lẻ. Để sử dụng, hãy đặt mã sau ở bất kỳ đâu. Đảm bảo để lại một khoảng trống giữa biểu tượng và văn bản để có phần đệm thích hợp.
Các lớp biểu tượng không thể được kết hợp trực tiếp với các thành phần khác. Chúng không nên được sử dụng cùng với các lớp khác trên cùng một phần tử. Thay vào đó, hãy thêm một lồng nhau <span>
và áp dụng các lớp biểu tượng cho <span>
.
Các lớp 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 văn bản và không có phần tử con.
Bootstrap giả định rằng các tệp phông chữ biểu tượng sẽ nằm trong thư mục ../fonts/
, liên quan đến các tệp CSS đã biên dịch. Di chuyển hoặc đổi tên các tệp phông chữ đó có nghĩa là cập nhật CSS theo một trong ba cách:
@icon-font-path
và / hoặc @icon-font-name
các biến trong tệp nguồn Ít hơn.url()
đường dẫn trong CSS đã biên dịch.Sử dụng bất kỳ tùy chọn nào phù hợp nhất với thiết lập phát triển cụ thể của bạn.
Các phiên bản hiện đại của công nghệ hỗ trợ sẽ thông báo nội dung được tạo CSS, cũng như các ký tự Unicode cụ thể. Để tránh đầu ra ngoài ý muốn và khó hiểu trong trình đọc màn hình (đặc biệt khi các biểu tượng được sử dụng hoàn toàn để trang trí), chúng tôi ẩn chúng bằng aria-hidden="true"
thuộc tính.
Nếu bạn đang sử dụng một biểu tượng để truyền đạt ý nghĩa (thay vì chỉ là một yếu tố trang trí), hãy đảm bảo rằng ý nghĩa này cũng được chuyển tải đến các công nghệ hỗ trợ - ví dụ: bao gồm nội dung bổ sung, được ẩn trực quan với .sr-only
lớp.
Nếu bạn đang tạo điều khiển không có văn bản nào khác (chẳng hạn như <button>
chỉ chứa một biểu tượng), bạn phải luôn cung cấp nội dung thay thế để xác định mục đích của điều khiển, để nó có ý nghĩa đối với người dùng công nghệ hỗ trợ. Trong trường hợp này, bạn có thể thêm một aria-label
thuộc tính trên chính điều khiển.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
Sử dụng chúng trong các nút, nhóm nút cho thanh công cụ, điều hướng hoặc đầu vào biểu mẫu thêm sẵn.
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
Một biểu tượng được sử dụng trong cảnh báo để truyền đạt rằng đó là một thông báo lỗi, với .sr-only
văn bản bổ sung để truyền đạt gợi ý này cho người dùng công nghệ hỗ trợ.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
</div>
Menu ngữ cảnh có thể chuyển đổi để hiển thị danh sách các liên kết. Được tạo tương tác với plugin JavaScript thả xuống .
Bao bọc trình kích hoạt của trình đơn thả xuống và trình đơn thả xuống bên trong .dropdown
hoặc một phần tử khác khai báo position: relative;
. Sau đó, thêm HTML của menu.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Menu thả xuống có thể được thay đổi để mở rộng lên trên (thay vì xuống dưới) bằng cách thêm .dropup
vào chính.
<div class="dropup">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropup
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Theo mặc định, menu thả xuống tự động được định vị 100% từ trên cùng và dọc theo bên trái của trình đơn gốc. Thêm .dropdown-menu-right
vào a .dropdown-menu
để căn phải menu thả xuống.
Các trình đơn thả xuống được định vị tự động thông qua CSS trong quy trình bình thường của tài liệu. Điều này có nghĩa là các danh sách thả xuống có thể bị cắt bởi các bậc cha mẹ với một số overflow
thuộc tính nhất định hoặc xuất hiện ngoài giới hạn của chế độ xem. Giải quyết những vấn đề này của riêng bạn khi chúng phát sinh.
.pull-right
chỉnh không được chấp nhậnKể từ v3.1.0, chúng tôi đã ngừng sử dụng .pull-right
các menu thả xuống. Để căn phải menu, hãy sử dụng .dropdown-menu-right
. Các thành phần điều hướng căn phải trong thanh điều hướng sử dụng phiên bản mixin của lớp này để tự động căn chỉnh menu. Để ghi đè nó, hãy sử dụng .dropdown-menu-left
.
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
Thêm tiêu đề vào nhãn các phần hành động trong bất kỳ menu thả xuống nào.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
...
<li class="dropdown-header">Dropdown header</li>
...
</ul>
Thêm một dải phân cách vào các chuỗi liên kết riêng biệt trong menu thả xuống.
<ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
...
<li role="separator" class="divider"></li>
...
</ul>
Thêm .disabled
vào một <li>
trong menu thả xuống để tắt liên kết.
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li><a href="#">Regular link</a></li>
<li class="disabled"><a href="#">Disabled link</a></li>
<li><a href="#">Another link</a></li>
</ul>
Nhóm một loạt các nút lại với nhau trên một dòng với nhóm nút. Thêm hành vi kiểu hộp kiểm và radio JavaScript tùy chọn với plugin nút của chúng tôi .
Khi sử dụng chú giải công cụ hoặc cửa sổ bật lên trên các phần tử trong a .btn-group
, bạn sẽ phải chỉ định tùy chọn container: 'body'
để tránh các tác dụng phụ không mong muốn (chẳng hạn như phần tử ngày càng rộng và / hoặc mất các góc tròn khi chú giải công cụ hoặc cửa sổ bật lên được kích hoạt).
role
và cung cấp nhãnĐể các công nghệ hỗ trợ - chẳng hạn như trình đọc màn hình - truyền tải rằng một loạt các nút được nhóm lại, role
cần phải cung cấp một thuộc tính thích hợp. Đối với các nhóm nút, điều này sẽ là role="group"
, trong khi các thanh công cụ phải có role="toolbar"
.
Một ngoại lệ là các nhóm chỉ chứa một điều khiển duy nhất (ví dụ: nhóm nút hợp lý có <button>
các phần tử) hoặc một danh sách thả xuống.
Ngoài ra, các nhóm và thanh công cụ nên được gắn nhãn rõ ràng, vì hầu hết các công nghệ hỗ trợ sẽ không thông báo chúng, mặc dù có sự hiện diện của role
thuộc tính chính xác. Trong các ví dụ được cung cấp ở đây, chúng tôi sử dụng aria-label
, nhưng các lựa chọn thay thế như aria-labelledby
cũng có thể được sử dụng.
Bọc một loạt các nút với .btn
trong .btn-group
.
<div class="btn-group" role="group" aria-label="...">
<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>
Kết hợp các tập hợp <div class="btn-group">
thành một <div class="btn-toolbar">
thành phần phức tạp hơn.
<div class="btn-toolbar" role="toolbar" aria-label="...">
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
</div>
Thay vì áp dụng các lớp định cỡ nút cho mọi nút trong một nhóm, chỉ cần thêm .btn-group-*
vào từng nút .btn-group
, kể cả khi lồng nhiều nhóm.
<div class="btn-group btn-group-lg" role="group" aria-label="...">...</div>
<div class="btn-group" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-sm" role="group" aria-label="...">...</div>
<div class="btn-group btn-group-xs" role="group" aria-label="...">...</div>
Đặt một .btn-group
trong một cái khác .btn-group
khi bạn muốn các menu thả xuống kết hợp với một loạt các nút.
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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>
Làm cho một tập hợp các nút xuất hiện được xếp chồng lên nhau theo chiều dọc thay vì theo chiều ngang. Trình đơn thả xuống nút tách không được hỗ trợ ở đây.
<div class="btn-group-vertical" role="group" aria-label="...">
...
</div>
Làm cho một nhóm các nút kéo dài với kích thước bằng nhau để kéo dài toàn bộ chiều rộng của nút cha của nó. Cũng hoạt động với trình đơn thả xuống nút trong nhóm nút.
Do HTML và CSS cụ thể được sử dụng để căn chỉnh các nút (cụ thể là display: table-cell
), đường viền giữa chúng được tăng gấp đôi. Trong các nhóm nút thông thường, margin-left: -1px
được sử dụng để xếp các đường viền thay vì loại bỏ chúng. Tuy nhiên, margin
không hoạt động với display: table-cell
. Do đó, tùy thuộc vào các tùy chỉnh của bạn đối với Bootstrap, bạn có thể muốn xóa hoặc tô màu lại các đường viền.
Internet Explorer 8 không hiển thị đường viền trên các nút trong nhóm nút căn chỉnh, cho dù đó là trên <a>
hay <button>
các phần tử. Để giải quyết vấn đề đó, hãy quấn từng nút trong một nút khác .btn-group
.
Xem # 12476 để biết thêm thông tin.
<a>
các yếu tốChỉ cần quấn một loạt các .btn
s vào .btn-group.btn-group-justified
.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>
Nếu các <a>
phần tử được sử dụng để hoạt động như các nút - kích hoạt chức năng trong trang, thay vì điều hướng đến một tài liệu hoặc phần khác trong trang hiện tại - thì chúng cũng nên được cung cấp một phần thích hợp role="button"
.
<button>
các yếu tốĐể sử dụng các nhóm nút hợp lý với <button>
các phần tử, bạn phải gói mỗi nút trong một nhóm nút . Hầu hết các trình duyệt không áp dụng đúng CSS của chúng tôi để biện minh cho <button>
các phần tử, nhưng vì chúng tôi hỗ trợ nút thả xuống nên chúng tôi có thể giải quyết vấn đề đó.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Middle</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
Sử dụng bất kỳ nút nào để kích hoạt menu thả xuống bằng cách đặt nó trong a .btn-group
và cung cấp đánh dấu menu thích hợp.
Nút thả xuống yêu cầu plugin thả xuống phải được bao gồm trong phiên bản Bootstrap của bạn.
Biến một nút thành một công tắc thả xuống với một số thay đổi cơ bản về đánh dấu.
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Tương tự, tạo danh sách thả xuống nút tách với các thay đổi đánh dấu giống nhau, chỉ với một nút riêng biệt.
<!-- 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" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
Nút thả xuống hoạt động với các nút ở mọi kích thước.
<!-- Large button group -->
<div class="btn-group">
<button class="btn btn-default btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
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" aria-haspopup="true" aria-expanded="false">
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" aria-haspopup="true" aria-expanded="false">
Extra small button <span class="caret"></span>
</button>
<ul class="dropdown-menu">
...
</ul>
</div>
Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm .dropup
vào phần tử gốc.
<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" aria-haspopup="true" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
Mở rộng điều khiển biểu mẫu bằng cách thêm văn bản hoặc nút trước, sau hoặc trên cả hai mặt của bất kỳ văn bản nào dựa trên <input>
. Sử dụng .input-group
với một .input-group-addon
hoặc .input-group-btn
để thêm trước hoặc nối các phần tử vào một phần tử duy nhất .form-control
.
<input>
Chỉ văn bảnTránh sử dụng <select>
các phần tử ở đây vì chúng không thể được tạo kiểu hoàn chỉnh trong trình duyệt WebKit.
Tránh sử dụng <textarea>
các phần tử ở đây vì rows
thuộc tính của chúng sẽ không được tôn trọng trong một số trường hợp.
Khi sử dụng chú giải công cụ hoặc cửa sổ bật lên trên các phần tử trong một .input-group
, bạn sẽ phải chỉ định tùy chọn container: 'body'
để tránh các tác dụng phụ không mong muốn (chẳng hạn như phần tử ngày càng rộng ra và / hoặc mất các góc tròn khi chú giải công cụ hoặc cửa sổ bật lên được kích hoạt).
Không trộn trực tiếp các nhóm biểu mẫu hoặc các lớp cột lưới với các nhóm đầu vào. Thay vào đó, hãy lồng nhóm đầu vào bên trong nhóm biểu mẫu hoặc phần tử liên quan đến lưới.
Trình đọc màn hình sẽ gặp khó khăn với biểu mẫu của bạn nếu bạn không bao gồm nhãn cho mọi đầu vào. Đối với các nhóm đầu vào này, hãy đảm bảo rằng bất kỳ nhãn hoặc chức năng bổ sung nào đều được chuyển tải đến các công nghệ hỗ trợ.
Kỹ thuật chính xác sẽ được sử dụng ( <label>
các phần tử hiển thị, <label>
các phần tử ẩn bằng cách sử dụng .sr-only
lớp, hoặc sử dụng , hoặc aria-label
thuộc tính ) và thông tin bổ sung nào sẽ cần được chuyển tải sẽ khác nhau tùy thuộc vào loại tiện ích giao diện chính xác mà bạn đang triển khai. Các ví dụ trong phần này cung cấp một số cách tiếp cận được đề xuất, theo từng trường hợp cụ thể.aria-labelledby
aria-describedby
title
placeholder
Đặt một tiện ích bổ sung hoặc nút ở hai bên của đầu vào. Bạn cũng có thể đặt một ở cả hai mặt của đầu vào.
Chúng tôi không hỗ trợ nhiều tiện ích bổ sung ( .input-group-addon
hoặc .input-group-btn
) trên một mặt.
Chúng tôi không hỗ trợ nhiều điều khiển biểu mẫu trong một nhóm đầu vào.
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
<span class="input-group-addon">.00</span>
</div>
<label for="basic-url">Your vanity URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>
Thêm các lớp định kích thước biểu mẫu tương đối vào .input-group
chính nó và nội dung bên trong sẽ tự động thay đổi kích thước — không cần lặp lại các lớp kích thước điều khiển biểu mẫu trên mỗi phần tử.
<div class="input-group input-group-lg">
<span class="input-group-addon" id="sizing-addon1">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon1">
</div>
<div class="input-group">
<span class="input-group-addon" id="sizing-addon2">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon2">
</div>
<div class="input-group input-group-sm">
<span class="input-group-addon" id="sizing-addon3">@</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="sizing-addon3">
</div>
Đặt bất kỳ hộp kiểm hoặc tùy chọn radio nào trong phần bổ trợ của nhóm đầu vào thay vì văn bản.
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio" aria-label="...">
</span>
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
Các nút trong nhóm đầu vào hơi khác một chút và yêu cầu thêm một mức lồng ghép. Thay vào đó .input-group-addon
, bạn sẽ cần sử dụng .input-group-btn
để quấn các nút. Điều này là bắt buộc do không thể ghi đè các kiểu trình duyệt mặc định.
<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" placeholder="Search for...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<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" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control" aria-label="...">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
<div class="input-group">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Button and dropdown menu -->
</div>
</div>
Mặc dù bạn chỉ có thể có một tiện ích bổ sung cho mỗi bên, nhưng bạn có thể có nhiều nút bên trong một tiện ích bổ sung .input-group-btn
.
<div class="input-group">
<div class="input-group-btn">
<!-- Buttons -->
</div>
<input type="text" class="form-control" aria-label="...">
</div>
<div class="input-group">
<input type="text" class="form-control" aria-label="...">
<div class="input-group-btn">
<!-- Buttons -->
</div>
</div>
Các điều hướng có sẵn trong Bootstrap có đánh dấu chia sẻ, bắt đầu với .nav
lớp cơ sở, cũng như các trạng thái được chia sẻ. Hoán đổi các lớp bổ trợ để chuyển đổi giữa mỗi kiểu.
Lưu ý .nav-tabs
lớp yêu cầu lớp .nav
cơ sở.
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Sử dụng cùng một HTML đó, nhưng sử dụng .nav-pills
thay thế:
<ul class="nav nav-pills">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
Thuốc cũng có thể xếp chồng lên nhau theo chiều dọc. Chỉ cần thêm .nav-stacked
.
<ul class="nav nav-pills nav-stacked">
...
</ul>
Dễ dàng tạo các tab hoặc viên thuốc có chiều rộng bằng với chiều rộng gốc của chúng ở màn hình rộng hơn 768px với .nav-justified
. Trên 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.
Liên kết điều hướng điều hướng hợp lý hiện không được hỗ trợ.
<ul class="nav nav-tabs nav-justified">
...
</ul>
<ul class="nav nav-pills nav-justified">
...
</ul>
Đối với bất kỳ thành phần điều hướng nào (tab hoặc viên thuốc), hãy thêm .disabled
các liên kết màu xám và không có hiệu ứng di chuột .
<ul class="nav nav-pills">
...
<li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
...
</ul>
Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .
<ul class="nav nav-tabs">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
<ul class="nav nav-pills">
...
<li role="presentation" class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
...
</ul>
Thanh điều hướng là các thành phần meta đáp ứng đóng vai trò là tiêu đề điều hướng cho ứng dụng hoặc trang web của bạn. Chúng bắt đầu được thu gọn (và có thể chuyển đổi) trong các chế độ xem trên thiết bị di động và trở thành chiều ngang khi chiều rộng khung nhìn có sẵn tăng lên.
Liên kết điều hướng điều hướng hợp lý hiện không được hỗ trợ.
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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 <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<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" role="button" aria-haspopup="true" aria-expanded="false">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 role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Thay thế thương hiệu thanh điều hướng bằng hình ảnh của riêng bạn bằng cách hoán đổi văn bản cho một <img>
. Vì .navbar-brand
có phần đệm và chiều cao riêng, bạn có thể cần ghi đè một số CSS tùy thuộc vào hình ảnh của mình.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>
Đặt nội dung biểu mẫu bên trong .navbar-form
để căn chỉnh theo chiều dọc thích hợp và hành vi thu gọn trong các cửa sổ xem hẹp. Sử dụng các tùy chọn căn chỉnh để quyết định vị trí của nó trong nội dung thanh điều hướng.
Lưu ý, hãy .navbar-form
chia sẻ phần lớn mã của nó với .form-inline
qua mixin. Một số điều khiển biểu mẫu, như nhóm đầu vào, có thể yêu cầu độ rộng cố định để hiển thị đúng trong 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>
Thêm .navbar-btn
lớp vào <button>
các phần tử không nằm trong a <form>
để căn giữa chúng theo chiều dọc trong thanh điều hướng.
<button type="button" class="btn btn-default navbar-btn">Sign in</button>
Gói các chuỗi văn bản trong một phần tử .navbar-text
, thường là trên một <p>
thẻ để có màu và màu sắc thích hợp.
<p class="navbar-text">Signed in as Mark Otto</p>
Đối với những người sử dụng các liên kết tiêu chuẩn không nằm trong thành phần điều hướng thanh điều hướng thông thường, hãy sử dụng .navbar-link
lớp để thêm màu thích hợp cho các tùy chọn thanh điều hướng mặc định và nghịch đảo.
<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 điều hướng, biểu mẫu, nút hoặc văn bản, bằng cách sử dụng .navbar-left
hoặc .navbar-right
các lớp tiện ích. Cả hai lớp sẽ thêm một CSS float theo hướng được chỉ định. Ví dụ: để căn chỉnh các liên kết điều hướng, hãy đặt chúng thành một lớp riêng biệt <ul>
với lớp tiện ích tương ứng được áp dụng.
Các lớp này là phiên bản mixin-ed của .pull-left
và .pull-right
, nhưng chúng nằm trong phạm vi truy vấn phương tiện để xử lý dễ dàng hơn các thành phần thanh điều hướng trên các kích thước thiết bị.
Thêm .navbar-fixed-top
và bao gồm một .container
hoặc .container-fluid
vào giữa và đệm nội dung trên thanh điều hướng.
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
...
</div>
</nav>
Thêm .navbar-fixed-bottom
và bao gồm một .container
hoặc .container-fluid
vào giữa và đệm nội dung trên thanh điều hướng.
<nav class="navbar navbar-default navbar-fixed-bottom">
<div class="container">
...
</div>
</nav>
Tạo thanh điều hướng có chiều rộng đầy đủ cuộn trang bằng cách thêm .navbar-static-top
và bao gồm một .container
hoặc .container-fluid
vào giữa và đệm nội dung thanh điều hướng.
Không giống như các .navbar-fixed-*
lớp, bạn không cần phải thay đổi bất kỳ phần đệm nào trên body
.
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
...
</div>
</nav>
Sửa đổi giao diện của thanh điều hướng bằng cách thêm .navbar-inverse
.
<nav class="navbar navbar-inverse">
...
</nav>
Cho biết vị trí của trang hiện tại trong phân cấp điều hướng.
Dấu phân cách được thêm tự động trong 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>
Cung cấp các liên kết phân trang cho trang web hoặc ứng dụng của bạn bằng thành phần phân trang nhiều trang hoặc giải pháp thay thế phân trang đơn giản hơn .
Phân trang đơn giản lấy cảm hứng từ Rdio, tuyệt vời cho các ứng dụng và kết quả tìm kiếm. Khối lớn khó bỏ sót, có thể mở rộng dễ dàng và cung cấp các vùng nhấp chuột lớn.
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
Thành phần phân trang phải được bao bọc trong một <nav>
phần tử để xác định nó là phần điều hướng đến trình đọc màn hình và các công nghệ hỗ trợ khác. Ngoài ra, vì một trang có khả năng đã có nhiều hơn một phần điều hướng như vậy (chẳng hạn như điều hướng chính trong tiêu đề hoặc điều hướng thanh bên), bạn nên cung cấp mô tả aria-label
cho phần <nav>
điều hướng phản ánh mục đích của nó. Ví dụ: nếu thành phần phân trang được sử dụng để điều hướng giữa một tập hợp các kết quả tìm kiếm, thì một nhãn thích hợp có thể là aria-label="Search results pages"
.
Các liên kết có thể tùy chỉnh cho các trường hợp khác nhau. Sử dụng .disabled
cho các liên kết không thể nhấp vào và .active
để chỉ ra trang hiện tại.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a></li>
<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
...
</ul>
</nav>
Chúng tôi khuyên bạn nên hoán đổi các neo đang hoạt động hoặc bị vô hiệu hóa cho <span>
hoặc bỏ qua neo trong trường hợp mũi tên trước đó / tiếp theo, để loại bỏ chức năng nhấp trong khi vẫn giữ lại các kiểu đã định.
<nav aria-label="...">
<ul class="pagination">
<li class="disabled">
<span>
<span aria-hidden="true">«</span>
</span>
</li>
<li class="active">
<span>1 <span class="sr-only">(current)</span></span>
</li>
...
</ul>
</nav>
Phân trang lớn hơn hay nhỏ hơn lạ mắt? Thêm .pagination-lg
hoặc .pagination-sm
cho các kích thước bổ sung.
<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>
Các liên kết trước và sau nhanh chóng để triển khai phân trang đơn giản với các kiểu và đánh dấu nhẹ. Nó tuyệt vời cho các trang web đơn giản như blog hoặc tạp chí.
Theo mặc định, các trung tâm máy nhắn tin liên kết.
<nav aria-label="...">
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
</nav>
Ngoài ra, bạn có thể căn chỉnh từng liên kết sang các bên:
<nav aria-label="...">
<ul class="pager">
<li class="previous"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
Các liên kết máy nhắn tin cũng sử dụng .disabled
lớp tiện ích chung từ việc phân trang.
<nav aria-label="...">
<ul class="pager">
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
</ul>
</nav>
<h3>Example heading <span class="label label-default">New</span></h3>
Thêm bất kỳ lớp bổ trợ nào được đề cập bên dưới để thay đổi giao diện của nhãn.
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
Các vấn đề về kết xuất có thể phát sinh khi bạn có hàng chục nhãn nội tuyến trong một vùng chứa hẹp, mỗi nhãn chứa inline-block
phần tử riêng của nó (như một biểu tượng). Cách xung quanh điều này là thiết lập display: inline-block;
. Để biết ngữ cảnh và ví dụ, hãy xem # 13219 .
Dễ dàng đánh dấu các mục mới hoặc chưa đọc bằng cách thêm một <span class="badge">
liên kết, các nav Bootstrap, v.v.
<a href="#">Inbox <span class="badge">42</span></a>
<button class="btn btn-primary" type="button">
Messages <span class="badge">4</span>
</button>
Khi không có mục mới hoặc chưa đọc, huy hiệu sẽ đơn giản thu gọn (thông qua :empty
bộ chọn của CSS) miễn là không có nội dung nào bên trong.
Các huy hiệu sẽ không tự thu gọn trong Internet Explorer 8 vì nó không hỗ trợ :empty
bộ chọn.
Các kiểu tích hợp được bao gồm để đặt huy hiệu ở trạng thái hoạt động trong điều hướng máy tính bảng.
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
Một thành phần nhẹ, linh hoạt có thể tùy chọn mở rộng toàn bộ khung nhìn để giới thiệu nội dung chính trên trang web của bạn.
Đây là một đơn vị anh hùng đơn giản, một thành phần kiểu jumbotron đơn giản để kêu gọi sự chú ý nhiều hơn đến nội dung hoặc thông tin nổi bật.
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
Để làm cho jumbotron có chiều rộng đầy đủ và không có góc tròn, hãy đặt nó bên ngoài tất cả các .container
s và thay vào đó thêm một .container
bên trong.
<div class="jumbotron">
<div class="container">
...
</div>
</div>
Một khung đơn giản để h1
tạo khoảng cách thích hợp và phân đoạn các phần nội dung trên một trang. Nó có thể sử dụng phần tử h1
mặc định của ' small
, cũng như hầu hết các thành phần khác (với các kiểu bổ sung).
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>
Mở rộng hệ thống lưới của Bootstrap với thành phần hình thu nhỏ để dễ dàng hiển thị lưới hình ảnh, video, văn bản và hơn thế nữa.
Nếu bạn đang tìm kiếm bản trình bày giống như Pinterest về hình thu nhỏ có chiều cao và / hoặc chiều rộng khác nhau, bạn sẽ cần sử dụng plugin của bên thứ ba như Masonry , Isotope hoặc Salvattore .
Theo mặc định, hình thu nhỏ của Bootstrap được thiết kế để hiển thị các hình ảnh được liên kết với đánh dấu bắt buộc tối thiểu.
<div class="row">
<div class="col-xs-6 col-md-3">
<a href="#" class="thumbnail">
<img src="..." alt="...">
</a>
</div>
...
</div>
Với một chút đánh dấu bổ sung, bạn có thể thêm bất kỳ loại nội dung HTML nào như tiêu đề, đoạn văn hoặc nút vào hình thu nhỏ.
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="..." 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>
Cung cấp các thông báo phản hồi theo ngữ cảnh cho các hành động thông thường của người dùng với một số ít các thông báo cảnh báo có sẵn và linh hoạt.
Gói bất kỳ văn bản nào và một nút loại bỏ tùy chọn trong .alert
và một trong bốn lớp ngữ cảnh (ví dụ .alert-success
:) cho các thông báo cảnh báo cơ bản.
Cảnh báo không có lớp mặc định, chỉ có lớp cơ sở và lớp bổ trợ. Cảnh báo màu xám mặc định không có nhiều ý nghĩa, vì vậy bạn bắt buộc phải chỉ định một loại thông qua lớp ngữ cảnh. Chọn từ 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>
Xây dựng trên bất kỳ cảnh báo nào bằng cách thêm một .alert-dismissible
nút tùy chọn và đóng.
Để các cảnh báo hoạt động đầy đủ, có thể loại bỏ, bạn phải sử dụng plugin JavaScript cảnh báo .
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
Đảm bảo sử dụng <button>
phần tử có data-dismiss="alert"
thuộc tính dữ liệu.
Sử dụng .alert-link
lớp tiện ích để nhanh chóng cung cấp các liên kết có màu phù hợp trong bất kỳ cảnh báo nào.
<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>
Cung cấp phản hồi cập nhật về tiến trình của quy trình làm việc hoặc hành động bằng các thanh tiến trình đơn giản nhưng linh hoạt.
Các thanh tiến trình sử dụng các hiệu ứng chuyển tiếp và hoạt ảnh CSS3 để đạt được một số hiệu ứng của chúng. Các tính năng này không được hỗ trợ trong Internet Explorer 9 trở xuống hoặc các phiên bản Firefox cũ hơn. Opera 12 không hỗ trợ hình ảnh động.
Nếu trang web của bạn có Chính sách bảo mật nội dung (CSP) không cho phép style-src 'unsafe-inline'
, thì bạn sẽ không thể sử dụng các style
thuộc tính nội tuyến để đặt độ rộng thanh tiến trình như được hiển thị trong ví dụ của chúng tôi bên dưới. Các phương pháp thay thế để đặt độ rộng tương thích với các CSP nghiêm ngặt bao gồm sử dụng một chút JavaScript tùy chỉnh (bộ element.style.width
) hoặc sử dụng các lớp CSS tùy chỉnh.
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>
Xóa lớp <span>
với .sr-only
từ trong thanh tiến trình để hiển thị tỷ lệ phần trăm có thể nhì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>
Để đảm bảo rằng văn bản nhãn vẫn dễ đọc ngay cả đối với tỷ lệ phần trăm thấp, hãy xem xét thêm dấu min-width
vào thanh tiến trình.
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em;">
0%
</div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100" style="min-width: 2em; width: 2%;">
2%
</div>
</div>
Thanh tiến trình sử dụng một số nút và lớp cảnh báo giống nhau cho các kiểu nhất quán.
<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 (danger)</span>
</div>
</div>
Sử dụng gradient để tạo hiệu ứng sọc. Không có sẵn trong IE9 trở xuống.
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" 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 progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
<span class="sr-only">80% Complete (danger)</span>
</div>
</div>
Thêm vào .active
để .progress-bar-striped
tạo hiệu ứng cho các sọc từ phải sang trái. Không có sẵn trong IE9 trở xuống.
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
Đặt nhiều thanh giống nhau .progress
để xếp 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 progress-bar-striped" 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>
Các kiểu đối tượng trừu tượng để xây dựng các loại thành phần khác nhau (như bình luận blog, Tweet, v.v.) có hình ảnh căn trái hoặc phải cùng với nội dung văn bản.
Phương tiện mặc định hiển thị một đối tượng phương tiện (hình ảnh, video, âm thanh) ở bên trái hoặc bên phải của một khối nội dung.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
Các lớp .pull-left
và .pull-right
cũng tồn tại và trước đây đã được sử dụng như một phần của thành phần phương tiện, nhưng không được chấp nhận cho việc sử dụng đó kể từ v3.3.0. Chúng gần tương đương với .media-left
và .media-right
, ngoại trừ chúng .media-right
nên được đặt sau .media-body
html.
Hình ảnh hoặc phương tiện khác có thể được căn chỉnh trên cùng, giữa hoặc dưới cùng. Mặc định là căn trên cùng.
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis ở faucibus.
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng.
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Middle aligned media</h4>
...
</div>
</div>
Với một chút đánh dấu bổ sung, bạn có thể sử dụng phương tiện bên trong danh sách (hữu ích cho các chủ đề bình luận hoặc danh sách bài viết).
Cras ngồi amet nibh libero, trong gravida nulla. Nulla vel metus scelerisque ante sollicitudin goodso. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis.
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading</h4>
...
</div>
</li>
</ul>
Nhóm danh sách là một thành phần linh hoạt và mạnh mẽ để hiển thị không chỉ danh sách các phần tử đơn giản mà còn cả những phần tử phức tạp với nội dung tùy chỉnh.
Nhóm danh sách cơ bản nhất chỉ đơn giản là một danh sách không có thứ tự với các mục danh sách và các lớp thích hợp. Xây dựng dựa trên nó với các tùy chọn theo sau hoặc CSS của riêng bạn nếu cần.
<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>
Thêm thành phần huy hiệu vào bất kỳ mục nhóm danh sách nào và nó sẽ tự động được định vị ở bên phải.
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>
Liên kết các mục trong nhóm danh sách bằng cách sử dụng các thẻ liên kết thay vì các mục danh sách (điều đó cũng có nghĩa là một phụ huynh <div>
thay vì một <ul>
). Không cần cha mẹ riêng lẻ xung quanh mỗi yếu tố.
<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>
Các mục nhóm danh sách có thể là các nút thay vì các mục danh sách (điều đó cũng có nghĩa là một phụ huynh <div>
thay vì một <ul>
). Không cần cha mẹ riêng lẻ xung quanh mỗi yếu tố. Không sử dụng các .btn
lớp tiêu chuẩn ở đây.
<div class="list-group">
<button type="button" class="list-group-item">Cras justo odio</button>
<button type="button" class="list-group-item">Dapibus ac facilisis in</button>
<button type="button" class="list-group-item">Morbi leo risus</button>
<button type="button" class="list-group-item">Porta ac consectetur ac</button>
<button type="button" class="list-group-item">Vestibulum at eros</button>
</div>
Thêm .disabled
vào a .list-group-item
để chuyển sang màu xám để có vẻ như 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>
Sử dụng các lớp ngữ cảnh để tạo kiểu cho các mục danh sách, mặc định hoặc được liên kết. Cũng bao gồm .active
trạng thái.
<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>
Thêm gần như bất kỳ HTML nào bên trong, ngay cả đối với các nhóm danh sách được liên kết như bên dưới.
Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.
Donec id elit non mi porta gravida tại 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>
Mặc dù không phải lúc nào cũng cần thiết nhưng đôi khi bạn cần đặt DOM của mình vào một chiếc hộp. Đối với những tình huống đó, hãy thử thành phần bảng điều khiển.
Theo mặc định, tất cả những gì .panel
phải làm là áp dụng một số đường viền và đệm cơ bản để chứa một số nội dung.
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>
Dễ dàng thêm một vùng chứa tiêu đề vào bảng điều khiển của bạn với .panel-heading
. Bạn cũng có thể bao gồm bất kỳ <h1>
- <h6>
với một .panel-title
lớp để thêm tiêu đề được tạo kiểu trước. Tuy nhiên, kích thước phông chữ của <h1>
- <h6>
bị ghi đè bởi .panel-heading
.
Để tô màu liên kết thích hợp, hãy đảm bảo đặt các liên kết trong các tiêu đề bên trong .panel-title
.
<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>
Gói các nút hoặc văn bản phụ vào .panel-footer
. Lưu ý rằng chân trang bảng điều khiển 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 vì chúng không có nghĩa là ở nền trước.
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>
Giống như các thành phần khác, dễ dàng làm cho một bảng có ý nghĩa hơn đối với một ngữ cảnh cụ thể bằng cách thêm bất kỳ lớp trạng thái ngữ cảnh nào.
<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>
Thêm bất kỳ không có đường viền nào .table
trong bảng điều khiển để có thiết kế liền mạch. Nếu có .panel-body
, chúng tôi thêm một đường viền phụ vào đầu bảng để phân tách.
Một số nội dung bảng điều khiển mặc định ở đây. Nulla vitae elit libero, một loài pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Bìm bìm biếc. Nullam id dolor id nibh ultriciesectorsula ut id elit.
# | Họ | Họ | tên tài khoản |
---|---|---|---|
1 | Đánh dấu | Otto | @mdo |
2 | Jacob | Thornton | @mập mạp |
3 | Larry | con chim |
<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 không có nội dung bảng điều khiển, thành phần sẽ di chuyển từ tiêu đề bảng sang bảng mà không bị gián đoạn.
# | Họ | Họ | tên tài khoản |
---|---|---|---|
1 | Đánh dấu | Otto | @mdo |
2 | Jacob | Thornton | @mập mạp |
3 | Larry | con chim |
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Panel heading</div>
<!-- Table -->
<table class="table">
...
</table>
</div>
Dễ dàng bao gồm các nhóm danh sách có chiều rộng đầy đủ trong bất kỳ bảng điều khiển nào.
Một số nội dung bảng điều khiển mặc định ở đây. Nulla vitae elit libero, một loài pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Bìm bìm biếc. Nullam id dolor id nibh ultriciesectorsula ut id elit.
<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>
Cho phép trình duyệt xác định kích thước video hoặc trình chiếu dựa trên chiều rộng của khối chứa chúng bằng cách tạo tỷ lệ nội tại sẽ chia tỷ lệ phù hợp trên mọi thiết bị.
Các quy tắc được áp dụng trực tiếp cho , <iframe>
và các phần tử; tùy chọn sử dụng một lớp con cháu rõ ràng khi bạn muốn đối sánh kiểu dáng cho các thuộc tính khác.<embed>
<video>
<object>
.embed-responsive-item
Mẹo chuyên nghiệp! Bạn không cần phải đưa frameborder="0"
vào <iframe>
s của mình vì chúng tôi ghi đè điều đó cho bạn.
<!-- 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>
Sử dụng hiệu ứng cũng như hiệu ứng đơn giản trên một phần tử để tạo hiệu ứng lồng ghép cho nó.
<div class="well">...</div>
Điều khiển đệm và các góc tròn với hai lớp bổ trợ tùy chọn.
<div class="well well-lg">...</div>
<div class="well well-sm">...</div>