Twitter的引導是一種用于被許多設計師，開發人員和公司一個非常受歡迎的前端框架。這是一個很好的開發和維護的開源框架，它是易于使用，反應靈敏，跨瀏覽器兼容（他們聲稱，它是能極好的兼容IE7！）。最重要的是，有沒有什么你不能與引導完成。
如同所有的主要框架有很多可用的主題，但，這不是我們所要看看今天。請注意，此指南是為引導2.3.2書面和事情都有可能在未來改變。
這是什么呢？
引導提供了極大的把手來快速構建原型或網站。它是由開發商作出開發。
你在哪里開始？
你可以從這里下載Twitter的引導他們的網站，也可以從下載/復制Github上。我建議你從他們的網站下載它，因為該網站還為您提供了很多關于框架的信息。
瀏覽選項
正如我在介紹中提到，Twitter的引導是一個完整的框架。它給你噸的可能性，因此它可能需要一些時間來理解的框架。另外，還要確保你只下載當你要使用它在現實世界中你所需要的，但對于現在的默認包會做的伎倆。
入門
默認的包是什么比一個文件夾結構與一些CSS，JS和圖像等。那也沒問題，我們只是讓自己的index.html，并添加使用以下HTML標記：
| < !DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"/> </head> <body> <h1>Hello, world!</h1> <script src="http://code.jquery.com/jquery.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html> |
上面的代碼是不是比你通常會寫出來供大家正常的web項目的代碼非常不同。唯一的區別是，你包括引導文件，所以您可以在您的網站上使用他們的特點。最大的區別是，你使用自舉類來使用引導功能。（我們可能要改變一些默認樣式，所以我們一個style.css文件添加到該標記。）
現在是時候創建的東西！如果你想的是如何網站標記看起來像使用Twitter的自舉一個印象，你可能要檢查他們的例子。
在本教程中我們將制作一個用戶配置文件頁面 - 比方說一個博客 - 涵蓋一些你可能會打算在頻繁地使用，當你要與Twitter引導工作的功能。我們要建立的網頁將具有以下結構：有一些控件，面包屑，側邊欄，內容和一個小頁腳導航欄。我會打破每一部分，這樣很清楚我做了什么。下面的例子：
布局
讓我們先從一些簡單而明顯的類似的布局。引導提供了12列網格，您可以布置很容易通過添加類“SPANX”。要圍繞我們一個容器添加到我們的HTML標記的內容。容器標簽之間的所有其他元素會堅持到容器中。
| <div class="container"> <div class="row page-header"> <!-- Page title and search form --> </div> <!-- breadcrumb --> <div class="row"> <div class="span4"> <!-- Sidebar content --> </div> <div class="span8"> <!-- content --> <div class="page-header"> <h2>Written posts for our blog</h2> </div> <article class="clearfix"> <!-- post introduction --> </article> <article class="clearfix"> <!-- post introduction --> </article> <article class="clearfix"> <!-- post introduction --> </article> <div class="pagination"> <!-- Pagination --> </div> </div> </div> <div class="row"> <!-- Footer --> </div> </div> |
正如你可以看到我加了幾個班的一些元素，這就需要特殊的造型和行為。網格中的每一行被包裹在具有類“行”也是一個因素。我也申請類，如頁面頭和分頁，因為這些都是由自舉給予特殊造型。
頭部
標頭包含一個標識和一個簡單的搜索表單。我已經做在布局標記的標題一定的空間，所以我們必須把那里的代碼看起來是這樣的：
| <h1 class="pull-left">Webpage title</h1> <form class="form-search pull-right span4"> <input type="text" name="search" class="input-large search-query" placeholder="Search website..." /> <button type="submit" class="btn pull-right">Search</button> </form> |
我使用的類，我沒有提到過，這些都是形式搜索，右拉，輸入介質，搜索查詢和BTN。有些可能是顯而易見的，但有些可能不是。例如搜索查詢為您提供了與圓邊框的輸入字段。
面包屑導航
面包屑無序列表是通過面包屑類風格，兩者之間的一切將自動獲得他們的風格，但你可能要添加“活動”到當前頁面的指標。
| <ul class="breadcrumb span12"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li class="active">Blog</li> </ul> |
側邊欄
| <img src="img/me.jpg" class="img-polaroid"/> <h2>Paula Borowska</h2> <span class="label marginbottom">UX designer and blogger</span> <p> <strong>Current hometown</strong><br /> San Francisco </p> <p> <strong>Other information</strong><br /> Lorem ipsum dolor sit amet. </p> |
為了讓頭像一個漂亮的邊框我添加了類“寶麗來圖片”的形象標簽。我還添加了一個類標簽的字幕，這樣它看起來有點漂亮
內容
這一個是比其他人多一點困難，因為這其中需要的包裝，以防止從內容看奇數時，含量比側邊欄更長
頁眉
| <div class="page-header notop"> <h2>Written posts for our blog</h2> </div> |
內容
| <article class="clearfix"> <a class="thumbnail pull-left"> <img src="#"/> </a> <header> <h3>Interview with Daryl Ginn</h3> </header> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut libero tortor, adipiscing non magna sed, sollicitudin laoreet quam. Sed a turpis in nisl gravida luctus. Quisque felis sem, auctor non dictum et [...] </p> <a class="btn">Read more »</a> </article> |
這個類提供了縮略圖圖像相同的外觀為我所用側邊欄的寶麗來圖片，但是這個類還增加了一個風格的懸停狀態。
分頁
| <ul> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">»</a></li> </ul> |
正如你可能已經看到，有一個布局標記的分頁一點空間。分頁的工作原理一種類似于面包屑，但有不同的風格。注意：請確保它是包裹在具有一流的“分頁”的標簽。（殘疾人士類，使按鈕看起來不可點擊。）
頁腳
| <p class="text-center">Copyright © 2013</p> |
類文本中心，使中心的文字水平。您還可以使用文本左和文字右對齊的方式你喜歡的文字。
現狀
如果你使用相同的標記，如我，你應該有類似的東西
正如你可能會注意到這是不完全的像素完美。還有就是文章和對齊方式是不是你會打電話偉大之間缺乏保證金。這就是自定義樣式表的用武之地。
其他樣式
/* |
notop到不一定需要一個上邊距的元素。但這些都是很少的自定義，使效果看起來更好
綜述
這一切都需要很少的努力和最終的結果看起來相當專業。該舉手之勞的原因有很多世界各地的人們和企業喜歡用Twitter的引導或類似框架的工作之一。
你是怎么想使用框架