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-map-marker
  • 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ê
  • nhiệm vụ glyphicon glyphicon
  • glyphicon glyphicon-bộ lọc
  • 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ợ.

<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 .

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>

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>

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 .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ý<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.

@

@ example.com

$ .00

https://example.com/users/
<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.

Sử dụng nav cho bảng tab yêu cầu plugin tab JavaScript

Đối với các tab có vùng có thể lập tab, bạn phải sử dụng plugin JavaScript dành cho tab . Đánh dấu cũng sẽ yêu cầu các thuộc tính bổ sung và ARIA - hãy xem đánh dấu mẫurole của plugin để biết thêm chi tiết.

Làm cho nav được sử dụng làm điều hướng có thể truy cập được

Nếu bạn đang sử dụng nav để cung cấp thanh điều hướng, hãy đảm bảo thêm một role="navigation"vào vùng chứa mẹ hợp lý nhất của <ul>hoặc bao bọc một <nav>phần tử xung quanh toàn bộ điều hướng. Không thêm vai trò vào <ul>chính nó, vì điều này sẽ ngăn nó được công bố như một danh sách thực tế bởi các công nghệ hỗ trợ.

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>

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>

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ợ.

Safari và điều hướng hợp lý đáp ứng

Kể từ v9.1.2, Safari có một lỗi trong đó thay đổi kích thước trình duyệt của bạn theo chiều ngang gây ra lỗi hiển thị trong điều hướng hợp lý được xóa khi làm mới. Lỗi này cũng được hiển thị trong ví dụ điều hướng hợp lý .

<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 .disabledcác liên kết màu xám và không có hiệu ứng di chuột .

Chức năng liên kết không bị ảnh hưởng

Lớp này sẽ chỉ thay đổi diện <a>mạo của nó, không thay đổi chức năng của nó. Sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết tại đây.

<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 .

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 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ợ.

Nội dung tràn ngập

Vì Bootstrap không biết nội dung trong thanh điều hướng của bạn cần bao nhiêu dung lượng, bạn có thể gặp vấn đề với việc gói nội dung thành hàng thứ hai. Để giải quyết vấn đề này, bạn có thể:

  1. Giảm số lượng hoặc chiều rộng của các mục trên thanh điều hướng.
  2. Ẩn một số mục trên thanh điều hướng nhất định ở các kích thước màn hình nhất định bằng cách sử dụng các lớp tiện ích đáp ứng .
  3. Thay đổi điểm tại đó thanh điều hướng của bạn chuyển đổi giữa chế độ thu gọn và nằm ngang. Tùy chỉnh @grid-float-breakpointbiến hoặc thêm truy vấn phương tiện của riêng bạn.

Yêu cầu plugin JavaScript

Nếu JavaScript bị tắt và chế độ xem đủ hẹp để thanh điều hướng bị sập, thì sẽ không thể mở rộng thanh điều hướng và xem nội dung bên trong .navbar-collapse.

Thanh điều hướng đáp ứng yêu cầu plugin thu gọn phải có trong phiên bản Bootstrap của bạn.

Thay đổi điểm ngắt của thanh điều hướng trên thiết bị di động đã thu gọn

Thanh điều hướng thu gọn vào chế độ xem di động theo chiều dọc khi chế độ xem hẹp hơn @grid-float-breakpointvà mở rộng thành chế độ xem không di động theo chiều ngang khi chế độ xem ít nhất có @grid-float-breakpointchiều rộng. Điều chỉnh biến này trong Nguồn ít hơn để kiểm soát khi thanh điều hướng thu gọn / mở rộng. Giá trị mặc định là 768px(màn hình "nhỏ" hoặc "máy tính bảng" nhỏ nhất).

Làm cho các thanh điều hướng có thể truy cập được

Hãy đảm bảo sử dụng một <nav>phần tử hoặc nếu sử dụng một phần tử chung chung hơn chẳng hạn như a <div>, hãy thêm một phần tử role="navigation"vào mọi thanh điều hướng để xác định rõ ràng nó là một vùng mốc cho người dùng công nghệ 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-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>

Đặ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>

Cảnh báo thiết bị di động

Có một số lưu ý liên quan đến việc sử dụng điều khiển biểu mẫu trong các phần tử cố định trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiết.

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 biểu mẫu nội tuyến này, bạn có thể ẩn các nhãn bằng cách sử dụng .sr-onlylớp. Có nhiều phương pháp thay thế khác để cung cấp nhãn cho các công nghệ hỗ trợ, chẳng hạn như aria-labelhoặc aria-labelledbythuộc titletính. Nếu không có thuộc tính nào trong số này, trình đọc màn hình có thể sử dụng placeholderthuộc tính, nếu có, nhưng lưu ý rằng không nên sử dụng thuộc placeholdertính thay thế cho các phương pháp ghi nhãn khác.

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>

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

Giống như các lớp nút tiêu chuẩn , .navbar-btncó thể được sử dụng trên <a><input>các phần tử. Tuy nhiên, không .navbar-btnnên sử dụng các lớp nút tiêu chuẩn cho <a>các phần tử bên trong .navbar-nav.

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-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 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-left.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ăn phải nhiều thành phần

Navbars hiện có một hạn chế là có nhiều .navbar-rightlớp. Để nội dung đúng cách, chúng tôi sử dụng lề âm trên .navbar-rightphần tử cuối cùng. Khi có nhiều phần tử sử dụng lớp đó, các lề này không hoạt động như dự định.

Chúng tôi sẽ truy cập lại điều này khi chúng tôi có thể viết lại thành phần đó trong v4.

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ần đệm cơ thể

Thanh điều hướng cố định sẽ phủ lên nội dung khác của bạn, trừ khi bạn thêm paddingvào đầu <body>. Hãy thử các giá trị của riêng bạn hoặc sử dụng đoạn mã của chúng tôi bên dưới. Mẹo: Theo mặc định, thanh điều hướng cao 50px.

body { padding-top: 70px; }

Đảm bảo bao gồm điều này sau CSS Bootstrap cốt lõi.

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>

Cần đệm cơ thể

Thanh điều hướng cố định sẽ phủ lên nội dung khác của bạn, trừ khi bạn thêm paddingvào cuối <body>. Hãy thử các giá trị của riêng bạn hoặc sử dụng đoạn mã của chúng tôi bên dưới. Mẹo: Theo mặc định, thanh điều hướng cao 50px.

body { padding-bottom: 70px; }

Đảm bảo bao gồm điều này sau CSS Bootstrap cốt lõi.

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>

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 :beforecontent.

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

Phân trang

Cung cấp các liên kết phân trang cho 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">&laquo;</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">&raquo;</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">&laquo;</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">&laquo;</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>

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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</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.

Hộp thư đến42

<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.

Tìm hiểu thêm

<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).

<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ỏ.

100% x200

Nhãn hình thu nhỏ

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Cái nút Cái nút

100% x200

Nhãn hình thu nhỏ

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Cái nút Cái nút

100% x200

Nhãn hình thu nhỏ

Cras justo odio, dapibus ac Operatingisis in, egestas eget quam. Donec id elit non mi porta gravida tại eget metus. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Cái nút Cái nút

<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.

<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 .

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</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.

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.

<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.

Hoàn thành 60%
<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.

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

Để đả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.

0%
2%
<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.

40% Hoàn thành (thành công)
20% hoàn thành
Hoàn thành 60% (cảnh báo)
80% Hoàn thành (nguy hiểm)
<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.

40% Hoàn thành (thành công)
20% hoàn thành
Hoàn thành 60% (cảnh báo)
80% Hoàn thành (nguy hiểm)
<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.

45% Hoàn thành
<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.

35% Hoàn thành (thành công)
20% Hoàn thành (cảnh báo)
10% Hoàn thành (nguy hiểm)
<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-left.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-left.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.

<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>

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 @twitter
<div class="panel panel-default">
  <!-- Default panel contents -->
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    <p>...</p>
  </div>

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

Nếu 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 @twitter
<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>