bootstrap基本佈局

API

bootstrap.cn

HTML5文件 型別

width 屬性控制裝置的寬度。設定為 device-width 確保它能正確呈現在不同裝置上。

initial-scale=1.0 確保網頁載入時，以 1:1 的比例呈現，不會有任何的縮放。

viewport meta 標籤新增 user-scalable=no 可以禁用其縮放（zooming）功能。

maximum-scale=1.0 與 user-scalable=no 一起使用。這樣禁用縮放功能後，使用者只能滾動螢幕，就能讓您的網站看上去更像原生應用的感覺。

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">

.container 類用於固定寬度並支援響應式佈局的容器

<div class="container"></div>

.container-fluid 類用於100%寬度，佔據全部視口的容器

<div class="container-fluid"></div>

row）與列（column）組合頁面佈局

row）必須在容器.container或。container-fluid中.

1到12的值來表示範圍

<768px） .col-xs-列

>=768px）.col-sm-列

>=992px）.col-md-列

>=1200px）.col-lg-列

<div class="container main">

<div class="row"><!--小螢幕兩列。中等螢幕四列-->

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div>

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div>

<div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

</div><div class="col-md-3 col-sm-6">

col-md-3 col-sm-6

.col-md-offset-* 類。這些類會把一個列的左外邊距（margin）增加 * 列，其中 *範圍是從 1 到 11。

.col-md-push-*和.col-md-pull-*

.show和hidden類可以強制任意元素顯示或隱藏

<768）.visible-xs-*

>=768）.visible-sm-*

>=992）.visible-md-*

>=1200）.visible-lg-*

.visible-*-*類有三種變體，每個針對CSS中不同的display

.visible-*-block

.visible-*-inline

.visible-*-inline-block

<768）.hidden-xs

>=768）.hidden-sm

>=992）.hidden-md

>=1200）.hidden-lg

.pull-left和pull-right

<div class="pull-left"></div><div class="pull-right">

</div>

.navbar-left或.navbar-right

<ul class="nav navbar-nav navbar-left"></ul><ul class="nav navbar-nav navbar-right"></ul>

center-block

.clearfix

543627393 學習哦！