栅格系统的工作原理
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局。
Bootstrap 需要为页面内容和栅格系统包裹一个.container 容器
下面是创建一个响应式行的实例:
<div class="container">
<div class="row"> ... </div>
</div>
我们可以来看看 Bootstrap 栅格系统是如何工作的:
行必须包含在 .container 中,以便获得适当的对齐(alignment)和内边距(padding)
在行(.row)中可以添加列(.column),但列数之和不能超过平分的总列数,比如12。
内容应当放置于列内,并且只有列可以作为行的直接子元素。
列通过内边距(padding)来创建列与列之间的间隙。通过 .rows 上的外边距(margin)取负,从而抵消掉为 .container 元素设置的 padding,也就间接为行所包含的列抵消掉了padding。
栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如,三个等宽的列可以使用三个 .col-xs-4 来创建。
如果一行中包含了的列大于 12,多余的列所在的元素将被作为一个整体另起一行排列。
为了在中屏幕上使用偏移,可以使用 .col-md-offset-* 类。例如 .col-md-offset-4 表示该列向右移动4个列的宽度。
下面是 Bootstrap 栅格的基本结构:
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">...</div>
</div>
嵌套列
Bootstrap 框架的栅格系统还支持列的嵌套。
为了在某一列里嵌套内置的栅格系统,你可以在一个列中添加一个或者多个行( row )容器,然后在这个行容器中插入列。
如下:
注:被嵌套的行包含的列的个数不能超过12(不要求我们使用所有12个可用列)
列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列的顺序。push 向右移动,pull 向左移动,下面是具体实例:
<div class="container">
<div class="row">
<div class="col-md-9 col-md-push-3">9</div>
<div class="col-md-3 col-md-pull-9">3</div>
</div>
</div>
Bootstrap 使用响应式栅格系统,可以轻松地将元素放入行中并指定每个元素的相对宽度。 Bootstrap 的大部分类都可以应用于 div 元素。
col-md-* 这个类 ,这里的 md 表示中等, * 是一个数字,指定了元素应该占多少列宽。
现在我们使用 col-xs-* 这个类对按钮进行重新布局, xs 跟 md 不同, xs 是指一个屏幕宽度较小的设备,比如手机屏幕之类的。
Bootstrap 表单
Bootstrap 通过一些简单的 HTML 标签和扩展的类即可创建出不同样式的表单。
Bootstrap 提供了下列类型的表单布局:
垂直表单(默认)
内联表单
水平表单
表单中常见的元素主要包括:文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。
其中每个控件所起的作用都各不相同,而且不同的浏览器对表单控件渲染的风格都各有不同。
基本表单
基本的表单结构是 Bootstrap 自带的,单独的表单控件会被自动赋予一些全局样式。
所有设置了.form-control类的 input 、textarea 和 select 元素都将被默认设置宽度属性为 width: 100%; 。
将label元素和前面提到的控件包裹在.form-group中可以获得最好的排列。
以下是基本表单实例:
<form >
<div class="form-group">
<label >邮箱:</label>
<input type="email" class="form-control input-lg" placeholder="请输入您的邮箱地址">
</div>
<div class="form-group">
<label >密码:</label>
<input type="password" class="form-control" placeholder="请输入您的邮箱密码">
</div>
</form>
注:
只有正确设置了输入框 input 的 type 类型,才能被赋予正确的样式。
通过 .input-lg 类似的类可以为控件设置高度
为了让控件在各种表单风格中样式不出错,需要添加类名form-control
内联表单
有时候我们需要将表单的控件都在一行内显示,我们只需要在 form 元素中添加类名 form-inline 即可(代码与基本表单一节中的代码一样)。
<form class="form-inline">
如果没有为每个输入控件设置 label 标签,屏幕阅读器将无法正确识别。我们可以通过为 label 设置 .sr-only 类将其隐藏。
水平表单
Bootstrap 框架默认的表单是垂直显示风格,但很多时候我们需要的水平表单风格(标签居左,表单控件居右)
如需实现一个水平布局的表单,必须满足以下两个条件:
form 元素添加 .form-horizontal 类。
配合 Bootstrap 框架的网格系统。
让表单内的元素保持水平排列:
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<textarea class="form-control" rows="2">请输入您的邮件内容</textarea>
</div>
</div>
</form>
注:当需要进行多行输入的时,则可以使用文本框 textarea。
必要时可以改变 rows 属性(较少的行 = 较小的盒子,较多的行 = 较大的盒子)
control-label 表示和父元素样式同步。
支持的表单控件
Bootstrap 支持的常见表单控件,主要是input、textarea、checkbox、radio和select等。
- 复选框和单选框
如果想让用户从列表中选择若干个选项时,请使用 checkbox。
如果限制用户只能选择一个选项,请使用radio。
下面来看一下复选框和单选框的具体用法:
1) 设置复选框
<div class="checkbox">
<label> <input type="checkbox">编程</label>
</div>
禁用的复选框:
<div class="checkbox disabled">
<label> <input type="checkbox" disabled> bootstrap </label>
</div>
内联一行显示的复选框:
<label class="checkbox-inline"> <input type="checkbox">体育</label>
<label class="checkbox-inline disabled"> <input type="checkbox" disabled>音乐</label>
2) 设置单选框
<div class="radio">
<label> <input type="radio" name="selection" >是</label>
<label> <input type="radio" name="selection" >否</label>
</div>
- 下拉列表
设置下拉列表:
<select class="form-control">
<option>1</option>
...
</select>
校验状态
校验状态
Bootstrap 包含了错误、警告和成功消息的验证样式。
只需要对父元素简单地添加适当的类(.has-warning、 .has-error或 .has-success)即可使用验证状态。
<!--设置为警告状态-->
<div class="form-group has-warning">
<!--设置为错误状态-->
<div class="form-group has-error">
<!--设置为成功状态-->
<div class="form-group has-success">
label 标签同步相应状态
<label class="control-label">Input with success</label>
具体代码:
<div class="form-group has-success">
<label class="col-sm-2 control-label" >
输入成功
</label>
<div class="col-sm-10">
<input type="text" class="form-control" >
</div>
</div>
图片
Bootstrap 提供了三个可对图片应用简单样式的类:
.img-rounded:添加 border-radius:6px 来获得图片圆角。
.img-circle:添加 border-radius:50% 来让整个图片变成圆形。
.img-thumbnail:添加一些内边距(padding)和一个灰色的边框。
实例如下:
<img src="img/1.png" class="img-rounded">
<img src="img/2.png" class="img-circle">
<img src="img/3.png" class="img-thumbnail">
#图片居中使用 img-block类
.img-responsive:响应式图片,主要针对于响应式设计
辅助类(一)
Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置、显示关闭图标等等。
1.情境文本颜色
以下不同的类展示了不同的文本颜色:
例如:
<p class="text-warning">注意!!!!</p>
2.情境背景色
以下不同的类展示了不同的背景颜色:
例如:
<p class="bg-info">这是一条信息</p>
3.关闭按钮
使用通用的关闭图标来关闭模态框和警告框(将在插件一章详细讲解)。
<button type="button" class="close">×</button>
辅助类(二)
1.三角符号
通过使用三角符号可以指示某个元素具有下拉菜单的功能:
<span class="caret"></span>
2.快速浮动
这个浮动其实就是 float,只不过使用了 !important 加强了优先级。
<div class="pull-left">左边</div>
<div class="pull-right">右边</div>
3.块级居中
<div class="center-block">居中</div>
注:就是 margin:x auto;并且设置了 display:block;。
4.清理浮动
<div class="clearfix"></div>
注:这个 div 可以放在需要清理浮动区块的前面即可。
5.显示和隐藏
强制任意元素显示或隐藏(对于屏幕阅读器也能起效):
<div class="show">show</div>
<div class="hidden">hidden</div>
响应式工具
在媒体查询时,针对不同的屏幕大小,有时需要显示和隐藏部分内容。
响应式工具类,就提供了这种解决方案:
超小屏幕激活显示
<div class="visible-xs-block">Bootstrap</div>
超小屏幕激活隐藏
<div class="hidden-xs">Bootstrap</div>
注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。
打印类
下表列出了打印类。使用下面的类可以针对打印机隐藏或显示某些内容
有一个元素,需要在PC端显示而在手机端隐藏,需要使用的方法是?
visible-md-8 hidden-xs