Các thành phần

Hàng chục thành phần có thể tái sử dụng được tích hợp trong Bootstrap để cung cấp điều hướng, cảnh báo, cửa sổ bật lên và hơn thế nữa.

Nhóm nút

Sử dụng các nhóm nút để nối nhiều nút lại với nhau thành một thành phần tổng hợp. Xây dựng chúng với một loạt <a>hoặc <button>các phần tử.

Thực hành tốt nhất

Chúng tôi đề xuất các nguyên tắc sau để sử dụng nhóm nút và thanh công cụ:

  • Luôn sử dụng cùng một phần tử trong một nhóm nút <a>hoặc <button>.
  • Không trộn các nút có màu sắc khác nhau trong cùng một nhóm nút.
  • Sử dụng các biểu tượng ngoài hoặc thay cho văn bản, nhưng hãy đảm bảo bao gồm văn bản thay thế và tiêu đề nếu thích hợp.

Các nhóm Nút liên quan có danh sách thả xuống (xem bên dưới) phải được gọi riêng và luôn bao gồm dấu mũ thả xuống để biểu thị hành vi dự kiến.

Ví dụ mặc định

Đây là cách HTML tìm kiếm nhóm nút tiêu chuẩn được xây dựng bằng các nút thẻ liên kết:

  1. <div class = "btn-group" >
  2. <button class = "btn" > 1 </button>
  3. <button class = "btn" > 2 </button>
  4. <button class = "btn" > 3 </button>
  5. </div>

Ví dụ về thanh công cụ

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.

  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. ...
  4. </div>
  5. </div>

Hộp kiểm và hương vị radio

Các nhóm nút cũng có thể hoạt động như bộ đàm, trong đó chỉ một nút có thể hoạt động hoặc hộp kiểm, nơi bất kỳ số lượng nút nào có thể hoạt động. Xem tài liệu Javascript cho điều đó.

Tải javascript »

Danh sách thả xuống trong các nhóm nút

Đứng lên! Các nút có trình đơn thả xuống phải được bao bọc riêng lẻ trong của chúng .btn-grouptrong một .btn-toolbarđể hiển thị phù hợp.

Nút thả xuống

Tổng quan và ví dụ

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.

Đánh dấu mẫu

Tương tự như một nhóm nút, đánh dấu của chúng tôi sử dụng đánh dấu nút thông thường, nhưng với một số bổ sung để tinh chỉnh kiểu và hỗ trợ plugin jQuery thả xuống của Bootstrap.

  1. <div class = "btn-group" >
  2. <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">
  3. Hoạt động
  4. <span class = "caret" > </span>
  5. </a>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Hoạt động với tất cả các kích thước nút

Nút thả xuống hoạt động ở bất kỳ kích thước nào. kích thước nút của bạn thành .btn-large, .btn-smallhoặc .btn-mini.

Yêu cầu javascript

Nút thả xuống yêu cầu plugin thả xuống Bootstrap hoạt động.

Trong một số trường hợp — như thiết bị di động — menu thả xuống sẽ mở rộng ra bên ngoài khung nhìn. Bạn cần giải quyết căn chỉnh theo cách thủ công hoặc bằng javascript tùy chỉnh.


Nút chia nhỏ thả xuống

Tổng quan và ví dụ

Dựa trên các kiểu và đánh dấu của nhóm nút, chúng ta có thể dễ dàng tạo một nút tách. Các nút phân tách có một hành động tiêu chuẩn ở bên trái và một menu thả xuống ở bên phải với các liên kết theo ngữ cảnh.

Kích thước

Sử dụng các lớp nút bổ sung .btn-minihoặc .btn-smallđể .btn-largeđịnh kích thước.

  1. <div class = "btn-group" >
  2. ...
  3. <ul class = "dropdown-menu pull-right" >
  4. <! - liên kết menu thả xuống ->
  5. </ul>
  6. </div>

Đánh dấu mẫu

Chúng tôi mở rộng trình đơn thả xuống của nút thông thường để cung cấp tác vụ nút thứ hai hoạt động như một trình kích hoạt thả xuống riêng biệt.

  1. <div class = "btn-group" >
  2. <button class = "btn" > Action </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Menu thả xuống

Menu thả xuống cũng có thể được chuyển đổi từ dưới lên bằng cách thêm một lớp duy nhất vào lớp cha trực tiếp của .dropdown-menu. Nó sẽ lật hướng của menu .caretvà định vị lại chính menu để di chuyển từ dưới lên thay vì từ trên xuống.

  1. <div class = "btn-group dropup" >
  2. <button class = "btn" > Dropup </button>
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. <span class = "caret" > </span>
  5. </button>
  6. <ul class = "dropdown-menu" >
  7. <! - liên kết menu thả xuống ->
  8. </ul>
  9. </div>

Phân trang nhiều trang

Khi nào sử dụng

Phân trang cực kỳ đơn giản và được tạo kiểu tối thiểu 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.

Liên kết trang trạng thái

Các liên kết có thể tùy chỉnh và hoạt động trong một số trường hợp với đúng lớp. .disabledcho các liên kết không thể nhấp vào và.active cho trang hiện tại.

Căn chỉnh linh hoạt

Thêm một trong hai lớp tùy chọn để thay đổi sự liên kết của các liên kết phân trang: .pagination-centered.pagination-right.

Các ví dụ

Thành phần phân trang mặc định linh hoạt và hoạt động trong một số biến thể.

Đánh dấu

Được bao bọc trong a <div>, phân trang chỉ là a <ul>.

  1. <div class = "pagination" >
  2. <ul>
  3. <li> <a href = "#"> Trước đó </a> </li>
  4. <li class = "active" >
  5. <a href = "#"> 1 </a> _
  6. </li>
  7. <li> <a href = "#"> 2 </a> </li>
  8. <li> <a href = "#"> 3 </a> </li>
  9. <li> <a href = "#"> 4 </a> </li>
  10. <li> <a href = "#"> Tiếp theo </a> </li>
  11. </ul>
  12. </div>

Pager Để biết các liên kết trước và sau nhanh chóng

Giới thiệu về máy nhắn tin

Thành phần máy nhắn tin là một tập hợp các liên kết để triển khai phân trang đơn giản với đánh dấu nhẹ và thậm chí là các kiểu nhẹ hơn. Nó tuyệt vời cho các trang web đơn giản như blog hoặc tạp chí.

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 chung từ việc phân trang.

Ví dụ mặc định

Theo mặc định, các trung tâm máy nhắn tin liên kết.

  1. <ul class = "pager" >
  2. <li>
  3. <a href = "#"> Trước đó </a>
  4. </li>
  5. <li>
  6. <a href = "#"> Tiếp theo </a>
  7. </li>
  8. </ul>

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:

  1. <ul class = "pager" >
  2. <li class = "trước" >
  3. <a href = "#"> & larr ; Cũ hơn </a>
  4. </li>
  5. <li class = "tiếp theo" >
  6. <a href = "#"> Mới hơn & rarr ; </a>
  7. </li>
  8. </ul>
Nhãn Đánh dấu
Mặc định <span class="label">Default</span>
Thành công <span class="label label-success">Success</span>
Cảnh báo <span class="label label-warning">Warning</span>
Quan trọng <span class="label label-important">Important</span>
Thông tin <span class="label label-info">Info</span>
Nghịch đảo <span class="label label-inverse">Inverse</span>

Về

Huy hiệu là các thành phần nhỏ, đơn giản để hiển thị một chỉ số hoặc số lượng của một số loại. Chúng thường được tìm thấy trong các ứng dụng email như Mail.app hoặc trên các ứng dụng dành cho thiết bị di động để nhận thông báo đẩy.

Các lớp học có sẵn

Tên Thí dụ Đánh dấu
Mặc định 1 <span class="badge">1</span>
Thành công 2 <span class="badge badge-success">2</span>
Cảnh báo 4 <span class="badge badge-warning">4</span>
Quan trọng 6 <span class="badge badge-important">6</span>
Thông tin số 8 <span class="badge badge-info">8</span>
Nghịch đảo 10 <span class="badge badge-inverse">10</span>

Đơn vị anh hùng

Bootstrap cung cấp một thành phần nhẹ, linh hoạt được gọi là đơn vị anh hùng để giới thiệu nội dung trên trang web của bạn. Nó hoạt động tốt trên các trang web tiếp thị và nội dung nặng.

Đánh dấu

Kết thúc nội dung của bạn divnhư vậy:

  1. <div class = "hero-unit" >
  2. <h1> Tiêu đề </h1>
  3. <p> Dòng giới thiệu </p>
  4. <p>
  5. <a class = "btn btn-primary btn-large">
  6. Tìm hiểu thêm
  7. </a>
  8. </p>
  9. </div>

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

Đầ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 smallcũng như hầu hết các thành phần khác (với các kiểu bổ sung).

  1. <div class = "page-header" >
  2. <h1> Tiêu đề trang mẫu </h1>
  3. </div>

Hình thu nhỏ 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.

Có thể tùy chỉnh cao

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.

    Hoạt động Hoạt động

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

    Hoạt động Hoạt động

Tại sao sử dụng hình thu nhỏ

Hình thu nhỏ (trước đây .media-gridcho đến phiên bản 1.4) rất phù hợp cho lưới ảnh hoặc video, kết quả tìm kiếm hình ảnh, sản phẩm bán lẻ, danh mục đầu tư, v.v. Chúng có thể là liên kết hoặc nội dung tĩnh.

Đánh dấu đơn giản, linh hoạt

Đánh dấu hình thu nhỏ rất đơn giản — ulvới bất kỳ số lượng liphần tử nào là tất cả những gì được yêu cầu. Nó cũng siêu linh hoạt, cho phép bất kỳ loại nội dung nào chỉ cần thêm một chút đánh dấu để gói nội dung của bạn.

Sử dụng kích thước cột lưới

Cuối cùng, thành phần hình thu nhỏ sử dụng các lớp hệ thống lưới hiện có — như .span2hoặc .span3—để kiểm soát kích thước hình thu nhỏ.

Đánh dấu

Như đã đề cập trước đây, đánh dấu bắt buộc cho hình thu nhỏ là nhẹ và đơn giản. Dưới đây là một cái nhìn về thiết lập mặc định cho các hình ảnh được liên kết :

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <a href = "#" class = "thumbnail"> _
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. </a>
  6. </li>
  7. ...
  8. </ul>

Đối với nội dung HTML tùy chỉnh trong hình thu nhỏ, đánh dấu sẽ thay đổi một chút. Để cho phép nội dung cấp khối ở bất kỳ đâu, chúng tôi hoán đổi nội dung <a>tương <div>tự như vậy:

  1. <ul class = "thumbnails" >
  2. <li class = "span3" >
  3. <div class = "thumbnail" >
  4. <img src = "https://placehold.it/260x180" alt = "" >
  5. <h5> Nhãn hình thu nhỏ </h5>
  6. <p> Chú thích hình thu nhỏ ngay tại đây ... </p>
  7. </div>
  8. </li>
  9. ...
  10. </ul>

Các ví dụ khác

Khám phá tất cả các tùy chọn của bạn với các lớp lưới khác nhau có sẵn cho bạn. Bạn cũng có thể trộn và kết hợp các kích cỡ khác nhau.

Mặc định nhẹ

Lớp cơ sở được viết lại

Với Bootstrap 2, chúng tôi đã đơn giản hóa lớp cơ sở: .alertthay vì .alert-message. Chúng tôi cũng đã giảm đánh dấu bắt buộc tối thiểu — không <p>bắt buộc theo mặc định, chỉ là phần bên ngoài <div>.

Một tin nhắn cảnh báo

Để có một thành phần bền hơn với ít mã hơn, chúng tôi đã loại bỏ giao diện phân biệt cho các cảnh báo khối, các thông báo có nhiều khoảng đệm hơn và thường là nhiều văn bản hơn. Lớp học cũng đã thay đổi thành .alert-block.


Thật tuyệt vời với javascript

Bootstrap đi kèm với một plugin jQuery tuyệt vời hỗ trợ các thông báo cảnh báo, giúp loại bỏ chúng nhanh chóng và dễ dàng.

Tải xuống plugin »

Cảnh báo mẫu

Gói tin nhắn của bạn và một biểu tượng đóng tùy chọn trong một div với lớp đơn giản.

Cảnh báo! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.
  1. <div class = "alert" >
  2. <button class = "close" data-allow = "alert" > × </button>
  3. <strong> Cảnh báo! </strong> Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn.
  4. </div>

Đứng lên! Thiết bị iOS yêu cầu loại href="#"bỏ cảnh báo. Đảm bảo bao gồm nó và thuộc tính dữ liệu cho các biểu tượng đóng neo. Ngoài ra, bạn có thể sử dụng một <button>phần tử có thuộc tính data, mà chúng tôi đã chọn thực hiện cho tài liệu của mình. Khi sử dụng <button>, bạn phải bao gồm type="button"nếu không các biểu mẫu của bạn có thể không gửi.

Dễ dàng mở rộng thông báo cảnh báo tiêu chuẩn với hai lớp tùy chọn: .alert-blockđể có thêm các điều khiển đệm và văn bản và .alert-headingcho một tiêu đề phù hợp.

Cảnh báo!

Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn. Nulla vitae elit libero, một loài pharetra augue. Praesent Goodso cursus magna, vel scelerisque nisl consectetur et.

  1. <div class = "alert alert-block" >
  2. <a class = "close" data-dismiss = "alert" href = "#"> × </a> _
  3. <h4 class = "alert-header" > Cảnh báo! </h4>
  4. Tốt nhất bạn nên tự kiểm tra, bạn không ...
  5. </div>

Các lựa chọn thay thế theo ngữ cảnh Thêm các lớp tùy chọn để thay đổi nội hàm của cảnh báo

Lỗi hoặc nguy hiểm

Oh snap! Thay đổi một số thứ và thử gửi lại.
  1. <div class = "alert alert-error" >
  2. ...
  3. </div>

Thành công

Làm tốt! Bạn đã đọc thành công thông báo cảnh báo quan trọng này.
  1. <div class = "alert alert-success" >
  2. ...
  3. </div>

Thông tin

Đứng lên! Cảnh báo này cần bạn chú ý, nhưng nó không quá quan trọng.
  1. <div class = "alert alert-info" >
  2. ...
  3. </div>

Ví dụ và đánh dấu

Nền tảng

Thanh tiến trình mặc định với một gradient dọc.

  1. <div class = "process" >
  2. <div class = "bar"
  3. style = " width : 60 %; " > </div>
  4. </div>

Sọc

Sử dụng gradient để tạo hiệu ứng sọc (không có IE).

  1. <div class = "process progressive-sọc" >
  2. <div class = "bar"
  3. style = " width : 20 %; " > </div>
  4. </div>

Hoạt hình

Lấy ví dụ sọc và làm động nó (không có IE).

  1. <div class = "process process-sọc
  2. hoạt động " >
  3. <div class = "bar"
  4. style = " width : 40 %; " > </div>
  5. </div>

Tùy chọn và hỗ trợ trình duyệt

Màu bổ sung

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.

Thanh sọc

Tương tự như các màu đồng nhất, chúng tôi có các thanh tiến trình sọc đa dạng.

Hành vi

Thanh tiến trình sử dụng chuyển tiếp CSS3, vì vậy nếu bạn điều chỉnh động chiều rộng thông qua javascript, nó sẽ thay đổi kích thước một cách trơn tru.

Nếu bạn sử dụng .activelớp này, .progress-stripedthanh tiến trình của bạn sẽ tạo hoạt ảnh cho các sọc từ trái sang phải.

Hỗ trợ trình duyệt

Các thanh tiến trình sử dụng các gradient, hiệu ứng chuyển tiếp và hoạt ảnh CSS3 để đạt được tất cả các hiệu ứng của chúng. Các tính năng này không được hỗ trợ trong IE7-9 hoặc các phiên bản Firefox cũ hơn.

Opera và IE không hỗ trợ hoạt ảnh tại thời điểm này.

Wells

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!
  1. <div class = "well" >
  2. ...
  3. </div>

Đóng biểu tượng

Sử dụng biểu tượng đóng chung để loại bỏ nội dung như phương thức và cảnh báo.

  1. <button class = "close" > & times; </button>

Thiết bị iOS yêu cầu một href = "#" cho các sự kiện nhấp chuột nếu bạn muốn sử dụng ký tự liên kết.

  1. <a class = "close" href = "#"> & lần ; </a>