栅格系统的工作原理

栅格系统用于通过一系列的行(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等。

  1. 复选框和单选框

如果想让用户从列表中选择若干个选项时,请使用 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>
  1. 下拉列表

设置下拉列表:

<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

最后修改:2022 年 12 月 05 日
如果觉得我的文章对你有用,请随意赞赏