首先妳確定要保證妳所需要的引用妳都有,還有妳要保證運行的最小點.就是需要3個外部文件,A,B,C,妳就要找到這3個文件,如果是妳找到的壹段代碼,妳要確保他能夠運行,如果都沒有辦法運行,放棄吧.另找下壹個.壹般情況下,壹個框架都會給妳壹個最基本的例子,這個例子中使用了框架需要的外部文件和壹些簡單的說明,bootstrap也給出了壹個簡單的例子.如圖就是最基本的壹個例子.該例子說了壹個很重要的,也是很好的壹個文件引用的方式,就是css.全部放在上面,然後把js.都放在頁面的最下面,這樣能夠更好的加載頁面渲染.建議妳使用最基本的頁面去修改妳需要的頁面,而且要做到按照自己的需求來寫代碼.不要復制,粘貼.
Bootstrap中內置了壹套響應式的,移動優先的流式柵格系統,隨著不同的設備,不同的平臺.或者窗口大小(viewport),根據他們的不同系統會自動的分成12份.也就是說,柵格系統是通過壹系列的行和列來組成我們需要的頁面,然後把妳需要的內容放在這些的布局中.在使用柵格系統的時候,需要註意的是:需要在使用.row(行的意思)的外層使用.container為的是,在賦值時給出合適的排列(aligment)和內補(padding).
參考資料：
怎麽搭建html5bootstrap框架布局
如何使用Bootstrap
針對Bootstrap的HTML
清單?是壹個有用的框架HTML文件，用於結合使用Bootstrap與壹個固定布局和響應特性：
清單?用於Bootstrap項目的基本框架HTML文件(listing1.html)
縮小版本
在Bootstrap下載中，請註意，每個CSS和JavaScript文件有兩個版本可用(例如bootstrap.js和bootstrap.min.js)。第壹種形式是壹個常規文件，第二種形式是壓縮文件或“縮小文件”。就像在本文中壹樣，使用縮小版本即可實現最有效的頁面加載。
listing1.html的開始之處的DOCTYPE聲明將其標記為壹個HTML5文件。head元素內的meta標記控制移動的小屏幕布局。(為方便起見，我將它們稱作meta/viewport標記。)默認情況下，大多數移動設備按比例縮小Web頁面，使之適應屏幕大小，就像在桌面瀏覽器窗口中壹樣。這就是為什麽許多網站上的文本和圖像在手機瀏覽器中看起來很小的原因。meta/viewport聲明中的initial-scale=1.0部分禁用了這壹行為，告訴設備要保持頁面的原有尺寸。該聲明表示Web設計人員(在本例中為Bootstrap)已經完成了實現較小屏幕的響應式設計這壹任務，所以在默認情況下，沒必要采用蠻力方法。
如何用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效果.多練.多使用它就屬於妳.
在給出壹個只有簡單的帶有導航欄的頁面.該頁面,理解透了,這個東西妳就算學會了,剩下的就是用什麽查壹下文檔就拿來用了,
怎麽使用web前端框架bootstrap1.Bootstrap是基於HTML5和CSS3開發的前端框架，它簡潔靈活，使得Web開發更加快捷
兼容大部分jQuery插件
2.Bootstrap中包含了豐富的Web組件，根據這些組件，可以快速搭建壹個漂亮、功能完備的網站。
3.其中包括以下組件:
下拉菜單、按鈕組、按鈕下拉菜單、導航、導航條、路徑導航、分頁、排版、縮略圖、警告對話框、進度條、媒體對象等
4.Bootstrap自帶了13個jQuery插件，這些插件為Bootstrap中的組件賦予了“生命”。
其中包括：模式對話框、標簽頁、滾動條、彈出框等。
如何用bootstrap快速搭建Bootstrap，來自Twitter，是目前最受歡迎的前端框架。Bootstrap是基於HTML、CSS、JAVASCRIPT的，它簡潔靈活，使得Web開發更加快捷。它由Twitter的設計師MarkOtto和JacobThornton合作開發，是壹個CSS/HTML框架。Bootstrap提供了優雅的HTM...
怎麽用bootstrap設計壹個登陸頁面看壹下具體的代碼.這裏需要註意的是,那個模版,是在系列教程壹中.
class="container"讓頁面能夠做到居中.註意該標簽不能嵌套使用.
role屬性是html5中新增的壹個屬性,可以讓妳更好的自定義壹些屬性供妳使用.
class="form-control"該標簽是把壹些表達標簽的width都設置為100%.
其中btn是bootstrap中默認定義的壹個button也就是按鈕的樣式.
其中btn-lg是指最大的樣式.還有btn-xs,btn-sm,btn-md.分別對應不同的設備.手機,平板,pc等.
這裏又重新寫了2個樣式,壹個是表單的最大width.設置成了330px.是因為登錄不需要太過寬,要不然不太好看.第二個樣式,是因為在默認的btn-lg是占壹行,所以,就會把兩個表單文本框放在各自的行上.但是緊挨著太狠.所以,做了壹個3px的下間距.
不同的btn大小展示,從圖就可以看出來這幾個的區別.怎麽試用?妳動手做壹下就明白了.