我的學習之路_第二十九章_bootstrap
bootstrap
內置了html,css,js插件為一體的前端框架
響應式布局:
設計一套頁面就可以使用於很多現實設備
bootstrap:
1.入門(響應式布局的容器)
1.先進入jQuery的js
2.再引入bootstrap的js
3.引入bootstrap的css文件
4.設置視口(支持移動設備優先)
<meta name="viewport" content="width=device-width,initial-scale=1">
5.頁面創建一個布局容器
<div class="container"> </div> (不流動)
<div class="container-fluid" > </div> (流動)
了解:css的媒體查詢
默認情況 有個設置的閾值價格屏幕分辨率分為幾個區間
分辨率: 屏幕大小
分辨率>1200px 大屏幕
1200px>分辨率>992px 中等的屏幕
992px>分辨率>768px 小屏幕
768px>分辨率 超小屏幕
柵格系統: 根據屏幕分辨率的大小而頁面做出不同的顯示效果
一行會被平均分成12份,如果多與12份另起一行
分辨率: 屏幕大小 樣式 例如
分辨率>1200px 大屏幕 col-lg-n col-lg-1
1200px>分辨率>992px 中等的屏幕 col-md-n col-md-2
768px>分辨率 超小屏幕 col-xs-n col-xs-6
還提供隱藏元素div樣式
hidden-xs (超小屏隱藏)
hidden-sm (小屏隱藏)
hidden-md (中等屏隱藏)
hidden-lg (大屏下隱藏)
bootstrap組成:
全局的css樣式:設置全局css樣式;基本的HTML元素均可以通過class設置並增強效果,還有先進的柵格系統.
組件:
js插件
class="btn btn-primary 超鏈接按鈕框
img-circle 圖片樣式
pull-left 靠左
pull-right 靠右
<nav class="navbar navbar-inverse" role="navigation"> 導航條背景換色
我的學習之路_第二十九章_bootstrap