Thí dụ

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 .

<ul class = "dropdown-menu" role = "menu" aria-labellingby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Hành động </a> </li >  
  <li> <a tabindex = "-1" href = "#"> Một hành động khác </a> </li>  
  <li> <a tabindex = "-1" href = "#"> Nội dung khác ở đây </a> </li>  
  <li class = "divider" > </li> 
  <li> <a tabindex = "-1" href = "#"> Liên kết riêng </a> </li >  
</ul>

Đánh dấu

Chỉ nhìn vào menu thả xuống, đây là HTML bắt buộc. Bạn cần 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 đó, chỉ cần tạo menu.

<div class = "dropdown" > 
  <! - Liên kết hoặc nút để chuyển đổi menu thả xuống ->
  <ul class = "dropdown-menu" role = "menu" aria-labellingby = "dLabel" >   
    <li> <a tabindex = "-1" href = "#"> Hành động </a> </li >  
    <li> <a tabindex = "-1" href = "#"> Một hành động khác </a> </li>  
    <li> <a tabindex = "-1" href = "#"> Nội dung khác ở đây </a> </li>  
    <li class = "divider" > </li> 
    <li> <a tabindex = "-1" href = "#"> Liên kết riêng </a> </li >  
  </ul>
</div>

Tùy chọn

Căn chỉnh các menu ở bên phải và thêm bao gồm các mức thả xuống bổ sung.

Căn chỉnh các menu

Thêm .pull-rightvào a .dropdown-menuđể căn phải menu thả xuống.

<ul class = "dropdown-menu pull-right" role = "menu" aria-labellingby = "dLabel" >   
  ...
</ul>

Tùy chọn menu bị vô hiệu hóa

Thêm .disabledvào một <li>trong menu thả xuống để tắt liên kết.

<ul class = "dropdown-menu" role = "menu" aria-labellingby = "dropdownMenu" >   
  <li> <a tabindex = "-1" href = "#"> Liên kết thông thường </a> </li>  
  <li class = "disable" > <a tabindex = "-1" href = "#"> Liên kết bị vô hiệu hóa </a> </li>   
  <li> <a tabindex = "-1" href = "#"> Một liên kết khác </a> </li>  
</ul>

Menu phụ trên danh sách thả xuống

Thêm một cấp độ bổ sung của menu thả xuống, xuất hiện khi di chuột giống như của OS X, với một số bổ sung đánh dấu đơn giản. Thêm .dropdown-submenuvào bất kỳ likiểu nào trong menu thả xuống hiện có để tạo kiểu tự động.

<ul class = "dropdown-menu" role = "menu" aria-labellingby = "dLabel" >   
  ...
  <li class = "dropdown-submenu" > 
    <a tabindex = "-1" href = "#"> Tùy chọn khác </a>  
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </li>
</ul>

Các ví dụ

Hai tùy chọn cơ bản, cùng với hai biến thể cụ thể hơn.

Nhóm nút đơn

Bọc một loạt các nút với .btntrong .btn-group.

<div class = "btn-group" > 
  <button class = "btn" > Left </button> 
  <button class = "btn" > Middle </button> 
  <button class = "btn" > Right </button> 
</div>

Nhiều nhóm 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" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

Nhóm nút dọc

Làm cho một tập hợp các nút xuất hiện xếp chồng theo chiều dọc thay vì theo chiều ngang.

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

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.

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

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.

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

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.

<div class = "btn-group" > 
  <button class = "btn btn-mini" > Hành động </button> 
  <button class = "btn btn-mini 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>

Mặc định nhẹ

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.

Các tab cơ bản

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

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

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

Trạng thái bị vô hiệu hóa

Đối với bất kỳ thành phần điều hướng nào (tab, viên thuốc hoặc danh sách), hãy thêm .disabledcác liên kết màu xám và không có hiệu ứng di chuột . Tuy nhiên, các liên kết sẽ vẫn có thể nhấp được, trừ khi bạn xóa hrefthuộc tính. Ngoài ra, bạn có thể triển khai JavaScript tùy chỉnh để ngăn các nhấp chuột đó.

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

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ó thể xếp chồng lên nhau

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

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

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

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

Trình đơn thả xuống

Thêm menu thả xuống với một chút HTML bổ sung và plugin JavaScript thả xuống .

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

<ul class = "nav nav-tabs" > 
  <li 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

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

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

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.

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>

Ghi chúĐể lồng trong một danh sách điều hướng, hãy bao gồm class="nav nav-list"trên bất kỳ lồng ghép nào <ul>.

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>

Điều hướng có thể tab

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.

Ví dụ về tabbable

Để đặt các tab thành tab, hãy tạo một .tab-paneID duy nhất cho mỗi tab và bọc chúng lại .tab-content.

<div class = "tabbable" > <! - Chỉ bắt buộc đối với tab trái / phải ->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" > <a href = "#tab1" data-toggle = "tab"> Phần 1 </a> </li >   
    <li> <a href = "#tab2" data-toggle = "tab"> Phần 2 </a> </li >  
  </ul>
  <div class = "tab-content" > 
    <div class = "tab-pane active" id = "tab1" >  
      <p> Tôi ở Phần 1. </p>
    </div>
    <div class = "tab-pane" id = "tab2" >  
      <p> Xin chào, tôi đang ở Phần 2. </p>
    </div>
  </div>
</div>

Làm mờ các tab

Để làm cho các tab mờ dần, hãy thêm .fadevào từng tab .tab-pane.

Yêu cầu plugin jQuery

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 .

Tabbable theo bất kỳ hướng nào

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>

Thanh điều hướng cơ bản

Để bắt đầu, các thanh điều hướng là tĩnh (không cố định ở trên cùng) và bao gồm hỗ trợ cho tên dự án và điều hướng cơ bản. Đặt một cái ở bất kỳ đâu trong a .container, nơi đặt chiều rộng của trang web và nội dung của bạn.

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <a class = "brand" href = "#"> Tiêu đề </a>  
    <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>
  </div>
</div>

Thành phần thanh điều hướng

Nhãn 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>  

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ác hình thức

Để đị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" >  
  <button type = "submit" class = "btn" > Gửi </button>  
</form>

Form tìm kiếm

Để có biểu mẫu tìm kiếm tùy chỉnh hơn, hãy thêm .navbar-searchvào formvà .search-queryvào đầu vào cho 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>

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 tìm kiếm hoặc văn bản, 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.

Sử dụng trình đơn thả xuống

Thêm trình đơn thả xuống và danh sách thả xuống vào điều hướng với một chút đánh dấu và plugin JavaScript thả xuống .

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

Hãy truy cập tài liệu JavaScript thả xuống để biết thêm thông tin về đánh dấu và thông tin về cách gọi trình đơn thả xuống.

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.

Các biến thể hiển thị tùy chọn

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

Cố định lên đầu

Thêm .navbar-fixed-topvà nhớ tính khu vực ẩn bên dưới nó bằng cách thêm ít nhất 40px paddingvà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.

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

Cố định ở dưới cùng

Thêm .navbar-fixed-bottomthay vào đó.

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

Thanh điều hướng trên cùng 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-top. Không giống như .navbar-fixed-toplớp học, bạn không cần phải thay đổi bất kỳ phần đệm nào trên body.

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

Thanh điều hướng đáp ứng

Để triển khai thanh điều hướng đáp ứng thu gọn, hãy bọc nội dung thanh đ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 sụp đổ" > 
        <! - .nav, .navbar-search, .navbar-form, v.v. ->
      </div>
 
    </div>
  </div>
</div>

Biến thể đảo ngược

Sửa đổi giao diện của thanh điều hướng bằng cách thêm .navbar-inverse.

<div class = "navbar navbar-inverse" > 
  ...
</div>

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.

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

Phân trang tiêu chuẩn

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.

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

Tùy chọn

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.

<div class = "pagination" > 
  <ul>
    <li class = "disable" > <a href = "#"> & laquo; </a> </li>  
    <li class = "active" > <a href = "#"> 1 </a> </li>  
    ...
  </ul>
</div>

Bạn có thể tùy ý hoán đổi các neo đang hoạt động hoặc bị vô hiệu hóa cho các nhịp để loại bỏ chức năng nhấp chuột trong khi vẫn giữ lại các kiểu đã định.

<div class = "pagination" > 
  <ul>
    <li class = "disable" > <span> & laquo; </span> </li> 
    <li class = "active" > <span> 1 </span> </li> 
    ...
  </ul>
</div>

Kích thước

Phân trang lớn hơn hay nhỏ hơn lạ mắt? Thêm .pagination-large, .pagination-smallhoặc .pagination-minicho các kích thước bổ sung.

<div class = "pagination pagination-large" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-small" > 
  <ul>
    ...
  </ul>
</div>
<div class = "pagination pagination-mini" > 
  <ul>
    ...
  </ul>
</div>

Căn chỉnh

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.

<div class = "pagination-centered" > 
  ...
</div>

<div class = "pagination pagination-right" > 
  ...
</div>

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.

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

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

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.

<ul class = "pager" > 
  <li class = "trước đó bị vô hiệu hóa" > 
    <a href = "#"> & larr ; Cũ hơn </a> 
  </li>
  ...
</ul>

Nhãn

danh hiệu

Dễ dàng thu gọn

Để dễ dàng triển khai, nhãn và huy hiệu sẽ đơn giản thu gọn (thông qua bộ chọn của CSS :empty) khi không có nội dung nào tồn tại bên trong.

Đơn vị anh hùng

Một thành phần nhẹ, linh hoạt để giới thiệu nội dung chính 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.

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

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

<div class = "page-header" > 
  <h1> Tiêu đề trang mẫu <small> Văn bản phụ cho tiêu đề </small> </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ỏ.

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 = "span4" > 
    <a href = "#" class = "thumbnail"> _  
      <img data-src = "Holder.js / 300x200" 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 = "span4" > 
    <div class = "thumbnail" > 
      <img data-src = "Holder.js / 300x200" alt = "" >  
      <h3> Nhãn hình thu nhỏ </h3>
      <p> Chú thích hình thu nhỏ ... </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.

Cảnh báo mặc định

Gói bất kỳ văn bản nào và một nút loại bỏ tùy chọn .alertcho một thông báo cảnh báo cơ bản.

<div class = "alert" > 
  <button type = "button" class = "close" data-allow = "alert" > & times; </button>   
  <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>

Loại bỏ các nút

Ngoài thuộc tính này, các trình duyệt Mobile Safari và Mobile Opera còn data-dismiss="alert"yêu cầu loại href="#"bỏ cảnh báo khi sử dụng <a>thẻ.

<a href = "#" class = "close" data-dismiss = "alert"> & times ; </a>   

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.

<button type = "button" class = "close" data-allow = "alert" > & times; </button>   

Loại bỏ cảnh báo qua JavaScript

Sử dụng plugin jQuery cảnh báo để loại bỏ cảnh báo nhanh chóng và dễ dàng.

Tùy chọn

Đối với các thư dài hơn, hãy tăng phần đệm ở trên cùng và dưới cùng của trình bao bọc cảnh báo bằng cách thêm .alert-block.

<div class = "alert alert-block" > 
  <button type = "button" class = "close" data-allow = "alert" > & times; </button>   
  <h4> Cảnh báo! </h4>
  Tốt nhất bạn nên tự kiểm tra, bạn không ...
</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

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

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.

<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ó sẵn trong IE7-8.

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

Hoạt hình

Thêm vào .activeđể .progress-stripedtạo hiệu ứng cho các sọc từ phải sang trái. Không có sẵn trong tất cả các phiên bản IE.

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

Xếp chồng lên nhau

Đặt nhiều thanh giống nhau .progressđể xếp chồng lên nhau.

<div class = "process" > 
  <div class = "bar bar-success" style = " width : 35 %; " > </div>   
  <div class = "bar bar-warning" style = " width : 20 %; " > </div>   
  <div class = "bar bar-risk" style = " width : 10 %; " > </div>   
</div>

Tùy chọn

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.

<div class = "process process-info" > 
  <div class = "bar" style = " width : 20 % " > </div>   
</div>
<div class = "tiến độ thành công" > 
  <div class = "bar" style = " width : 40 % " > </div>   
</div>
<div class = "process process-warning" > 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div class = "tiến độ tiến độ-nguy hiểm" > 
  <div class = "bar" style = " width : 80 % " > </div>   
</div>

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.

<div class = "tiến trình tiến trình-thông tin tiến trình-sọc" > 
  <div class = "bar" style = " width : 20 % " > </div>   
</div>
<div class = "tiến độ thành công tiến bộ-sọc" > 
  <div class = "bar" style = " width : 40 % " > </div>   
</div>
<div class = "tiến độ cảnh báo tiến trình tiến trình-sọc" > 
  <div class = "bar" style = " width : 60 % " > </div>   
</div>
<div class = "tiến độ tiến độ-nguy hiểm tiến-sọc" > 
  <div class = "bar" style = " width : 80 % " > </div>   
</div>

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.

Các phiên bản cũ hơn Internet Explorer 10 và Opera 12 không hỗ trợ hoạt ảnh.

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.

Ví dụ mặc định

Phương tiện mặc định cho phép thả nổi một đối tượng phương tiện (hình ảnh, video, âm thanh) sang trái hoặc 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

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.

<div class = "media" > 
  <a class = "pull-left" href = "#"> _  
    <img class = "media-object" data-src = "Holder.js / 64x64" >  
  </a>
  <div class = "media-body" > 
    <h4 class = "media-header" > Tiêu đề phương tiện </h4> 
    ...
 
    <! - Đối tượng phương tiện lồng nhau ->
    <div class = "media" > 
      ...
    </div>
  </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).

<ul class = "media-list" > 
  <li class = "media" > 
    <a class = "pull-left" href = "#"> _  
      <img class = "media-object" data-src = "Holder.js / 64x64" >  
    </a>
    <div class = "media-body" > 
      <h4 class = "media-header" > Tiêu đề phương tiện </h4> 
      ...
 
      <! - Đối tượng phương tiện lồng nhau ->
      <div class = "media" > 
        ...
     </div>
    </div>
  </li>
</ul>

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>

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.

<div class = "well well-large" > 
  ...
</div>

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

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

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

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

Các lớp trợ giúp

Các lớp đơn giản, tập trung để chỉnh sửa màn hình hoặc hành vi nhỏ.

.pull-left

Làm nổi một phần tử sang trái

class = "pull-left"

. kéo - trái {
  float : trái ;
}

.pull-right

Làm nổi một phần tử bên phải

class = "pull-right"

. kéo - sang phải {
  float : phải ;
}

.mute

Thay đổi màu của một phần tử thành#999

class = "tắt tiếng"

. tắt tiếng {
  màu : # 999; 
}

.clearfix

Xóa floattrên bất kỳ phần tử nào

class = "clearfix"

. clearfix {
  * thu phóng : 1 ; 
  &: trước đây ,
  &: sau {
    hiển thị : bảng ;
    nội dung : "" ; 
  }
  &: sau {
    rõ ràng : cả hai ;
  }
}