Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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ử
Trong những ngày đầu của Twitter, các kỹ sư 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 đã đặt ra và sự phát triển nhanh chóng được tăng tốc trong lần Hackweek đầu tiên của Twitter.
Với sự giúp đỡ và phản hồi của nhiều kỹ sư tại Twitter, Bootstrap đã phát triển đáng kể không chỉ bao gồm các kiểu dáng cơ bản mà còn bao gồm các mẫu thiết kế mặt trước thanh lịch và bền bỉ hơn.
Đọ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.
- Safari mới nhất
- Google Chrome mới nhất
- Firefox 4+
- Internet Explorer 7+
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ụ.
- Tất cả các tệp .less gốc
- CSS được biên dịch đầy đủ và rút gọn
- Toàn bộ tài liệu hướng dẫn định kiểu
- Mẫu trang mẫu (sắp ra mắt thêm)
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ó lề / đệm bổ sung ở 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ể.
- <div class = "row">
- <div class = "span6 column" >
- ...
- </div>
- <div class = "span10 column" >
- ...
- </div>
- </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
4
6
6
số 8
số 8
5
11
16
Các cột bù trừ
4
8 bù 4
4 bù 4
4 bù 4
5 bù 3
5 bù 3
10 bù 6
Bố cục Các mẫu cơ bản để tạo trang web
Bố cục cố định
Bố cục vùng chứa căn giữa, rộng 940px cơ bản cho bất kỳ trang web hoặc trang nào.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
Bố cục linh hoạt
Cấu trúc trang linh hoạt hoặc trang lỏng với chiều 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.
- <body>
- <div class = "container-liquid" >
- <div class = "sidebar" >
- ...
- </div>
- <div class = "content" >
- ...
- </div>
- </div>
- </body>
Tiêu đề kiểu chữ , đoạn văn, danh sách và các phần tử loại nội tuyến khác
Tiêu đề và 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.
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. Cối xã hội 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 ý: Vẫn có thể sử dụng <b>và <i>các thẻ trong HTML5, nhưng chúng không đi kèm với các kiểu vốn có nữa. <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. Đây là cách nó trông:
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890
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 đủ.
Những câu chuyện cổ tích
<blockquote> <p> <small>
Làm thế nào để trích dẫn
Để bao gồm một blockquote, hãy quấn <blockquote>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 —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
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>
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer moltie lorem tại massa
- Facilisis trong pretium nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean ngồi amet erat nunc
- Bỏ qua lorem porttitor
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.
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ứ. Tuy nhiên, các bảng tuyệt vời 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ố |
- <table class = "common-table"> class = "common-table" >
- ...
- </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ố |
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.
- <table class = "common-table zebra-sọc"> class = "bảng chung ngựa vằn" >
- ...
- </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ữ |
|---|---|---|---|
| 1 | Của bạn | Một | Tiếng Anh |
| 2 | Joe | Sáu múi | Tiếng Anh |
| 3 | Stu | Sứt mẻ | Mã số |
- <script src = "js / jquery / jquery.tablesorter.min.js"> </script> src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script >
- $ ( function () {
- $ ( "bảng # sortTableExample" ). trình bảng ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "common-table zebra-sọc" >
- ...
- </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.
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.
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 .primarycó sẵn lớp màu xanh lam. Thêm vào đó, việc tạo kiểu của riêng bạn rất dễ dàng.
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 điều 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ó!
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
nút
Cảnh báo & Lỗi Các kiểu cho thành công, cảnh báo và thông báo lỗi hoặc cảnh báo
Cảnh báo cơ bản
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.
Chặn tin nhắn
Đố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.
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.
Tiêu đề phương thức
×Một cơ thể đẹp…
Mẹo 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.
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 .
phía dưới!
bên phải!
bên trái!
ở trên!
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.
Tiêu đề bật lên
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 với Preboot , một gói mã nguồn mở bao gồm các biến và biến đượ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.
- <link rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" href = "less / bootstrap.less" media = "all" />
- <script src = "js / less-1.0.41.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.
Các biến màu
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.
- // Liên kết
- @linkColor : # 8b59c2;
- @linkColorHover : làm tối ( @linkColor , 10 );
- // Màu xám
- @ đen : # 000;
- @grayDark : làm sáng ( @ đen , 25 %);
- @gray : làm sáng ( @ đen , 50 %);
- @grayLight : làm sáng ( @ đen , 70 %);
- @grayLighter : làm sáng ( @ đen , 90 %);
- @ trắng : #fff ;
- // Màu nhấn
- @ màu xanh lam : # 08b5fb ;
- @green : # 46a546;
- @red : # 9d261d;
- @yellow : # ffc40d;
- @orange : # f89406;
- @pink : # c3325f;
- @purple : # 7a43b6;
- // Đường cơ sở
- @baseline : 20px ;
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 /* ... */.
- // Đây là một bình luận
- / * Đâ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 tuyệt vời 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ữ
- #nét chữ {
- . viết tắt ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- phông chữ - kích thước : @size ;
- font - weight : @weight ;
- dòng - chiều cao : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- phông chữ - họ : "Helvetica Neue" , Helvetica , Arial , sans - serif ;
- phông chữ - kích thước : @size ;
- font - weight : @weight ;
- dòng - chiều cao : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- font - family : "Georgia" , Times New Roman , Times , sans - serif ;
- phông chữ - kích thước : @size ;
- font - weight : @weight ;
- dòng - chiều cao : @lineHeight ;
- }
- . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- phông chữ - họ : "Monaco" , Courier New , monospace ;
- phông chữ - kích thước : @size ;
- font - weight : @weight ;
- dòng - chiều cao : @lineHeight ;
- }
- }
Độ dốc
- #dốc {
- . ngang ( @startColor : # 555, @endColor: # 333) {
- nền - màu : @endColor ;
- background - repeat : lặp lại - x ;
- background - image : - khtml - gradient ( tuyến tính , trên cùng bên trái , trên cùng bên phải , từ ( @startColor ), đến ( @endColor )); // Konqueror
- background - image : - moz - linear - gradient ( left , @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( left , @startColor , @endColor ); // IE10
- background - image : - webkit - gradient ( tuyến tính , trên cùng bên trái , trên cùng bên phải , màu - dừng ( 0 %, @startColor ), màu - dừng ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- background - image : - webkit - linear - gradient ( left , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( left , @startColor , @endColor ); // Opera 11.10
- - ms - filter : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor ); // IE8 +
- filter : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 1)" , @startColor , @endColor )); // IE6 & IE7
- background - image : linear - gradient ( left , @startColor , @endColor ); // Le standard
- }
- . dọc ( @startColor : # 555, @endColor: # 333) {
- nền - màu : @endColor ;
- background - repeat : lặp lại - x ;
- 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
- background - image : - moz - linear - gradient ( @startColor , @endColor ); // FF 3.6+
- background - image : - ms - linear - gradient ( @startColor , @endColor ); // IE10
- 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+
- nền - hình ảnh : - webkit - tuyến tính - gradient ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- background - image : - o - linear - gradient ( @startColor , @endColor ); // Opera 11.10
- - ms - filter : % ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor ); // IE8 +
- filter : e (% ( "progid: DXImageTransform.Microsoft.gradient (startColorstr = '% d', endColorstr = '% d', GradientType = 0)" , @startColor , @endColor )); // IE6 & IE7
- nền - hình ảnh : tuyến tính - gradient ( @startColor , @endColor ); // Tiêu chuẩn
- }
- . hướng ( @startColor : # 555, @endColor: # 333, @deg: 45deg) {
- ...
- }
- . dọc - ba - màu ( @startColor : # 00b3ee, @midColor: # 7a43b6, @colorStop: 0.5, @endColor: # c3325f) {
- ...
- }
- }
Hoạt động và hệ thống lưới điện
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.
- // Kinh độ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // Hệ thống lưới điện
- . thùng chứa {
- chiều rộng : @siteWidth ;
- margin : 0 auto ;
- . clearfix ();
- }
- . cột ( @columnSpan : 1 ) {
- hiển thị : nội tuyến ;
- float : trái ;
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- margin - left : @gridGutterWidth ;
- &: first - child {
- margin - left : 0 ;
- }
- }
- . bù đắp ( @columnOffset : 1 ) {
- margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! quan trọng ;
- }