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:

<div class = "btn-group" > 
  <button class = "btn" > 1 </button> 
  <button class = "btn" > 2 </button> 
  <button class = "btn" > 3 </button> 
</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.

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    ...
  </div>
</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.

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.

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "dropdown" href = "#">   
    Hoạt động
    <span class = "caret" > </span> 
  </a>
  <ul class = "dropdown-menu" > 
    <! - liên kết menu thả xuống ->
  </ul>
</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.

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 classe nút bổ sung .btn-minihoặc .btn-smallđể .btn-largeđịnh kích thước.

<div class = "btn-group" > 
  ...
  <ul class = "dropdown-menu pull-right" > 
    <! - liên kết menu thả xuống ->
  </ul>
</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.

<div class = "btn-group" > 
  <button class = "btn" > Action </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "dropdown-menu" > 
    <! - liên kết menu thả xuống ->
  </ul>
</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.

<div class = "btn-group dropup" > 
  <button class = "btn" > Dropup </button> 
  <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
    <span class = "caret" > </span> 
  </button>
  <ul class = "dropdown-menu" > 
    <! - liên kết menu thả xuống ->
  </ul>
</div>

Lớp cơ bản mạnh mẽ

Tất cả các thành phần điều hướng ở đây — tab, viên thuốc và danh sách — chia sẻ cùng kiểu đánh dấu và kiểu cơ sở thông qua .navlớp.

Khi nào sử dụng

Tab và viên thuốc rất thích hợp cho các phần nội dung hoặc điều hướng giữa các trang có nội dung liên quan.

Căn chỉnh thành phần

Để căn chỉnh các liên kết điều hướng, hãy sử dụng .pull-lefthoặc .pull-rightcác lớp tiện ích. Cả hai lớp sẽ thêm một CSS float theo hướng được chỉ định.

Các tab cơ bản

Thường xuyên <ul>liên kết và thêm .nav-tabs:

• Nhà
• Hồ sơ
• Tin nhắn

<ul class = "nav nav-tabs" > 
  <li class = "active" > 
    <a href = "#"> Trang chủ </a> 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Thuốc cơ bản

Sử dụng cùng một HTML đó, nhưng sử dụng .nav-pillsthay thế:

• Nhà
• Hồ sơ
• Tin nhắn

<ul class = "nav nav-Drugs" > 
  <li class = "active" > 
    <a href = "#"> Trang chủ </a> 
  </li>
  <li> <a href = "#"> ... </a> </li> 
  <li> <a href = "#"> ... </a> </li> 
</ul>

Làm thế nào để xếp chúng

Vì các tab và viên thuốc nằm ngang theo mặc định, chỉ cần thêm lớp thứ hai .nav-stacked, để làm cho chúng xuất hiện xếp chồng lên nhau theo chiều dọc.

Các tab xếp chồng lên nhau

• Nhà
• Hồ sơ
• Tin nhắn

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

Thuốc xếp chồng lên nhau

• Nhà
• Hồ sơ
• Tin nhắn

<ul class = "nav nav-Drugs nav-stacked" > 
  ...
</ul>

Thực đơn phong phú dễ dàng

Menu thả xuống trong các tab và viên thuốc Bootstrap cực kỳ dễ dàng và chỉ cần thêm một chút HTML và một plugin jQuery nhẹ.

Truy cập trang Javascript để đọc tài liệu về cách khởi tạo trình đơn thả xuống trong Bootstrap.

Các tab có danh sách thả xuống

• Nhà
• Cứu giúp
• Trình đơn thả xuống
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropup
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-tabs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Trình đơn thả xuống
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <! - liên kết ->
    </ul>
  </li>
</ul>

Thuốc có danh sách thả xuống

• Nhà
• Cứu giúp
• Trình đơn thả xuống
  • Action
  • Another action
  • Something else here
  • Separated link
• Dropup
  • Action
  • Another action
  • Something else here
  • Separated link

<ul class = "nav nav-Drugs" > 
  <li class = "dropdown" > 
    <a class = "dropdown-toggle" 
       data-toggle = "dropdown"
       href = "#" >
        Trình đơn thả xuống
        <b class = "caret" > </b> 
      </a>
    <ul class = "dropdown-menu" > 
      <! - liên kết ->
    </ul>
  </li>
</ul>

Điều hướng kiểu ứng dụng

Danh sách điều hướng cung cấp một cách đơn giản và dễ dàng để tạo các nhóm liên kết điều hướng với các tiêu đề tùy chọn. Chúng được sử dụng tốt nhất trong các thanh bên như Finder trong OS X.

Về mặt cấu trúc, chúng được xây dựng dựa trên các kiểu điều hướng cốt lõi giống như tab và viên thuốc, vì vậy việc sử dụng và tùy chỉnh rất đơn giản.

Với các biểu tượng

Danh sách điều hướng cũng dễ dàng được trang bị với các biểu tượng. Thêm <i>thẻ thích hợp với lớp và bạn đã thiết lập.

Dải phân cách ngang

Thêm một dải phân cách ngang bằng cách tạo một mục danh sách trống với lớp .divider, như sau:

<ul class = "nav nav-list" > 
  ...
  <li class = "divider" > </li> 
  ...
</ul>

Danh sách điều hướng mẫu

Lấy danh sách các liên kết và thêm class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    Tiêu đề danh sách
  </li>
  <li class = "active" > 
    <a href = "#"> Trang chủ </a> 
  </li>
  <li>
    <a href = "#"> Thư viện </a> 
  </li>
  ...
</ul>

Ví dụ với các biểu tượng

Ví dụ tương tự, nhưng với <i>thẻ cho các biểu tượng.

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#"> _ 
      <i class = "icon-book" > </i> 
      Thư viện
    </a>
  </li>
  ...
</ul>

Bao gồm những gì

Làm cho các tab của bạn trở nên sống động với một plugin đơn giản để chuyển đổi giữa các nội dung qua các tab. Bootstrap tích hợp các tab có thể chia thành bốn kiểu: trên cùng (mặc định), phải, dưới và trái.

Thay đổi giữa chúng rất dễ dàng và chỉ cần thay đổi rất ít đánh dấu.

Ví dụ về tabbable

Để đặt các tab thành tab, hãy bọc .nav-tabsdiv trong một div khác bằng lớp .tabbable.

Plugin jQuery tùy chỉnh

Tất cả các tab có thể theo dõi đều được hỗ trợ bởi plugin jQuery nhẹ của chúng tôi. Đọc thêm về cách làm cho các tab có thể tab trở nên sống động trên trang tài liệu javascript.

Nhận javascript →

Các tab ở dưới cùng

Lật thứ tự của HTML và thêm một lớp để đặt các tab ở dưới cùng.

<div class = "tabbable tabs-dưới" > 
  <div class = "tab-content" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

Các tab bên trái

Hoán đổi lớp để đặt các tab ở bên trái.

<div class = "tabbable tabs-left" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Các tab bên phải

Hoán đổi lớp để đặt các tab ở bên phải.

<div class = "tabbable tabs-right" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div class = "tab-content" > 
    ...
  </div>
</div>

Giàn giáo Navbar

Thanh điều hướng chỉ yêu cầu một số div để cấu trúc nó tốt cho hiển thị tĩnh hoặc cố định.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
      ...
    </div>
  </div>
</div>

Đã sửa lỗi thanh điều hướng

Cố định thanh điều hướng ở trên cùng hoặc dưới cùng của chế độ xem với một lớp bổ sung trên div ngoài cùng .navbar,.

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

Khi bạn dán thanh điều hướng, hãy nhớ tính đến khu vực ẩn bên dưới. Thêm 40px hoặc nhiều apdding vào <body>. Hãy chắc chắn thêm điều này sau CSS Bootstrap cốt lõi và trước CSS đáp ứng tùy chọn.

Tên thương hiệu

Một liên kết đơn giản để hiển thị thương hiệu hoặc tên dự án của bạn chỉ yêu cầu một thẻ liên kết.

<a class = "brand" href = "#"> _  
  Tên dự án
</a>

Biểu mẫu trong thanh điều hướng

Để định kiểu và định vị đúng một biểu mẫu trong thanh điều hướng, hãy thêm các lớp thích hợp như được hiển thị bên dưới. Đối với một biểu mẫu mặc định, hãy bao gồm .navbar-formvà hoặc .pull-lefthoặc .pull-rightđể căn chỉnh nó một cách chính xác.

<form class = "navbar-form pull-left" > 
  <input type = "text" class = "span2" >  
</form>

Đối với biểu mẫu tìm kiếm tùy chỉnh hơn, hãy thêm .navbar-searchlớp để nhận các kiểu chuyên biệt trong thanh điều hướng.

<form class = "navbar-search pull-left" > 
  <input type = "text" class = "search-query" placeholder = "Tìm kiếm" >   
</form>

Biến thể đáp ứng tùy chọn

Tùy thuộc vào lượng nội dung trong thanh trên cùng của bạn, bạn có thể muốn triển khai các tùy chọn đáp ứng. Để làm như vậy, hãy bọc nội dung điều hướng của bạn trong một div có chứa .nav-collapse.collapsevà thêm nút chuyển đổi thanh điều hướng .btn-navbar,.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div class = "container" > 
 
      <! - .btn-navbar được sử dụng làm nút chuyển đổi cho nội dung thanh điều hướng được thu gọn ->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse">   
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
        <span class = "icon-bar" > </span> 
      </a>
 
      <! - Hãy chắc chắn để thương hiệu ra khỏi đó nếu bạn muốn nó được hiển thị ->
      <a class = "brand" href = "#"> Tên dự án </a>  
 
      <! - Mọi thứ bạn muốn ẩn ở 940px trở xuống, hãy đặt trong đây ->
      <div class = "nav-sập" > 
        <! - .nav, .navbar-search, .navbar-form, v.v. ->
      </div>
 
    </div>
  </div>
</div>

Liên kết điều hướng

Các mục điều hướng rất đơn giản để thêm thông qua danh sách không có thứ tự.

<ul class = "nav" > 
  <li class = "active" > 
    <a href = "#"> Trang chủ </a> 
  </li>
  <li> <a href = "#"> Liên kết </a> </li> 
  <li> <a href = "#"> Liên kết </a> </li> 
</ul>

Bạn có thể dễ dàng thêm các bộ phân chia vào các liên kết điều hướng của mình với một mục danh sách trống và một lớp đơn giản. Chỉ cần thêm điều này vào giữa các liên kết:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" > </li> 
  ...
</ul>

Căn chỉnh thành phần

Để căn chỉnh điều hướng, biểu mẫu tìm kiếm hoặc văn bản, hãy sử dụng .pull-lefthoặc .pull-rightcác lớp tiện ích. Cả hai lớp sẽ thêm một CSS float theo hướng được chỉ định.

Thêm menu thả xuống

Thêm trình đơn thả xuống và trình đơn thả xuống vào điều hướng cực kỳ đơn giản, nhưng yêu cầu sử dụng plugin javascript của chúng tôi .

<ul class = "nav" > 
  <li class = "dropdown" > 
    <a href = "#" 
          class = "dropdown-toggle"
          data-toggle = "dropdown" >
          Tài khoản
          <b class = "caret" > </b> 
    </a>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Nhận javascript →

Văn bản trong thanh điều hướng

Bọc các chuỗi văn bản trong một <p>thẻ để có màu và màu sắc phù hợp.

Tại sao sử dụng chúng

Điều hướng đường dẫn được sử dụng như một cách để hiển thị cho người dùng biết họ đang ở đâu trong một ứng dụng hoặc một trang web, nhưng không phải để điều hướng chính. Giữ cho việc sử dụng chúng thưa thớt và ngắn gọn để đạt hiệu quả cao nhất.

Các ví dụ

Một ví dụ được hiển thị vì nó có thể được hiển thị trên nhiều trang.

• Nhà

• Trang chủ /
• Thư viện

• Trang chủ /
• Thư viện /
• Dữ liệu

Đánh dấu

HTML là danh sách không có thứ tự tiêu chuẩn của bạn với các liên kết.

<ul class = "breadcrumb" > 
  <li>
    <a href = "#"> Trang chủ </a> < span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#"> Thư viện </a> < span class = "divider" > / </span>   
  </li>
  <li class = "active" > Dữ liệu </li> 
</ul>

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à .activecho 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-centeredvà .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>.

<div class = "pagination" > 
  <ul>
    <li> <a href = "#"> Trước đó </a> </li> 
    <li class = "active" > 
      <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 = "#"> Tiếp theo </a> </li> 
  </ul>
</div>

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.

• Trước
• Tiếp theo

<ul class = "pager" > 
  <li>
    <a href = "#"> Trước đó </a> 
  </li>
  <li>
    <a href = "#"> Tiếp theo </a> 
  </li>
</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:

• ← Cũ hơn
• Mới hơn & rarr;

<ul class = "pager" > 
  <li class = "trước" > 
    <a href = "#"> & larr ; Cũ hơn </a> 
  </li>
  <li class = "tiếp theo" > 
    <a href = "#"> Mới hơn & rarr ; </a> 
  </li>
</ul>

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

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:

<div class = "hero-unit" > 
  <h1> Tiêu đề </h1>
  <p> Dòng giới thiệu </p>
  <p>
    <a class = "btn btn-primary btn-large"> 
      Tìm hiểu thêm
    </a>
  </p>
</div>

Một khung đơn giản h1để sắp xếp khoảng trống 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).

<div class = "page-header" > 
  <h1> Tiêu đề trang mẫu </h1>
</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 :

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <a href = "#" class = "thumbnail"> _  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</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:

<ul class = "thumbnails" > 
  <li class = "span3" > 
    <div class = "thumbnail" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> Nhãn hình thu nhỏ </h5>
      <p> Chú thích hình thu nhỏ ngay tại đây ... </p>
    </div>
  </li>
  ...
</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.

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.

<div class = "alert" > 
  <a class = "close" data-dismiss = "alert"> × </a> _  
  <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.
</div>

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.

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

Lỗi hoặc nguy hiểm

<div class = "alert alert-error" > 
  ...
</div>

Thành công

<div class = "alert alert-success" > 
  ...
</div>

Thông tin

<div class = "alert alert-info" > 
  ...
</div>

Nền tảng

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

<div class = "process" > 
  <div class = "bar" 
       style = " width : 60 %; " > </div> 
</div>

Sọc

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

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

Hoạt hình

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

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

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

<div class = "well" > 
  ...
</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.

×

<a class = "close"> & lần ; </a>