ở trên
bên trái
bên phải
phía dưới
Bootstrap

Bootstrap, từ Twitter

Bootstrap là một bộ công cụ từ Twitter được thiết kế để khởi động sự phát triển của các trang web và ứng dụng web.
Nó bao gồm CSS và HTML cơ bản cho kiểu chữ, biểu mẫu, nút, bảng, lưới, điều hướng và hơn thế nữa.

Cảnh báo Nerd: Bootstrap được xây dựng với Less và được thiết kế để hoạt động hiệu quả với các trình duyệt hiện đại.

Liên kết nóng CSS

Để bắt đầu nhanh nhất và dễ dàng nhất, chỉ cần sao chép đoạn mã này vào trang web của bạn.

Sử dụng nó với ít hơn

Một fan hâm mộ của việc sử dụng Ít hơn? Không sao, chỉ cần sao chép repo và thêm những dòng sau:

Fork trên GitHub

Tải xuống, fork, pull, sự cố tệp và hơn thế nữa với kho Bootstrap chính thức trên Github.

Bootstrap trên GitHub »

Hiện tại v1.3.0

Giới thiệu về Bootstrap Lịch sử tóm tắt, hỗ trợ trình duyệt và hơn thế nữa

Lịch sử

Các kỹ sư tại Twitter trước đây đã sử dụng hầu hết mọi thư viện mà họ quen thuộc để đáp ứng các yêu cầu của front-end. Bootstrap bắt đầu như một câu trả lời cho những thách thức đã đưa ra. Với sự giúp đỡ của nhiều người tuyệt vời, Bootstrap đã phát triển đáng kể.

Đọc thêm trên dev.twitter.com ›

Hỗ trợ trình duyệt

Bootstrap được thử nghiệm và hỗ trợ trên các trình duyệt hiện đại chính như Chrome, Safari, Internet Explorer và Firefox.

Đã được kiểm tra và hỗ trợ trong Chrome, Safari, Internet Explorer và Firefox
  • Safari mới nhất
  • Google Chrome mới nhất
  • Firefox 4+
  • Internet Explorer 7+
  • Opera 11

Bao gồm những gì

Bootstrap hoàn chỉnh với CSS đã biên dịch, không biên dịch và các mẫu ví dụ.

Các ví dụ bắt đầu nhanh

Cần một số mẫu nhanh? Hãy xem các ví dụ cơ bản mà chúng tôi đã tổng hợp lại sau đây:

  • Bố cục ba cột đơn giản với đơn vị anh hùng
  • Bố cục linh hoạt với thanh bên tĩnh
  • Hộp treo đơn giản cho các ứng dụng

Hệ thống lưới Đạt tiêu chuẩn 940px hoặc cuộn của riêng bạn

Lưới mặc định

Hệ thống lưới mặc định được cung cấp như một phần của Bootstrap là một lưới 16 cột rộng 940px. Đó là một hương vị của hệ thống lưới 960 phổ biến, nhưng không có thêm lề / phần đệm ở bên trái và bên phải.

Đánh dấu lưới ví dụ

Như được hiển thị ở đây, một bố cục cơ bản có thể được tạo với hai "cột", mỗi "cột" trải dài một số trong số 16 cột cơ bản mà chúng tôi đã xác định là một phần của hệ thống lưới của chúng tôi. Xem các ví dụ bên dưới để biết thêm các biến thể.

  1. <div class = "row" > 
  2.   <div class = "span6" > 
  3.     ...
  4.   </div>
  5.   <div class = "span10" > 
  6.     ...
  7.   </div>
  8. </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
1/3
1/3
1/3
1/3
2/3
4
6
6
số 8
số 8
5
11
16

Các cột bù trừ

4
8 bù 4
1/3 bù 2/3 giây
4 bù 4
4 bù 4
5 bù 3
5 bù 3
10 bù 6

Lồng các cột

Lồng nội dung của bạn nếu bạn phải tạo bằng cách tạo một .rowtrong một cột hiện có.

Ví dụ về các cột lồng nhau

Cấp 1 của cột
Cấp độ 2
Cấp độ 2 
  1. <div class = "row" > 
  2.   <div class = "span12" > 
  3.     Cấp 1 của cột
  4.     <div class = "row" > 
  5.       <div class = "span6" > 
  6.         Cấp độ 2
  7.       </div>
  8.       <div class = "span6" > 
  9.         Cấp độ 2
  10.       </div>
  11.     </div>
  12.   </div>
  13. </div>

Cuộn lưới của riêng bạn

Tích hợp trong Bootstrap là một số ít các biến để tùy chỉnh hệ thống lưới 940px mặc định. Với một chút tùy chỉnh, bạn có thể sửa đổi kích thước của các cột, máng xối của chúng và vùng chứa chúng nằm trong đó.

Bên trong lưới

Các biến cần thiết để sửa đổi hệ thống lưới hiện đều nằm trong đó variables.less.

Biến đổi Giá trị mặc định Sự mô tả
@gridColumns 16 Số lượng cột trong lưới
@gridColumnWidth 40px Chiều rộng của mỗi cột trong lưới
@gridGutterWidth 20px Khoảng trắng giữa mỗi cột
@siteWidth Tính tổng của tất cả các cột và máng xối Chúng tôi sử dụng một số đối sánh cơ bản để đếm số cột và rãnh nước và đặt chiều rộng của .fixed-container()mixin.

Bây giờ để tùy chỉnh

Sửa đổi lưới có nghĩa là thay đổi ba @grid-*biến và biên dịch lại các tệp Ít hơn.

Bootstrap được trang bị để xử lý hệ thống lưới với tối đa 24 cột; mặc định chỉ là 16. Đây là cách các biến lưới của bạn trông sẽ được tùy chỉnh thành lưới 24 cột.

  1. @gridColumns : 24 ;       
  2. @gridColumnWidth : 20px ;   
  3. @gridGutterWidth : 20px ;

Sau khi biên dịch lại, bạn sẽ được thiết lập!

Bố cục Các mẫu cơ bản để tạo trang web

Bố cục cố định

Bố cục mặc định và đơn giản, rộng 940px, ở giữa cho bất kỳ trang web hoặc trang nào được cung cấp bởi một trang duy nhất <div.container>.

  1. <body>
  2.   <div class = "container" > 
  3.     ...
  4.   </div>
  5. </body>

Bố cục linh hoạt

Một cấu trúc trang linh hoạt, thay thế với độ rộng tối thiểu và tối đa và thanh bên bên trái. Tuyệt vời cho các ứng dụng và tài liệu.

  1. <body>
  2.   <div class = "container-liquid" > 
  3.     <div class = "sidebar" > 
  4.       ...
  5.     </div>
  6.     <div class = "content" > 
  7.       ...
  8.     </div>
  9.   </div>
  10. </body>

Tiêu đề kiểu chữ , đoạn văn, danh sách và các phần tử kiểu nội dòng khác

Tiêu đề & sao chép

Hệ thống phân cấp kiểu chữ tiêu chuẩn để cấu trúc các trang web của bạn.

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: @basefontvà @baseline. Đầ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.

h1. Tiêu đề 1

h2. Tiêu đề 2

h3. Tiêu đề 3

h4. Tiêu đề 4

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

Đoạn ví dụ

Nullam quis risus eget urna mollis ornare vel eu leo. Cum socialis natoque penatibus et magnis dis parturient montes, nascetur nhạo báng. Nullam id dolor id nibh ultriciesectorsula ut id elit.

Tiêu đề ví dụ Có tiêu đề phụ…

Khác. các yếu tố

Sử dụng cách nhấn mạnh, địa chỉ và chữ viết tắt

<strong> <em> <address> <abbr>

Khi nào sử dụng

Thẻ nhấn mạnh ( <strong>và <em>) nên được sử dụng để chỉ ra tầm quan trọng hoặc sự nhấn mạnh bổ sung của một từ hoặc cụm từ so với bản sao xung quanh của nó. Sử dụng <strong>cho tầm quan trọng và <em>để nhấn mạnh căng thẳng .

Nhấn mạnh trong một đoạn văn

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 ý: Bạn vẫn có thể sử dụng <b>và <i>các thẻ trong HTML5 và chúng không cần phải được in đậm và nghiêng theo kiểu tương ứng (mặc dù nếu có yếu tố ngữ nghĩa hơn, hãy sử dụng nó). <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à dùng để nói, thuật ngữ kỹ thuật, v.v.

Địa chỉ

Phần <address>tử được sử dụng cho thông tin liên lạc của tổ tiên gần nhất của nó hoặc toàn bộ nội dung công việc. Dưới đây là hai ví dụ về cách nó 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]

Lưu ý: Mỗi dòng trong dấu <address>phải kết thúc bằng dấu ngắt dòng ( <br />) hoặc được bao bọc trong thẻ cấp khối (ví dụ <p>:) để cấu trúc đúng nội dung.

Các từ viết tắt

Đối với các từ viết tắt và từ viết tắt, hãy sử dụng <abbr>thẻ ( <acronym>không được dùng trong HTML5 ). Đặt dạng viết tắt trong thẻ và đặt tiêu đề cho tên đầy đủ.

Dấu ngoặc kép

<blockquote> <p> <small>

Làm thế nào để trích dẫn

Để bao gồm một đoạn trích dẫn, hãy bọc <blockquote>xung quanh <p>và <small>các thẻ. Sử dụng <small>phần tử để trích dẫn nguồn của bạn và bạn sẽ nhận được dấu gạch ngang &mdash;trước nó.

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

Tiến sĩ Julius Hibbert 
  1. <blockquote>
  2.   <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
  3.   <small> Tiến sĩ Julius Hibbert </small>
  4. </blockquote>

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.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ã số

<code> <pre>

Tập hợp mã của bạn theo phong cách với hai thẻ đơn giản. Để có sự tuyệt vời hơn nữa thông qua javascript, hãy truy cập vào thư viện mã của Google và bạn đã sẵn sàng.

Trình bày mã

Mã, các khối hoặc chỉ các đoạn nội tuyến, có thể được hiển thị với phong cách chỉ bằng cách đặt trong thẻ bên phải. Đối với các khối mã kéo dài nhiều dòng, hãy sử dụng <pre>phần tử. Đối với mã nội tuyến, hãy sử dụng <code>phần tử.

Yếu tố Kết quả
<code> Trong một dòng văn bản như thế này, mã được bao bọc của bạn sẽ giống như <html>phần tử này.
<pre> 
<div>
  <h1> Tiêu đề </h1>
  <p> Có gì đó ở ngay đây ... </p>
</div>

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.
<pre class="prettyprint">

Sử dụng thư viện google-code-Prettify, các khối mã của bạn sẽ có kiểu trực quan hơi khác một chút và làm nổi bật cú pháp tự động.

<div> <h1> Tiêu đề </h1> <p> Có gì đó ngay đây ... </p> </div>

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

Nhãn nội tuyến

<span class="label">

Kêu gọi sự chú ý đến hoặc gắn cờ bất kỳ cụm từ nào trong nội dung của bạn.

Gắn nhãn bất cứ thứ gì

Bao giờ cần một trong những mới lạ mắt! hoặc Các cờ quan trọng khi viết mã? Vâng, bây giờ bạn có chúng. Đây là những gì được bao gồm theo mặc định:

Nhãn mác Kết quả
<span class="label">Default</span> Mặc định
<span class="label success">New</span> Mới
<span class="label warning">Warning</span> Cảnh báo
<span class="label important">Important</span> Quan trọng
<span class="label notice">Notice</span> Để ý

Phương tiện Hiển thị hình ảnh và video

Lưới phương tiện

Hiển thị các hình thu nhỏ có kích thước khác nhau trên các trang có tỷ lệ HTML thấp và kiểu dáng tối thiểu.

Hình thu nhỏ mẫu

Hình thu nhỏ trong .media-gridcó thể có bất kỳ kích thước nào, nhưng chúng hoạt động tốt nhất khi được ánh xạ trực tiếp vào hệ thống lưới Bootstrap tích hợp sẵn. Các chiều rộng hình ảnh như 90, 210 và 330 kết hợp với một vài pixel đệm để bằng và .span2kích thước cột..span4.span6

Lớn

Vừa phải

Nhỏ bé

Mã hóa chúng

Lưới phương tiện rất dễ sử dụng và khá đơn giản về mặt đánh dấu. Kích thước của chúng hoàn toàn dựa trên kích thước của hình ảnh được bao gồm.

  1. <ul class = "media-grid" > 
  2.   <li>
  3.     <a href = "#"> _ 
  4.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  5.     </a>
  6.   </li>
  7.   <li>
  8.     <a href = "#"> _ 
  9.       <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >   
  10.     </a>
  11.   </li>
  12. </ul>

Bảng Đối với, bạn đoán nó, dữ liệu dạng bảng

Xây dựng bảng

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

Bàn là tuyệt vời - cho rất nhiều thứ. Các bảng tuyệt vời, tuy nhiên, cần một chút yêu thích đánh dấu để trở nên hữu ích, có thể mở rộng và có thể đọc được (ở cấp mã). Dưới đây là một số mẹo để giúp đỡ.

Luôn bao bọc các tiêu đề cột của bạn theo thứ <thead>bậc sao cho <thead>>> <tr>.<th>

Tương tự như các tiêu đề cột, tất cả nội dung nội dung bảng của bạn phải được bao bọc trong một cấu <tbody>trúc phân cấp <tbody>>> <tr>.<td>

Ví dụ: Các kiểu bảng mặc định

Tất cả các bảng sẽ được tự động tạo kiểu chỉ với các đường viền cần thiết để đảm bảo tính dễ đọc và duy trì cấu trúc. Không cần thêm các lớp học hoặc thuộc tính bổ sung.

# Họ Họ Ngôn ngữ
1 Một số Một Tiếng Anh
2 Joe Sáu múi Tiếng Anh
3 Stu Sứt mẻ Mã số 
  1. <bàn>
  2.   ...
  3. </table>

Ví dụ: Bảng ngưng tụ

Đối với các bảng yêu cầu nhiều dữ liệu hơn trong không gian chật hẹp hơn, hãy sử dụng hương vị cô đặc để cắt bớt phần đệm. Nó cũng có thể được sử dụng cùng với các đường viền và sọc ngựa vằn, giống như các kiểu bảng mặc định.

# Họ Họ Ngôn ngữ
1 Một số Một Tiếng Anh
2 Joe Sáu múi Tiếng Anh
3 Stu Sứt mẻ Mã số

Ví dụ: Bảng có viền

Làm cho bàn của bạn trông đẹp hơn một chút bằng cách làm tròn các góc của chúng và thêm đường viền ở tất cả các bên.

# Họ Họ Ngôn ngữ
1 Một số Một Tiếng Anh
2 Joe Sáu múi Tiếng Anh
3 Stu Sứt mẻ Mã số 
  1. <table class = "bordered-table" > 
  2.   ...
  3. </table>

Ví dụ: Vằn vằn

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 .zebra-stripedlớp.

# Họ Họ Ngôn ngữ
1 Một số Một Tiếng Anh
2 Joe Sáu múi Tiếng Anh
3 Stu Sứt mẻ Mã số
kéo dài 4 cột
kéo dài 2 cột kéo dài 2 cột

Lưu ý: Zebra-striping là một cải tiến tiến bộ không khả dụng cho các trình duyệt cũ hơn như IE8 trở xuống.

  1. <table class = "zebra-sọc" > 
  2.   ...
  3. </table>

Ví dụ: Zebra-sọc w / TableSorter.js

Lấy ví dụ trước, chúng tôi cải thiện tính hữu ích của bảng bằng cách cung cấp chức năng sắp xếp thông qua jQuery và plugin Tablesorter . Nhấp vào tiêu đề của bất kỳ cột nào để thay đổi cách sắp xếp.

# Họ Họ Ngôn ngữ
2 Joe Sáu múi Tiếng Anh
3 Stu Sứt mẻ Mã số
1 Của bạn Một Tiếng Anh 
  1. <script src = "js / jquery / jquery.tablesorter.min.js" > </script> 
  2. <script > 
  3.   $ ( function () { 
  4.     $ ( "bảng # sortTableExample" ). bộ bảng ({ sortList : [[ 1 , 0 ]] });  
  5.   });
  6. </script>
  7. <table class = "zebra-sọc" > 
  8.   ...
  9. </table>

Các hình thức

Kiểu mặc định

Tất cả các biểu mẫu được cung cấp các kiểu mặc định để trình bày chúng theo cách dễ đọc và có thể mở rộng. Các kiểu được cung cấp cho đầu vào văn bản, danh sách chọn, vùng văn bản, nút radio và hộp kiểm cũng như các nút.

Chú giải biểu mẫu mẫu
Một số giá trị ở đây
Đoạn văn bản trợ giúp nhỏ
Thành công!
Ruh roh!
Chú giải biểu mẫu mẫu
@
Đây là một số văn bản trợ giúp
Chú giải biểu mẫ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.
đến Tất cả thời gian được hiển thị dưới dạng Giờ chuẩn Thái Bình Dương (GMT -08: 00).
Khối văn bản trợ giúp để mô tả trường ở trên nếu cần.
 

Biểu mẫu xếp chồng lên nhau

Thêm vào .form-stackedHTML của biểu mẫu và bạn sẽ có các nhãn ở đầu các trường của chúng thay vì ở bên trái. Điều này hoạt động tốt nếu biểu mẫu của bạn ngắn hoặc bạn có hai cột đầu vào cho các biểu mẫu nặng hơn.

Chú giải biểu mẫu mẫu
Chú giải biểu mẫu mẫu
Đoạn văn bản trợ giúp nhỏ
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.
 

Kích thước trường biểu mẫu

inputTùy chỉnh bất kỳ biểu mẫu selecthoặc textareachiều rộng nào bằng cách chỉ thêm một vài lớp vào đánh dấu của bạn.

Kể từ v1.3.0, chúng tôi đã thêm các lớp định cỡ dựa trên lưới cho các phần tử biểu mẫu. Vui lòng sử dụng những thứ này trên các lớp hiện có .mini, .smallv.v.

nút

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

Tất cả các nút mặc định có kiểu màu xám nhạt, nhưng một số lớp chức năng có thể được áp dụng cho các kiểu màu khác nhau. Các lớp này bao gồm một .primarylớp xanh lam, một lớp xanh lam nhạt .info, một lớp xanh lá cây .successvà một lớp đỏ .danger.

Các nút ví dụ

Các kiểu nút có thể được áp dụng cho bất kỳ thứ gì .btnđược áp dụng. Thông thường, bạn sẽ chỉ muốn áp dụng những thứ này cho <a>và <button>chọn <input>các phần tử. Đây là cách nó trông:

       

Kích thước thay thế

Các nút lớn hơn hoặc nhỏ hơn lạ mắt? Có tại nó!

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 không hoạt động hoặc bị vô hiệu hóa bởi ứng dụng vì lý do này hay lý do khác, hãy sử dụng trạng thái đã tắt. Đó là .disabledcho các liên kết và :disabledcho <button>các phần tử.

Liên kết

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

nút

 

Các kiểu Cảnh báo & Lỗi cho các thông báo thành công, cảnh báo, lỗi và thông tin

Cảnh báo cơ bản

.alert-message

Thông điệp một dòng để nêu bật sự thất bại, khả năng thất bại hoặc thành công của một hành động. Đặc biệt hữu ích cho các biểu mẫu.

Tải javascript »

×

Guacamole thánh! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn .

×

Oh snap! Thay đổi cái này cái kia và thử lại .

×

Làm tốt! Bạn đã đọc thành công thông báo cảnh báo này.

×

Đứng lên! Đây là một cảnh báo cần bạn chú ý, nhưng nó chưa phải là một ưu tiên lớn .

Mã mẫu

  1. <div class = "alert-message warning" > 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> Thánh guacamole! </strong> Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn. </p>
  4. </div>

Chặn tin nhắn

.alert-message.block-message

Đối với các thư yêu cầu giải thích một chút, chúng tôi có cảnh báo kiểu đoạn văn. Chúng hoàn hảo để tạo ra các thông báo lỗi dài hơn, cảnh báo người dùng về một hành động đang chờ xử lý hoặc chỉ hiển thị thông tin để nhấn mạnh hơn trên trang.

Tải javascript »

×

Guacamole thánh! Đây là một cảnh cáo! Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn. Nulla vitae elit libero, một loài pharetra augue. Praesent Goodso cursus magna, vel scelerisque nisl consectetur et.

Thực hiện hành động này Hoặc làm điều này
×

Oh snap! Bạn có một lỗi! Thay đổi cái này cái kia và thử lại .

  • Duis mollis est non goodso luctus
  • Nisi erat porttitor ligula
  • Quên lacinia odio sem num elit
Thực hiện hành động này Hoặc làm điều này
×

Làm tốt! Bạn đã đọc thành công thông báo cảnh báo này. Cối xã hội natoque penatibus et magnis dis parturient montes, nascetur nhạo báng. Maecenas faucibus mollis interdum.

Thực hiện hành động này Hoặc làm điều này
×

Đứng lên! Đây là một cảnh báo cần bạn chú ý, nhưng nó chưa phải là một ưu tiên lớn.

Thực hiện hành động này Hoặc làm điều này

Mã mẫu

  1. <div class = "alert-message block-message warning" > 
  2.   <a class = "close" href = "#"> × </a> _  
  3.   <p> <strong> Thánh guacamole! Đây là một cảnh cáo! </strong> Tốt nhất bạn nên tự kiểm tra, trông bạn không quá ổn. Nulla vitae elit libero, một loài pharetra augue. Praesent Goodso cursus magna, vel scelerisque nisl consectetur et. </p>
  4.   <div class = "alert-action" > 
  5.     <a class = "btn small" href = "#"> Thực hiện hành động này </a> <a class = "btn small" href = "#"> Hoặc thực hiện việc này </a>     
  6.   </div>
  7. </div>

Các thành phần cửa sổ bật lên để hiển thị nội dung trong các phương thức, chú giải công cụ và cửa sổ bật lên

Phương thức

Chế độ — hộp thoại hoặc hộp đèn — rất phù hợp cho các hành động theo ngữ cảnh trong các tình huống mà điều quan trọng là phải duy trì ngữ cảnh nền.

Tải javascript »

×

Tiêu đề phương thức

Một cơ thể đẹp…

Sơ đẳng Sơ trung

Chú giải công cụ

Twipsies siêu hữu ích để hỗ trợ người dùng bối rối và hướng họ đi đúng hướng.

Tải javascript »

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste persiciatis iste voluptas natus illo quasi odit aut natusequunturequuntur, aut natus illo voluptatem odit persiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accantium totam totam architectureo explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dictarit quae quantium veugit voluptas nemo voluptas voluptatem .

Popovers

Sử dụng cửa sổ bật lên để cung cấp thông tin dưới văn bản cho một trang mà không ảnh hưởng đến bố cục.

Tải javascript »

Tiêu đề bật lên

Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Sử dụng javascript với Bootstrap Một chỉ mục các plugin để giúp bạn bắt đầu

Bắt đầu

Tích hợp javascript với thư viện Bootstrap cực kỳ dễ dàng. Dưới đây, chúng tôi sẽ trình bày những điều cơ bản và cung cấp cho bạn một số plugin tuyệt vời để giúp bạn bắt đầu!

Xem tài liệu javascript »

Bao gồm những gì

Làm cho một số thành phần chính của Bootstrap trở nên sống động với các plugin tùy chỉnh mới hoạt động với jQuery và Ender . Chúng tôi khuyến khích bạn mở rộng và sửa đổi chúng để phù hợp với nhu cầu phát triển cụ thể của bạn.

Tập tin Sự mô tả
bootstrap-modal.js Plugin Modal của chúng tôi là một plugin siêu mỏng dựa trên plugin js phương thức truyền thống! Chúng tôi đã đặc biệt chú ý đến việc chỉ bao gồm các chức năng đơn giản mà chúng tôi yêu cầu tại twitter.
bootstrap-alerts.js Plugin cảnh báo là một lớp siêu nhỏ để thêm chức năng đóng vào cảnh báo.
bootstrap-dropdown.js Plugin này là để thêm tương tác thả xuống vào thanh trên cùng của bootstrap hoặc điều hướng theo tab.
bootstrap-scrollspy.js Plugin ScrollSpy là để thêm điều hướng tự động cập nhật dựa trên vị trí cuộn vào thanh trên cùng của bootstrap.
bootstrap-button.js Plugin ScrollSpy là để thêm điều hướng tự động cập nhật dựa trên vị trí cuộn vào thanh trên cùng của bootstrap.
bootstrap-tabs.js Plugin này bổ sung chức năng tab động và nhanh chóng để chuyển đổi qua nội dung địa phương.
bootstrap-twipsy.js Dựa trên plugin jQuery.tipsy tuyệt vời được viết bởi Jason Frame; twipsy là phiên bản cập nhật, không dựa vào hình ảnh, sử dụng css3 cho hoạt ảnh và thuộc tính dữ liệu để lưu trữ tiêu đề cục bộ!
bootstrap-popover.js Plugin popover cung cấp một giao diện đơn giản để thêm popover vào ứng dụng của bạn. Nó mở rộng plugin boostrap-twipsy.js , vì vậy hãy nhớ lấy tệp đó khi bao gồm các cửa sổ bật lên trong dự án của bạn!

Javascript có cần thiết không?

Không! Bootstrap được thiết kế trước hết để trở thành một thư viện CSS. Javascript này cung cấp một lớp tương tác cơ bản nằm trên các kiểu được bao gồm.

Tuy nhiên, đối với những người cần javascript, chúng tôi đã cung cấp các plugin ở trên để giúp bạn hiểu cách tích hợp Bootstrap với javascript và cung cấp cho bạn một tùy chọn nhanh, nhẹ cho các chức năng cơ bản ngay lập tức.

Để biết thêm thông tin và xem một số bản demo trực tiếp, vui lòng tham khảo trang tài liệu plugin của chúng tôi .

Sử dụng Bootstrap với Ít tăng cường CSS của bạn với các biến, mixin và hàm

Bootstrap được xây dựng từ Preboot , một gói hỗn hợp và biến mã nguồn mở được sử dụng cùng với Less , một bộ xử lý trước CSS để phát triển web nhanh hơn và dễ dàng hơn.

Kiểm tra cách chúng tôi đã sử dụng Preboot trong Bootstrap và cách bạn có thể sử dụng nó nếu bạn chọn chạy Ít hơn trong dự án tiếp theo của mình.

Làm thế nào để sử dụng nó

Sử dụng tùy chọn này để sử dụng đầy đủ các biến Ít hơn của Bootstrap, mixin và lồng trong CSS thông qua javascript trong trình duyệt của bạn.

  1. <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />    
  2. <script src = "js / less-1.1.3.min.js" > </script>

Không cảm thấy giải pháp .js? Hãy thử ứng dụng Ít Mac hơn hoặc sử dụng Node.js để biên dịch khi bạn triển khai mã của mình.

Bao gồm những gì

Dưới đây là một số điểm nổi bật của những gì được bao gồm trong Twitter Bootstrap như một phần của Bootstrap. Truy cập trang web Bootstrap hoặc trang dự án Github để tải xuống và tìm hiểu thêm.

Biến

Các biến trong Ít hơn là hoàn hảo để duy trì và cập nhật CSS của bạn mà không làm bạn đau đầu. Khi bạn muốn thay đổi giá trị màu hoặc giá trị được sử dụng thường xuyên, hãy cập nhật giá trị đó tại một vị trí và bạn đã thiết lập.

  1. // Liên kết
  2. @linkColor : # 8b59c2;         
  3. @linkColorHover :     làm tối ( @linkColor , 10 ); 
  4.  
  5. // Màu xám
  6. @ đen : # 000;             
  7. @grayDark :           làm sáng ( @ đen , 25 %); 
  8. @gray :               làm sáng ( @ đen , 50 %); 
  9. @grayLight :          làm sáng ( @ đen , 70 %); 
  10. @grayLighter :        làm sáng ( @ đen , 90 %); 
  11. @ trắng : #fff ;             
  12.  
  13. // Màu nhấn
  14. @ màu xanh lam : # 08b5fb ;              
  15. @green : # 46a546;             
  16. @red : # 9d261d;               
  17. @yellow : # ffc40d;            
  18. @orange : # f89406;            
  19. @pink : # c3325f;              
  20. @purple : # 7a43b6;            
  21.  
  22. // Lưới đường cơ sở
  23. @basefont : 13px ;          
  24. @baseline : 18px ;

Bình luận

Less cũng cung cấp một kiểu bình luận khác ngoài cú pháp thông thường của CSS /* ... */.

  1. // Đây là một bình luận
  2. / * Đây cũng là một nhận xét * /

Mixins up the wazoo

Mixin về cơ bản là bao gồm hoặc các phần của CSS, cho phép bạn kết hợp một khối mã thành một. Chúng rất phù hợp cho các thuộc tính có tiền tố của nhà cung cấp như box-shadow, gradient trên nhiều trình duyệt, ngăn xếp phông chữ và hơn thế nữa. Dưới đây là một số mẫu mixin đi kèm với Bootstrap.

Ngăn xếp phông chữ

  1. #nét chữ {
  2.   . viết tắt ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  3.     phông chữ - kích thước : @size ; 
  4.     font - weight : @weight ; 
  5.     dòng - chiều cao : @lineHeight ; 
  6.   }
  7.   . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
  8.     phông chữ - họ : "Helvetica Neue" , Helvetica , Arial , sans - serif ;   
  9.     phông chữ - kích thước : @size ; 
  10.     font - weight : @weight ; 
  11.     dòng - chiều cao : @lineHeight ; 
  12.   }
  13.   ...
  14. }

Độ dốc

  1. #dốc {
  2.   ...
  3.   . dọc ( @startColor : # 555, @endColor: # 333) { 
  4.     nền - màu : @endColor ; 
  5.     background - repeat : lặp lại - x ;
  6.     background - image : - khtml - gradient ( tuyến tính , trên cùng bên trái , dưới cùng bên trái , từ ( @startColor ), đến ( @endColor )); // Konqueror   
  7.     background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+   
  8.     background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10   
  9.     background - image : - webkit - gradient ( tuyến tính , trên cùng bên trái , dưới cùng bên trái , màu - dừng ( 0 %, @startColor ), màu - dừng ( 100 %, @endColor )); // Safari 4+, Chrome 2+    
  10.     nền - hình ảnh : - webkit - tuyến tính - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+   
  11.     background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10   
  12.     nền - hình ảnh : tuyến tính - gradient ( @startColor , @endColor ); // Tiêu chuẩn  
  13.   }
  14.   ...
  15. }

Hoạt động

Yêu thích và thực hiện một số phép toán để tạo ra các mixin linh hoạt và mạnh mẽ như bên dưới.

  1. // Kinh độ
  2. @gridColumns : 16 ;       
  3. @gridColumnWidth : 40px ;   
  4. @gridGutterWidth : 20px ;   
  5. @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
  6.  
  7. // Tạo một số cột
  8. . cột ( @columnSpan : 1 ) {  
  9.   width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  10. }

Biên dịch ít hơn

Sau khi sửa đổi các .lesstệp trong / lib /, bạn sẽ cần phải biên dịch lại chúng để tạo lại tệp bootstrap - *. *. *. Css và bootstrap - *. *. *. Min.css. Nếu bạn đang gửi một yêu cầu kéo tới GitHub, bạn phải luôn biên dịch lại.

Cách biên dịch

Phương pháp Các bước
Nút với makefile

Cài đặt trình biên dịch dòng lệnh less với npm bằng cách chạy lệnh sau:

$ npm cài đặt lessc

Sau khi cài đặt, chỉ cần chạy maketừ thư mục gốc của thư mục bootstrap của bạn và bạn đã hoàn tất.

Ngoài ra, nếu bạn đã cài đặt watchr , bạn có thể chạy make watchđể bootstrap tự động xây dựng lại mỗi khi bạn chỉnh sửa tệp trong bootstrap lib (điều này không bắt buộc, chỉ là một phương pháp tiện lợi).
Javascript

Tải xuống Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong head.

  1. <link rel = "stylesheet / less" href = "/path/to/bootstrap.less" >  
  2. <script src = "/path/to/less.js" > </script>

Để biên dịch lại các tệp .less, chỉ cần lưu chúng và tải lại trang của bạn. Less.js biên dịch chúng và lưu trữ trong bộ nhớ cục bộ.
Dòng lệnh

Nếu bạn đã cài đặt công cụ dòng lệnh ít hơn, chỉ cần chạy lệnh sau:

$ lessc ./lib/bootstrap.less> bootstrap.css

Hãy chắc chắn bao gồm --compresstrong lệnh đó nếu bạn đang cố gắng tiết kiệm một số byte!
Ít ứng dụng Mac hơn

Ứng dụng Mac không chính thức xem thư mục của các tệp .less và biên dịch mã thành các tệp cục bộ sau mỗi lần lưu tệp .less đã xem.

Nếu muốn, bạn có thể chuyển đổi các tùy chọn trong ứng dụng để thu nhỏ tự động và thư mục nào mà các tệp đã biên dịch kết thúc.