1)後臺開發人員,寫css搞一個好看的頁面,十分困難;
html、css、js開發頁面非常困難;
2)bootstrap: 一個前端開發框架
(1)框架:一個半成品軟件,開發人員可以在框架基礎上,在進行開發,簡化編碼
web知識 + javase--》豐富的網站 BS架構的程序:
但是編碼麻煩,因此有些人把基礎知識封裝了一下,使用非常簡單,提供一些jar包;
我們藉助jar包快速開發;
(2)好處:
1.定義好了很多的css樣式和js插件,我們開發人員直接可以使用這些樣式和插件得到豐富的效果;
2.響應式佈局-->兼容移動設備:
同一套頁面,可以兼容不同分辨率的設備;
筆記: 淘寶如何做呢? 寫了2套頁面,維護變得困難;
apple怎麼做呢? 就是響應式佈局,會變成漢堡按鈕;
3)作爲後臺開發工程師,這些很少;
4)使用bootstrap
(1)去官網下載bootstrap;
(2)解壓後,在項目中將css fonts js複製到項目中;
帶min不帶min區別:
帶min的是壓縮版本,回車、製表符等去掉了;
(3)創建html頁面,引入資源文件:
前三行:
1:編碼
2:IE的支持
3:視口, 寬度:設備的寬度 縮放比例: 1:1
筆記:
jquery: 簡化js的開發,增強js的功能;
bootstrap依賴於jquery;
5)3部分內容
(1)響應式佈局
步驟:
1.定義容器,相當於之前的table
容器分類:
1.container: 有點留白
2.container-fluid 100%的寬度,每一種設備
2.定義行,相當於tr.
樣式:row
3.定義元素. 指定該元素在不同的設備上所佔的格子數目.
樣式: col-設備代號-格子數目(1~12)
4種設備代號:
1. xs:相當於手機 < 768px col-xs-12
2. sm:相當於pad >= 768
3. md: 筆記本 >=992
4. lg: 臺式機 >=1200
筆記:
自己寫如何實現?
獲取屏幕寬度,根據不同寬度,調整縮放,這樣很麻煩;
bootstrap依賴於柵格系統:
將一行平均分成12個格子,可以指定元素佔幾個格子;
<div>在pc上顯示佔4個格子;
在手機上佔據12個格子;
超出了12,那麼會自動換行;
柵格類屬性,向上兼容
如果真實設備的寬度 < 柵格類屬性的設備的代號的最小值,那麼一個元素佔滿一整行
(2)css樣式
(3)js插件
6)柵格系統注意事項:
7)css樣式和js插件
(1)全局css樣式
按鈕
圖片
表格
表單
(2)組件
導航條
分頁條
(3)插件
輪播圖
8)我們不需要去看懂,會改就行了;
9)哪裏看不懂刪除哪裏
