BootStrap是基于HTML，CSS，JavaScript开发的前端框架，效果很彪悍。
环境搭建
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js" ></script>
<script src="js/bootstrap.min.js"></script>
</head>
</html>
注意引入的顺序
全局样式
BootStrap提供了大量的全局样式，基本的HTML元素均可以通过class设置样式并得到增强效果。
标题
class="h1~h6"
<small>小标题</small>
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js" ></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<%--传统的方式--%>
<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
<%--BootStrap提供的class样式--%>
<span class="h1">标题1<small>小标题</small></span>
<span class="h2">标题2</span>
<span class="h3">标题3</span>
<span class="h4">标题4</span>
<span class="h5">标题5</span>
<span class="h6">标题6</span>
</body>
</html>
效果
文本段落
BootStrap中的P标签
默认文字大小：14px
行高：20px
底部外边距：10px
文本内容的对齐方式
class="text-left"
class="text-center"
class="text-right"
文本大小写转换
class="text-lowercase"
class="text-uppercase"
class="text-capitalize"
文本标记
<mark>使文字底部有黄线</mark>
<del>删除线</del>
<ins>下划线</ins>
<strong>加粗加重</strong>
<small>文本缩小显示</small>
<body>
<p class="text-right">
一袭白袍的陈平安“忘我”出拳，格外行云流水。<br>
不再是窑工学徒拉坯，处处古板匠气如楷书，已如大家风流之行书。<br>
<small>其中精髓，唯有吃得住苦、抓得住福而已。</small>
</p>
<p class="text-center">
<mark>一袭白袍</mark>的陈平安<del>“忘我”</del>出拳，格外行云流水。<br>
不再是<ins>窑工学徒拉坯</ins>，处处古板匠气如楷书，已如大家风流之行书。<br>
<strong>其中精髓，唯有吃得住苦、抓得住福而已。</strong>
</p>
<p class="text-left text-uppercase" >
Accept what was and what is,
and you’ll have more positive energy to pursue what will be.
</p>
</body>
效果
表格
<table class="table table-striped table-bordered table-hover text-center">
table：默认将表格样式铺满屏幕
table-striped：斑马线效果
table-bordered：表格边框
table-hover：鼠标经过变色
行样式
<tr class="danger">
<tr class="info">
<tr class="active">
<tr class="warning">
<tr class="success">
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.table {
width: 50%;
margin: 0 auto;
margin-top: 10px;
}
</style>
</head>
<body>
<table class="table table-striped table-bordered table-hover text-center">
<thead>
<tr>
<td>标题1</td>
<td>标题2</td>
<td>标题3</td>
<td>标题4</td>
<td>标题5</td>
</tr>
</thead>
<tbody>
<tr>
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="danger">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="info">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="active">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="warning">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
<tr class="success">
<td>内容1</td>
<td>内容2</td>
<td>内容3</td>
<td>内容4</td>
<td>内容5</td>
</tr>
</tbody>
</table>
</body>
</html>
效果
表单
输入框
BootStrap主张将相同组的控件统一放到一个div中方便管理
提供了form-group
<div class="form-group has-error">
<label class="control-label">用户名：</label>
<input type="text" class="form-control input-sm" placeholder="用户名">
</div>
class="form-control input-sm input-lg"
可以作用在文本域，select
form-control：输入框会编程圆角，有蓝色选中状态
input-sm：让输入框变得更大
input-lg：更小
让表单内容横向显示
<form class="form-inline">
</form>
<label class="sr-only">：隐藏label
<body>
<form class="form-inline">
<div class="form-group has-error">
<label class="control-label">用户名：</label>
<input type="text" class="form-control input-sm" placeholder="用户名">
</div>
<div class="form-group">
<label class="sr-only">选项</label>
<select class="form-control">
<option>选项一</option>
<option>选项二</option>
<option>选项三</option>
</select>
</div>
<div class="form-group">
<label>具体信息</label>
<textarea class="form-control"></textarea>
</div>
</form>
</body>
效果
Button
<input type="button" class="btn btn-default active" value="DemoButton">
active：按钮激活
disabled：按钮禁用
btn-default：按钮默认样式
btn-info：信息按钮
btn-warning：警告按钮
btn-success：成功按钮
btn-danger：危险按钮
btn-link：链接按钮
<a class="btn btn-info">测试</a>
<form class="form-inline">
<input type="button"
class="btn btn-default active" value="Default"
style="margin: 10px 10px">
<input type="button" class="btn btn-info disabled" value="Info">
<input type="button" class="btn btn-warning" value="Warning">
<input type="button" class="btn btn-success" value="Success">
<input type="button" class="btn btn-danger " value="Danger">
<input type="button" class="btn btn-link" value="Link">
<a class="btn btn-info">测试</a>
</form>
效果
响应式设计
ViewPort
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
</head>
width：控制 viewport 的大小，可以指定的一个值，如 600。
也可以指定特殊的值，如 device-width：设备的宽度。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次加载的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
栅格布局
当屏幕到达预设宽度时，改变屏幕的显示
1.传统方式
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.test {
width: 300px;
height: 200px;
background: red;
}
当屏幕宽度小于900时显示
@media screen and (max-width: 900px) {
.test {
width: 100%;
height: 100px;
background: blue;
}
}
</style>
</head>
<body>
<div class="test"></div>
</body>
2. BootStrap
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.test {
height: 300px;
background: red;
}
</style>
</head>
<body>
<div class="test col-lg-3 col-sm-2"></div>
</body>
col-lg-3：大屏的时候占三分之一
col-sm-2：小屏的时候占二分之一
BootStrap组件
字体图标
BootStrap提供了许多字体图标用以使用
<body>
<button class="btn btn-info" style="margin: 10px 10px">
<span class="glyphicon glyphicon-star"></span>
Info Button
</button>
</body>
下拉菜单
<body>
<div class="dropdown" style="margin: 10px 10px;">
<button class="btn btn-info" data-toggle="dropdown">
下拉按钮
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="https://wwww.baidu.com">百度</a>
</li>
<li>
<a href="https://wwww.google.com">Google</a>
</li>
</ul>
</div>
</body>
data-toggle="dropdown"：用来关联下拉列表
控件组
<body>
<div class="input-group form-group" style="margin: 10px 10px;">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
</div>
</body>
导航
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
</ul>
<ul class="nav nav-pills" style="margin-top: 20px">
<li class="active"><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
</ul>
<ul class="nav nav-pills nav-stacked" >
<li class="active"><a href="">导航1</a></li>
<li><a href="">导航2</a></li>
<li><a href="">导航3</a></li>
</ul>
</body>
<ul class="nav nav-tabs">：一般导航样式
<ul class="nav nav-pills">：胶囊导航样式
<ul class="nav nav-pills nav-stacked" >：垂直导航栏
分页
<body>
<nav>
<ul class="pagination">
<li class="active">
<a href="">1 </a>
</li>
<li>
<a href="">2</a>
</li>
<li>
<a href="">3</a>
</li>
</ul>
</nav>
</body>
进度条
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
body{
margin: 10px;
}
.progress{
width: 15%;
}
</style>
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-danger progress-bar-striped"
style="width: 60%">
60%
</div>
</div>
</body>
列表
<body>
<ul class="list-group">
<li class="list-group-item active">
Item1
<span class="badge">20</span>
</li>
<li class="list-group-item">
Item2
<span class="badge">17</span>
</li>
<li class="list-group-item">
Item3
<span class="badge">15</span>
</li>
</ul>
</body>
面板
<body>
<div class="panel panel-default">
<div class="panel-heading">
弹出层
</div>
<div class="panel-body">
内容
</div>
<div class="panel-footer">
脚注
</div>
</div>
</body>
网友评论