Bootstarp

字體是矢量的:不失幀

前端頁面可用於android訪問

優點:移動設備優先

支持所有瀏覽器(360不算瀏覽器)

自適應屏幕大小

目錄結構:

若瀏覽器環境變化,引入js

 <link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>

<linkhref="assets/plugins/bootstrap/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet"/>

<script src="assets/plugins/jquery-3.3.1.min.js"></script>

<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>

1. 視窗隨系統尺寸Grid最多分為12列
2. 網格系統

　　　　1,table ,載入完所有,顯示表格

　　　　2,div+css,載入一點,顯示一點:操作難度大

1. 移動設備策略

　　　　　媒體查詢,(漸進增強:向上相容)內容先顯示

1. 行必須放在.container class內
2. 內容放在列內,列是行的直接子元素
3. 預定義網格:.row 和.col(列)-xs(設配)-4(所占列數)
4. 使用媒體查詢

　　　　語法:@media 媒體類型 and(媒體特性:作用的範圍){你的樣式}

　　　　@media screen and (max-widthj:480px){

　　　　.a{display:none} //當小於480px時樣式起作用

　　　　}

1. 就近原則:標簽內style 與class 預設style生效

加入!important可強制生效,當(用style)更改bootstrap的css時,即會失效

矢量圖標:bootstarp本身已過時,可擴展,找到font加入對應css

https://icons8.com/line-awesdome