20分鐘建立自己的Bootstrap站點
這篇教程旨在讓你在20分鐘內(nèi)學會使用twitter bootstrap創(chuàng)建一個站點?？赐赀@個教程后你應(yīng)該能夠使用bootstrap來建立一個基本的響應(yīng)式布局的頁面，了解柵格系統(tǒng)，并且能夠使用bootstrap導航、導航條和了解響應(yīng)式設(shè)計的基礎(chǔ)。這些全部都是使用twitter bootstrap所需要具備的知識。
首先需要說的是twitter bootstrap是非常優(yōu)秀的一個前端開源框架，它為所有的組鍵都提供了詳細的用例，讓你能夠輕易地通過復制黏貼而附加到你的設(shè)計中。查閱官方文檔：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>
這段代碼中我們已經(jīng)添加了一些CSS使頁面的背景呈亮灰色，因為這樣我們能夠輕易地在我們的設(shè)計中看見不同的列，使它更加容易理解。
引入twitter bootstrap文件
為了使用twitter bootstrap我們僅僅需要把一個文件引入到我們的模板當中來，引入文件有很多種方法，如果你想了解這些方法請查閱相關(guān)文檔。
基于本教程的出發(fā)點，我們將會通過CDN來引入bootstrap-combined.min.css文件而不需要下載任何的文件。
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
它能夠使所有的twitter bootstrap CSS在我們的模板中生效。
Twitter Bootstrap的容器
bootstrap的container類是非常有用的，它能在頁面中創(chuàng)建一個居中的區(qū)域，然后我們能夠把其他位置的內(nèi)容放到里面。container類等價于創(chuàng)建了一個具有靜態(tài)寬度并且magin值為auto的一個居中的div框。twitter bootstrap的 container類的優(yōu)點在于它是響應(yīng)式的，它會以當前屏幕的寬度為基礎(chǔ)計算出最佳的寬度予以實用。
在body標簽中，使用container類創(chuàng)建一個div。它會作為頁面主要的放置其他代碼的外層包裹。
如果你調(diào)整這個DIV的高度并將其背景顏色設(shè)置為白色，你所看到的效果會是這樣：
標題和導航
現(xiàn)在我們已經(jīng)有一個地方可以添加額外的HTML代碼，我們可以添加標題文本然后再創(chuàng)建站點的主要導航條。
加入如下的文本或者你選擇的文字到container類的div標簽當中。
<h1>TWITTER BOOTSTRAP TUTORIAL</h1>
現(xiàn)在并沒有多少新的東西，這僅僅是一個標題，讓我們轉(zhuǎn)移到更有趣的方面，twitter bootstrap導航。
Bootstrap 有一個nav類讓我們能夠創(chuàng)建各種各樣的導航元素，你可以在h1標簽之后加入如下的代碼。
<div class='navbar navbar-inverse'> <div class='nav-collapse' style="height: auto;"> <ul class="nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#">Page One</a></li> <li><a href="#">Page Two</a></li> </ul> </div></div>
navbar相關(guān)的類擁有導航條所有的樣式，添加navbar-inverse類將會應(yīng)用一個很酷的黑色風格，這是一個twitter bootstrap的常見搭配。我建議在這個樣式的基礎(chǔ)上進行拓展從而創(chuàng)造你的獨一無二的導航。但在這個教程中我們?nèi)匀粫褂没A(chǔ)的bootstrap樣式。
在類為navbar的DIV當中，我們添加另一個類為nav-collapse的DIV并為其添加行內(nèi)樣式height:auto；這是告訴bootstrap當這個頁面在小于970px寬度的瀏覽器窗口當中時，它會提供一個壓縮的切換視圖。
如果你保存了index.html文件然后在瀏覽器中打開，當你調(diào)整瀏覽器窗口的寬度時你就能夠看到這個變化，如圖所示。
大于979px：
小于979px：
另外，我們可以添加nav類到一個HTML無序列表元素中以便從bootstrap CSS文件中應(yīng)用更多的樣式，也可以添加一個active類到“HOME”列表項中。
本文標簽： Bootstrap
站建設(shè)公司排行榜.jpg)
站需要多少錢.jpg)
站建設(shè)公司排行榜.jpg)
站選哪家公司好.jpg)
站需要注意什么.jpg)
站建設(shè)公司排行榜.jpg)
站多久可以做好.jpg)
站多久可以做好.jpg)
站建設(shè)方案報價.jpg)
站多久可以做好.jpg)
站SEO選哪家公司好.jpg)
站SEO需要注意什么.jpg)
站SEO需要注意什么.jpg)
站SEO一年需要多少錢.jpg)
站SEO需要注意什么.jpg)
站SEO需要注意什么.jpg)
站SEO選哪家公司好.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
站SEO一年需要多少錢.jpg)
功能.jpg)
