bootstrap基本布局

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

想要学习前端开发的同窗，能够加群：

543#6273#93 学习哦！