Bootstrap
是twitter公司推出的，专门用于开发响应式布局、移动设备优先的 WEB 框架。
Bootstrap3和4的区别：
1. CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS
2. 格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅
3. 使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位
4. 内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用flexbox布局
Bootstrap3模板：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<!--可以让部分国产浏览器默认采用高速模式渲染页面-->
<meta name="renderer" content="webkit">
<!--为了让 IE 浏览器运行最新的渲染模式下-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自己网页的标题</title>
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<!--导入respond.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用媒体查询-->
<!--导入html5shiv.js文件的目的, 是为了能够在IE8以及IE8以下的浏览器中使用H5新增的标签-->
<!--
[if xxx] ![endif]这个是IE中的条件注释, 只有在IE浏览器下才会执行
以下代码的含义: 如果当前是IE9以下的浏览器, 那么就导入以下的两个JS文件
-->
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.js"></script>
<![endif]-->
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-1.12.4.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
Bootstrap4模板
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>自己网页的标题</title>
</head>
<body>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
容器container和container-fluid
在Bootstrap中容器是响应式布局的基础, Bootstrap推荐将所有内容都定义在容器之中，并且容器是启用Bootstrap栅格系统必不可少的前置条件
Bootstrap中提供了两个容器: container/container-fluid
- container容器(固定容器)：
给标签添加了container类名，在不同视口大小下就会有不同的固定宽度 - container-fluid(自适应宽度容器)
给标签添加了container-fluid类名，容器的宽度永远都是100%自适应
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="css/bootstrap.css">
<title>自己网页的标题</title>
<style>
.container{
height: 100px;
background-color: red;
}
.container-fluid{
height: 100px;
background-color: silver;
}
</style>
</head>
<body>
<div class="container">
aaaaaa
</div>
<div class="container-fluid">
bbbb
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
视口划分
超小屏幕(xs): <576px
小屏幕(sm): >=576px
中等屏幕(md):>=768
大屏幕(lg): >=992px
超大屏幕(xl): >= 1200px
栅格系统
<容器>
<行>
<列>我们的内容</列>
<列>我们的内容</列>
... ...
</行>
</容器>
默认情况下行的宽度和所在容器一样，所有列的宽度是等分所在行的宽度，
默认情况下栅格系统会将一行的内容等分为12份,可以通过col-num方式指定当前列占用12分之几，如果一行中内容的宽度超过了12分, 那么将自动换行
尺寸设置：
col-*: 设置超小屏幕
col-sm-*:设置小屏幕
col-md-*:设置中等屏幕
col-lg-*:设置大屏幕
col-xl-*:设置超大屏幕
尺寸特点：
如果只设置了小屏幕的大小, 那么大屏幕也会采用小屏幕设置的大小
如果只设置了大屏幕的大小, 那么小屏幕默认100%
如果大小屏幕都设置了大小, 那么在什么屏幕就显示什么尺寸
沟槽
容器和列的元素都有默认内边距和margin
想要实现无间隙布局：在contaner后添加p-0:消除内边距
在row后添加no-gutters:消除margin
对齐方式、列偏移和列排序
Bootstrap4的格栅系统是使用伸缩布局实现的：
通过在row后添加类实现对齐方式
<style>
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
height: 50%;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: white;
}
</style>
<div class="container">
<div class="row align-content-center justify-content-center">
<div class="col-2">666</div>
<div class="col-4">444</div>
<div class="col-2">222</div>
</div>
</div>
列偏移
offset-*: 当前列偏移多少份位置，写在哪一列就是哪一列偏移
<div class="container" style="margin-top: 20px">
<span class="row">
<div class="col-2">1</div>
<div class="col-2 offset-8">2</div>
</span>
</div>
列排序：
列排序
order-*: 从小到大顺序排序, 小的在前面, 大的在后面
注意点: 没有排序的列位置不会发生变化, 只有排序的列才参与位置变化
<div class="container">
<span class="row">
<div class="col-2 order-3">1</div>
<div class="col-2 order-2">2</div>
<div class="col-2 order-1">3</div>
</span>
</div>
公共样式
- 设置文字、背景颜色
文字颜色
柔和灰（text-muted）
主要蓝（text-primary）
次要灰（text-secondary）
成功绿（text-success）
危险红（text-danger）
警告黄（text-warning）
危息绿（text-info）
黑白对比（text-dark）
注意点: .text-white 、 .text-muted这两个样式不支持链接上使用
背景颜色
主要蓝（bg-primary）
次要灰（bg-secondary）
成功绿（bg-success）
危险红（bg-danger）
警告黄（bg-warning）
危息绿（bg-info）
黑白对比（bg-dark）
<p class="text-success">知播渔</p>
<p class="text-danger">知播渔</p>
<p class="text-warning">知播渔</p>
<p class="bg-success">知播渔</p>
<p class="bg-danger">知播渔</p>
<p class="bg-warning">知播渔</p>
2. 边框
快速添加边框： border （四个边都有边框）/ border-top/bottom... 指定某个边的边框
快速删除边框： border-0 删除四个边的边框/ border-*-0 删除某个边的边框
快速指定边框颜色：border-color
快速添加边框圆角： rounded / rounded-*
<style>
div{
width: 100px;
height: 100px;
margin-left: 10px;
}
</style>
<div class="border border-warning rounded-circle"></div>
- 显示模式
通过 d-{value} 设置标签的块/行内显示
通过 d-xx-{value} 设置标签在不同尺寸下的显示
<div class="bg-success d-inline d-sm-inline-block d-md-block">我是div</div>
4. 浮动、清除浮动和定位
左浮动：float-left
右浮动：float-right
清除浮动：clearfix
定位：postion-relative 相对定位...
- 间隙/项目符号/图片
通过m-* / p-* 快速添加间隙 m-auto 设置标签水平居中
list-unstyled 去除li前的符号
img-fluid 设置等比拉伸图片
img-thumbnail 设置缩略图样式
组件
1. role属性用于增强语义性, 当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明
比如用div做button，那么设置div 的 role=“button”，辅助工具就可以认出这实际上是个button
2. aria全称: Accessible Rich Internet Applications
这一套协定是w3和apple为了"残疾人士"无障碍使用网站的
3.aria-hidden
为了避免屏幕识读设备抓取非故意的和可能产生混淆的输出内容（尤其是当图标纯粹作为装饰用途时），我们为这些图标设置了 aria-hidden=“true” 属性
警告组件alert
<div class="alert alert-primary" role="alert">
A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
A simple dark alert—check it out!
</div>
close关闭alert
close类用来设置关闭
data-dismiss=“xxx” 设置关闭的标签
<div class="alert alert-warning alert-dismissible fade show" role="alert">
这是一个可以关闭的div
<button type="'button" class="close" data-dismiss="alert">X</button>
</div>
按钮组件button
将type设置为button，不仅是button标签，input和a标签也可以设置为按钮的样式
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
buttonGroup
将多个button放在btn-group中，这些按钮属于该按钮组
<div class="btn-group">
<button type="button" class="btn btn-secondary">1</button>
<button type="button" class="btn btn-secondary">2</button>
<button type="button" class="btn btn-secondary">3</button>
</div>
卡片组件card
<div class="card" style="width: 18rem;">
<img class="card-img-top" src="images/img1.jpg">
<div class="card-body">
<h5 class="card-title">卡片标题</h5>
<p class="card-text">卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容卡片中的内容</p>
</div>
</div>
轮播图组件carousel
<body>
<!--
1.class="carousel slide" 创建一个轮播图组件
2.data-ride="carousel" 自动轮播
-->
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<!--
1.class="carousel-indicators" 创建指示器
2.data-target="#轮播图的id" 告诉bootstrap当前的索引属于哪一个轮播图
3.data-slide-to="0" 指定当前指示器的索引
4.class="active" 设置默认选中的指示器索引
-->
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<!--
1.class="carousel-inner" 创建轮播图的内容部分
2.class="carousel-item" 指定轮播图的每一页
-->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/img1.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/img2.jpg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="images/img3.jpg" class="d-block w-100" alt="...">
</div>
</div>
<!--
1.class="carousel-control-prev" 创建上一页的控制按钮
2. href="#轮播图的id" 指定控制按钮可用控制哪一个轮播图
-->
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script>
//控制自动轮播的切换时间为1s 默认是5s
$('.carousel').carousel({
interval: 1000
});
</script>
</body>
折叠组件collapse
class="collapse" 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
data-toggle="collapse" 告诉bootstrap需要切换的是折叠面板
href="#折叠面板标签的id" 告诉bootstrap需要切换的是哪一个折叠面板
<body>
<a href="#collapse" class="btn btn-primary" data-toggle="collapse">折叠面板点我打开</a>
<div class="collapse bg-primary" id="collapse">
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
</body>
###下拉菜单dropdown
<div class="dropdown">
<!--
1.dropdown-toggle: 指定菜单按钮的小箭头
2.data-toggle="dropdown": 告诉bootstrap需要切换的是下拉菜单
-->
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
我是按钮
</button>
<!--
1.class="dropdown-menu": 创建一个弹出的下拉菜单
2.class="dropdown-item": 指定菜单项
-->
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
模态框组件modal
class=“modal fade”: 创建模态弹窗的容器
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
导航条组件navbar
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>22-Bootstrap常用组件</title>
</head>
<body>
<!--
1.class="navbar": 告诉Bootstrap需要创建一个响应式的导航栏
2.class="navbar-expand-lg": 告诉Bootstrap在哪一种屏幕尺寸上需要展示完整的导航栏
3.class="navbar-light bg-light": 设置导航栏的主题样式
-->
<nav class="navbar navbar-expand-xl navbar-light bg-light">
<!--
1.class="navbar-brand": 指定导航栏中公司的品牌信息(公司名称/LOGO)
-->
<a class="navbar-brand" href="#">知播渔</a>
<!--
1.class="navbar-toggler": 创建一个移动端的菜单按钮
2.data-toggle="collapse": 告诉bootstrap需要切换的是折叠面板
3.data-target="#navbarSupportedContent": 告诉bootstrap需要切换的是哪一个折叠面板
4.class="navbar-toggler-icon": 设置按钮的字体图标
-->
<button class="navbar-toggler" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<!--
1.class="collapse": 创建一个折叠面板
注意点: 折叠面板默认情况下是不会显示的
2.class="navbar-collapse":用于通过父断点进行分组和隐藏导航列内容
-->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!--
1. class="navbar-nav": 创建导航栏的菜单
2. class="nav-item": 创建导航来的菜单项
-->
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item ">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
气泡框组件popovers
<body>
<div style="margin: 200px">
<!--
1.data-container="body": 当你在一个父元素上有一些样式与提示框产生样式干扰，你可以指定一个自定义的container容器，这样提示框的HTML将出现在这个元素内部了。
2.data-toggle="popover": 告诉bootstrap需要切换的是提示气泡
3.data-placement="top": 告诉bootstrap提示气泡出现的位置
4.data-content="": 告诉bootstrap提示气泡中提示的内容是什么
-->
<button class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="我是内容我是内容">
我是按钮
</button>
</div>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$('button').popover();
</script>
</body>
扫一扫
225
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
