作為移動端(Android)開發的我已被前端框架Bootstrap所折服
阿新 • • 發佈：2019-01-26
一，Bootstrap介紹：
一年前的我還沉浸在移動端各種適配和優化中不能自拔，為了適配市場的各種解析度，我拿著谷歌百分比佈局，也有生成各中解析度下的尺寸檔案，或通過測量螢幕寬高來定義同比例縮放的包裹控制元件等達到適配效果。當我路過Web前端搞了css+html+javascript+jquery之後同樣也會遇到適配問題，瞭解了一些前端框架，今天晚上看到了Bootstrap這個框架，Bootstrap 是基於 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷。相信自己你可以半小時搞定它，讓你前端達到中級水平。
二，Bootstrap的好處
如果你學完過Html+css我相信對於很多美麗漂亮的彈窗，按鈕，導航欄，標籤，輪播圖，…..等等。最主要的是適配各種解析度的螢幕，甚至是手機哦，而Bootstrap這個框架讓你輕鬆達到響應式頁面適配各種螢幕，以及輕鬆達到美麗漂亮的頁面佈局。
三，先來看看Bootstrap所構建的小例子元件和框架圖片如下：
自己寫的案例網頁：
.
.
. 等等
四，如何搭建Bootstrap架構
第一步:
去bootstrap官網下載Bootstrap原始碼和庫。http://www.bootcss.com/第二步:
匯入bootstarp.css第三步：
匯入jquery.js第四步：
匯入bootstrap.js第五步：
新增一個meta標籤 支援移動裝置 <meta name="viewport" content="width=device-width, initial-scale=1">第六步.
將所有的內容放入到佈局容器中. Bootstrap 需要為頁面內容和柵格系統包裹一個 .container 容器。我們提供了兩個作此用處類第七步：
主要是對於系統柵格化理解了。其他都是回撥類。
就這麼簡單如下案例快速搭建一個Bootstrap的環境：
<!DOCTYPE html> 五，簡單的貼上複製完成自己的頁面：
說實話，這是我見過最好用的框架了，因為文件提供的太給力了，並且使用也是類的形式，極其容易理解，讓我們開啟http://www.runoob.com/bootstrap/bootstrap-jumbotron.html。然後我們會發現這分類極其詳細一目瞭然。使用起來都是案例原始碼直接貼上複製。程式碼很好理解，只要你學過了Html+css+js+jquery，請貼上複製稍微修改下樣式，美麗漂亮高大上的東西就出來了哦。
