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-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.
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.
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.
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ệ
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.
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.
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.
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.
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.
Đị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.
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.
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.
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.
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 đề đó.
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.
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.
Đị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ử.
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.
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.
Các nút có trình đơn thả xuống
Các nút được phân đoạn
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.
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ợ.
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ý .
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ể:
Giảm số lượng hoặc chiều rộng của các mục trên thanh điều hướng.
Ẩ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 .
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ợ.
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.
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.
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.
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.
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>và <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.
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.
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.
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ă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.
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.
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.
Đảm bảo bao gồm điều này sau CSS Bootstrap cốt lõi.
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.
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.
Đảm bảo bao gồm điều này sau CSS Bootstrap cốt lõi.
Đầ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.
Đ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.
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.
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.
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.
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.
Đị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.
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.
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:
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.
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
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
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.
Để 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.
Đầ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 đề
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.
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ỏ.
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.
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.
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.
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.
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.
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%
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%
Để đả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%
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)
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)
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
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)
Đố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.
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.
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.
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
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
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ố.
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.
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.
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
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
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
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
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
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
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
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.
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!
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.