Etiam porta sem malesuada magna mollis euismod。Maecenas faucibus mollis interdum。Morbi leo risus,porta ac consectetur ac,愛神前庭。
Bootstrap 是 Twitter 的一個工具包,旨在啟動 web 應用程序和網站的開發。
它包括用於排版、表單、按鈕、表格、網格、導航等的基本 CSS 和 HTML。
書呆子警報: Bootstrap 是用 Less 構建的,旨在為現代瀏覽器的大門外工作。
為了獲得最快和最簡單的開始,只需將此代碼段複製到您的網頁中即可。
喜歡使用 Less?沒問題,只需克隆 repo 並添加以下行:
Twitter 的工程師歷來使用幾乎所有他們熟悉的庫來滿足前端需求。Bootstrap 最初是為了應對所面臨的挑戰。在許多很棒的人的幫助下,Bootstrap 有了長足的發展。
在dev.twitter.com上閱讀更多信息 ›
Bootstrap 在 Chrome、Safari、Internet Explorer 和 Firefox 等主流現代瀏覽器中經過測試和支持。
Bootstrap 帶有完整的已編譯 CSS、未編譯和示例模板。
作為 Bootstrap 的一部分提供的默認網格系統是 940 像素寬的 16 列網格。這是流行的 960 網格系統的一種風格,但在左右兩側沒有額外的邊距/填充。
如此處所示,可以使用兩個“列”創建基本佈局,每個“列”跨越我們定義為網格系統一部分的 16 個基礎列中的一些。有關更多變體,請參見下面的示例。
- <div類= “行” >
- <div類= "span6" >
- ...
- </div>
- <div類= "span10" >
- ...
- </div>
- </div>
如果必須通過.row
在現有列中創建一個來嵌套您的內容。
- <div類= “行” >
- <div類= "span12" >
- 列的第 1 層
- <div類= “行” >
- <div類= "span6" >
- 2級
- </div>
- <div類= "span6" >
- 2級
- </div>
- </div>
- </div>
- </div>
Bootstrap 內置了一些用於自定義默認 940 像素網格系統的變量。通過一些自定義,您可以修改列的大小、它們的間距以及它們所在的容器。
目前修改網格系統所需的變量都駐留在preboot.less
.
多變的 | 默認值 | 描述 |
---|---|---|
@gridColumns |
16 | 網格內的列數 |
@gridColumnWidth |
40像素 | 網格內每列的寬度 |
@gridGutterWidth |
20像素 | 每列之間的負空間 |
@siteWidth |
所有列和排水溝的計算總和 | 我們使用一些基本匹配來計算列數和裝訂線數並設置.fixed-container() mixin 的寬度。 |
修改網格意味著更改三個@grid-*
變量並重新編譯 Less 文件。
Bootstrap 配備處理多達 24 列的網格系統;默認值僅為 16。這是您的網格變量如何自定義為 24 列網格。
- @gridColumns :24 ;
- @gridColumnWidth :20px ;
- @gridGutterWidth :20px ;
重新編譯後,您將被設置!
默認且簡單的 940 像素寬、居中佈局,適用於單個<div.container>
.
- <正文>
- <div類= “容器” >
- ...
- </div>
- </正文>
另一種靈活的流體頁面結構,具有最小和最大寬度以及左側邊欄。非常適合應用程序和文檔。
- <正文>
- <div class = "容器流體" >
- <div類= “側邊欄” >
- ...
- </div>
- <div類= “內容” >
- ...
- </div>
- </div>
- </正文>
用於構建網頁的標準排版層次結構。
整個排版網格基於 preboot.less 文件中的兩個 Less 變量:@basefont
和@baseline
. 第一個是始終使用的基本字體大小,第二個是基線高度。
我們使用這些變量和一些數學運算來創建我們所有類型的邊距、填充和行高等等。
Nullam quis risus eget urna mollis ornare vel eu leo。Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus。Nullam id dolor id nibh ultricies vehicula ut id elit。
使用強調、地址和縮寫
<strong>
<em>
<address>
<abbr>
強調標籤 (<strong>
和<em>
) 應該用於指示單詞或短語相對於其周圍副本的額外重要性或強調。用於<strong>
重要性和<em>
強調強調。
Fusce dapibus,tellus ac cursus commodo,tortor mauris condimentum nibh,ut balloonum massa justo sit amet risus。Maecenas faucibus mollis interdum。Nulla vitae elit libero,一個 pharetra augue。
注意:在 HTML5中使用<b>
和<i>
標記仍然可以,它們不必分別設置為粗體和斜體樣式(儘管如果有更多語義元素,請使用它)。<b>
旨在突出單詞或短語而不傳達額外的重要性,而<i>
主要用於語音、技術術語等。
該<address>
元素用於其最近的祖先或整個工作主體的聯繫信息。以下是如何使用它的兩個示例:
注意: an 中的每一行都<address>
必須以換行符 ( <br />
) 結尾或包裹在塊級標籤中(例如,<p>
)以正確構造內容。
對於縮寫詞和首字母縮略詞,請使用<abbr>
標記(在HTML5<acronym>
中已棄用)。將簡寫形式放在標籤中,並為完整名稱設置標題。
<blockquote>
<p>
<small>
要包含塊引用,請環繞<blockquote>
和<p>
標記<small>
。使用該<small>
元素引用您的來源,您將在它之前獲得一個破折號—
。
Lorem ipsum dolor sit amet, consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。
朱利葉斯·希伯特博士
- <塊引用>
- <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit。Integer posuere erat a ante venenatis dapibus posuere velit aliquet。</p>
- <small>朱利葉斯·希伯特博士</small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
用兩個簡單的標籤來風格化你的代碼。要通過 javascript 獲得更多精彩,請放入 Google 的代碼美化庫,然後就可以了。
代碼、塊或只是內聯代碼片段,可以通過包裝在正確的標籤中以樣式顯示。對於跨越多行的代碼塊,請使用<pre>
元素。對於內聯代碼,請使用<code>
元素。
元素 | 結果 |
---|---|
<code> |
在這樣的一行文本中,您的包裝代碼將看起來像這個>html< 元素。 |
<pre> |
<div> <h1>標題</h1> <p>這裡有東西……</p> </div> 注意:請確保將標籤內的 |
<pre class="prettyprint"> |
使用 google-code-prettify 庫,您的代碼塊會獲得稍微不同的視覺風格和自動語法突出顯示。 <div> <h1>標題</h1> <p>這裡有東西... </p> </div> 下載 google-code-prettify並查看自述文件以了解如何使用。 |
<span class="label">
提請注意或標記正文中的任何短語。
曾經需要那些花哨的新品之一!或編寫代碼時的重要標誌?好吧,現在你有了它們。以下是默認包含的內容:
標籤 | 結果 |
---|---|
<span class="label">Default</span> |
默認 |
<span class="label success">New</span> |
新的 |
<span class="label warning">Warning</span> |
警告 |
<span class="label important">Important</span> |
重要的 |
<span class="label notice">Notice</span> |
注意 |
在具有低 HTML 佔用空間和最少樣式的頁面上顯示不同大小的縮略圖。
中的縮略圖.media-grid
可以是任意大小,但直接映射到內置的 Bootstrap 網格系統時效果最好。像 90、210 和 330 這樣的圖像寬度與一些填充像素相結合以等於.span2
、.span4
和.span6
列大小。
媒體網格易於使用,並且在標記方面相當簡單。它們的尺寸完全基於所包含圖像的大小。
- <ul類= “媒體網格” >
- <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>
桌子很棒——可以做很多事情。然而,偉大的表格需要一點標記才能變得有用、可擴展和可讀(在代碼級別)。這裡有一些提示可以提供幫助。
始終將列標題包裝在<thead>
這樣的層次結構中<thead>
> <tr>
> <th>
。
與列標題類似,表的所有正文內容都應包含在 a 中<tbody>
,因此您的層次結構為<tbody>
> <tr>
> <td>
。
所有表格都將自動設置樣式,僅使用基本邊框,以確保可讀性並保持結構。無需添加額外的類或屬性。
# | 名 | 姓 | 語 |
---|---|---|---|
1 | 一些 | 一 | 英語 |
2 | 喬 | 六包 | 英語 |
3 | 斯圖 | 凹痕 | 代碼 |
- <表格>
- ...
- </table>
通過添加斑馬條紋來對您的表格進行一些花哨 - 只需添加.zebra-striped
類。
# | 名 | 姓 | 語 |
---|---|---|---|
1 | 一些 | 一 | 英語 |
2 | 喬 | 六包 | 英語 |
3 | 斯圖 | 凹痕 | 代碼 |
注意:斑馬條紋是一種漸進式增強功能,不適用於 IE8 及更低版本的舊瀏覽器。
- <table class = "zebra-striped" >
- ...
- </table>
以前面的例子為例,我們通過jQuery和Tablesorter插件提供排序功能來提高表格的實用性。單擊任何列的標題以更改排序。
# | 名 | 姓 | 語 |
---|---|---|---|
2 | 喬 | 六包 | 英語 |
3 | 斯圖 | 凹痕 | 代碼 |
1 | 您的 | 一 | 英語 |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <腳本>
- $ (函數() {
- $ (“表#sortTableExample” )。表排序器({ sortList : [[ 1 , 0 ]] });
- });
- </腳本>
- <table class = "zebra-striped" >
- ...
- </table>
所有表單都具有默認樣式,以便以可讀和可擴展的方式呈現它們。為文本輸入、選擇列表、文本區域、單選按鈕和復選框以及按鈕提供了樣式。
添加.form-stacked
到表單的 HTML 中,您將在其字段頂部而不是左側有標籤。如果您的表單很短,或者您有兩列輸入較重的表單,這將非常有用。
通過向您的標記添加幾個類來自定義任何形式input
、select
或寬度。textarea
從 v1.3.0 開始,我們為表單元素添加了基於網格的大小調整類。請在現有的.mini
,.small
等類上使用這些。
按照慣例,按鈕用於操作,而鏈接用於對象。例如,“下載”可以是一個按鈕,“最近的活動”可以是一個鏈接。
所有按鈕默認為淺灰色樣式,但可以為不同的顏色樣式應用許多功能類。這些等級包括藍色.primary
等級、淺藍色.info
等級、綠色.success
等級和紅色.danger
等級。
- <div class = "警報消息警告" >
- <a class = "close" href = "#" > × </a>
- <p><strong>神聖的鱷梨醬!</strong>最好檢查一下自己,你看起來不太好。</p>
- </div>
.alert-message.block-message
對於需要一些解釋的消息,我們有段落樣式警報。這些非常適合冒泡更長的錯誤消息,警告用戶待處理的操作,或者只是呈現信息以更加強調頁面。
- <div class = "alert-message block-message 警告" >
- <a class = "close" href = "#" > × </a>
- <p><strong>神聖的鱷梨醬!這是一個警告!</strong>最好檢查一下自己,你看起來不太好。Nulla vitae elit libero,一個 pharetra augue。Praesent commodo cursus magna、vel scelerisque nisl consectetur 等。</p>
- <div class = "警報操作" >
- <a class = "btn small" href = "#" >採取這個行動</a> <a class = "btn small" href = "#" >或者這樣做</a>
- </div>
- </div>
好身材……
Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas。Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis
Etiam porta sem malesuada magna mollis euismod。Maecenas faucibus mollis interdum。Morbi leo risus,porta ac consectetur ac,愛神前庭。
通過與jQuery和Ender一起使用的新自定義插件,將 Bootstrap 的一些主要組件變為現實。我們鼓勵您擴展和修改它們以滿足您的特定開發需求。
文件 | 描述 |
---|---|
引導模態.js | 我們的 Modal 插件是對傳統modal js 插件的超薄版!我們特別注意只包含我們在 twitter 上需要的基本功能。 |
引導警報.js | 警報插件是一個超小類,用於向警報添加關閉功能。 |
引導-dropdown.js | 此插件用於向引導頂部欄或選項卡式導航添加下拉交互。 |
引導-scrollspy.js | ScrollSpy 插件用於將基於滾動位置的自動更新導航添加到引導頂部欄。 |
引導-tabs.js | 該插件添加了快速、動態的選項卡和藥丸功能,用於循環瀏覽本地內容。 |
引導-twipsy.js | 基於 Jason Frame 編寫的優秀的 jQuery.tipsy 插件;twipsy 是一個更新版本,它不依賴圖像,使用 css3 進行動畫,使用 data-attributes 進行本地標題存儲! |
bootstrap-popover.js | 彈出框插件提供了一個簡單的界面,用於將彈出框添加到您的應用程序中。它擴展了boostrap-twipsy.js插件,所以在你的項目中包含彈出框時一定要獲取該文件! |
沒有!Bootstrap 首先被設計為一個 CSS 庫。這個 javascript 在包含的樣式之上提供了一個基本的交互層。
但是,對於那些確實需要 javascript 的人,我們提供了上面的插件來幫助您了解如何將 Bootstrap 與 javascript 集成,並立即為您提供一個快速、輕量級的基本功能選項。
有關更多信息並查看一些現場演示,請參閱我們的插件文檔頁面。
Bootstrap 是用Preboot構建的,Preboot是一個開源的 mixins 和變量包,可與 Less 結合使用,Less是一個 CSS 預處理器,用於更快、更輕鬆地進行 Web 開發。
查看我們如何在 Bootstrap 中使用 Preboot,以及如果您選擇在下一個項目中運行 Less,您可以如何使用它。
使用此選項可在瀏覽器中通過 javascript 充分利用 Bootstrap 的 Less 變量、mixin 和 CSS 嵌套。
- <link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script src = "js/less-1.1.3.min.js" ></script>
感覺不到 .js 解決方案?在部署代碼時嘗試使用 Less Mac 應用程序或使用 Node.js進行編譯。
以下是作為 Bootstrap 的一部分包含在 Twitter Bootstrap 中的一些亮點。前往 Bootstrap 網站或 Github 項目頁面下載並了解更多信息。
Less 中的變量非常適合免費維護和更新您的 CSS。當您想要更改顏色值或常用值時,只需在一處更新即可。
- // 鏈接
- @linkColor :#8b59c2;
- @linkColorHover : 變暗(@linkColor ,10 );
- // 灰色
- @黑色:#000;
- @grayDark : 變亮(@black ,25 %);
- @gray : 變亮(@black ,50 %);
- @grayLight : 變亮(@black ,70 %);
- @grayLighter : 變亮(@black ,90 %);
- @白:#fff ;
- // 強調色
- @藍色:#08b5fb ;
- @綠色:#46a546 ;
- @紅色:#9d261d ;
- @黃色:#ffc40d ;
- @橙色:#f89406 ;
- @粉紅色:#c3325f ;
- @紫色:#7a43b6 ;
- // 基線網格
- @basefont :13px ;
- @基線:18px ;
除了 CSS 的正常/* ... */
語法之外,Less 還提供了另一種樣式的註釋。
- // 這是一條評論
- /* 這也是註釋 */
Mixin 基本上是 CSS 的 include 或 partials,允許您將一段代碼組合成一個。它們非常適合供應商前綴屬性box-shadow
,如跨瀏覽器漸變、字體堆棧等。下面是 Bootstrap 中包含的 mixin 示例。
- #字體{
- . 速記(@weight :正常,@size :14px ,@lineHeight :20px ){
- 字體大小:@size ;_
- 字體-重量:@weight ;
- 線高:@lineHeight ;_
- }
- . 無襯線(@weight :正常,@ size :14px ,@lineHeight :20px ){
- 字體系列:“ Helvetica Neue” 、Helvetica 、Arial 、sans - serif ;
- 字體大小:@size ;_
- 字體-重量:@weight ;
- 線高:@lineHeight ;_
- }
- ...
- }
- #坡度 {
- ...
- . 垂直(@startColor :#555,@endColor:#333){
- 背景顏色:@endColor ;_
- 背景-重複:重複-x ;_
- 背景-圖像:-khtml-漸變(線性,左上角,左下角,從(@startColor )到(@endColor ));// 征服者
- 背景-圖像:-moz-線性-漸變(@startColor ,@ endColor );// FF 3.6+
- 背景-圖像:-毫秒-線性-漸變(@startColor ,@endColor );// IE10
- 背景-圖像:-webkit-漸變(線性,左上,左下,顏色-停止(0 %,@startColor ),顏色-停止(100 %,@ endColor ));// Safari 4+,Chrome 2+
- 背景-圖片:- webkit -線性-漸變(@startColor ,@endColor );// Safari 5.1+,Chrome 10+
- 背景-圖像:-o-線性-漸變( @ startColor ,@ endColor );// 歌劇 11.10
- 背景-圖像:線性-漸變(@startColor ,@endColor );// 標準
- }
- ...
- }
看中並執行一些數學運算以生成靈活而強大的 mixin,如下所示。
- // 網格
- @gridColumns :16 ;
- @gridColumnWidth :40px ;
- @gridGutterWidth :20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // 製作一些列
- . 列(@columnSpan :1 ){
- 寬度:(@gridColumnWidth * @columnSpan )+ (@gridGutterWidth * (@columnSpan - 1 ));
- }
修改.less
/lib/ 中的文件後,您需要重新編譯它們以重新生成 bootstrap-*.*.*.css 和 bootstrap-*.*.*.min.css 文件。如果您向 GitHub 提交拉取請求,則必須始終重新編譯。
方法 | 腳步 |
---|---|
帶有 makefile 的節點 | 通過運行以下命令,使用 npm 安裝 less 命令行編譯器: $ npm install lessc 安裝後,只需 此外,如果您安裝了watchr,您可能會在 |
Javascript | 下載最新的 Less.js並在
要重新編譯 .less 文件,只需保存它們並重新加載您的頁面。Less.js 編譯它們並將它們存儲在本地存儲中。 |
命令行 | 如果您已經安裝了 less 命令行工具,只需運行以下命令: $ lessc ./lib/bootstrap.less > bootstrap.css
|
減少 Mac 應用程序 | 非官方的 Mac 應用程序會監視 .less 文件的目錄,並在每次保存監視的 .less 文件後將代碼編譯為本地文件。 如果您願意,您可以在應用程序中切換首選項以自動縮小以及編譯文件最終位於哪個目錄。 |