1:引入BootStrap的结构
<!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">
</head>
<body>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
2:基本模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>你好,世界!</h1>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
3:流体容器(.container-fluid)
- 流体容器会随着页面窗口的大小变化而变化,其宽度始终占据整个屏幕的宽度。
- 流体容器相当于width=100%
<!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">
<style>
.container-fluid {
background-color: aqua;
}
</style>
</head>
<body>
<div class="container-fluid">
test
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
4:固定容器(.container)
- 固定容器的宽度是固定的,不会随屏幕大小的变化而变化。
- 固定容器是有三个阈值的,如下图所示(当屏幕宽度大于等于1200px的时候,容器的宽度为1170px)
![](https://i-blog.csdnimg.cn/blog_migrate/85d6317319003c74e2dc1c0ebd6ddce2.png)
![](https://i-blog.csdnimg.cn/blog_migrate/24fdd86ad1b2dce85fa6d213cda099fa.png)
5:栅格系统
<!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">
<style>
.container {
background-color: aqua;
}
div[class |= col] {
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-10">col-lg-10</div>
<div class="col-lg-2">col-lg-2</div>
</div>
<div class="row">
<div class="col-lg-2">col-lg-2</div>
<div class="col-lg-10">col-lg-10</div>
</div>
<div class="row">
<div class="col-lg-6">col-lg-6</div>
<div class="col-lg-6">col-lg-6</div>
</div>
</div>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
</body>
</html>
5.1 效果
![](https://i-blog.csdnimg.cn/blog_migrate/3121cd667978bfb61fa480bf314b4d1f.png)
5.2 列的阈值划分(lg,md,sm,xs的含义)
![](https://i-blog.csdnimg.cn/blog_migrate/cf1d94bb5c70f6302c8fb79278abcd8d.png)
5.3 被两个列控制
![](https://i-blog.csdnimg.cn/blog_migrate/ef7e75d20b14491e11a6dec96dba5ac8.png)
当屏幕处于lg的时候是10列,2列分布
当屏幕处于md大小的时候,是6列,6列平分。
![](https://i-blog.csdnimg.cn/blog_migrate/5efc00e4edeca8c6da736fe409a13ef1.png)
当屏幕处于sm的状态时,第一个占6列,第二个占6列,第二个之所以占6列,是因为第二个col-xs-6向上兼容。
5.4 列偏移
- 向右偏移一列。
![](https://i-blog.csdnimg.cn/blog_migrate/e4c11742883bdf625cb2998678210b70.png)
6:标题标签
- 给类名添加.h1到.h6,实现下面的效果
![](https://i-blog.csdnimg.cn/blog_migrate/b24e1a0a4f46c47b20c405e9f25c9926.png)
7:常用标签
7.1 对齐
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>
![](https://i-blog.csdnimg.cn/blog_migrate/bb4f36728a4cd54f2fdbf82e4be36b16.png)
7.2 改变大小写
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>
7.3 常用标签查询网址
https://v3.bootcss.com/css/#overview
8:表格(table)
<div class="container table-responsive">
<table class="table table-bordered table-striped table-hover ">
<tr class="success">
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
<tr>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
<td>表格内容</td>
</tr>
</table>
</div>
8.1 把表格变成响应式表格
- 通过给container所在的div添加table-responsive
9:按钮
- 参考网址
- 添加类名 btn-block 会让按钮占一整行
- 通过类名active使得按钮处于激活状态(被按的情况)
- 添加类名 disabled 使得按钮处于禁用状态
9.1 按钮模板
<div class="container">
<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">
<button type="button" class="btn btn-success">(成功)Success</button>
<button type="button" class="btn btn-primary btn-block btn-lg">(大按钮)Large button</button>
<button type="button" class="btn btn-success btn-lg">(大按钮)Large button</button>
<button class="btn btn-success btn-block btn-md">充满容器</button>
<button class="btn btn-success btn-block btn-md active">充满容器</button>
<button class="btn btn-success btn-block btn-md disabled">充满容器</button>
</div>
9.2 模板效果
![](https://i-blog.csdnimg.cn/blog_migrate/2eafbf310ec957e1bdc94a77548cf718.png)
10:图片
类名 |
作用 |
img-responsive |
使图片支持响应式布局 |
center-block |
让图片居中 |
img-rounded |
使图片表现为圆角矩形 |
img-circle |
使图片表现为圆形 |
img-thumbnail |
让图片表现为带相册框的矩形 |
10.1 示例代码
<div class="container">
<img src="images/01-242x200.jpg" class="img-responsive center-block img-rounded">
<img src="images/01-242x200.jpg" class="img-responsive center-block img-circle">
<img src="images/01-242x200.jpg" class="img-responsive center-block img-thumbnail">
</div>
10.2 效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/938903803d6136c1b8f54d5d1d7c7e82.png)
11:辅助类
11.1 关闭符号
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>
11.2 三角符号
<span class="caret"></span>
11.3 快速浮动
类名 |
作用 |
pull-left |
快速左浮动 |
pull-right |
快速右浮动 |
11.4 让内容块居中
类名 |
作用 |
center-block |
内容块居中 |
text-center |
让div中的文本居中 |
11.5 清除浮动
类名 |
作用 |
clearfix (这个类名是给父元素添加的) |
清除浮动 |
12:响应式工具
12.1 隐藏或显示内容
- 通过添加如下类名,实现隐藏或显示内容(带星号的不要用)
![](https://i-blog.csdnimg.cn/blog_migrate/16c5f227c7943f145de89ea3ed96f905.png)
13:缩略图
13.1 仿BootStrap官网缩略图源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
.thumbnail h3 {
color: #337ab7;
}
.thumbnail small {
font-size: 65%;
text-align: center;
line-height: 1;
font-weight: 400;
}
.thumbnail p {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<img src="images/BootStrap网站实例.png" alt="...">
<div class="caption">
<h3 class="text-center">优站精选<br>
<small> Bootstrap 网站实例</small></h3>
<p>Bootstrap 优站精选频道收集了众多基于 Bootstrap 构建、设计精美的、有创意的网站。</p>
</div>
</div>