妙知谷例項講解Bootstrap前端框架的使用技巧
- IT技術
- 關注：1.63W次
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前端開發框架，以後用到該框架都是安裝這些步驟做的。
- 文章版權屬於文章作者所有，轉載請註明 https://miaozhigu.com/zh-tw/sm/itjishu/o2rx1.html
