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.
Để 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.
Hiện tại v1.3.0
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 ›
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.
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ụ.
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ư đượ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" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
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 .row
trong một cột hiện có.
- <div class = "row" >
- <div class = "span12" >
- Cấp 1 của cột
- <div class = "row" >
- <div class = "span6" >
- Cấp độ 2
- </div>
- <div class = "span6" >
- Cấp độ 2
- </div>
- </div>
- </div>
- </div>
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 đó.
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. |
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.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
Sau khi biên dịch lại, bạn sẽ được thiết lập!
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>
.
- <body>
- <div class = "container" >
- ...
- </div>
- </body>
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.
- <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.
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: @basefont
và @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.
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.
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 để 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 .
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.
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:
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.
Đố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>
<small>
Để 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 —
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
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Số nguyên posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> Tiến sĩ Julius Hibbert </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<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.
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 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. |
<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.
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> |
Để ý |
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ỏ trong .media-grid
có 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à .span2
kích thước cột..span4
.span6
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.
- <ul class = "media-grid" >
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#"> _
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<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ố |
- <bàn>
- ...
- </table>
Đố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ố |
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ố |
- <table class = "bordered-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ố |
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.
- <table class = "zebra-sọc" >
- ...
- </table>
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 |
- <script src = "js / jquery / jquery.tablesorter.min.js" > </script>
- <script >
- $ ( function () {
- $ ( "bảng # sortTableExample" ). bộ bảng ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "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.
input
Tùy chỉnh bất kỳ biểu mẫu select
hoặc textarea
chiề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
, .small
v.v.
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 .primary
lớp xanh lam, một lớp xanh lam nhạt .info
, một lớp xanh lá cây .success
và một lớp đỏ .danger
.
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ử.
.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.
- <div class = "alert-message warning" >
- <a class = "close" href = "#"> × </a> _
- <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>
- </div>
.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.
- <div class = "alert-message block-message warning" >
- <a class = "close" href = "#"> × </a> _
- <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>
- <div class = "alert-action" >
- <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>
- </div>
- </div>
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ử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.
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!
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! |
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 .
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.
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" />
- <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.
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;
- // Lưới đường cơ sở
- @basefont : 13px ;
- @baseline : 18px ;
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 ;
- 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 ;
- }
- ...
- }
- #dốc {
- ...
- . 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
- nền - hình ảnh : tuyến tính - gradient ( @startColor , @endColor ); // Tiêu chuẩ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 ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // Tạo một số cột
- . cột ( @columnSpan : 1 ) {
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
Sau khi sửa đổi các .less
tệ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.
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 Ngoài ra, nếu bạn đã cài đặt watchr , bạn có thể chạy |
Javascript | Tải xuống Less.js mới nhất và bao gồm đường dẫn đến nó (và Bootstrap) trong
Để 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 |
Í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. |