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.
Glyphicons
Glyphs có sẵn
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ể.
- glyphicon glyphicon-dấu hoa thị
- glyphicon glyphicon-cộng
- glyphicon glyphicon-euro
- glyphicon glyphicon-eur
- glyphicon glyphicon-trừ
- glyphicon glyphicon-đám mây
- glyphicon glyphicon-phong bì
- glyphicon glyphicon-bút chì
- glyphicon glyphicon-thủy tinh
- glyphicon glyphicon-âm nhạc
- glyphicon glyphicon-tìm kiếm
- glyphicon glyphicon-tim
- glyphicon glyphicon-sao
- glyphicon glyphicon-sao-rỗng
- người dùng glyphicon glyphicon
- glyphicon glyphicon-phim
- glyphicon glyphicon-th-lớn
- glyphicon glyphicon-th
- glyphicon glyphicon-th-danh sách
- glyphicon glyphicon-ok
- glyphicon glyphicon-loại bỏ
- glyphicon glyphicon-phóng to
- glyphicon glyphicon-thu nhỏ
- glyphicon glyphicon tắt
- tín hiệu glyphicon glyphicon
- glyphicon glyphicon-cog
- glyphicon glyphicon-rác
- glyphicon glyphicon-nhà
- glyphicon glyphicon-tệp
- glyphicon glyphicon-thời gian
- đường glyphicon glyphicon
- glyphicon glyphicon-tải xuống-alt
- glyphicon glyphicon-tải xuống
- glyphicon glyphicon-tải lên
- glyphicon glyphicon-hộp thư đến
- glyphicon glyphicon-play-circle
- glyphicon glyphicon-lặp lại
- glyphicon glyphicon-làm mới
- glyphicon glyphicon-list-alt
- khóa glyphicon glyphicon
- cờ glyphicon glyphicon
- tai nghe glyphicon glyphicon
- glyphicon glyphicon-giảm khối lượng
- glyphicon glyphicon-giảm khối lượng
- glyphicon glyphicon-tăng khối lượng
- glyphicon glyphicon-qrcode
- mã vạch glyphicon glyphicon
- thẻ glyphicon glyphicon
- thẻ glyphicon glyphicon
- glyphicon glyphicon-sách
- glyphicon glyphicon-bookmark
- glyphicon glyphicon-in
- glyphicon glyphicon-máy ảnh
- glyphicon glyphicon-phông chữ
- glyphicon glyphicon-đậm
- glyphicon glyphicon-nghiêng
- glyphicon glyphicon-văn bản-chiều cao
- glyphicon glyphicon-text-width
- glyphicon glyphicon-align-left
- glyphicon glyphicon-align-center
- glyphicon glyphicon-align-right
- glyphicon glyphicon-align-justify
- danh sách glyphicon glyphicon
- glyphicon glyphicon-indent-left
- glyphicon glyphicon-indent-right
- glyphicon glyphicon-facetime-video
- glyphicon glyphicon-hình ảnh
- glyphicon glyphicon-bản đồ-đánh dấu
- glyphicon glyphicon-điều chỉnh
- glyphicon glyphicon-tint
- glyphicon glyphicon-sửa
- glyphicon glyphicon-chia sẻ
- glyphicon glyphicon-kiểm tra
- glyphicon glyphicon-di chuyển
- glyphicon glyphicon-bước-lùi
- glyphicon glyphicon-nhanh-lùi
- glyphicon glyphicon-lùi
- glyphicon glyphicon-play
- glyphicon glyphicon-tạm dừng
- glyphicon glyphicon-dừng
- glyphicon glyphicon-chuyển tiếp
- glyphicon glyphicon-tua nhanh
- glyphicon glyphicon-bước-tiến
- glyphicon glyphicon-eject
- glyphicon glyphicon-chevron-left
- glyphicon glyphicon-chevron-right
- glyphicon glyphicon-dấu cộng
- glyphicon glyphicon-dấu trừ
- glyphicon glyphicon-loại bỏ-dấu hiệu
- glyphicon glyphicon-ok-dấu
- glyphicon glyphicon-câu hỏi-dấu hiệu
- glyphicon glyphicon-thông tin-dấu hiệu
- glyphicon glyphicon-ảnh chụp màn hình
- glyphicon glyphicon-loại bỏ-vòng tròn
- glyphicon glyphicon-ok-vòng tròn
- glyphicon glyphicon-ban-circle
- glyphicon glyphicon-mũi tên-trái
- glyphicon glyphicon-mũi tên-phải
- glyphicon glyphicon-mũi tên lên
- glyphicon glyphicon-mũi tên xuống
- glyphicon glyphicon-share-alt
- glyphicon glyphicon-thay đổi kích thước-đầy đủ
- glyphicon glyphicon-thay đổi kích thước-nhỏ
- glyphicon glyphicon-dấu chấm than
- glyphicon glyphicon-quà tặng
- glyphicon glyphicon-lá
- glyphicon glyphicon-lửa
- glyphicon glyphicon mở mắt
- glyphicon glyphicon-mắt-cận
- glyphicon glyphicon-cảnh báo-dấu hiệu
- mặt phẳng glyphicon glyphicon
- glyphicon glyphicon-lịch
- glyphicon glyphicon-ngẫu nhiên
- glyphicon glyphicon-bình luận
- glyphicon glyphicon-nam châm
- glyphicon glyphicon-chevron-up
- glyphicon glyphicon-chevron-down
- glyphicon glyphicon-retweet
- glyphicon glyphicon-shopping-cart
- glyphicon glyphicon-đóng thư mục
- glyphicon glyphicon-mở thư mục
- glyphicon glyphicon-thay đổi kích thước-theo chiều dọc
- glyphicon glyphicon-thay đổi kích thước-ngang
- glyphicon glyphicon-hdd
- glyphicon glyphicon-bullhorn
- glyphicon glyphicon-chuông
- chứng chỉ glyphicon glyphicon
- glyphicon glyphicon-thumbs-up
- glyphicon glyphicon-thumbs-down
- glyphicon glyphicon-tay-phải
- glyphicon glyphicon-tay trái
- glyphicon glyphicon-hand-up
- glyphicon glyphicon-hand-down
- glyphicon glyphicon-vòng tròn-mũi tên-phải
- glyphicon glyphicon-vòng tròn-mũi tên-trái
- glyphicon glyphicon-vòng tròn-mũi tên-lên
- glyphicon glyphicon-vòng tròn-mũi tên-xuống
- glyphicon glyphicon-địa cầu
- glyphicon glyphicon-cờ lê
- glyphicon glyphicon-nhiệm vụ
- bộ lọc glyphicon glyphicon
- glyphicon glyphicon-cặp
- glyphicon glyphicon-toàn màn hình
- glyphicon glyphicon-bảng điều khiển
- glyphicon glyphicon-kẹp giấy
- glyphicon glyphicon-trái tim-rỗng
- liên kết glyphicon glyphicon
- glyphicon glyphicon-điện thoại
- glyphicon glyphicon-đinh ghim
- glyphicon glyphicon-usd
- glyphicon glyphicon-gbp
- glyphicon glyphicon-sắp xếp
- glyphicon glyphicon-sắp xếp theo bảng chữ cái
- glyphicon glyphicon-sort-by-alphabet-alt
- glyphicon glyphicon-sắp xếp theo thứ tự
- glyphicon glyphicon-sort-by-order-alt
- glyphicon glyphicon-sắp xếp theo-thuộc tính
- glyphicon glyphicon-sắp xếp-theo-thuộc tính-alt
- glyphicon glyphicon-không được kiểm tra
- glyphicon glyphicon-mở rộng
- glyphicon glyphicon-sụp đổ
- glyphicon glyphicon-thu gọn
- glyphicon glyphicon-đăng nhập
- glyphicon glyphicon-flash
- glyphicon glyphicon-đăng xuất
- glyphicon glyphicon-cửa sổ mới
- glyphicon glyphicon-bản ghi
- glyphicon glyphicon-tiết kiệm
- glyphicon glyphicon-mở
- glyphicon glyphicon lưu
- glyphicon glyphicon-nhập khẩu
- glyphicon glyphicon-xuất
- glyphicon glyphicon-gửi
- glyphicon glyphicon-đĩa mềm
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-floppy-remove
- glyphicon glyphicon-floppy-save
- glyphicon glyphicon-đĩa mềm-mở
- glyphicon glyphicon-thẻ tín dụng
- glyphicon chuyển glyphicon
- glyphicon glyphicon-dao kéo
- tiêu đề glyphicon glyphicon
- glyphicon glyphicon-nén
- glyphicon glyphicon-tai nghe
- glyphicon glyphicon-phone-alt
- tháp glyphicon glyphicon
- số liệu thống kê glyphicon glyphicon
- glyphicon glyphicon-sd-video
- glyphicon glyphicon-hd-video
- glyphicon glyphicon-phụ đề
- glyphicon glyphicon-âm thanh-âm thanh nổi
- glyphicon glyphicon-sound-dolby
- glyphicon glyphicon-sound-5-1
- glyphicon glyphicon-sound-6-1
- glyphicon glyphicon-sound-7-1
- glyphicon glyphicon-bản quyền-nhãn hiệu
- glyphicon glyphicon-nhãn hiệu đăng ký
- glyphicon glyphicon-cloud-download
- glyphicon glyphicon-cloud-upload
- glyphicon glyphicon-cây-hạt trần
- glyphicon glyphicon-cây-rụng lá
- glyphicon glyphicon-cd
- glyphicon glyphicon-lưu-tệp
- glyphicon glyphicon-tập tin mở
- glyphicon glyphicon-tăng cấp
- glyphicon glyphicon-bản sao
- glyphicon glyphicon-dán
- glyphicon glyphicon-cảnh báo
- chất cân bằng glyphicon glyphicon
- glyphicon glyphicon-vua
- glyphicon glyphicon-nữ hoàng
- glyphicon glyphicon-cầm đồ
- glyphicon glyphicon-giám mục
- glyphicon glyphicon-hiệp sĩ
- glyphicon glyphicon-công thức trẻ em
- glyphicon glyphicon-lều
- glyphicon glyphicon-bảng đen
- glyphicon glyphicon-giường
- glyphicon glyphicon-táo
- glyphicon glyphicon-xóa
- glyphicon glyphicon-đồng hồ cát
- glyphicon glyphicon-đèn
- glyphicon glyphicon-nhân đôi
- glyphicon glyphicon-heo đất
- glyphicon glyphicon-kéo
- glyphicon glyphicon-bitcoin
- glyphicon glyphicon-btc
- glyphicon glyphicon-xbt
- glyphicon glyphicon-yên
- glyphicon glyphicon-jpy
- glyphicon glyphicon-rúp
- glyphicon glyphicon-chà
- quy mô glyphicon glyphicon
- glyphicon glyphicon-ice-lolly
- glyphicon glyphicon-ice-lolly-nếm
- glyphicon glyphicon-giáo dục
- glyphicon glyphicon-tùy chọn-ngang
- glyphicon glyphicon-option-vertical
- glyphicon glyphicon-menu-hamburger
- glyphicon glyphicon-modal-window
- glyphicon glyphicon-dầu
- glyphicon glyphicon-hạt
- glyphicon glyphicon-kính râm
- glyphicon glyphicon-text-size
- glyphicon glyphicon-văn bản-màu
- glyphicon glyphicon-văn bản-nền
- glyphicon glyphicon-object-align-top
- glyphicon glyphicon-object-align-bottom
- glyphicon glyphicon-object-align-ngang
- glyphicon glyphicon-object-align-left
- glyphicon glyphicon-object-align-vertical
- glyphicon glyphicon-object-align-right
- glyphicon glyphicon-tam giác-phải
- glyphicon glyphicon-tam giác-trái
- glyphicon glyphicon-tam giác-đáy
- glyphicon glyphicon-tam giác-đỉnh
- glyphicon glyphicon-console
- glyphicon glyphicon-superscript
- glyphicon glyphicon-subscript
- glyphicon glyphicon-menu-left
- glyphicon glyphicon-menu-right
- glyphicon glyphicon-menu-xuống
- glyphicon glyphicon-menu-up
Cách sử dụng
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.
Không trộn lẫn với các thành phần khác
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>.
Chỉ sử dụng cho các phần tử trống
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.
Thay đổi vị trí phông chữ biểu tượng
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:
- Thay đổi
@icon-font-pathvà / hoặc@icon-font-namecác biến trong tệp nguồn Ít hơn. - Sử dụng tùy chọn URL tương đối do trình biên dịch Ít hơn cung cấp.
- Thay đổi các
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.
Biểu tượng có thể truy cập
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-onlylớ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-labelthuộc tính trên chính điều khiển.
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>Các ví dụ
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-onlyvăn bản bổ sung để truyền đạt gợi ý này cho người dùng công nghệ hỗ trợ.
Lỗi:Nhập địa chỉ email hợp lệ
<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>Trình đơn thả xuống
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 .
Thí dụ
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 .dropdownhoặ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 .dropupvà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>Căn chỉnh
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-rightvào a .dropdown-menuđể căn phải menu thả xuống.
Có thể yêu cầu định vị bổ sung
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ố overflowthuộ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.
Căn .pull-rightchỉnh không được chấp nhận
Kể từ v3.1.0, chúng tôi đã ngừng sử dụng .pull-rightcá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>Tiêu đề
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>Dải phân cách
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>Các mục menu bị vô hiệu hóa
Thêm .disabledvà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 nút
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 .
Chú giải công cụ & cửa sổ bật lên trong các nhóm nút yêu cầu cài đặt đặc biệt
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).
Đảm bảo chính xác rolevà 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, rolecầ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 rolethuộ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-labelledbycũng có thể được sử dụng.
Ví dụ cơ bản
Bọc một loạt các nút với .btntrong .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>Thanh công cụ nút
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>Định cỡ
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>Làm tổ
Đặt một .btn-grouptrong một cái khác .btn-groupkhi 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>Biến thể theo chiều dọc
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>Các nhóm nút được căn chỉnh
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.
Xử lý biên giới
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, marginkhô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.
IE8 và đườ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.
Với <a>các yếu tố
Chỉ cần quấn một loạt các .btns vào .btn-group.btn-group-justified.
<div class="btn-group btn-group-justified" role="group" aria-label="...">
...
</div>Các liên kết hoạt động như các nút
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".
Với <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>Nút thả xuống
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-groupvà cung cấp đánh dấu menu thích hợp.
Sự phụ thuộc của plugin
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.
Nút đơn thả xuống
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>Nút chia nhỏ thả xuống
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>Định cỡ
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>Biến thể thả xuống
Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm .dropupvà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>Nhóm đầu vào
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-groupvới một .input-group-addonhoặ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ản
Trá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ì rowsthuộc tính của chúng sẽ không được tôn trọng trong một số trường hợp.
Chú giải công cụ & cửa sổ bật lên trong các nhóm đầu vào yêu cầu cài đặt đặc biệt
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 lẫn với các thành phần khác
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.
Luôn thêm nhãn
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-onlylớp, hoặc sử dụng , hoặc aria-labelthuộ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-labelledbyaria-describedbytitleplaceholder
Ví dụ cơ bản
Đặ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-addonhoặ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>Định cỡ
Thêm các lớp định kích thước biểu mẫu tương đối vào .input-groupchí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>Hộp kiểm và phần bổ trợ radio
Đặ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 -->Nút bổ trợ
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 -->Các nút có trình đơn thả 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" 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 -->Các nút được phân đoạn
<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>Nhiều nút
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>Navs
Các điều hướng có sẵn trong Bootstrap có đánh dấu chia sẻ, bắt đầu với .navlớ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.
Các tab
Lưu ý .nav-tabslớp yêu cầu lớp .navcơ 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>Thuốc
Sử dụng cùng một HTML đó, nhưng sử dụng .nav-pillsthay 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>Hợp lý
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>Liên kết bị vô hiệu hóa
Đố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 .disabledcá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>Sử dụng trình đơn thả xuống
Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .
Các tab có danh sách 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>Thuốc có danh sách thả xuống
<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
Thanh điều hướng mặc định
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>Hình ảnh thương hiệu
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-brandcó 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>Các hình thức
Đặ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-formchia sẻ phần lớn mã của nó với .form-inlinequa 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>nút
Thêm .navbar-btnlớ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>Chữ
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>Liên kết không điều hướng
Đố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-linklớ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 thành phần
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-lefthoặc .navbar-rightcá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-leftvà .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ị.
Cố định lên đầu
Thêm .navbar-fixed-topvà bao gồm một .containerhoặc .container-fluidvà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>Cố định ở dưới cùng
Thêm .navbar-fixed-bottomvà bao gồm một .containerhoặc .container-fluidvà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>Đầu tĩnh
Tạo thanh điều hướng có chiều rộng đầy đủ cuộn trang bằng cách thêm .navbar-static-topvà bao gồm một .containerhoặc .container-fluidvà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>Điều hướng đảo ngược
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>Breadcrumbs
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 :beforevà 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 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 mặc định
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>Gắn nhãn thành phần phân trang
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-labelcho 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".
Trạng thái đã tắt và đang hoạt động
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 .disabledcho 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>Định cỡ
Phân trang lớn hơn hay nhỏ hơn lạ mắt? Thêm .pagination-lghoặc .pagination-smcho 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>Máy nhắn tin
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í.
Ví dụ mặc định
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>Các liên kết được căn chỉnh
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>Trạng thái vô hiệu hóa tùy chọn
Các liên kết máy nhắn tin cũng sử dụng .disabledlớ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>Nhãn
Thí dụ
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
Tiêu đề ví dụ Mới
<h3>Example heading <span class="label label-default">New</span></h3>Các biến thể có sẵn
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.
Thông tin Thành công Chính
Mặc định Cảnh báo Nguy hiểm
<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ó hàng tấn nhãn?
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-blockphầ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 .
danh hiệu
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>Tự sụp đổ
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 :emptybộ chọn của CSS) miễn là không có nội dung nào bên trong.
Khả năng tương thích trên nhiều trình duyệt
Các huy hiệu sẽ không tự thu gọn trong Internet Explorer 8 vì nó không hỗ trợ :emptybộ chọn.
Thích ứng với các trạng thái điều hướng hoạt động
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>Jumbotron
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.
Chào thế giới!
Đâ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 .containers và thay vào đó thêm một .containerbên trong.
<div class="jumbotron">
<div class="container">
...
</div>
</div>Đầu trang
Một khung đơn giản để h1tạ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ử h1mặ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).
Tiêu đề trang mẫu Văn bản phụ cho tiêu đề
<div class="page-header">
<h1>Example page header <small>Subtext for header</small></h1>
</div>Hình thu nhỏ
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 .
Ví dụ mặc định
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>Nội dung tùy chỉnh
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>Cảnh báo
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.
Các ví dụ
Gói bất kỳ văn bản nào và một nút loại bỏ tùy chọn trong .alertvà 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.
Không có lớp mặc định
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.
Làm tốt! Bạn đã đọc thành công thông báo cảnh báo quan trọng này.
Đứng lên! Cảnh báo này cần bạn chú ý, nhưng nó không quá quan trọng.
Cảnh báo! Tốt hơn là bạn nên kiểm tra lại bản thân, trông bạn không quá ổn.
Oh snap! Thay đổi một số thứ và thử gửi lại.
<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>Loại bỏ cảnh báo
Xây dựng trên bất kỳ cảnh báo nào bằng cách thêm một .alert-dismissiblenút tùy chọn và đóng.
Yêu cầu plugin cảnh báo JavaScript
Để 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 .
Cảnh báo! Tốt hơn là bạn nên kiểm tra lại bản thân, trông bạn không quá ổn.
<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 hành vi phù hợp trên tất cả các thiết bị
Đảm bảo sử dụng <button>phần tử có data-dismiss="alert"thuộc tính dữ liệu.
Liên kết trong cảnh báo
Sử dụng .alert-linklớ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.
Làm tốt! Bạn đã đọc thành công
thông báo cảnh báo quan trọng này .
Đứng lên! Cảnh báo này
cần bạn chú ý , nhưng nó không quá quan trọng.
Cảnh báo! Tốt hơn hết là bạn nên kiểm tra lại bản thân, trông bạn
không quá ổn đâu.
Oh snap!
Thay đổi một số thứ và thử gửi lại.
<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ậ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.
Khả năng tương thích trên nhiều trình duyệ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.
Khả năng tương thích của Chính sách bảo mật nội dung (CSP)
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 stylethuộ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.
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>Có nhãn
Xóa lớp <span>với .sr-onlytừ 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-widthvà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>Các lựa chọn thay thế theo ngữ cảnh
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ọc
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>Hoạt hình
Thêm vào .activeđể .progress-bar-stripedtạ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>Xếp chồng lên nhau
Đặ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>Đối tượng phương tiện
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
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.
Tiêu đề phương tiện
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.
Tiêu đề phương tiện
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.
Tiêu đề phương tiện lồng nhau
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.Tiêu đề phương tiện
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.
Tiêu đề phương tiện
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.
<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-leftvà .pull-rightcũ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-leftvà .media-right, ngoại trừ chúng .media-rightnên được đặt sau .media-bodyhtml.
Căn chỉnh phương tiện
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.
Phương tiện được căn chỉnh hàng đầu
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.
Phương tiện được căn giữa
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.
Phương tiện được căn chỉnh dưới 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.
<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>Danh sách phương tiện
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).
-
Tiêu đề phương tiện
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.
Tiêu đề phương tiện lồng nhau
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.
Tiêu đề phương tiện lồng nhau
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.
Tiêu đề phương tiện lồng nhau
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>Danh sách nhóm
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.
Ví dụ cơ bản
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.
- Cras justo odio
- Dapibus ac Operatingisis 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>danh hiệu
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.
- 14Cras justo odio
- 2Dapibus ac Operatingisis in
- 1Morbi leo risus
<ul class="list-group">
<li class="list-group-item">
<span class="badge">14</span>
Cras justo odio
</li>
</ul>Các mục được liên kết
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 nút
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 .btnlớ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>Các mặt hàng bị vô hiệu hóa
Thêm .disabledvà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>Các lớp theo ngữ cảnh
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 .activetrạng thái.
- Dapibus ac Operatingisis in
- Cras ngồi 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>Nội dung tùy chỉnh
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.
Liệt kê tiêu đề nhóm mục
Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.
Liệt kê tiêu đề nhóm mục
Donec id elit non mi porta gravida tại eget metus. Maecenas sed diam eget risus varius blandit.
Liệt kê tiêu đề nhóm mục
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>Bảng điều khiển
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.
Ví dụ cơ bản
Theo mặc định, tất cả những gì .panelphả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.
Ví dụ bảng điều khiển cơ bản
<div class="panel panel-default">
<div class="panel-body">
Basic panel example
</div>
</div>Bảng điều khiển với tiêu đề
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-titlelớ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.
Tiêu đề bảng không có tiêu đề
Nội dung bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
<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>Bảng điều khiển có chân trang
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.
Nội dung bảng điều khiển
<div class="panel panel-default">
<div class="panel-body">
Panel content
</div>
<div class="panel-footer">Panel footer</div>
</div>Các lựa chọn thay thế theo ngữ cảnh
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.
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
Tiêu đề bảng điều khiển
Nội dung bảng điều khiển
<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>Có bàn
Thêm bất kỳ không có đường viền nào .tabletrong 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.
Tiêu đề bảng điều khiển
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.
Tiêu đề bảng điều khiể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>Với các nhóm danh sách
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.
Tiêu đề bảng điều khiển
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.
- Cras justo odio
- Dapibus ac Operatingisis 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>Nhúng đáp ứng
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>Wells
Mặc định tốt
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ó.
Nhìn kìa, tôi đang ở trong một cái giếng!
<div class="well">...</div>Các lớp học tùy chọn
Điều khiển đệm và các góc tròn với hai lớp bổ trợ tùy chọn.
Nhìn kìa, tôi đang ở trong một cái giếng lớn!
<div class="well well-lg">...</div>
Nhìn kìa, tôi đang ở trong một cái giếng nhỏ!
<div class="well well-sm">...</div>