Đề mục

Tất cả các tiêu đề HTML, <h1>thông qua <h6>đều có sẵn.

h1. Tiêu đề 1

h2. Tiêu đề 2

h3. Tiêu đề 3

h4. Tiêu đề 4

h5. Tiêu đề 5

h6. Tiêu đề 6

Bản sao nội dung

Mặc định chung của Bootstrap font-sizelà 14px , với 20px . Điều này được áp dụng cho và tất cả các đoạn văn. Ngoài ra, (đoạn văn) nhận được lề dưới bằng một nửa chiều cao dòng của chúng (10px theo mặc định).line-height<body><p>

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. Nullam id dolor id nibh ultricies xe cộ.

Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida tại eget metus. Duis mollis, est non rowo luctus, nisi erat porttitor ligula, eget lacinia odio sem perf elit.

<p> ... </p>

Bản sao nội dung chính

Làm cho một đoạn văn nổi bật bằng cách thêm vào .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, không phải hàng hóa luctus.

<p class = "lead" > ... </p>

Được xây dựng với ít hơn

Thang đo kiểu chữ dựa trên hai biến LESS trong các biến .less : @baseFontSizevà @baseLineHeight. Đầu tiên là kích thước phông chữ cơ sở được sử dụng xuyên suốt và thứ hai là chiều cao dòng cơ sở. Chúng tôi sử dụng các biến đó và một số phép toán đơn giản để tạo lề, khoảng đệm và chiều cao dòng của tất cả các loại của chúng tôi và hơn thế nữa. Tùy chỉnh chúng và điều chỉnh Bootstrap.

Nhấn mạnh

Sử dụng các thẻ nhấn mạnh mặc định của HTML với các kiểu nhẹ.

`<small>`

Để khử nhấn mạnh nội dòng hoặc khối văn bản, hãy sử dụng thẻ nhỏ.

Dòng văn bản này được coi là bản in đẹp.

<p> <small> Dòng văn bản này được coi là bản in đẹp. </small> </p>

In đậm

Để nhấn mạnh một đoạn văn bản có trọng lượng phông chữ nặng hơn.

Đoạn văn bản sau được hiển thị dưới dạng văn bản in đậm .

<strong> được hiển thị dưới dạng văn bản in đậm </strong>

Chữ in nghiêng

Để nhấn mạnh một đoạn văn bản bằng chữ in nghiêng.

Đoạn văn bản sau được hiển thị dưới dạng văn bản in nghiêng .

<em> được hiển thị dưới dạng văn bản in nghiêng </em>

Đứng lên!Hãy thoải mái sử dụng <b>và <i>trong HTML5. <b>được dùng để làm nổi bật các từ hoặc cụm từ mà không truyền tải thêm tầm quan trọng trong khi <i>chủ yếu là về giọng nói, thuật ngữ kỹ thuật, v.v.

Các lớp căn chỉnh

Dễ dàng sắp xếp lại văn bản cho các thành phần với các lớp căn chỉnh văn bản.

Căn trái văn bản.

Căn giữa văn bản.

Văn bản được căn phải.

<p class = "text-left" > Văn bản căn trái. </p> 
<p class = "text-center" > Văn bản được căn giữa. </p> 
<p class = "text-right" > Văn bản được căn phải. </p>

Các lớp học nhấn mạnh

Truyền tải ý nghĩa thông qua màu sắc với một số lớp tiện ích nhấn mạnh.

Fusce dapibus, Tellus ac cursus rowo, rùa mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Bìm bìm biếc.

Duis mollis, est non rowo luctus, nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus, Tellus ac cursus rowo, rùa mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Bìm bìm biếc. </p> 
<p class = "text-success" > Duis mollis, est non rowo luctus, nisi erat porttitor ligula. </p>

Các từ viết tắt

Triển khai cách điệu phần tử của HTML <abbr>cho các từ viết tắt và từ viết tắt để hiển thị phiên bản mở rộng khi di chuột. Các từ viết tắt của một titlethuộc tính có đường viền dưới cùng chấm sáng và con trỏ trợ giúp khi di chuột, cung cấp ngữ cảnh bổ sung khi di chuột.

`<abbr>`

Đối với văn bản mở rộng khi di chuột dài của một chữ viết tắt, hãy bao gồm titlethuộc tính.

Từ viết tắt của thuộc tính từ là attr .

<abbr title = "thuộc tính" > attr </abbr>

`<abbr class="initialism">`

Thêm .initialismvào một chữ viết tắt cho kích thước phông chữ nhỏ hơn một chút.

HTML là thứ tốt nhất kể từ khi cắt lát bánh mì.

<abbr title = "Ngôn ngữ đánh dấu siêu văn bản" class = "initialism" > HTML </abbr>

Địa chỉ

Trình bày thông tin liên lạc của tổ tiên gần nhất hoặc toàn bộ cơ quan làm việc.

`<address>`

Giữ nguyên định dạng bằng cách kết thúc tất cả các dòng bằng <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Tên đầy đủ
[email protected]

<địa chỉ>
  <strong> Twitter, Inc. </strong> <br>
  795 Folsom Ave, Suite 600 <br>
  San Francisco, CA 94107 <br>
  <abbr title = "Phone" > P: </abbr> (123) 456-7890 
</address>
 
<địa chỉ>
  <strong> Tên đầy đủ </strong> <br>
  <a href = "mailto:#"> [email protected] </a> _ 
</address>

Dấu ngoặc kép

Để trích dẫn các khối nội dung từ một nguồn khác trong tài liệu của bạn.

Blockquote mặc định

Bao <blockquote>quanh bất kỳ HTML nào dưới dạng trích dẫn. Đối với báo giá thẳng, chúng tôi khuyên bạn nên a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. </p>
</blockquote>

Tùy chọn trích dẫn khối

Thay đổi phong cách và nội dung cho các biến thể đơn giản trên một blockquote tiêu chuẩn.

Đặt tên nguồn

Thêm <small>thẻ để xác định nguồn. Gộp tên của công việc nguồn vào <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.
Ai đó nổi tiếng trong Tiêu đề nguồn

<blockquote>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. </p>
  <small> Ai đó nổi tiếng <cite title = "Tiêu đề nguồn" > Tiêu đề nguồn </cite> </small> 
</blockquote>

Màn hình thay thế

Sử dụng .pull-rightcho một khối trích dẫn nổi, căn phải.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante.
Ai đó nổi tiếng trong Tiêu đề nguồn

<blockquote class = "pull-right" > 
  ...
</blockquote>

Danh sách

Không theo thứ tự

Danh sách các mục mà thứ tự không quan trọng .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat tại
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ul>
  <li> ... </li>
</ul>

Đã đặt hàng

Một danh sách các mục trong đó thứ tự quan trọng rõ ràng.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ol>
  <li> ... </li>
</ol>

Chưa được xếp lớp

Loại bỏ phần đệm mặc định list-stylevà phần đệm bên trái trên các mục danh sách (chỉ dành cho trẻ em ngay lập tức).

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Integer moltie lorem tại massa
Facilisis trong pretium nisl aliquet
Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat tại
Faucibus porta lacus fringilla vel
Aenean ngồi amet erat nunc
Bỏ qua lorem porttitor

<ul class = "unstyled" > 
  <li> ... </li>
</ul>

Nội tuyến

Đặt tất cả các mục trong danh sách trên một dòng duy nhất inline-blockvà một số đệm nhẹ.

Lorem ipsum
Phasellus iaculis
Nulla volutpat

<ul class = "inline" > 
  <li> ... </li>
</ul>

Sự mô tả

Một danh sách các thuật ngữ với các mô tả liên quan của chúng.

Danh sách mô tả: Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem num peit.; Donec id elit non mi porta gravida tại eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.

<dl>
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Mô tả ngang

Xếp các thuật ngữ và mô tả <dl>song song với nhau.

Danh sách mô tả: Một danh sách mô tả là hoàn hảo để xác định các thuật ngữ.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem num peit.; Donec id elit non mi porta gravida tại eget metus.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, Tellus ac cursus rowo, rùa bò mauris condimentum nibh, ut fermentum massa justo sit amet risus.

<dl class = "dl-ngang" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

Đứng lên!Danh sách mô tả ngang sẽ cắt bớt các cụm từ quá dài để vừa với sửa chữa cột bên trái text-overflow. Trong các cửa sổ xem hẹp hơn, chúng sẽ thay đổi thành bố cục xếp chồng mặc định.

Nội tuyến

Gói các đoạn mã nội tuyến bằng <code>.

Ví dụ, <section>nên được bọc dưới dạng nội tuyến.

Ví dụ: < code> & lt ; phần & gt ; </ code > phải được bao bọc dưới dạng nội tuyến .

Khối cơ bản

Sử dụng <pre>cho nhiều dòng mã. Đảm bảo thoát khỏi bất kỳ dấu ngoặc nhọn nào trong mã để hiển thị phù hợp.

<p> Văn bản mẫu tại đây ... </p>

<pre>
  & lt; p & gt; Văn bản mẫu tại đây ... & lt; / p & gt;
</pre>

Đứng lên!Đảm bảo giữ mã trong <pre>các thẻ càng gần bên trái càng tốt; nó sẽ hiển thị tất cả các tab.

Bạn có thể tùy chọn thêm .pre-scrollablelớp sẽ đặt chiều cao tối đa là 350px và cung cấp thanh cuộn trục y.

Kiểu mặc định

Đối với kiểu cơ bản — đệm nhẹ và chỉ các đường phân cách ngang — hãy thêm lớp cơ sở .tablevào bất kỳ <table>.

#	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

<table class = "table" > 
  …
</table>

Các lớp học tùy chọn

Thêm bất kỳ lớp nào sau đây vào lớp .tablecơ sở.

`.table-striped`

Thêm dải mã vằn vào bất kỳ hàng nào trong bảng trong <tbody>bộ :nth-childchọn CSS (không khả dụng trong IE7-8).

#	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

<table class = "table table-sọc" > 
  …
</table>

`.table-bordered`

Thêm đường viền và các góc tròn vào bảng.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
1	Đánh dấu	Otto	@getbootstrap
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class = "table table-bordered" > 
  …
</table>

`.table-hover`

Bật trạng thái di chuột trên các hàng của bảng trong a <tbody>.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class = "table table-hover" > 
  …
</table>

`.table-condensed`

Làm cho bảng nhỏ gọn hơn bằng cách cắt đôi phần đệm ô.

#	Họ	Họ	tên tài khoản
1	Đánh dấu	Otto	@mdo
2	Jacob	Thornton	@mập mạp
3	Larry the Bird		@twitter

<table class = "table table-Concentrate" > 
  …
</table>

Các lớp hàng tùy chọn

Sử dụng các lớp ngữ cảnh để tô màu các hàng trong bảng.

Lớp	Sự mô tả
`.success`	Cho biết một hành động thành công hoặc tích cực.
`.error`	Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực.
`.warning`	Cho biết một cảnh báo có thể cần chú ý.
`.info`	Được sử dụng như một sự thay thế cho các kiểu mặc định.

#	Sản phẩm	Thanh toán đã Thực hiện	Trạng thái
1	TB - Hàng tháng	01/04/2012	Đã được phê duyệt
2	TB - Hàng tháng	02/04/2012	Suy giảm
3	TB - Hàng tháng	03/04/2012	Chưa giải quyết
4	TB - Hàng tháng	04/04/2012	Gọi để xác nhận

...
  < tr class = "thành công" >
    <td> 1 < / td>
    <td> TB - Hàng tháng </ td >
    < td > 01/04/2012 < / td >
    <td> Được chấp thuận </ td >
  </ tr >
...

Đánh dấu bảng được hỗ trợ

Danh sách các phần tử HTML trong bảng được hỗ trợ và cách chúng nên được sử dụng.

Nhãn	Sự mô tả
`<table>`	Phần tử bao bọc để hiển thị dữ liệu ở định dạng bảng
`<thead>`	Phần tử vùng chứa cho các hàng tiêu đề bảng ( `<tr>`) để gắn nhãn các cột trong bảng
`<tbody>`	Phần tử vùng chứa cho các hàng của bảng ( `<tr>`) trong phần nội dung của bảng
`<tr>`	Phần tử vùng chứa cho một tập hợp các ô bảng ( `<td>`hoặc `<th>`) xuất hiện trên một hàng
`<td>`	Ô bảng mặc định
`<th>`	Ô bảng đặc biệt cho nhãn cột (hoặc hàng, tùy thuộc vào phạm vi và vị trí)
`<caption>`	Mô tả hoặc tóm tắt về những gì bảng lưu giữ, đặc biệt hữu ích cho trình đọc màn hình

<bàn>
  <caption> ... </caption>
  <thead>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <người>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

Kiểu mặc định

Các điều khiển biểu mẫu riêng lẻ nhận được kiểu dáng, nhưng không có bất kỳ lớp cơ sở bắt buộc nào đối với <form>hoặc những thay đổi lớn trong đánh dấu. Kết quả là các nhãn được căn trái, xếp chồng lên nhau trên đầu các điều khiển biểu mẫu.

<biểu mẫu>
  <fieldset>
    <legend> Truyền thuyết </legend>
    <label> Tên nhãn </label>
    <input type = "text" placeholder = "Nhập cái gì đó…" >  
    <span class = "help-block" > Ví dụ về văn bản trợ giúp cấp khối tại đây. </span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > Kiểm tra tôi 
    </label>
    <button type = "submit" class = "btn" > Gửi </button>  
  </fieldset>
</form>

Bố cục tùy chọn

Đi kèm với Bootstrap là ba bố cục biểu mẫu tùy chọn cho các trường hợp sử dụng phổ biến.

Form tìm kiếm

Thêm .form-searchvào biểu mẫu và .search-queryvào <input>để có kiểu nhập văn bản thêm tròn.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > Tìm kiếm </button>  
</form>

Mẫu nội tuyến

Thêm .form-inlinecho các nhãn căn trái và các điều khiển khối nội dòng để có bố cục nhỏ gọn.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Mật khẩu" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > Hãy nhớ tôi 
  </label>
  <button type = "submit" class = "btn" > Đăng nhập </button>  
</form>

Dạng ngang

Căn phải các nhãn và thả nổi chúng sang trái để làm cho chúng xuất hiện trên cùng một dòng với các điều khiển. Yêu cầu nhiều thay đổi đánh dấu nhất từ biểu mẫu mặc định:

Thêm .form-horizontalvào biểu mẫu
Gói nhãn và điều khiển trong.control-group
Thêm .control-labelvào nhãn
Kết hợp bất kỳ điều khiển liên quan nào .controlsđể căn chỉnh phù hợp

<form class = "form-ngang" > 
  <div class = "control-group" > 
    <label class = "control-label" for = "inputEmail" > Email </label>  
    <div class = "control" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" for = "inputPassword" > Mật khẩu </label>  
    <div class = "control" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "control" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > Hãy nhớ tôi 
      </label>
      <button type = "submit" class = "btn" > Đăng nhập </button>  
    </div>
  </div>
</form>

Các điều khiển biểu mẫu được hỗ trợ

Ví dụ về các điều khiển biểu mẫu chuẩn được hỗ trợ trong bố cục biểu mẫu mẫu.

Đầu vào

Điều khiển biểu mẫu phổ biến nhất, các trường đầu vào dựa trên văn bản. Bao gồm hỗ trợ cho tất cả các loại HTML5: văn bản, mật khẩu, ngày giờ, ngày giờ địa phương, ngày, tháng, giờ, tuần, số, email, url, tìm kiếm, điện thoại và màu sắc.

Yêu cầu sử dụng một chỉ định typemọi lúc.

<input type = "text" placeholder = "Text input" >

Textarea

Điều khiển biểu mẫu hỗ trợ nhiều dòng văn bản. Thay đổi rowsthuộc tính khi cần thiết.

<textarea row = "3" > </textareosystem

Hộp kiểm và đài

Hộp kiểm dùng để chọn một hoặc một số tùy chọn trong danh sách trong khi bộ đàm dùng để chọn một tùy chọn trong số nhiều tùy chọn.

Mặc định (xếp chồng lên nhau)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  Tùy chọn một là cái này cái kia — hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" đã kiểm tra >     
  Tùy chọn một là cái này cái kia — hãy chắc chắn bao gồm lý do tại sao nó tuyệt vời
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  Tùy chọn hai có thể là một cái gì đó khác và việc chọn nó sẽ bỏ chọn tùy chọn một
</label>

Hộp kiểm nội tuyến

Thêm .inlinelớp vào một loạt các hộp kiểm hoặc radio cho các điều khiển xuất hiện trên cùng một dòng.

<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2   
</label>
<label class = "checkbox inline" > 
  <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3   
</label>

Lựa chọn

Sử dụng tùy chọn mặc định hoặc chỉ định một multiple="multiple"để hiển thị nhiều tùy chọn cùng một lúc.

<select>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<select multiple = "nhiều" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

Mở rộng các điều khiển biểu mẫu

Thêm vào đầu các điều khiển trình duyệt hiện có, Bootstrap bao gồm các thành phần biểu mẫu hữu ích khác.

Các đầu vào bổ sung và bổ sung

Thêm văn bản hoặc các nút trước hoặc sau bất kỳ đầu vào dựa trên văn bản nào. Lưu ý rằng selectcác phần tử không được hỗ trợ ở đây.

Tùy chọn mặc định

Kết hợp một .add-onvà một inputbằng một trong hai lớp để thêm trước hoặc nối thêm văn bản vào đầu vào.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "apposystemInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Kết hợp

Sử dụng cả hai lớp và hai trường hợp của .add-onđể thêm trước và thêm đầu vào.

<div class = "input-prepend input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "apposystemPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

Các nút thay vì văn bản

Thay vì a <span>với văn bản, hãy sử dụng a .btnđể đính kèm một (hoặc hai) nút vào đầu vào.

<div class = "input-append" > 
  <input class = "span2" id = "apposystemInputButton " type = "text" >   
  <button class = "btn" type = "button" > Bắt đầu! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "apposystemInputButtons " type = "text" >   
  <button class = "btn" type = "button" > Tìm kiếm </button>  
  <button class = "btn" type = "button" > Tùy chọn </button>  
</div>

Nút thả xuống

<div class = "input-append" > 
  <input class = "span2" id = "apposystemDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hoạt động
      <span class = "caret" > </span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hoạt động
      <span class = "caret" > </span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hoạt động
      <span class = "caret" > </span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "apposystemPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      Hoạt động
      <span class = "caret" > </span> 
    </button>
    <ul class = "dropdown-menu" > 
      ...
    </ul>
  </div>
</div>

Các nhóm thả xuống được phân đoạn

<biểu mẫu>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    <input type = "text" > 
  </div>
  <div class = "input-append" > 
    <input type = "text" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

Form tìm kiếm

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > Tìm kiếm </button>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > Tìm kiếm </button>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

Kiểm soát kích thước

Sử dụng các lớp định cỡ tương đối như .input-largehoặc khớp các đầu vào của bạn với kích thước cột lưới bằng cách sử dụng .span*các lớp.

Đầu vào mức khối

Làm cho bất kỳ <input>hoặc <textarea>phần tử nào hoạt động giống như một phần tử cấp khối.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

Định cỡ tương đối

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

Đứng lên!Trong các phiên bản tương lai, chúng tôi sẽ thay đổi việc sử dụng các lớp đầu vào tương đối này để phù hợp với kích thước nút của chúng tôi. Ví dụ: .input-largesẽ tăng khoảng đệm và kích thước phông chữ của đầu vào.

Định cỡ lưới

Sử dụng .span1cho .span12các đầu vào phù hợp với cùng kích thước của các cột lưới.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<select class = "span1" > 
  ...
</select>
<select class = "span2" > 
  ...
</select>
<select class = "span3" > 
  ...
</select>

Đối với nhiều đầu vào lưới trên mỗi dòng, hãy sử dụng .controls-rowlớp bổ trợ để có khoảng cách thích hợp . Nó làm nổi các đầu vào để thu gọn khoảng trắng, đặt lề thích hợp và xóa phao.

<div class = "control" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "control control-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

Đầu vào không thể chỉnh sửa

Trình bày dữ liệu trong một biểu mẫu không thể chỉnh sửa nếu không sử dụng đánh dấu biểu mẫu thực tế.

<span class = "input-xlarge uneditable-input" > Một số giá trị ở đây </span>

Hành động biểu mẫu

Kết thúc biểu mẫu bằng một nhóm hành động (nút). Khi được đặt trong a .form-actions, các nút sẽ tự động thụt lề để phù hợp với các điều khiển biểu mẫu.

<div class = "form-action" > 
  <button type = "submit" class = "btn btn-primary" > Lưu thay đổi </button>  
  <button type = "button" class = "btn" > Hủy </button>  
</div>

Văn bản trợ giúp

Hỗ trợ cấp nội tuyến và cấp khối cho văn bản trợ giúp xuất hiện xung quanh các điều khiển biểu mẫu.

Nội tuyến trợ giúp

<input type = "text" > <span class = "help-inline" > Văn bản trợ giúp nội tuyến </span>

Chặn trợ giúp

<input type = "text" > <span class = "help-block" > Một khối văn bản trợ giúp dài hơn ngắt thành một dòng mới và có thể kéo dài ra ngoài một dòng. </span>

Trạng thái kiểm soát biểu mẫu

Cung cấp phản hồi cho người dùng hoặc khách truy cập với các trạng thái phản hồi cơ bản về điều khiển biểu mẫu và nhãn.

Tiêu điểm đầu vào

Chúng tôi loại bỏ các kiểu mặc định outlinetrên một số điều khiển biểu mẫu và áp dụng một box-shadowkiểu thay thế cho :focus.

<input class = "input-xlarge" id = "focusInput" type = "text" value = "Đây là tiêu điểm ..." >

Đầu vào không hợp lệ

Nhập kiểu thông qua chức năng trình duyệt mặc định với :invalid. Chỉ định a type, thêm requiredthuộc tính nếu trường không phải là tùy chọn và (nếu có) chỉ định a pattern.

Tính năng này không khả dụng trong các phiên bản của Internet Explorer 7-9 do thiếu hỗ trợ cho bộ chọn giả CSS.

<input class = "span3" type = "email" bắt buộc >

Đầu vào bị vô hiệu hóa

Thêm disabledthuộc tính vào đầu vào để ngăn người dùng nhập và kích hoạt giao diện hơi khác.

<input class = "input-xlarge" id = "disableInput" type = "text" placeholder = "Đã tắt tính năng nhập ở đây ..." đã vô hiệu hóa >

Trạng thái xác thực

Bootstrap bao gồm các kiểu xác thực cho các thông báo lỗi, cảnh báo, thông tin và thành công. Để sử dụng, hãy thêm lớp thích hợp vào xung quanh .control-group.

<div class = "control-group warning" > 
  <label class = "control-label" for = "inputWarning" > Nhập có cảnh báo </label>  
  <div class = "control" > 
    <input type = "text" id = "inputWarning" >  
    <span class = "help-inline" > Có thể đã xảy ra lỗi </span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" for = "inputError" > Đầu vào bị lỗi </label>  
  <div class = "control" > 
    <input type = "text" id = "inputError" >  
    <span class = "help-inline" > Vui lòng sửa lỗi </span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" for = "inputInfo" > Nhập thông tin </label>  
  <div class = "control" > 
    <input type = "text" id = "inputInfo" >  
    <span class = "help-inline" > Tên người dùng đã được sử dụng </span> 
  </div>
</div>
 
<div class = "control-group thành công" > 
  <label class = "control-label" for = "inputSuccess" > Nhập thành công </label>  
  <div class = "control" > 
    <input type = "text" id = "inputSuccess" >  
    <span class = "help-inline" > Tuyệt vời! </span> 
  </div>
</div>

Các nút mặc định

Các kiểu nút có thể được áp dụng cho bất kỳ thứ gì có .btnlớp được áp dụng. Tuy nhiên, thông thường bạn sẽ muốn áp dụng những điều này cho chỉ <a>và <button>các phần tử để hiển thị tốt nhất.

Cái nút	class = ""	Sự mô tả
	`btn`	Nút màu xám tiêu chuẩn với độ dốc
	`btn btn-primary`	Cung cấp thêm trọng lượng trực quan và xác định hành động chính trong một tập hợp các nút
	`btn btn-info`	Được sử dụng như một sự thay thế cho các kiểu mặc định
	`btn btn-success`	Cho biết một hành động thành công hoặc tích cực
	`btn btn-warning`	Cho biết cần thận trọng với hành động này
	`btn btn-danger`	Cho biết một hành động nguy hiểm hoặc có khả năng tiêu cực
	`btn btn-inverse`	Nút màu xám đậm thay thế, không gắn với một hành động hoặc sử dụng ngữ nghĩa
	`btn btn-link`	Nhấn mạnh nút bằng cách làm cho nó giống như một liên kết trong khi vẫn duy trì hoạt động của nút

Khả năng tương thích trên nhiều trình duyệt

IE9 không cắt chuyển màu nền trên các góc tròn, vì vậy chúng tôi loại bỏ nó. Có liên quan, IE9 sắp xếp các phần tử bị vô hiệu hóa button, kết xuất văn bản màu xám với bóng văn bản khó chịu mà chúng tôi không thể sửa chữa.

Kích thước nút

Các nút lớn hơn hoặc nhỏ hơn lạ mắt? Thêm .btn-large, .btn-smallhoặc .btn-minicho các kích thước bổ sung.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > Nút lớn </button>  
  <button class = "btn btn-large" type = "button" > Nút lớn </button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > Nút mặc định </button>  
  <button class = "btn" type = "button" > Nút mặc định </button>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > Nút nhỏ </button>  
  <button class = "btn btn-small" type = "button" > Nút nhỏ </button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>  
  <button class = "btn btn-mini" type = "button" > Nút nhỏ </button>  
</p>

Tạo các nút cấp khối — những nút kéo dài toàn bộ chiều rộng của một nút chính — bằng cách thêm .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > Nút cấp độ khối </button>  
<button class = "btn btn-large btn-block" type = "button" > Nút cấp độ khối </button>

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

Làm cho các nút trông không thể nhấp được bằng cách làm mờ chúng trở lại 50%.

Phần tử neo

Thêm .disabledlớp vào các <a>nút.

Liên kết chính Liên kết

<a href = "#" class = "btn btn-large btn-primary bị vô hiệu hóa "> Liên kết chính </a>  
<a href = "#" class = "btn btn-large bị vô hiệu hóa "> Liên kết </a>

Đứng lên!Chúng tôi sử dụng .disablednhư một lớp tiện ích ở đây, tương tự như .activelớp chung, vì vậy không cần tiền tố. Ngoài ra, lớp này chỉ dành cho thẩm mỹ; bạn phải sử dụng JavaScript tùy chỉnh để vô hiệu hóa các liên kết ở đây.

Phần tử nút

Thêm disabledthuộc tính vào các <button>nút.

<button type = "button" class = "btn btn-large btn-primary disable" disable = "disable" > Nút chính </button>   
Đã tắt <button type = "button" class = "btn btn-large" > Nút </button>

Một lớp, nhiều thẻ

Sử dụng .btnlớp trên một <a>, <button>hoặc <input>phần tử.

<a class = "btn" href = ""> Liên kết </a>  
<button class = "btn" type = "submit" > Nút </button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "Gửi" >

Cách tốt nhất, hãy cố gắng đối sánh phần tử với ngữ cảnh của bạn để đảm bảo hiển thị trên nhiều trình duyệt phù hợp. Nếu bạn có input, hãy sử dụng một <input type="submit">cho nút của bạn.

Thêm các lớp vào một <img>phần tử để dễ dàng tạo kiểu cho hình ảnh trong bất kỳ dự án nào.

<img src = "..." class = "img-round" >  
<img src = "..." class = "img-circle" >  
<img src = "..." class = "img-polaroid" >

Đứng lên! .img-roundedvà .img-circlekhông hoạt động trong IE7-8 do thiếu border-radiushỗ trợ.

Biểu tượng glyphs

140 biểu tượng ở dạng sprite, có màu xám đậm (mặc định) và màu trắng, do Glyphicons cung cấp .

kính biểu tượng
biểu tượng-âm nhạc
biểu tượng-tìm kiếm
biểu tượng-phong bì
biểu tượng trái tim
biểu tượng-ngôi sao
icon-star-rỗng
biểu tượng-người dùng
phim biểu tượng
biểu tượng-th-lớn
icon-th
icon-th-list
biểu tượng-ok
biểu tượng-loại bỏ
biểu tượng-phóng to
biểu tượng thu nhỏ
tắt biểu tượng
biểu tượng-tín hiệu
biểu tượng-bánh răng
biểu tượng-thùng rác
biểu tượng-nhà
biểu tượng-tập tin
biểu tượng thời gian
đường biểu tượng
icon-download-alt
icon-download
biểu tượng-tải lên
biểu tượng-hộp thư đến
icon-play-circle
biểu tượng-lặp lại
icon-refresh
icon-list-alt
khóa biểu tượng
biểu tượng-cờ
icon-tai nghe
icon-volume-off
biểu tượng-giảm âm lượng
biểu tượng-tăng âm lượng
icon-qrcode
biểu tượng-mã vạch
biểu tượng-thẻ
biểu tượng-thẻ
sách biểu tượng
biểu tượng-dấu trang
biểu tượng-in
icon-camera
biểu tượng-phông chữ
biểu tượng in đậm
biểu tượng-nghiêng
icon-text-height
icon-text-width
icon-align-left
icon-align-center
icon-align-right
icon-align-justify
biểu tượng-danh sách
icon-thụt lề trái
icon-thụt lề-phải
icon-facetime-video
biểu tượng-hình ảnh
biểu tượng bút chì
icon-map-marker
điều chỉnh biểu tượng
icon-tint
biểu tượng-chỉnh sửa
biểu tượng-chia sẻ
kiểm tra biểu tượng
biểu tượng-di chuyển
icon-step-back
biểu tượng-nhanh-lùi
biểu tượng lùi
biểu tượng-chơi
biểu tượng-tạm dừng
icon-stop
chuyển tiếp biểu tượng
biểu tượng-tua đi nhanh
icon-step-forward
biểu tượng-đẩy ra
icon-chevron-left
icon-chevron-right
biểu tượng dấu cộng
biểu tượng-dấu-trừ
biểu tượng-loại bỏ-dấu hiệu
biểu tượng-ok-ký
biểu tượng-câu hỏi-dấu hiệu
biểu tượng-thông tin-ký hiệu
icon-ảnh chụp màn hình
biểu tượng-loại bỏ-vòng kết nối
icon-ok-circle
icon-ban-circle
icon-arrow-left
biểu tượng-mũi tên-phải
biểu tượng-mũi tên-lên
biểu tượng-mũi tên-xuống
icon-share-alt
icon-resize-full
icon-resize-small
biểu tượng-cộng
biểu tượng-trừ
biểu tượng-dấu hoa thị
biểu tượng-dấu chấm than
biểu tượng-quà tặng
lá biểu tượng
biểu tượng lửa
biểu tượng mở mắt
icon-eye-close
biểu tượng-cảnh báo-dấu hiệu
mặt phẳng biểu tượng
biểu tượng-lịch
biểu tượng-ngẫu nhiên
biểu tượng-bình luận
biểu tượng-nam châm
icon-chevron-up
icon-chevron-down
icon-retweet
icon-shopping-cart
biểu tượng-thư mục-đóng
biểu tượng-thư mục-mở
icon-resize-vertical
icon-resize-ngang
icon-hdd
icon-bullhorn
icon-bell
biểu tượng-chứng chỉ
biểu tượng thích
biểu tượng không thích
biểu tượng-tay-phải
icon-hand-left
biểu tượng-giơ tay
icon-hand-down
icon-circle-arrow-right
icon-circle-arrow-left
icon-circle-arrow-up
icon-circle-arrow-down
icon-quả địa cầu
biểu tượng-cờ lê
biểu tượng-nhiệm vụ
biểu tượng-bộ lọc
icon-cặp
biểu tượng toàn màn hình

Phân bổ glyphicons

Glyphicons Halflings thường không được cung cấp miễn phí, nhưng một sự sắp xếp giữa Bootstrap và những người tạo ra Glyphicons đã khiến điều này trở nên khả thi với tư cách là nhà phát triển. Để cảm ơn bạn, chúng tôi yêu cầu bạn bao gồm một liên kết tùy chọn quay lại Glyphicons bất cứ khi nào thực tế.

Cách sử dụng

Tất cả các biểu tượng yêu cầu một <i>thẻ có một lớp duy nhất, có tiền tố là icon-. Để sử dụng, hãy đặt mã sau ở bất kỳ đâu:

<i class = "icon-search" > </i>

Ngoài ra còn có các kiểu dành cho các biểu tượng đảo ngược (màu trắng), được tạo sẵn với một lớp bổ sung. Chúng tôi sẽ thực thi cụ thể lớp này trên các trạng thái di chuột và hoạt động cho các liên kết điều hướng và thả xuống.

<i class = "icon-search icon-white" > </i>

Đứng lên!Khi sử dụng bên cạnh các chuỗi văn bản, như trong các nút hoặc liên kết điều hướng, hãy đảm bảo để lại khoảng trắng sau <i>thẻ để có khoảng cách thích hợp.

Ví dụ về biểu tượng

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.

nút

Nhóm nút trong thanh công cụ nút

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#"> <i class = "icon-align-left" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-center" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-right" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-justify" > </i> </a>   
  </div>
</div>

Thả xuống trong một nhóm nút

Người sử dụng

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> Người dùng </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>    
  <ul class = "dropdown-menu" > 
    <li> <a href = "#"> <i class = "icon-pencil" > </i> Chỉnh sửa </a> </li>  
    <li> <a href = "#"> <i class = "icon-rác" > </i> Xóa </a> </li>  
    <li> <a href = "#"> <i class = "icon-ban-circle" > </i> Cấm </a> </li>  
    <li class = "divider" > </li> 
    <li> <a href = "#"> <i class = "i" > </i> Đặt làm quản trị viên </a> </li>  
  </ul>
</div>

Kích thước nút

Ngôi sao Ngôi sao Ngôi sao

<a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> Sao </a>   
<a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> Dấu sao </a>   
<a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> Sao </a>

dẫn đường

<ul class = "nav nav-list" > 
  <li class = "active" > <a href = "#"> <i class = "icon-home icon-white" > </i> Trang chủ </a> </li>   
  <li> <a href = "#"> <i class = "icon-book" > </i> Thư viện </a> </li>  
  <li> <a href = "#"> <i class = "icon-pencil" > </i> Ứng dụng </a> </li>  
  <li> <a href = "#"> <i class = "i" > </i> Khác </a> </li>  
</ul>

Các trường biểu mẫu

<div class = "control-group" > 
  <label class = "control-label" for = "inputIcon" > Địa chỉ email </label>  
  <div class = "control" > 
    <div class = "input-prepend" > 
      <span class = "add-on" > <i class = "icon-phong bì" > </i> </span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

Kiểu chữ

Đề mục

h1. Tiêu đề 1

h2. Tiêu đề 2

h3. Tiêu đề 3

h4. Tiêu đề 4

h5. Tiêu đề 5

h6. Tiêu đề 6

Bản sao nội dung

Bản sao nội dung chính

Được xây dựng với ít hơn

Nhấn mạnh

<small>

In đậm

Chữ in nghiêng

Các lớp căn chỉnh

Các lớp học nhấn mạnh

Các từ viết tắt

<abbr>

<abbr class="initialism">

Địa chỉ

<address>

Dấu ngoặc kép

Blockquote mặc định

Tùy chọn trích dẫn khối

Đặt tên nguồn

Màn hình thay thế

Danh sách

Không theo thứ tự

Đã đặt hàng

Chưa được xếp lớp

Nội tuyến

Sự mô tả

Mô tả ngang

Mã số

Nội tuyến

Khối cơ bản

Những cái bàn

Kiểu mặc định

Các lớp học tùy chọn

.table-striped

.table-bordered

.table-hover

.table-condensed

Các lớp hàng tùy chọn

Đánh dấu bảng được hỗ trợ

Các hình thức

Kiểu mặc định

Bố cục tùy chọn

Form tìm kiếm

Mẫu nội tuyến

Dạng ngang

Các điều khiển biểu mẫu được hỗ trợ

Đầu vào

Textarea

Hộp kiểm và đài

Mặc định (xếp chồng lên nhau)

Hộp kiểm nội tuyến

Lựa chọn

Mở rộng các điều khiển biểu mẫu

Các đầu vào bổ sung và bổ sung

Tùy chọn mặc định

Kết hợp

Các nút thay vì văn bản

Nút thả xuống

Các nhóm thả xuống được phân đoạn

Form tìm kiếm

Kiểm soát kích thước

Đầu vào mức khối

Định cỡ tương đối

Định cỡ lưới

Đầu vào không thể chỉnh sửa

Hành động biểu mẫu

Văn bản trợ giúp

Nội tuyến trợ giúp

Chặn trợ giúp

Trạng thái kiểm soát biểu mẫu

Tiêu điểm đầu vào

Đầu vào không hợp lệ

Đầu vào bị vô hiệu hóa

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`