實例講解Bootstrap前端框架的使用技巧

Bootstrap跟Dreamweaver一樣也是開發網站常用的前端框架，而且Bootstrap框架比Dreamweaver框架更常使用。利用前端框架都可以非常快速的開發出一個網站的前端出來，因此深受大家的喜愛，我們有必要學習幾個目前主流的前端框架。現在，我們以實際的例子來看看如何使用Bootstrap框架吧。

操作方法

（01）下載Bootstrap在【搜狗瀏覽器】中搜尋【bootstrap中文網】，點擊第一條連結，進入Bootstrap中文網站中下載文檔。

（02）進入【Bootstrap中文網】有很多的版本，如【Bootstrap2中文文檔、Bootstrap3中午文檔，Bootstrap4.0預覽】。我們一般是下載3.0版本，點擊【Bootstrap3中文文檔】進入下載頁面，該網站提供了3種下載文檔，我們下載的是第一種【用於生產環境的Bootstrap】，點擊下載按鈕即可。

（03）解壓Zip下載Bootstrap包之後要將它解壓，【bootstrap-3.3.7-dist】檔案夾中包含3個檔案夾，分別是CSS、fonts、js。我們要把這個【bootstrap-3.3.7-dist】檔案夾全部匯入到Dreamweaver站點中。

（04）新建文檔完成步驟1,2,3之後，在Dreamweaver軟件中新建一張HTML文檔，點擊選單欄中的【檔案】，在下拉選單中點擊【新建】，在彈出的新建視窗中選擇【HTML】然後點擊【創建】按鈕即可創建一張HTML頁面。

（05）儲存頁面使用快速鍵【ctrl+S】，會彈出儲存檔案的位置，輸入檔案名，比如我們將檔案名命名爲【】，檔案類型爲【All Document】類型，然後點擊【儲存】按鈕即可。

（06）引入3個js檔案從站點中的【【bootstrap-3.3.7-dist】檔案夾中引入3個js檔案到head頭部，檔案如下所示：<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/"/><script type="text/javascript" src="easyui/"></script><script type="text/javascript" src="bootstrap-3.3.7-dist/js/"></script>

（07）實例一：在body主體部分隨意寫上幾行文字，比如我們輸入如下所示文字：<body><h1>你好，世界</h1><h2>2017年7月31號</h2></body>

（08）預覽方法點擊【Dreamweaver】軟件中的地球圖標，在彈出的選單欄中選擇【在360se中預覽】，即可在瀏覽器中預覽效果。

（09）實例二：我們再在body主體中編寫個按鈕代碼，代碼爲【<button>搜狗</button>】，然後在瀏覽器中預覽效果。

特別提示

（1）學習Bootstrap前端框架可以使用Dreamweaver軟件工具；<br/>（2）Dreamweaver軟件工具在執行代碼之前要先啓動wampserver服務器；<br/>（3）使用Bootstrap框架之前一定要先引入js檔案；<br/>（4）本文以簡單的2個小例子爲例，說明該如何着手學習Bootstrap前端開發框架，以後用到該框架都是安裝這些步驟做的。