CSS cơ sở

Các phần tử HTML cơ bản được tạo kiểu và nâng cao với các lớp có thể mở rộng.

Đề 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-size14px , 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 : @baseFontSize@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><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.

  1. <p class = "text-left" > Văn bản căn trái. </p>
  2. <p class = "text-center" > Văn bản được căn giữa. </p>
  3. <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.

  1. <p class = "muted" > Fusce dapibus, Tellus ac cursus rowo, rùa mauris nibh. </p>
  2. <p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p>
  3. <p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p>
  4. <p class = "text-info" > Aenean eu leo ​​quam. Bìm bìm biếc. </p>
  5. <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]
  1. <địa chỉ>
  2. <strong> Twitter, Inc. </strong> <br>
  3. 795 Folsom Ave, Suite 600 <br>
  4. San Francisco, CA 94107 <br>
  5. <abbr title = "Phone" > P: </abbr> (123) 456-7890
  6. </address>
  7.  
  8. <địa chỉ>
  9. <strong> Tên đầy đủ </strong> <br>
  10. <a href = "mailto:#"> [email protected] </a> _
  11. </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.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. </p>
  3. </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
  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante. </p>
  3. <small> Ai đó nổi tiếng <cite title = "Tiêu đề nguồn" > Tiêu đề nguồn </cite> </small>
  4. </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
  1. <blockquote class = "pull-right" >
  2. ...
  3. </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
  1. <ul>
  2. <li> ... </li>
  3. </ul>

Đã đặt hàng

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

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer moltie lorem tại massa
  4. Facilisis trong pretium nisl aliquet
  5. Nulla volutpat aliquam velit
  6. Faucibus porta lacus fringilla vel
  7. Aenean ngồi amet erat nunc
  8. Bỏ qua lorem porttitor
  1. <ol>
  2. <li> ... </li>
  3. </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
  1. <ul class = "unstyled" >
  2. <li> ... </li>
  3. </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
  1. <ul class = "inline" >
  2. <li> ... </li>
  3. </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.
  1. <dl>
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. <dl class = "dl-ngang" >
  2. <dt> ... </dt>
  3. <dd> ... </dd>
  4. </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.
  1. 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>
  1. <pre>
  2. & lt; p & gt; Văn bản mẫu tại đây ... & lt; / p & gt;
  3. </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
  1. <table class = "table" >
  2. </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
  1. <table class = "table table-sọc" >
  2. </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
Đánh dấu Otto @getbootstrap
2 Jacob Thornton @mập mạp
3 Larry the Bird @twitter
  1. <table class = "table table-bordered" >
  2. </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
  1. <table class = "table table-hover" >
  2. </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
  1. <table class = "table table-Concentrate" >
  2. </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
  1. ...
  2. < tr class = "thành công" >
  3. <td> 1 < / td>
  4. <td> TB - Hàng tháng </ td >
  5. < td > 01/04/2012 < / td >
  6. <td> Được chấp thuận </ td >
  7. </ tr >
  8. ...

Đá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
  1. <bàn>
  2. <caption> ... </caption>
  3. <thead>
  4. <tr>
  5. <th> ... </th>
  6. <th> ... </th>
  7. </tr>
  8. </thead>
  9. <người>
  10. <tr>
  11. <td> ... </td>
  12. <td> ... </td>
  13. </tr>
  14. </tbody>
  15. </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.

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

  1. <form class = "form-search" >
  2. <input type = "text" class = "input-medium search-query" >
  3. <button type = "submit" class = "btn" > Tìm kiếm </button>
  4. </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.

  1. <form class = "form-inline" >
  2. <input type = "text" class = "input-small" placeholder = "Email" >
  3. <input type = "password" class = "input-small" placeholder = "Mật khẩu" >
  4. <label class = "checkbox" >
  5. <input type = "checkbox" > Hãy nhớ tôi
  6. </label>
  7. <button type = "submit" class = "btn" > Đăng nhập </button>
  8. </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
  1. <form class = "form-ngang" >
  2. <div class = "control-group" >
  3. <label class = "control-label" for = "inputEmail" > Email </label>
  4. <div class = "control" >
  5. <input type = "text" id = "inputEmail" placeholder = "Email" >
  6. </div>
  7. </div>
  8. <div class = "control-group" >
  9. <label class = "control-label" for = "inputPassword" > Mật khẩu </label>
  10. <div class = "control" >
  11. <input type = "password" id = "inputPassword" placeholder = "Password" >
  12. </div>
  13. </div>
  14. <div class = "control-group" >
  15. <div class = "control" >
  16. <label class = "checkbox" >
  17. <input type = "checkbox" > Hãy nhớ tôi
  18. </label>
  19. <button type = "submit" class = "btn" > Đăng nhập </button>
  20. </div>
  21. </div>
  22. </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.

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

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


  1. <label class = "checkbox" >
  2. <input type = "checkbox" value = "" >
  3. 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
  4. </label>
  5.  
  6. <label class = "radio" >
  7. <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" đã kiểm tra >
  8. 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
  9. </label>
  10. <label class = "radio" >
  11. <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >
  12. 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
  13. </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.

  1. <label class = "checkbox inline" >
  2. <input type = "checkbox" id = "inlineCheckbox1" value = "option1" > 1
  3. </label>
  4. <label class = "checkbox inline" >
  5. <input type = "checkbox" id = "inlineCheckbox2" value = "option2" > 2
  6. </label>
  7. <label class = "checkbox inline" >
  8. <input type = "checkbox" id = "inlineCheckbox3" value = "option3" > 3
  9. </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.


  1. <select>
  2. <option> 1 </option>
  3. <option> 2 </option>
  4. <option> 3 </option>
  5. <option> 4 </option>
  6. <option> 5 </option>
  7. </select>
  8.  
  9. <select multiple = "nhiều" >
  10. <option> 1 </option>
  11. <option> 2 </option>
  12. <option> 3 </option>
  13. <option> 4 </option>
  14. <option> 5 </option>
  15. </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.

@

.00
  1. <div class = "input-prepend" >
  2. <span class = "add-on" > @ </span>
  3. <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >
  4. </div>
  5. <div class = "input-append" >
  6. <input class = "span2" id = "apposystemInput " type = "text" >
  7. <span class = "add-on" > .00 </span>
  8. </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.

$ .00
  1. <div class = "input-prepend input-append" >
  2. <span class = "add-on" > $ </span>
  3. <input class = "span2" id = "apposystemPrependedInput " type = "text" >
  4. <span class = "add-on" > .00 </span>
  5. </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.

  1. <div class = "input-append" >
  2. <input class = "span2" id = "apposystemInputButton " type = "text" >
  3. <button class = "btn" type = "button" > Bắt đầu! </button>
  4. </div>
  1. <div class = "input-append" >
  2. <input class = "span2" id = "apposystemInputButtons " type = "text" >
  3. <button class = "btn" type = "button" > Tìm kiếm </button>
  4. <button class = "btn" type = "button" > Tùy chọn </button>
  5. </div>

Nút thả xuống

  1. <div class = "input-append" >
  2. <input class = "span2" id = "apposystemDropdownButton " type = "text" >
  3. <div class = "btn-group" >
  4. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  5. Hoạt động
  6. <span class = "caret" > </span>
  7. </button>
  8. <ul class = "dropdown-menu" >
  9. ...
  10. </ul>
  11. </div>
  12. </div>
  1. <div class = "input-prepend" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Hoạt động
  5. <span class = "caret" > </span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "prependedDropdownButton" type = "text" >
  12. </div>
  1. <div class = "input-prepend input-append" >
  2. <div class = "btn-group" >
  3. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  4. Hoạt động
  5. <span class = "caret" > </span>
  6. </button>
  7. <ul class = "dropdown-menu" >
  8. ...
  9. </ul>
  10. </div>
  11. <input class = "span2" id = "apposystemPrependedDropdownButton " type = "text" >
  12. <div class = "btn-group" >
  13. <button class = "btn dropdown-toggle" data-toggle = "dropdown" >
  14. Hoạt động
  15. <span class = "caret" > </span>
  16. </button>
  17. <ul class = "dropdown-menu" >
  18. ...
  19. </ul>
  20. </div>
  21. </div>

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

  1. <biểu mẫu>
  2. <div class = "input-prepend" >
  3. <div class = "btn-group" > ... </div>
  4. <input type = "text" >
  5. </div>
  6. <div class = "input-append" >
  7. <đầu vào type = "text" >
  8. <div class = "btn-group" > ... </div>
  9. </div>
  10. </form>

Form tìm kiếm

  1. <form class = "form-search" >
  2. <div class = "input-append" >
  3. <input type = "text" class = "span2 search-query" >
  4. <button type = "submit" class = "btn" > Tìm kiếm </button>
  5. </div>
  6. <div class = "input-prepend" >
  7. <button type = "submit" class = "btn" > Tìm kiếm </button>
  8. <input type = "text" class = "span2 search-query" >
  9. </div>
  10. </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.

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

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

  1. <input class = "input-mini" type = "text" placeholder = ".input-mini" >
  2. <input class = "input-small" type = "text" placeholder = ".input-small" >
  3. <input class = "input-medium" type = "text" placeholder = ".input-medium" >
  4. <input class = "input-large" type = "text" placeholder = ".input-large" >
  5. <input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >
  6. <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-large sẽ 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.

  1. <input class = "span1" type = "text" placeholder = ".span1" >
  2. <input class = "span2" type = "text" placeholder = ".span2" >
  3. <input class = "span3" type = "text" placeholder = ".span3" >
  4. <select class = "span1" >
  5. ...
  6. </select>
  7. <select class = "span2" >
  8. ...
  9. </select>
  10. <select class = "span3" >
  11. ...
  12. </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.

  1. <div class = "control" >
  2. <input class = "span5" type = "text" placeholder = ".span5" >
  3. </div>
  4. <div class = "control control-row" >
  5. <input class = "span4" type = "text" placeholder = ".span4" >
  6. <input class = "span1" type = "text" placeholder = ".span1" >
  7. </div>
  8. ...

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

Một số giá trị ở đây
  1. <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.

  1. <div class = "form-action" >
  2. <button type = "submit" class = "btn btn-primary" > Lưu thay đổi </button>
  3. <button type = "button" class = "btn" > Hủy </button>
  4. </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

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

Chặn trợ giúp

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

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

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

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

Có thể đã xảy ra lỗi
Vui lòng sửa lỗi
Tên người dùng đã được sử dụng
Tuyệt vời!
  1. <div class = "control-group warning" >
  2. <label class = "control-label" for = "inputWarning" > Nhập có cảnh báo </label>
  3. <div class = "control" >
  4. <input type = "text" id = "inputWarning" >
  5. <span class = "help-inline" > Có thể đã xảy ra lỗi </span>
  6. </div>
  7. </div>
  8.  
  9. <div class = "control-group error" >
  10. <label class = "control-label" for = "inputError" > Đầu vào bị lỗi </label>
  11. <div class = "control" >
  12. <input type = "text" id = "inputError" >
  13. <span class = "help-inline" > Vui lòng sửa lỗi </span>
  14. </div>
  15. </div>
  16.  
  17. <div class = "control-group info" >
  18. <label class = "control-label" for = "inputInfo" > Nhập thông tin </label>
  19. <div class = "control" >
  20. <input type = "text" id = "inputInfo" >
  21. <span class = "help-inline" > Tên người dùng đã được sử dụng </span>
  22. </div>
  23. </div>
  24.  
  25. <div class = "control-group thành công" >
  26. <label class = "control-label" for = "inputSuccess" > Nhập thành công </label>
  27. <div class = "control" >
  28. <input type = "text" id = "inputSuccess" >
  29. <span class = "help-inline" > Tuyệt vời! </span>
  30. </div>
  31. </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><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.

  1. <p>
  2. <button class = "btn btn-large btn-primary" type = "button" > Nút lớn </button>
  3. <button class = "btn btn-large" type = "button" > Nút lớn </button>
  4. </p>
  5. <p>
  6. <button class = "btn btn-primary" type = "button" > Nút mặc định </button>
  7. <button class = "btn" type = "button" > Nút mặc định </button>
  8. </p>
  9. <p>
  10. <button class = "btn btn-small btn-primary" type = "button" > Nút nhỏ </button>
  11. <button class = "btn btn-small" type = "button" > Nút nhỏ </button>
  12. </p>
  13. <p>
  14. <button class = "btn btn-mini btn-primary" type = "button" > Mini button </button>
  15. <button class = "btn btn-mini" type = "button" > Nút nhỏ </button>
  16. </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.

  1. <button class = "btn btn-large btn-block btn-primary" type = "button" > Nút cấp độ khối </button>
  2. <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

  1. <a href = "#" class = "btn btn-large btn-primary bị vô hiệu hóa "> Liên kết chính </a>
  2. <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.

  1. <button type = "button" class = "btn btn-large btn-primary disable" disable = "disable" > Nút chính </button>
  2. Đã 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ử.

Liên kết
  1. <a class = "btn" href = ""> Liên kết </a>
  2. <button class = "btn" type = "submit" > Nút </button>
  3. <input class = "btn" type = "button" value = "Input" >
  4. <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.

140x140 140x140 140x140
  1. <img src = "..." class = "img-round" >
  2. <img src = "..." class = "img-circle" >
  3. <img src = "..." class = "img-polaroid" >

Đứng lên! .img-rounded.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:

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

  1. <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
  1. <div class = "btn-toolbar" >
  2. <div class = "btn-group" >
  3. <a class = "btn" href = "#"> <i class = "icon-align-left" > </i> </a>
  4. <a class = "btn" href = "#"> <i class = "icon-align-center" > </i> </a>
  5. <a class = "btn" href = "#"> <i class = "icon-align-right" > </i> </a>
  6. <a class = "btn" href = "#"> <i class = "icon-align-justify" > </i> </a>
  7. </div>
  8. </div>
Thả xuống trong một nhóm nút
  1. <div class = "btn-group" >
  2. <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> Người dùng </a>
  3. <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>
  4. <ul class = "dropdown-menu" >
  5. <li> <a href = "#"> <i class = "icon-pencil" > </i> Chỉnh sửa </a> </li>
  6. <li> <a href = "#"> <i class = "icon-rác" > </i> Xóa </a> </li>
  7. <li> <a href = "#"> <i class = "icon-ban-circle" > </i> Cấm </a> </li>
  8. <li class = "divider" > </li>
  9. <li> <a href = "#"> <i class = "i" > </i> Đặt làm quản trị viên </a> </li>
  10. </ul>
  11. </div>
Kích thước nút
  1. <a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> Sao </a>
  2. <a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> Dấu sao </a>
  3. <a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> Sao </a>

dẫn đường

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

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

  1. <div class = "control-group" >
  2. <label class = "control-label" for = "inputIcon" > Địa chỉ email </label>
  3. <div class = "control" >
  4. <div class = "input-prepend" >
  5. <span class = "add-on" > <i class = "icon-phong bì" > </i> </span>
  6. <input class = "span2" id = "inputIcon" type = "text" >
  7. </div>
  8. </div>
  9. </div>