Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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 chỉ trong tâm trí.
Để 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.
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:
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.
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ư đượ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"> class = "row" >
- <div class = "span6 column" >
- ...
- </div>
- <div class = "span10 column" >
- ...
- </div>
- </div>
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>
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>
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.
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.
Bạn cũng có thể thêm các tiêu đề phụ với <strong>
và<em>
Sử dụng cách nhấn mạnh, địa chỉ và chữ viết tắt
<strong>
<em>
<address>
<abbr>
Thẻ nhấn mạnh ( <strong>
và <em>
) nên được sử dụng để thêm sự phân biệt trực quan giữa một từ hoặc cụm từ và bản sao xung quanh của nó. Sử dụng <strong>
cho sự chú ý cũ rõ ràng và sự chú ý và <em>
tiêu đề khéo léo .
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.
Phần address
tử được sử dụng cho — bạn đoán rồi đấy! —Địa chỉ. Đây là cách nó trông:
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 />
) để cấu trúc đúng nội dung như được đọc trong đời thực mà không áp dụng bất kỳ kiểu nào.
Đố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 đủ.
<blockquote>
<p>
<cite>
Hãy chắc chắn để bọc blockquote
xung quanh paragraph
và cite
thẻ của bạn. Khi trích dẫn một nguồn, hãy sử dụng cite
phần tử. CSS sẽ tự động đặt trước tên bằng dấu gạch ngang em (& mdash;).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ...
Tiến sĩ Julius Hibbert
<ul>
<ul.unstyled>
<ol>
dl
<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
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>
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-striped
lớ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ố |
- <table class = "common-table zebra-sọc"> class = "bảng chung ngựa vằn" >
- ...
- </table>
Lấy ví dụ trước, chúng tôi cải thiện tính hữu dụng của các 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 type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js"> </script> type = "text / javascript" src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script type = "text / javascript" >
- $ ( tài liệu ). sẵn sàng ( function () {
- $ ( "bảng # sortTableExample" ). trình bảng ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "common-table zebra-sọc" >
- ...
- </table>
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.
Thêm vào .form-stacked
HTML 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.
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 .primary
có 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 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:
Các nút lớn hơn hoặc nhỏ hơn lạ mắt? Có tại nó!
Đố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à .disabled
cho các liên kết và :disabled
cho button
các phần tử.
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.
Đố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.
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.
Một cơ thể đẹp ...
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 .
Sử dụng các 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.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
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.
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" type = "text / css" href = "less / bootstrap.less" media = "all" /> rel = "stylesheet / less" type = "text / css" href = "less / bootstrap.less" media = "all" />
- <script type = "text / javascript" 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.
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 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 ;
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 * /
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.
- #nét chữ {
- . viết tắt ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- phông chữ - kích thước : @size ;
- phông chữ - trọng lượng : @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 ;
- phông chữ - trọng lượng : @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 ;
- phông chữ - trọng lượng : @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 ;
- phông chữ - trọng lượng : @weight ;
- dòng - chiều cao : @lineHeight ;
- }
- }
- #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) {
- ...
- }
- }
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 ;
- }