『壹』 如何使用bootstrap框架 bootstrap入門必看
為什麼使用這個框架呢？
1、瀏覽器支持，所有的主流瀏覽器支持，包括：IE、firefox、opera、chrome、Safari等。
2、容易上手，掌握html+css基礎即可。
3、具有設備響應式兼容。bootstrap的響應式css能夠自適應於台式機、平板電報和手機。
4、包含很多功能強大內置組件，易於定製。
5、開源。
在其官網下載，包括三種形式，我們選擇用於生產環境的bootstrap，這樣就無須先學習sass或者less的編譯，可以著重於學習bootstrap的應用。下載文件為zip格式，解壓後包括三個文件夾。css即bootstrap的樣式文件，js文件夾即其js文件，fonts為其字體文件夾。
我們暫且只用到css和js，點開css文件夾和js文件夾，出現如下圖。css文件夾中，其中，.css文件是編譯好的css文件，同我們平常使用的沒有區別，.min.css是壓縮後的css文件，可以使用這個文件節省大小，.map是映射less文件和css文件對應位置，暫且忽略，復制.min.css文件到自己項目的css文件夾中，同理，復制js中的.min.js文件到自己項目的js文件夾中。
下圖為其基本模板。由於bootstrap是用jquery編寫，所以需要jquery支持，我們使用的是在線jquery庫。在瀏覽器查看效果。h1第一級標題使用的樣式是bootstrap的樣式，而非h1原本的樣式。
在head的最開頭（必須為最開始，可以在編碼之後）加上
<meta name="viewport" content="width=device-width, initial-scale=1">
此為移動端開發經常用的，可以養成好習慣每個網頁都添加，可確保適當的觸屏縮放和顯示比例。
表示：當前的viewport的寬度為設備寬度，當然你也可以設置為具體數值，初始顯示為原始比例顯示。content共有六個屬性：width、height（不常使用）、initial-scale、maximum-scale、minimum-scale、user-scalable
布局容器的使用。
Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器，包括兩個：.container 類用於固定寬度並支持響應式布局的容器；
.container-fluid 類用於 100% 寬度，占據全部視口（viewport）的容器。
如下圖是一個實例。container中包含的為bootstrap顯示的樣式。
其支持響應式布局，將瀏覽器窗口拉寬和拉窄效果不同。
8
在bootstrap官網上有較多實例和組件，可以根據個人需要定製化使用，創作屬於自己風格的頁面。
『貳』 怎麼樣使用bootstrap快速開發一個簡單的前
Bootstrap 是一個用於快速開發 Web 應用程序和網站的前端框架。 是基於 HTML、CSS、JAVASCRIPT 的。
歷史
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 開發的。Bootstrap 是 2011 年八月在 GitHub 上發布的開源產品。
最近空餘時間比較多，今天先給大家介紹一個前端「樣式」框架——Bootstrap。
一、Bootstrap 整體架構
為什麼在引言我稱為Bootstrap為一個前端樣式框架呢？可能這樣的稱謂並不是很准確，但是我覺得這樣的稱呼可以讓一些初學者可以更快明白和明白Bootstrap到底是一個什麼東西。我總結東西不喜歡用一些高大上的詞語來加深某個知識的理解，反而更喜歡用一些大家通俗易懂的詞語來描述知識點。雖然這樣的描述方式可能會有點不準確，但是我覺得則沒什麼大不了的，因為這樣的描述確實可以讓初學者更快理解這個知識。因為我在學習知識點的時候就有這樣的困惑，有些知識官方文檔都說的高大上，其實說白了也就是以前的一些東西，然後進行封裝使得開發更加簡單和快速罷了。所以這里我分享Bootstrap框架也是這樣的。並且內容組織方面也是為了讓初學者更好地掌握。因為我剛開始接觸的時候也是一個初學者。我自認為這樣的組織方式可以更快更好地理解知識。
對於Bootstrap，首先要介紹而是它的整體架構——它到底由什麼組成的。相信大家看下面一張圖就可以很快明白Bootstrap中具體由哪些東西組成的。
從上面的圖，可以清楚看到，Bootstrap主要有下面幾部分組成：
12柵格系統——就是將屏幕平分12份（列）。
使用行(row)來組織元素（每一行都包括12個列），然後將內容放在列內。
通過col-md-offset-*來控制列偏移。
基礎布局組件——Bootstrap提供了多種基礎布局組件。如排版、代碼、表格、按鈕、表單等。
Jquery——Bootstrap所有的JavaScript插件都依賴於Jquery的。如果要使用這些JS插件，就必須引用Jquery庫。這也是為什麼我們在除了要引用Bootstrap的JS文件和CSS文件外，還需要引用Jquery庫的原因，兩者是依賴關系。
CSS組件——Bootstrap為我們預實現了很多CSS組件。如下拉框、按鈕組、導航等。也就是說Bootstrap內容幫我們定義好了很多CSS樣式，你可以將這些樣式直接應用到之前的下拉框等元素里。
JavaScript插件——Bootstrap也為我們實現了一些JS插件，我們可以用其提供的插件要完成一些常用功能，而不需要我們再重新寫JS代碼來實現像提示框，模態窗口這樣的效果了。
響應式設計——這就是一個設計理念。響應式的意思就是它會根據屏幕尺寸來自動調整頁面，使得前端頁面在不同尺寸的屏幕上都可以表現很好。
Bootstrap就是由上面幾部分組成的。上面已經都每個組成部分做了一個簡單的介紹，接下來的內容無非是通過一些實例來對每個組成部分進行一個詳細的介紹罷了。
二、12柵格系統
Bootstrap定義12柵格系統，就是為了更好的布局。每個前端框架都首先要定義好的就是布局系統。在Bootstrap裡面，就是利用行和列來創建頁面布局的。其布局有幾個原則：
行（row）必須包含在.container(固定寬度)或.container-fluid(100%寬度)中
每行都包含12列
將內容放置在每列中
在bootstrap的柵格系統中，根據寬度將瀏覽器分為4種。其值分別是：自動（100%）、750px、970px、 1170px。
對應的樣式為超小（xs）、小型（sm）、中型屏幕 （md）、大型 （lg）
其本就是通過媒體查詢定義最小寬度實現。所以，Bootstrap做出來的網頁向大兼容，向小不兼容！
在Bootstrap框架內，已預先定義好了屏幕大小的分界值，其分界值得定義就是通過媒體查詢來定義的。其定義方式如下：
/* 超小屏幕（手機，小於 768px） */
/* 沒有任何媒體查詢相關的代碼，因為這在 Bootstrap 中是默認的（還記得 Bootstrap 是移動設備優先的嗎？） */
/* 小屏幕（平板，大於等於 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面顯示器，大於等於 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面顯示器，大於等於 1200px） */
@media (min-width: @screen-lg-min) { ... }
其實Win8應用開發中也應用了媒體查詢來實現可響應式的應用。所以大家以後如果聽到了可響應系統不要覺得很高深哦，其實就是框架為我們定義了媒體查詢，如果超過了媒體查詢中定義的最小寬度對應某個類型屏幕，通過這樣的方式，就可以在不同屏幕之間收縮元素大小來適應屏幕。然而Bootstrap提出的概念是移動設備優先的，所以Bootstrap設計出來的頁面只能向大兼容，向小不兼容。
三、基礎布局組件
基礎布局組件就是Bootstrap框架內為一些基礎布局的標簽定義了一些統一的樣式。如Table、按鈕、表單等。下面讓我們看一個Table的例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標簽*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!--因為這里沒有使用到Bootstrap的JS插件，所以就沒有引用Jquery組件-->
<!-- Bootstrap -->
<link rel="stylesheet" /bootstrap/3.3.4/css/bootstrap.min.css">
</head>
<body>
<h3>默認樣式的Table</h3>
<table>
<caption>表標題.</caption>
<!-- 表頭，組合為t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<h3>帶邊框的表格</h3>
<table>
<caption>表標題.</caption>
<!-- 表頭，組合為t+head, t代表table的意思-->
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Tommy</td>
<td>Li</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Bob</td>
<td>san</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Sam</td>
<td>wang</td>
</tr>
</tbody>
</table>
<!-- 更多表格樣式參考： /css/#tables-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script srwww.cdccgs.com?/jquery/1.11.2/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include indivial files as needed -->
<script srwww.cdccgs.com?/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
對於Button和表單的例子代碼這里就不貼了，大家可以通過下面的鏈接查看運行效果和查看源碼。也可以通過最後的下載文件來下載本專題的所有源碼。
四、CSS組件
CSS組件和基礎布局組件差不多，也就是Bootstrap為一些標簽定義了一些已有的樣式，這些樣式運行的效果都非常美觀，這樣每個公司或開發人員都不需要再去寫一篇樣式，從而加快開發效率。這里直接看一個導航的例子吧。說白這個東西，你用多了自然就熟了。
『叄』 如何用 bootstrap 創建一個網站
這篇教程旨在讓你在20分鍾內學會使用twitter
bootstrap創建一個站點。看完這個教程後你應該能夠使用bootstrap來建立一個基本的響應式布局的頁面，了解柵格系統，並且能夠使用bootstrap導航、導航條和了解響應式設計的基礎。這些全部都是使用twitter
bootstrap所需要具備的知識。
首先需要說的是twitter
bootstrap是非常優秀的一個前端開源框架，它為所有的組鍵都提供了詳細的用例，讓你能夠輕易地通過復制黏貼而附加到你的設計中。查閱官方文檔：twitter.github.com/bootstrap/index.html
基本的HTML模板
我們需要以一個基本的HTML模板，這樣我們能夠把所需要的bootstrap文件包含進來。下面就是我們twitter
bootstrap項目的開頭，復制這些代碼到一個文件中並將其命名為index.html。
<!DOCTYPE
html>
<head>
<title>Twitter
Bootstrap
Tutorial
-
A
responsive
layout
tutorial</title>
<style
type='text/css'>
body
{
background-color:
#CCC;
}
</style>
</head>
<body>
</body>
</html>
這段代碼中我們已經添加了一些CSS使頁面的背景呈亮灰色，因為這樣我們能夠輕易地在我們的設計中看見不同的列，使它更加容易理解。
『肆』 如何用 bootstrap 創建一個網站
方法/步驟
何為Bootstrap? 簡潔的、直觀的、超牛的、以移動設備優先的前端開發框架，讓web開發更迅速、簡單。他是Twitter推出的html/css的前端框架, 現在的網頁設計越來越多的平面化, 所以, 也就出現了一些平台來做平面化的樣式來供我們來使用. 因為這款框架是一個開源的框架, 所以現在很多人都在使用該框架. 下載下來的框架目錄結構如圖:
怎麼去使用一個開源的框架或者一段現成的源碼? 首先你確定要保證你所需要的引用你都有, 還有你要保證運行的最小點. 就是需要3個外部文件, A, B, C, 你就要找到這3個文件, 如果是你找到的一段代碼, 你要確保他能夠運行, 如果都沒有辦法運行, 放棄吧. 另找下一個. 一般情況下, 一個框架都會給你一個最基本的例子, 這個例子中使用了框架需要的外部文件和一些簡單的說明, bootstrap也給出了一個簡單的例子. 如圖就是最基本的一個例子. 該例子說了一個很重要的, 也是很好的一個文件引用的方式, 就是css. 全部放在上面, 然後把js. 都放在頁面的最下面, 這樣能夠更好的載入頁面渲染. 建議你使用最基本的頁面去修改你需要的頁面, 而且要做到按照自己的需求來寫代碼. 不要復制, 粘貼.
Bootstrap中內置了一套響應式的, 移動優先的流式柵格系統, 隨著不同的設備, 不同的平台. 或者窗口大小(viewport), 根據他們的不同系統會自動的分成12份. 也就是說, 柵格系統是通過一系列的行和列來組成我們需要的頁面, 然後把你需要的內容放在這些的布局中.在使用柵格系統的時候, 需要注意的是: 需要在使用.row(行的意思)的外層使用 .container 為的是, 在賦值時給出合適的排列(aligment)和內補(padding).
舉個例子: 一行 其中包含3個內容 分別占屏幕的25%, 50%, 25%. 我們要在超小屏幕設備-手機上使用. 那麼就要寫成12的3, 6, 3. 具體代碼看圖片, 這里的效果圖, 為了效果加上了一個well的class. 只是為了演示效果, 能夠看清除.
為了有一個很好的學習東西, 讓你看一下表格的創建. 就是這么的簡單, 只需要在table上, 填寫一個class為.table的樣式即可生成一個很好很實用的表格. 其實, 這些都是別人提前建立好的頁面顯示效果, 就是不用自己再去寫一些簡單的css效果. 多練. 多使用它就屬於你.
在給出一個只有簡單的帶有導航欄的頁面. 該頁面, 理解透了, 這個東西你就算學會了, 剩下的就是用什麼查一下文檔就拿來用了,
還望採納，謝謝
『伍』 如何用Bootstrap製作WordPress主題
1.先用bootstrap做好網自站靜態模板文件;
如下
index.html索引文件
home.html首頁
single.html文章頁面
arctive.html分類頁面
category.html分類頁面
page.html頁面
search.html頁面
404.html頁面
style.css自定義樣式
文件夾images引用的圖片
文件夾css引用的css文件
文件夾js引用的js文件
2.再把靜態模板文件換成動態模板文件，即把html換成php文件；
如下
index.php索引文件
home.php首頁
single.php文章頁面
arctive.php分類頁面
category.php分類頁面
page.php頁面
search.php頁面
404.php頁面
style.css自定義樣式
文件夾images引用的圖片
文件夾css引用的css文件
文件夾js引用的js文件