Bootstrap中的排版
- 1. 排版
-
- 标题部分
- 文本部分
-
- 对齐
-
- .text-left ：文字左对齐
- .text-center ：文字居中对齐
- .text-right ：文字右对齐
- .text-lowercase ：字母小写
- .text-uppercase ：字母大写
- .text-capitalize ：首字母大写
- 2. 表格
-
- .table ：普通表格
- .table-bordered ：带边框表格
- .table-striped ：条纹状表格
- .table-hover ：悬停变色
- .table-condensed ：紧凑风格
- 行颜色
-
- .danger 红色
- .warning 黄色
- .info 蓝色
- .success 绿色
- .active 灰色(鼠标悬停时的颜色)
- 3. 表单
-
- .form-control ：默认设置宽度属性为 width：100%，input/select/textarea
- .form-group：一般设置在div中，将一个div作为一个组件，包裹其他元素，获得很好的排列
- .checkbox：设置复选框样式
- .form-inline ：使表单元素水平排列，变为内联元素
- .input-lg ： 大输入框
- .input-sm： 小输入框
- .sr-only ：隐藏不想显示的元素
- .control-label和.has-success ：改变label和组件的状态
- button部分：
-
- .btn：button普通类型，灰色
- .btn-default： 默认button，白色
- .btn-info：信息button，天蓝色
- .btn-warning：警告button，黄色
- .btn-success：成功button，绿色
- .btn-primary：主要button，推荐button，深蓝色
- .btn-danger：红色
- .btn-lg：大button
- .btn-sm：小button
- .btn-xs：超级小button
- .active：使按钮变成点击状态
- .disabled：使按钮变成无法点击的样式（实际可以点击，禁用button可以直接设置disabled属性）
- .block：使button变成块状button
- .btn-link：使button变成链接样式
- 给a标签加入button样式变为button，但是如果a标签被作为按钮使用，并用于在当前页面触发某些功能（不是用作传统标签的链接其他页面或者当前页面的某些部分），那么需要将a表情设置role="button"属性
- 4. 图片部分：
-
- .img-rounded：圆角
- .img-circle：圆形
- .img-thumbnail：带有边框的圆角图形
- .img-responsive 响应式图片
- .center-block 响应式图片水平居中
- 5. 辅助类
-
- 文本颜色
- 背景颜色
- 关闭按钮 .close
- 三角符号 .caret
- 元素浮动
-
- .pull-left：元素浮动到左边
- .pull-right：元素浮动到右边
- .center-block：设置元素为块级元素并居中显示
- .clearfix : 清除浮动
1. 排版
标题部分
标题： .h1 ~ .h6 / h1 ~ h6
类h1（.h1）和类h6是为了给内联元素赋值标题样式
副标题：（small）
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 </title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h1>一级标题<small>我是小标题</small></h1>
<h2>二级标题<small>我是小标题</small></h2>
<span class="h1">内联标题一<small>我是小标题</small></span>
<span class="h2">内联标题二<small>我是小标题</small></span>
</body>
</html>
运行结果:
文本部分
- bootstarp对p标签进行初始定义:
默认: 14px;
行高: 20px;
底部外边距: 10px;
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 地址</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p><mark>Bootstrap，</mark>来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。</p>
<p>本教程将向您讲解 Bootstrap 框架的基础，<del>通过学习这些内容</del>，您将可以轻松地创建 Web 项目。教程被分为 Bootstrap 基本结构、Bootstrap CSS、Bootstrap 布局组件和 Bootstrap 插件几个部分。每个部分都包含了与该主题相关的简单有用的实例。</p>
</body>
</html>
运行结果:
标记标签 : < mark>
删除线: < del>
下划线: < ins>或< u>
对齐
.text-left ：文字左对齐
.text-center ：文字居中对齐
.text-right ：文字右对齐
.text-lowercase ：字母小写
.text-uppercase ：字母大写
.text-capitalize ：首字母大写
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<p class="text-left">Bootstrap</p>
<p class="text-center">Bootstrap</p>
<p class="text-right">Bootstrap</p>
<p class="text-lowercase">Bootstrap</p>
<p class="text-uppercase">Bootstrap</p>
<p class="text-capitalize">Bootstrap</p>
</body>
</html>
运行结果：
2. 表格
.table ：普通表格
.table-bordered ：带边框表格
.table-striped ：条纹状表格
.table-hover ：悬停变色
.table-condensed ：紧凑风格
实例：
(1) .table类
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本的表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名字</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tom</td>
<td>New York</td>
</tr>
<tr>
<td>Simmon</td>
<td>London</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:
(2) .table-bordered+ .table 边框
<table class="table table-bordered">
<!--> 省略内容... 同上 <-->
</table>
运行结果：
(3).table-bordered+ .table + .table-striped 边框+条纹状
<table class="table table-bordered table-striped">
<!--> 省略内容... 同上 <-->
</table>
运行结果：
(4) .table-hover 鼠标悬浮行上, 行变色
<table class="table table-bordered table-striped table-hover">
...
</table>
运行结果:
如果想要修改悬浮的颜色，在css中加入如下代码：
.table-hover > tbody > tr:hover > th {background-color: #1BA0B2;}
(5).table-condensed 紧凑型表格 +.table-bordered+.table
<table class="table table-bordered table-condensed">
...
</table>
行颜色
.danger 红色
.warning 黄色
.info 蓝色
.success 绿色
.active 灰色(鼠标悬停时的颜色)
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 - 基本的表格</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<table class="table table-bordered table-condensed">
<caption>基本的表格布局</caption>
<thead>
<tr>
<th>名字</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td>Tom</td>
<td>New York</td>
</tr>
<tr class="warning">
<td>Simmon</td>
<td>London</td>
</tr>
<tr class="info">
<td>Linda</td>
<td>Rome</td>
</tr>
<tr class="success">
<td>Michael</td>
<td>Australia</td>
</tr>
<tr class="active">
<td>Michael</td>
<td>Australia</td>
</tr>
<tr>
<td>Jessica</td>
<td>Colorado</td>
</tr>
</tbody>
</table>
</body>
</html>
运行结果:
3. 表单
.form-control ：默认设置宽度属性为 width：100%，input/select/textarea
.form-group：一般设置在div中，将一个div作为一个组件，包裹其他元素，获得很好的排列
.checkbox：设置复选框样式
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 -表单</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<div class="form-group">
<label for="input1">这是一个输入框：</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="select1">这是一个下拉框：</label>
<select id="select1" class="form-control">
<option>北京</option>
<option>上海</option>
<option>沈阳</option>
<option>深圳</option>
<option>广州</option>
</select>
</div>
<div class="form-group">
<label for="textarea1">这是一个文本框：</label>
<textarea id="textarea1" class="form-control">
</textarea>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
</form>
</body>
</html>
运行结果：
.form-inline ：使表单元素水平排列，变为内联元素
<form class="form-inline">
... 同上
</form>
运行结果：
.input-lg ： 大输入框
.input-sm： 小输入框
<div class="form-group">
<label for="input2">这是一个大输入框：</label>
<input type="text" class="form-control input-lg" id="input2">
</div>
<div class="form-group">
<label for="input1">这是一个普通输入框：</label>
<input type="text" class="form-control" id="input1">
</div>
<div class="form-group">
<label for="input3">这是一个小输入框：</label>
<input type="text" class="form-control input-sm" id="input3">
</div>
运行结果：
.sr-only ：隐藏不想显示的元素
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
实例：
<div class="form-group">
<label for="input2" class="sr-only">这是一个大输入框：</label>
<input type="text" class="form-control input-lg " id="input2">
</div>
<div class="form-group">
<label for="input1">这是一个普通输入框：</label>
<input type="text" class="form-control" id="input1">
</div>
运行结果： 大输入框的label消失
.control-label和.has-success ：改变label和组件的状态
<div class="form-group has-success">
<label for="input2" class="control-label">这是一个大输入框：</label>
<input type="text" class="form-control input-lg" id="input2">
</div>
运行结果：整个组件变成sucess状态
同理还有has-error/has-warning等等…
button部分：
.btn：button普通类型，灰色
.btn-default： 默认button，白色
.btn-info：信息button，天蓝色
.btn-warning：警告button，黄色
.btn-success：成功button，绿色
.btn-primary：主要button，推荐button，深蓝色
.btn-danger：红色
.btn-lg：大button
.btn-sm：小button
.btn-xs：超级小button
.active：使按钮变成点击状态
.disabled：使按钮变成无法点击的样式（实际可以点击，禁用button可以直接设置disabled属性）
.block：使button变成块状button
.btn-link：使button变成链接样式
给a标签加入button样式变为button，但是如果a标签被作为按钮使用，并用于在当前页面触发某些功能（不是用作传统标签的链接其他页面或者当前页面的某些部分），那么需要将a表情设置role="button"属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 实例 -button</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<form>
<button>这是普通button</button>
<button class="btn">这是btn-button</button>
<button class="btn btn-default">这是default-button</button>
<button class="btn btn-info">这是info-button</button>
<button class="btn btn-warning">这是warning-button</button>
<button class="btn btn-success">这是success-button</button>
<button class="btn btn-primary">这是一个button</button>
<button class="btn btn-danger">这是一个button</button>
<hr>
<button class="btn btn-lg">这是lg-button</button>
<button class="btn btn-sm">这是sm-button</button>
<button class="btn btn-xs">这是xs-button</button>
<hr>
<button class="btn btn-active">这是active-button</button>
<button class="btn btn-disabled">这是disabled-button</button>
<button class="btn btn-block">这是block-button</button>
<hr>
<a class="btn btn-default" href="#" role="button">这是个a标签</a>
<button class="btn btn-link">这是个button</button>
</form>
</body>
</html>
运行结果：
4. 图片部分：
.img-rounded：圆角
.img-circle：圆形
.img-thumbnail：带有边框的圆角图形
实例:
<img src="/wp-content/uploads/2014/06/download.png" class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png" class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png" class="img-thumbnail">
运行结果：
.img-responsive 响应式图片
实质是为图片设置：
max-width:100%;
height:auto;
display:block;
.center-block 响应式图片水平居中
5. 辅助类
文本颜色
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bootstrap 文本颜色</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p class="text-muted">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
<p class="text-primary">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
<p class="text-info">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
<p class="text-success">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
<p class="text-warning">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
<p class="text-danger">通过颜色来展示意图，Bootstrap 提供了一组工具类。这些类可以应用于链接，并且在鼠标经过时颜色可以还可以加深，就像默认的链接一样。</p>
</div>
</body>
</html>
运行结果：
背景颜色
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 背景颜色</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p class="bg-primary">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
<p class="bg-success">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
<p class="bg-info">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
<p class="bg-danger">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
<p class="bg-warning">和情境文本颜色类一样，使用任意情境背景色类就可以设置元素的背景。链接组件在鼠标经过时颜色会加深，就像上面所讲的情境文本颜色类一样。</p>
</div>
</body>
</html>
运行结果：
关闭按钮 .close
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
通过使用一个象征关闭的图标，可以让模态框和警告框消失。
运行结果:
三角符号 .caret
<span class="caret"></span>
运行结果: