柵格系統 學習之路 大屏幕 支持 響應式 入門 顯示效果 oot name

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"> 導航條背景換色

我的學習之路_第二十九章_bootstrap