個人學習之路_第二十九章_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
992px>分辨率>768px 小屏幕 col-sm-n col-sm-4
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"> 導航條背景換色