CSS cơ sở

Trên đầu trang, 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 để mang lại giao diện mới, nhất quán.

Tiêu đề & nội dung

Tỷ lệ đánh máy

Toàn bộ lưới đánh máy dựa trên hai biến Ít hơn trong tệp variable.less của chúng tôi: @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 để 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.

Văn bản nội dung mẫu

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

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.

h1. Tiêu đề 1

h2. Tiêu đề 2

h3. Tiêu đề 3

h4. Tiêu đề 4

h5. Tiêu đề 5
h6. Tiêu đề 6

Nhấn mạnh, địa chỉ và viết tắt

Yếu tố Cách sử dụng Không bắt buộc
<strong> Để nhấn mạnh một đoạn văn bản với quan trọng Không có
<em> Để nhấn mạnh một đoạn văn bản với trọng âm Không có
<abbr> Kết hợp 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

Bao gồm titlethuộc tính tùy chọn cho văn bản mở rộng

Sử dụng .initialismlớp cho các chữ viết tắt chữ hoa.
<address> Để biết thông tin liên hệ của tổ tiên gần nhất của nó hoặc toàn bộ cơ quan làm việc Duy trì định dạng bằng cách kết thúc tất cả các dòng bằng<br>

Sử dụng sự nhấn mạnh

Fusce dapibus , Tellus ac cursus rowo , rùa bò mauris condimentum nibh , ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero, một loài pharetra augue.

Lưu ý: Hãy thoải mái sử dụng <b><i>trong HTML5, nhưng cách sử dụng của chúng đã thay đổi một chút. <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.

Địa chỉ ví dụ

Dưới đây là hai ví dụ về cách <address>thẻ có thể được sử dụng:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
Họ và Tên
[email protected]

Các từ viết tắt mẫu

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. Điều này cung cấp cho người dùng dấu hiệu bổ sung một cái gì đó sẽ được hiển thị khi di chuột.

Thêm initialismlớp vào một chữ viết tắt để tăng sự hài hòa cho kiểu chữ bằng cách đặt cho nó một kích thước văn bản nhỏ hơn một chút.

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

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

Những câu chuyện cổ tích

Yếu tố Cách sử dụng Không bắt buộc
<blockquote> Phần tử cấp khối để trích dẫn nội dung từ một nguồn khác

Thêm citethuộc tính cho URL nguồn

Sử dụng .pull-left.pull-rightcác lớp cho các tùy chọn nổi
<small> Yếu tố tùy chọn để thêm trích dẫn hướng tới người dùng, thường là tác giả có tên tác phẩm Đặt <cite>xung quanh tiêu đề hoặc tên nguồn

Để bao gồm một trích dẫn khối, hãy bao <blockquote>quanh bất kỳ HTML nào làm trích dẫn. Đối với báo giá thẳng, chúng tôi khuyên bạn nên a <p>.

Bao gồm một <small>phần tử tùy chọn để trích dẫn nguồn của bạn và bạn sẽ nhận được một dấu gạch ngang &mdash;trước nó cho mục đích tạo kiểu.

  1. <blockquote>
  2. <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante venenatis. </p>
  3. <small> Ai đó nổi tiếng </small>
  4. </blockquote>

Ví dụ về dấu ngoặc kép

Các dấu ngoặc kép mặc định được tạo kiểu như sau:

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

Ai đó nổi tiếng trong Body of work

Để thả nổi khối trích dẫn của bạn sang bên phải, hãy thêm class="pull-right":

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

Ai đó nổi tiếng trong Body of work

Danh sách

Không theo thứ tự

<ul>

  • 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

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

<ul class="unstyled">

  • 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

Đã đặt hàng

<ol>

  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

Sự mô tả

<dl>

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.

Mô tả ngang

<dl class="dl-horizontal">

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.

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

  1. dụ: phần < code> </ code > nên đượ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>

Lưu ý: Đả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.

Chứng minh trước của Google

Lấy cùng một <pre>phần tử và thêm hai lớp tùy chọn để hiển thị nâng cao.

  1. <p> Văn bản mẫu tại đây ... </p>
  1. <pre class = "prettyprint
  2. linenums " >
  3. & lt; p & gt; Văn bản mẫu tại đây ... & lt; / p & gt;
  4. </pre>

Tải xuống google-code-Prettify và xem readme để biết cách sử dụng.

Đánh dấu bả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 các nhãn cột (hoặc hàng, tùy thuộc vào phạm vi và vị trí)
Phải được sử dụng trong một<thead>
<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. <thead>
  3. <tr>
  4. <th> </th>
  5. <th> </th>
  6. </tr>
  7. </thead>
  8. <người>
  9. <tr>
  10. <td> </td>
  11. <td> </td>
  12. </tr>
  13. </tbody>
  14. </table>

Tùy chọn bảng

Tên Lớp Sự mô tả
Mặc định Không có Không có kiểu, chỉ có cột và hàng
Nền tảng .table Chỉ các đường ngang giữa các hàng
Có đường viền .table-bordered Làm tròn các góc và thêm đường viền bên ngoài
Vằn vằn .table-striped Thêm màu nền xám nhạt vào các hàng lẻ (1, 3, 5, v.v.)
Cô đặc .table-condensed Cắt đôi phần đệm dọc, từ 8px xuống 4px, trong tất cả tdthcác phần tử

Bảng ví dụ

1. Kiểu bảng mặc định

Các bảng được tạo kiểu tự động chỉ với một vài đường viền để đảm bảo tính dễ đọc và duy trì cấu trúc. Với 2.0, .tablelớp là bắt buộc.

  1. <table class = "table" >
  2. </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

2. Bàn sọc

Tạo một chút lạ mắt với bảng của bạn bằng cách thêm sọc ngựa vằn — chỉ cần thêm .table-stripedlớp.

Lưu ý: Các bảng có sọc sử dụng :nth-childbộ chọn CSS và không có sẵn trong IE7-IE8.

  1. <table class = "table table-sọc" >
  2. </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

3. Bàn có viền

Thêm đường viền xung quanh toàn bộ bảng và các góc bo tròn cho mục đích thẩm mỹ.

  1. <table class = "table table-bordered" >
  2. </table>
# 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

4. Bảng ngưng tụ

Làm cho bảng của bạn nhỏ gọn hơn bằng cách thêm .table-condensedlớp để cắt phần đệm ô trong bảng làm đôi (từ 8px xuống 4px).

  1. <table class = "table table-Concentrate" >
  2. </table>
# 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

5. Kết hợp tất cả chúng!

Hãy thoải mái kết hợp bất kỳ lớp bảng nào để đạt được những diện mạo khác nhau bằng cách sử dụng bất kỳ lớp nào có sẵn.

  1. <table class = "table table-sọc table-viền bảng-ngưng tụ" >
  2. ...
  3. </table>
Họ và tên
# 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

HTML và CSS linh hoạt

Phần tốt nhất về biểu mẫu trong Bootstrap là tất cả các đầu vào và điều khiển của bạn trông tuyệt vời cho dù bạn xây dựng chúng như thế nào trong đánh dấu của mình. Không cần HTML thừa, nhưng chúng tôi cung cấp các mẫu cho những người yêu cầu.

Các bố cục phức tạp hơn đi kèm với các lớp ngắn gọn và có thể mở rộng để tạo kiểu dễ dàng và liên kết sự kiện, vì vậy bạn sẽ được thực hiện ở mọi bước.

Bốn bố cục bao gồm

Bootstrap hỗ trợ bốn loại bố cục biểu mẫu:

  • Dọc (mặc định)
  • Tìm kiếm
  • Nội tuyến
  • Nằm ngang

Các loại bố cục biểu mẫu khác nhau yêu cầu một số thay đổi đối với đánh dấu, nhưng bản thân các điều khiển vẫn giữ nguyên và hoạt động giống nhau.

Kiểm soát trạng thái và hơn thế nữa

Các biểu mẫu của Bootstrap bao gồm các kiểu dáng cho tất cả các điều khiển biểu mẫu cơ sở như đầu vào, vùng văn bản và lựa chọn mà bạn mong đợi. Nhưng nó cũng đi kèm với một số thành phần tùy chỉnh như đầu vào thêm vào và thêm vào trước và hỗ trợ danh sách các hộp kiểm.

Các trạng thái như lỗi, cảnh báo và thành công được bao gồm cho mỗi loại điều khiển biểu mẫu. Cũng bao gồm các kiểu cho các điều khiển bị vô hiệu hóa.

Bốn loại hình thức

Bootstrap cung cấp cách đánh dấu và kiểu đơn giản cho bốn kiểu của các biểu mẫu web phổ biến.

Tên Lớp Sự mô tả
Dọc (mặc định) .form-vertical (không yêu cầu) Các nhãn được xếp chồng, căn trái trên các điều khiển
Nội tuyến .form-inline Nhãn căn trái và các điều khiển khối nội tuyến cho kiểu dáng nhỏ gọn
Tìm kiếm .form-search Kiểu nhập văn bản cực kỳ tròn trịa cho kiểu tìm kiếm thông thường
Nằm ngang .form-horizontal Làm nổi các nhãn căn trái, căn phải trên cùng một dòng với điều khiển

Các biểu mẫu mẫu chỉ sử dụng các điều khiển biểu mẫu, không có đánh dấu bổ sung

Hình thức cơ bản

Các mặc định thông minh và nhẹ mà không cần đánh dấu thêm.

Văn bản trợ giúp cấp khối mẫu tại đây.

  1. <form class = "well" >
  2. <label> Tên nhãn </label>
  3. <input type = "text" class = "span3" placeholder = "Nhập nội dung nào đó…" >
  4. <span class = "help-block" > Ví dụ về văn bản trợ giúp cấp khối tại đây. </span>
  5. <label class = "checkbox" >
  6. <input type = "checkbox" > Kiểm tra tôi
  7. </label>
  8. <button type = "submit" class = "btn" > Gửi </button>
  9. </form>

Form tìm kiếm

Thêm .form-searchvào biểu mẫu và .search-queryvào input.

  1. <form class = "well 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-inlinevào sự khéo léo khi căn chỉnh theo chiều dọc và khoảng cách của các điều khiển biểu mẫu.

  1. <form class = "well 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>

Hình thức ngang

Hiển thị ở bên phải là tất cả các điều khiển biểu mẫu mặc định mà chúng tôi hỗ trợ. Đây là danh sách có dấu đầu dòng:

  • đầu vào văn bản (văn bản, mật khẩu, email, v.v.)
  • hộp kiểm
  • Đài
  • lựa chọn
  • nhiều lựa chọn
  • đầu vào tệp
  • textarea

Ngoài văn bản dạng tự do, bất kỳ đầu vào dựa trên văn bản HTML5 nào cũng xuất hiện như vậy.

Đánh dấu mẫu

Với bố cục biểu mẫu ví dụ ở trên, đây là đánh dấu được liên kết với nhóm đầu vào và điều khiển đầu tiên. Tất cả các lớp .control-group, .control-label.controlsđều được yêu cầu để tạo kiểu.

  1. <form class = "form-ngang" >
  2. <fieldset>
  3. <legend> Văn bản chú thích </legend>
  4. <div class = "control-group" >
  5. <label class = "control-label" for = "input01" > Nhập văn bản </label>
  6. <div class = "control" >
  7. <input type = "text" class = "input-xlarge" id = "input01" >
  8. <p class = "help-block" > Văn bản trợ giúp hỗ trợ </p>
  9. </div>
  10. </div>
  11. </fieldset>
  12. </form>

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

Bootstrap có các kiểu cho disabledcác trạng thái và tiêu điểm được trình duyệt hỗ trợ. Chúng tôi xóa Webkit mặc định outlinevà áp dụng một Webkit box-shadowthay thế cho :focus.


Xác thực biểu mẫu

Nó cũng bao gồm các kiểu xác nhận lỗi, cảnh báo và thành công. Để sử dụng, hãy thêm lớp lỗi vào xung quanh .control-group.

  1. <tập trường
  2. class = "control-group error" >
  3. </fieldset>
Một số giá trị ở đây
Có thể đã xảy ra lỗi
Vui lòng sửa lỗi
Tuyệt vời!
Tuyệt vời!

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

Thêm và nối các đầu vào

Nhóm đầu vào — với văn bản được nối thêm hoặc thêm vào trước — cung cấp một cách dễ dàng để cung cấp thêm ngữ cảnh cho các đầu vào của bạn. Các ví dụ tuyệt vời bao gồm ký hiệu @ cho tên người dùng Twitter hoặc $ cho tài chính.


Hộp kiểm và đài

Lên đến v1.4, Bootstrap yêu cầu thêm đánh dấu xung quanh hộp kiểm và radio để xếp chúng. Bây giờ, nó là một vấn đề đơn giản lặp lại <label class="checkbox">bao bọc <input type="checkbox">.

Hộp kiểm nội tuyến và radio cũng được hỗ trợ. Chỉ cần thêm .inlinevào bất kỳ .checkboxhoặc .radiovà bạn đã hoàn tất.


Biểu mẫu nội tuyến và thêm / thêm vào trước

Để sử dụng thêm hoặc thêm đầu vào ở dạng nội dòng, hãy đảm bảo đặt .add-oninputtrên cùng một dòng, không có khoảng trắng.


Văn bản trợ giúp biểu mẫu

Để thêm văn bản trợ giúp cho các đầu vào biểu mẫu của bạn, hãy bao gồm văn bản trợ giúp nội dòng với <span class="help-inline">hoặc một khối văn bản trợ giúp <p class="help-block">sau thành phần đầu vào.

Sử dụng các .span*lớp giống nhau từ hệ thống lưới cho các kích thước đầu vào.

Bạn cũng có thể sử dụng các lớp tĩnh không ánh xạ tới lưới, thích ứng với các kiểu CSS đáp ứng hoặc tính đến các loại điều khiển khác nhau (ví dụ: inputso với select).

@

Đây là một số văn bản trợ giúp

.00
Đây là văn bản trợ giúp khác
$ .00

Lưu ý: Các nhãn bao quanh tất cả các tùy chọn cho các khu vực nhấp chuột lớn hơn nhiều và một biểu mẫu dễ sử dụng hơn.

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

Các nút cho hành động

Theo quy ước, các nút chỉ nên được sử dụng cho các hành động trong khi các siêu liên kết được sử dụng cho các đối tượng. Ví dụ: "Tải xuống" phải là một nút trong khi "hoạt động gần đây" phải là một liên kết.

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

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, hiển thị 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.

Nhiều kích cỡ

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 hai kích thước bổ sung.


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

Đối với các nút bị tắt, hãy thêm .disabledlớp vào liên kết và disabledthuộc tính cho <button>các phần tử.

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

Đứ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ố.

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" >
  3. Cái nút
  4. </button>
  5. <input class = "btn" type = "button"
  6. value = "Đầu vào" >
  7. <input class = "btn" type = "submit"
  8. 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.

  • 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

Được xây dựng như một sprite

Thay vì đặt mọi biểu tượng là một yêu cầu bổ sung, chúng tôi đã biên soạn chúng thành một sprite — một nhóm hình ảnh trong một tệp sử dụng CSS để định vị hình ảnh background-position. Đây cũng là phương pháp chúng tôi sử dụng trên Twitter.com và nó đã hoạt động hiệu quả đối với chúng tôi.

Tất cả các lớp biểu tượng đều có tiền tố .icon-cho không gian tên và phạm vi thích hợp, giống như các thành phần khác của chúng tôi. Điều này sẽ giúp tránh xung đột với các công cụ khác.

Glyphicons đã cấp cho chúng tôi quyền sử dụng bộ Halflings trong bộ công cụ nguồn mở của chúng tôi miễn là chúng tôi cung cấp liên kết và tín dụng tại đây trong tài liệu. Vui lòng xem xét làm điều tương tự trong các dự án của bạn.

Cách sử dụng

Bootstrap sử dụng một <i>thẻ cho tất cả các biểu tượng, nhưng chúng không có lớp chữ hoa chữ thường — chỉ có một tiền tố dùng chung. Để 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:

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

Có 140 lớp để lựa chọn cho các biểu tượng của bạn. Chỉ cần thêm một <i>thẻ với các lớp phù hợp và bạn đã thiết lập xong. Bạn có thể tìm thấy danh sách đầy đủ trong sprites.less hoặc ngay tại đây trong tài liệu này.

Đứng lên! Khi sử dụng bên cạnh 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.

Trường hợp sử dụng

Các biểu tượng rất tuyệt, nhưng người ta sẽ sử dụng chúng ở đâu? Dưới đây là một vài ý tưởng:

  • Dưới dạng hình ảnh cho điều hướng thanh bên của bạn
  • Đối với điều hướng hoàn toàn theo biểu tượng
  • Để các nút giúp truyền đạt ý nghĩa của một hành động
  • Với các liên kết để chia sẻ ngữ cảnh trên đích của người dùng

Về cơ bản, bất cứ nơi nào bạn có thể đặt <i>thẻ, bạn có thể đặt một biểu tượng.

Các ví dụ

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.