通過一些簡單的例子,快速帶你使用bootstrap寫出屬於自己的響應式頁面
工具/原料
網頁編輯器:dreamwere或記事本或其他編輯器
bootstrap核心檔案
方法/步驟
bootstrap官網
到此下載核心檔案。
下載後使用方法例項,截圖如下:
方法/步驟2
首先要在html檔案的頭部寫如下程式碼:
其次同樣在頭部引入bootstrap的檔案:示例如下:
響應式佈局12列柵格常用類屬性介紹,md類為電腦端,xs類為手機端,sm為平板端。
本例以手機和電腦為例演示響應式,程式碼如下:
body{margin: 0;padding: 0;}
.row{width: 100%;}
我在電腦端寬度佔1/3,在手機端寬度佔100%
我也是
我也是
注意事項
柵格化的div一定要放在class為row的div裡。