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: @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 để 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.

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

Để 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 —trước nó cho mục đích tạo kiểu.

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

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

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

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

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

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

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

Tải xuống google-code-Prettify và xem readme để biết cách 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 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

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

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.

<table class = "table" > 
  …
</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

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.

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

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

<table class = "table table-bordered" > 
  …
</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

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

<table class = "table table-Concentrate" > 
  …
</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

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.

<table class = "table table-sọc table-viền bảng-ngưng tụ" > 
  ...
</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.

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.

Tên nhãn

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

Kiểm tra tôi Nộp

<form class = "well" > 
  <label> Tên nhãn </label>
  <input type = "text" class = "span3" placeholder = "Nhập nội dung nào đó…" >   
  <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>  
</form>

Form tìm kiếm

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

Tìm kiếm

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

Nhớ tôi Đăng nhập

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

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

Nhập văn bản

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.

Hộp kiểm

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

Chọn danh sách

thứ gì đó 2 3 4 5

Đa lựa chọn

1 2 3 4 5

Đầu vào tệp

Textarea

Lưu thay đổi Hủy bỏ

Đá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-labelvà .controlsđều được yêu cầu để tạo kiểu.

<form class = "form-ngang" > 
  <fieldset>
    <legend> Văn bản chú thích </legend>
    <div class = "control-group" > 
      <label class = "control-label" for = "input01" > Nhập văn bản </label>  
      <div class = "control" > 
        <input type = "text" class = "input-xlarge" id = "input01" >   
        <p class = "help-block" > Văn bản trợ giúp hỗ trợ </p> 
      </div>
    </div>
  </fieldset>
</form>

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.

<tập trường
  class = "control-group error" >
  …
</fieldset>

Đầu vào tập trung

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

Một số giá trị ở đây

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

Hộp kiểm bị vô hiệu hóa

Đây là một hộp kiểm bị vô hiệu hóa

Đầu vào có cảnh báo

Có thể đã xảy ra lỗi

Đầu vào bị lỗi

Vui lòng sửa lỗi

Đầu vào thành công

Tuyệt vời!

Lựa chọn thành công

1 2 3 4 5 Tuyệt vời!

Lưu thay đổi Hủy bỏ

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-onvà inputtrê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.

Kích thước lưới biểu mẫu

1 2 3 4 5 1 2 3 4 5 1 2 3 4 5

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.

Kích thước thay thế

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

Văn bản viết trước

@

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

Văn bản được thêm vào

.00

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

Nối và thêm trước

$ .00

Nối bằng nút

Đi!

Nối hai nút

Tìm kiếm Tùy chọn

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

1 2 3

Hộp kiểm

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 Tùy chọn hai cũng có thể được kiểm tra và đưa vào kết quả biểu mẫu Tùy chọn ba có thể — vâng, bạn đoán rồi — cũng được kiểm tra và đưa vào kết quả biểu mẫu

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ác nút radio

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

Lưu thay đổi Hủy bỏ

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

Hành động chính Hoạt động

Hành động chính Hoạt động

Hành động chính Hoạt động

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

Nút chính Cái nú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 Cái nút

<a class = "btn" href = ""> Liên kết </a>  
<button class = "btn" type = "submit" >  
  Cái nút
</button>
<input class = "btn" type = "button"  
         value = "Đầu vào" >
<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.

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

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

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

Làm mới Thủ tục thanh toán Xóa bỏ

Bình luận Cài đặt Thêm thông tin

Địa chỉ email