[TOC]
上回我們使用了Node JS框架下的Grunt對Bootsrap的源碼進行了編譯，得到了可以使用的CSS和JS文件，那麼我們今天就要真正的開始使用這個twitter的前端框架了。
Bootstrap 是最受歡迎的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。
HTML5
在使用這個html的前端框架之前我們應該明確自己使用的語言。當然妖哲君使用的就是目前W3C1極力推廣的最新一代的HTML5語言，當然你也可以使用XHTML。 well，那麼打開我們的文本編輯器開始Coding吧。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>HelloWorld</title>
</head>
<body>
<p>Welcome to a new world consists of html,javascript and css.</p>
</body>
</html>以上，就是一個最基礎的html.保存一下，通過瀏覽器打開你將看見這樣的圖形
沒錯，這個就是你的第一個html網頁了，現在我來解釋一下上邊的代碼。
< >及之間的單詞構成的叫做標籤。兩個標籤及之間的內容構成了一個元素。所以整個html文件的構成很簡單，一個聲明以及一個HTML元素。好吧，html元素最主要包含的兩大個元素head和body。
Head
head元素中一般包含了顯示在瀏覽器標籤欄上的名稱2以及圖標，還有一些對整個html頁面的描述。這些描述是不可見的隱藏在頁面背後的，比如搜索引擎的索引項meta你可以理解爲一個人和他的基因。
Body
body元素中包含的即爲我們可以直接在頁面上見到的一切，比如以上代碼中的 p ,段落元素，當然還有其他的許多東西。
聲明
html5新標準指出，只需要使用html聲明當前的文檔即可，而之前則稍許複雜，比如下面這段聲明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Anyway,thanks to the html5，開發前端變的易如反掌，只要稍許的編程知識即可掌握html。
BootStrap
好了，html5就簡略的講解到這邊，更多的知識我們將在稍後的實例中一一接觸到，所以並不用十分着急。好的，還記得我們之前使用了Grunt dist 命令編譯好的那個新dist文件夾嗎，把它丟在你html文件的同目錄下3。然後還記得我們剛剛說的head元素的特性嗎？它囊括了許多看不見的東西，現在我們就要講這些看不見的東西放進來。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!--this three items must be put in fisrt place-->
<meta name="author" content="YaoZhe">
<meta name="description" content="a demo website">
<title>HelloWorld</title>
<!--BootStrap's core css-->
<link rel="stylesheet" href="dist/css/bootstrap.min.css" >
</head>
<body>
<p>Welcome to a new world consists of html,javascript and css.</p>
</body>
</html>可以看見，我們的代碼一下子多了很多，但正如我所說，html是一門非常淺顯易懂的語言，所以不要感覺到畏懼。對比之前的代碼，我們發現head元素中多了5個meta元素以及一個link標籤。
meta
(Greek=after or beyond) （希臘語）在…之後或超出;[辨證法]元語言
我們先來看一下meta元素,正如同它在希臘語中的意義一樣。< meta > 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。
< meta > 標籤位於文檔的頭部，不包含任何內容。< meta > 標籤的屬性定義了與文檔相關聯的名稱/值對。
看起來好像可有可無，但是如果能夠用好meta標籤，會給你帶來意想不到的效果，例如加入關鍵字會自動被大型搜索網站自動蒐集；可以設定頁面格式及刷新等等。
屬性4
這邊又要引進一個新的概念，沒錯就是那個存在於標籤中又自帶等號的東西。屬性擴展了標籤的內容，相當於標籤的形參。這邊meta標籤中,content屬性是必須屬性，用於定義http－equiv和name相關的元信息。name的作用則是將content屬性關聯到一個名稱。http－equiv的作用是將content屬性關聯到HTTP頭部。charset則是用於設置文檔的編碼方式。
在這邊需要注意的另一件事情就是，使用Bootstrap框架必須將
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">這三個meta標籤前置。
使用viewport meta標籤的user－scable = no可以禁用縮放
CSS(Cascading Style Sheets)
級聯樣式表是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等文件樣式的計算機語言。
CSS目前最新版本爲CSS3，是能夠真正做到網頁表現與內容分離的一種樣式設計語言。相對於傳統HTML的表現而言，CSS能夠對網頁中的對象的位置排版進行像素級的精確控制，支持幾乎所有的字體字號樣式，擁有對網頁對象和模型樣式編輯的能力，並能夠進行初步交互設計，是目前基於文本展示最優秀的表現設計語言。CSS能夠根據不同使用者的理解能力，簡化或者優化寫法，針對各類人羣，有較強的易讀性。
不難發現，link標籤的作用就是鏈接外部資源，而在這邊的用法則是鏈接我們的樣式表。當我們使用link正確的將BS的樣式表導入時，我們就能擁有多變的可視化效果了。不信？
保存剛剛的文件，在瀏覽器中打開
好的好的，我承認走錯片場了，你應該看見的是這個
你在調試信息中應該能看見，準確地載入了CSS文件。
那麼我們嘗試一下使用CSS。
在html5中我們經常食用div元素來控制樣式，通過賦予div塊級空間不同的類屬性，來準確地將其指向css文件中特定的樣式。
比如下面，打開編輯器，對body進行一下修改
<!DOCTYPE html>
<html lang="zh-CN">
<head>
...這裏應該有很多代碼...
</head>
<body>
<div class="jumbotron">
<h1>Hello!</h1>
<p> Welcome to a new world consists of html,javascript and css!</p>
</div>
</body>
</html>將原有的內容包含在一個類別“jumbotorn”的塊中，保存查看網頁
WOW，Amazing！這就是已經被包含在bootstrap.min.css中的樣式，當然如果你不喜歡，完全可以通過鏈接自己的css來改變樣式5
導航
好的，那麼今天的正片來了！還記得之前放錯的截圖嗎？我們就要做這個導航欄，無形裝逼最爲致命！
nav標籤是html5中的新標籤，以下所有的內容都將圍繞它展開。輸入下面的body元素中的代碼
<!DOCTYPE html>
<html lang="zh-CN">
<head>...</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<!--這是固定在頂部的浮動導航欄-->
<div class="container">
<div class="navbar-header">
<button type="button" calss="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
<span class="sr-only">Toggle navigation</sapn>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">Color</a>
<!--帶有navbar－brand的a元素會讓文本看起來大一號-->
</div>
<!--導航欄的題頭-->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Black</a></li>
<li><a href="#">White</a></li>
<li><a href="#">Grey</a></li>
</ul>
</div>
</div>
</body>
</html>保存之後你將看見這樣的效果
在這裏面我們用到了span元素以及表格元素
還有之前就見識過的Div元素具體使用法則參見超鏈接。下面來解釋一下這一段代碼到底幹了些什麼。
更多關於導航欄的細節將在下一篇中交代。
是的，今天就這樣。（：3
