一. 表格
1. 基本表格
为任意 <table>
标签添加 .table
类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<!-- 基础表格 -->
<h2>基础表格</h2>
<table class="table">
<tr>
<td>格1</td>
<td>格2</td>
</tr>
<tr>
<td>格3</td>
<td>格4</td>
</tr>
<tr>
<td>格5</td>
<td>格6</td>
</tr>
</table>
</body>
</html>
效果如下图:
2. 带边框的表格
添加 .table-bordered
类为表格和其中的每个单元格增加边框
<table class="table table-bordered">
...
</table>
效果如下图:
3. 条纹状表格
通过 .table-striped
类可以给表格之内的每一行增加斑马条纹样式
<table class="table table-bordered table-striped">
...
</table>
效果如下图:
4. 鼠标悬停
通过添加 .table-hover
类可以让 <tbody>
中的每一行对鼠标悬停状态作出响应
<table class="table table-bordered table-hover">
...
</table>
效果如下图:
5. 紧缩表格
通过添加 .table-condensed
类可以让表格更加紧凑,单元格中的内补(padding)均会减半
<table class="table table-bordered table-condensed">
...
</table>
效果如下图:
6. 状态类
通过这些状态类可以为行或单元格设置颜色
类 | 描述 |
---|---|
.active | 鼠标悬停在行或单元格上时所设置的颜色 |
.success | 标识成功或积极的动作 |
.info | 标识普通的提示信息或动作 |
.warning | 标识警告或需要用户注意 |
.danger | 标识危险或潜在的带来负面影响的动作 |
7. 响应式表格
将任何 .table
元素包裹在 .table-responsive
元素内,即可创建响应式表格,其会在小屏幕设备上(小于768px)水平滚动。当屏幕大于 768px 宽度时,水平滚动条消失
注意:
使用响应式表格,需用 div 容器包裹 table ,并将 div 容器 使用类名 .table-responsive
<div class="table-responsive">
<table class="table table-condensed table-bordered">
<tr class="active">
<td>这是一条表格内容数据,撑开表格</td>
<td>这是一条表格内容数据,撑开表格</td>
</tr>
<tr class="success">
<td>这是一条表格内容数据,撑开表格</td>
<td>这是一条表格内容数据,撑开表格</td>
</tr>
<tr class="warning">
<td>这是一条表格内容数据,撑开表格</td>
<td>这是一条表格内容数据,撑开表格</td>
</tr>
<tr class="danger">
<td>这是一条表格内容数据,撑开表格</td>
<td>这是一条表格内容数据,撑开表格</td>
</tr>
<tr class="info">
<td>这是一条表格内容数据,撑开表格</td>
<td>这是一条表格内容数据,撑开表格</td>
</tr>
</table>
</div>
效果如下图:
二. 表单
1. 基本实例
单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control
类的 <input>
、<textarea>
和 <select>
元素都将被默认设置宽度属性为 width: 100%;
。 将 label
元素和前面提到的控件包裹在 .form-group
中可以获得最好的排列
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<!-- 基础表单 -->
<div class="container">
<form>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<div class="form-group">
<label for="exampleInputFile">文件传输</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<button class="btn">登录</button>
</form>
</div>
</body>
</html>
效果如下图:
2. 水平排列的表单
通过为表单添加 .form-horizontal
类,并联合使用 Bootstrap 预置的栅格类,可以将 label
标签和控件组水平并排布局。这样做将改变 .form-group
的行为,使其表现为栅格系统中的行(row),因此就无需再额外添加 .row
了
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<script src="./js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="username" class="col-xs-2 control-label">用户名</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="password" class="col-xs-2 control-label">密码</label>
<div class="col-xs-10">
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
</div>
</form>
</div>
</body>
</html>
效果如下图:
3. 内联表单
为 <form>
元素添加 .form-inline
类可使其内容左对齐并且表现为 inline-block
级别的控件。只适用于视口(viewport)至少在 768px 宽度时(视口宽度再小的话就会使表单折叠)。
示例:
<div class="container">
<form class="form-inline">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" class="form-control" id="username" placeholder="请输入用户名">
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="monney" placeholder="请输入充值金额">
<div class="input-group-addon">.00</div>
</div>
</div>
</form>
</div>
效果如下图:
4. 被支持的控件
表单布局实例中展示了其所支持的标准表单控件
4.1 输入框
包括大部分表单控件、文本输入域控件,还支持所有 HTML5 类型的输入控件: text
、password
、datetime
、datetime-local
、date
、month
、time
、week
、number
、email
、url
、search
、tel
和 color
必须添加类型声明,
只有正确设置了
type
属性的输入控件才能被赋予正确的样式。
<input type="text" class="form-control" placeholder="Text input">
<input type="password" class="form-control" placeholder="Password input">
...
4.2 文本域
支持多行文本的表单控件。可根据需要改变 rows
属性来获得高度。如下例中,rows="3"
表示文本区域将显示3行的高度。
<textarea class="form-control" rows="3"></textarea>
4.3 多选
多选框(checkbox)用于选择列表中的一个或多个选项
4.3.1 普通多选框
示例1:
<form class="form-horizontal">
<div class="checkbox">
<label>
<input type="checkbox" value="1">1
</label>
<label>
<input type="checkbox" value="2">2
</label>
</div>
</form>
效果如下图:
4.3.2 创建的禁用状态的复选框
.disabled
类用于将复选框设置为禁用状态。
实例2:
<form class="form-horizontal">
<div class="checkbox disabled">
<label>
<input type="checkbox" value="2" disabled>2
</label>
</div>
</form>
4.4 单选
单选框(radio)用于从多个选项中只选择一个
4.4.1 普通单选框
示例1:
<div class="radio">
<label>
<input type="radio" name="sex" value="male">男
</label>
<label>
<input type="radio" name="sex" value="female">女
</label>
</div>
效果如下图:
4.4.2 默认选中
checked
属性表示该单选按钮默认被选中
示例2:
<div class="radio">
<label>
<input type="radio" name="sex" value="male" checked>男
</label>
<label>
<input type="radio" name="sex" value="female">女
</label>
</div>
效果如下图:
4.4.3 单选禁用
.disabled
类用于将单选按钮设置为禁用状态
示例3:
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>
效果如下图:
5. 表单状态
5.1 焦点状态
我们将某些表单控件的默认 outline
样式移除,然后对 :focus
状态赋予 box-shadow
属性
<div class="form-group">
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
5.2 禁用状态
为输入框设置 disabled
属性可以禁止其与用户有任何交互(焦点、输入等)。被禁用的输入框颜色更浅,并且还添加了 not-allowed
鼠标状态
<div class="form-group">
<div class="col-sm-10">
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
</div>
</div>
5.3 只读状态
为输入框设置 readonly
属性可以禁止用户修改输入框中的内容。处于只读状态的输入框颜色更浅(就像被禁用的输入框一样),但是仍然保留标准的鼠标状态
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>
5.4 校验状态
Bootstrap 对表单控件的校验状态,如 error、warning 和 success 状态,都定义了样式。使用时,添加 .has-warning
、.has-error
或 .has-success
类到这些控件的父元素即可。任何包含在此元素之内的 .control-label
、.form-control
和 .help-block
元素都将接受这些校验状态的样式
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
5.5 控件尺寸
通过 .input-lg
类似的类可以为控件设置高度,通过 .col-lg-*
类似的类可以为控件设置宽度
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
三. 按钮
1. 可作为按钮使用的标签或元素
为 <a>
、<button>
或 <input>
元素添加按钮类(button class)即可使用 Bootstrap 提供的样式
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">
各使用场景:
在Bootstrap中,可以使用不同的标签或元素来创建按钮。下面是对每个示例的详细描述:
<a class="btn btn-default" href="#" role="button">Link</a>
含义:这是一个使用
<a>
标签创建的按钮。它通常用于创建一个链接,但通过添加class="btn btn-default"
和role="button"
属性,使其看起来像一个按钮。适用:这种用法适用于需要将链接样式为按钮的场景,例如导航栏中的链接。
<button class="btn btn-default" type="submit">Button</button>
含义:这是一个使用
<button>
标签创建的按钮。type="submit"
表示该按钮是一个提交按钮,当用户点击它时,会提交表单数据。适用:这种用法适用于需要创建一个具有提交功能的按钮的场景,例如表单中的提交按钮。
<input class="btn btn-default" type="button" value="Input">
含义:这是一个使用
<input>
标签创建的按钮。type="button"
表示该输入框是一个按钮,value="Input"
定义了按钮上显示的文本。适用:这种用法适用于需要创建一个没有特定功能的普通按钮的场景,例如一个简单的操作按钮。
<input class="btn btn-default" type="submit" value="Submit">
含义:这是一个使用
<input>
标签创建的提交按钮。type="submit"
表示该输入框是一个提交按钮,value="Submit"
定义了按钮上显示的文本。适用:这种用法适用于需要创建一个具有提交功能的按钮的场景,例如表单中的提交按钮。
总结起来,根据实际场景的不同,我们可以选择使用
<a>
、<button>
或<input>
元素来创建按钮,具体取决于是否需要特定的功能(如提交表单)以及按钮的样式和行为需求。
2. 预定义样式
使用下面列出的类可以快速创建一个带有预定义样式的按钮
<button type="button" class="btn btn-default">(默认样式)Default</button>
<button type="button" class="btn btn-primary">(首选项)Primary</button>
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-info">(一般信息)Info</button>
<button type="button" class="btn btn-warning">(警告)Warning</button>
<button type="button" class="btn btn-danger">(危险)Danger</button>
<button type="button" class="btn btn-link">(链接)Link</button>
效果如下图:
3. 尺寸
需要让按钮具有不同尺寸吗?使用 .btn-lg
、.btn-sm
或 .btn-xs
就可以获得不同尺寸的按钮
<p>
<button class="btn btn-primary btn-lg">(大按钮)Large button</button>
<button class="btn btn-default btn-lg">(大按钮)Large button</button>
</p>
<p>
<button class="btn btn-primary">(默认尺寸)Default button</button>
<button class="btn btn-default">(默认尺寸)Default button</button>
</p>
<p>
<button class="btn btn-primary btn-sm">(小按钮)Small button</button>
<button class="btn btn-default btn-sm">(小按钮)Small button</button>
</p>
<p>
<button class="btn btn-primary btn-xs">(超小尺寸)Extra small button</button>
<button class="btn btn-default btn-xs">(超小尺寸)Extra small button</button>
</p>
效果如下图:
通过给按钮添加 .btn-block
类可以将其拉伸至父元素100%的宽度,而且按钮也变为了块级(block)元素
<button type="button" class="btn btn-primary btn-lg btn-block">(块级元素)Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">(块级元素)Block level button</button>
效果如下图:
4. 禁用状态
通过为按钮的背景设置 opacity
属性就可以呈现出无法点击的效果
为 <button>
元素添加 disabled
属性,使其表现出禁用状态
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg"disabled="disabled">Button</button>
效果如下图:
四. 图片
1. 响应式图片
在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive
类可以让图片支持响应式布局。其本质是为图片设置了 max-width: 100%;
、 height: auto;
和 display: block;
属性,从而让图片在其父元素中更好的缩放
<div class="container">
<img src="./img/bg1.jpg" class="img-responsive" alt="风景">
</div>
效果如下图:
2. 图片形状
通过为 <img>
元素添加以下相应的类,可以让图片呈现不同的形状
跨浏览器兼容性
请时刻牢记:Internet Explorer 8 不支持 CSS3 中的圆角属性。
<div class="container">
<img src="./img/bg2.jpg" class="img-rounded" alt="风景">
<img src="./img/bg2.jpg" class="img-circle" alt="风景">
<img src="./img/bg2.jpg" class="img-thumbnail" alt="风景">
</div>
效果如下图:
五. 辅助类
该包含了以下内容:
-
情境文本颜色:使用不同的类名来设置文本的颜色。例如,
text-muted
、text-primary
、text-success
等。这些类属于Bootstrap的文本样式部分。 -
背景色:使用不同的类名来设置元素的背景颜色。例如,
bg-primary
、bg-success
、bg-info
等。这些类同样属于Bootstrap的样式部分。 -
关闭按钮:使用
close
类创建一个关闭按钮,并使用aria-label
和aria-hidden
属性提供辅助功能。这个类属于Bootstrap的组件部分。 -
三角符号:使用
caret
类创建一个向下的三角符号。这个类也属于Bootstrap的组件部分。
1. 情境文本颜色
通过颜色来展示意图,Bootstrap 提供了一组工具类。这些类可以应用于链接,并且在鼠标经过时颜色可以还可以加深,就像默认的链接一样
<p class="text-muted">hello world!</p>
<p class="text-primary">hello world!</p>
<p class="text-success">hello world!</p>
<p class="text-info">hello world!</p>
<p class="text-warning">hello world!</p>
<p class="text-danger">hello world!</p>
<p class="text-dark">hello world!</p>
效果如下图:
2. 情境背景色
和情境文本颜色类一样,使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深,就像上面所讲的情境文本颜色类一样
<p class="bg-primary">hello world!</p>
<p class="bg-success">hello world!</p>
<p class="bg-info">hello world!</p>
<p class="bg-warning">hello world!</p>
<p class="bg-danger">hello world!</p>
效果如下图:
3. 关闭按钮
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
4. 三角符号
<span class="caret"></span>