Bootstrap中的排版
- 1. 排版
- 2. 表格
- 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. 图片部分:
- 5. 辅助类
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>
运行结果: