-----------2020-02-08--------------------------武汉加油中国加油！再过十四天一定会胜利的---------------------------------------------------------------------------------------------------------
1.Bootstrap简介
①cdn引入
直接去官网：https://getbootstrap.com 引入（顺序不要乱）<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
②响应式原理
（1）响应式所具有的特点：
1）网页的宽度自动调整。
2）尽量少用绝对宽度，用百分比。
3）字体用rem,em做为单位。
4）布局要使用浮动，弹性布局。
最重要的一点是：媒体查询。@media
媒体查询：根据一个或多个基于设备类型，具体特点和环境来应用响应式。
（2）媒体查询使用方法：
1）
@media all{
div{
fontr-size:3rem;
}
}
2）
<link rel = "stylesheet" href = "css/bootstrap.css" media = "all">
3）
@import url('css/bootstrap.css')(min-width:200px);
@media all and(min-width:400px){
div{
font-size:400px;
}
}
@规则
@chartest:定义编码
@import：css模块化
@font-face：自定义字体
@keyframe：animation里的关键帧
@media：媒体查询
（3）媒体类型
all //所有设备
print //打印机设备
screen //彩色的电脑屏幕
speech //听觉设备（针对有视力障碍的人，可以把内容阅读出来）
注意：tty,tv,projection,handle,braille,embossed,aural等几种类型在媒体查询4中已经废弃。
（4）媒体特性
width：min-width max-width
height：min-height max-height
orientation 方向：landscape 横屏（宽度大于高度），portrait 竖屏（高度大于宽度）
aspect-ratio宽度比
-webkit-device-pixel-ratio:像素比
举个栗子
//屏幕尺寸大于500时满足
@media(min-width:500px){
div{
background:green;
}
}
（5）逻辑运算符（用来做条件判断）
and 合并多个媒体查询（并且）
， 匹配某个媒体查询（或者）
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式（防范老旧浏览器）
举个栗子
@media all and(min-width:700) ， (orientation:landscape){
div{
background:green;
}
}
//屏幕尺寸大于800满足
@media not all and(max-width:800px){}
//
@media only screen and (min-width:100px){}
（6）举个响应式栗子
<style>
body{
margin: 0;
padding: 0;
}
div{
width: 100px;
height: 100px;
background: green;
float: left;
border: 1px solid #000;
box-sizing: border-box;
}
/* 200px-400px 一行显示一个div */
@media all and (max-width:400px){
div{
width:100%;
}
}
/* 400-600px 一行显示两个div */
@media all and (min-width:400px){
div{
width: 50%;
}
}
/* 600px-- 一行显示3个div*/
@media all and (min-width:600px){
div{
width: 33.3%;
}
}
</style>
③栅格系统
（1）栅格系统基本格式
<!-- 栅格系统基本格式 -->
<!-- 100%的宽 -->
<div class="container-fluid">
<!--行 -->
<div class="row">
<!-- 列,一行分为12列 -->
<div class="col-xl-1">1</div>
<div class="col-xl-1">2</div>
<div class="col-xl-1">3</div>
<div class="col-xl-1">4</div>
<div class="col-xl-1">5</div>
<div class="col-xl-1">6</div>
<div class="col-xl-1">7</div>
<div class="col-xl-1">8</div>
<div class="col-xl-1">9</div>
<div class="col-xl-1">10</div>
<div class="col-xl-1">11</div>
<div class="col-xl-1">12</div>
</div>
</div>
<!-- 自己定义宽 -->
<div class="container">
</div>
（2）栅格系统的五个响应层
<div class="container">
<div class="row">
<div class="col-xl-1">xl为超大屏，屏幕宽度>=1200,容器的宽度固定为1140px，一行可以设置12个列。
屏幕尺寸小于1200的时候，一行只能设置一列
</div>
<div class="col-xl-1">6</div>
</div>
<div class="row mt-5">
<div class="col-lg-4">lg为大屏，屏幕宽度>=992px,容器的宽度固定为960px，一行可以设置12个列。屏幕尺寸小于
992的时候，一行只能设置1列。
</div>
<div class="col-lg-4"></div>
<div class="col-lg-4"></div>
</div>
<div class="row mt-5">
<div class="col-md-4">md为中等屏，屏幕宽度>=768px,容器的宽度固定为720px，一行可以设置12个列。屏幕尺寸小于
768的时候，一行只能设置1列。
</div>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
<div class="row mt-5">
<div class="col-sm-4">sm为小屏，屏幕宽度>576=px,容器的宽度固定为540px，一行可以设置12个列。屏幕尺寸小于
576的时候，一行只能设置1列。
</div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
</div>
<div class="row mt-5">
<div class="col-4">col为超小屏，屏幕宽度小于576px,容器的宽度为auto，一行永远可以设置12个列。
</div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</div>
当尺寸同时满足好几个的时候，应用最大的尺寸的规则。
<!-- 设置等宽列，平分宽度，通过.col的class去设置 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
<!-- 设置多行等宽列，在希望断开的地方添加一个.w-100的class，能够让后面的列换行 -->
<div class="row mt-5">
<div class="col">等宽列</div>
<div class="col">等宽列</div>
<div class="w-100" style="height: auto; border: none;"></div>
<div class="col">等宽列</div>
<div class="col">等宽列</div>
</div>
<!-- 设置一个列宽，剩下的自动平分 -->
<div class="row mt-5">
<div class="col-sm-7">在小屏幕下占七列</div>
<div class="col">自动平分剩余的宽度</div>
<div class="col"> 自动平分剩余的宽度</div>
</div>
<!-- 根据内容调整列的宽度 -->
<div class="row mt-5">
<div class="col-md-auto">在中等屏幕下由内容撑开宽度</div>
</div>
//设置所有尺寸下，都占同样的列数
<div class = "row mt-5">
<div class = "col-8">所有尺寸下都占8列</div>
<div class = "col-4">所有尺寸下都占4列</div>
</div>
//混合模式或者组合模式
//1.在超大屏幕下一行显示6个div一个div占两列
//2.在大等屏幕下显示4个div一个div占三列
//3.中屏幕下显示3个div一个div占4列
//4.小屏幕下一行显示2个div，一个div占6列
//5.超小屏幕下一行显示1个div，一个div占12列
<div class = "row mt-5">
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
<div class = "col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">超大屏6个，大屏4个，中等屏幕3个，小屏幕2个，超小屏幕1个</div>
</div>
//对齐
//垂直对齐
//1.行的对齐方式
//align-items-start 顶对齐
//align-items-center 中间对齐
//align-items-end 底对齐
//2.列的对齐方式
//align-self-start 顶对齐
//align-self-center 中间对齐
//align-self-end 底对齐
<div class = "row v-align align-items-start">
<div class = "col align-self-start">列顶对齐</div>
</div>
//水平对齐，只能设置行
<!--
1.justify-content-start 左对齐
2.justify-content-center 居中对齐
3.justify-content-end 右对齐
4.justify-content-around 分散居中对齐（每个元素两侧的距离是相等的）
5.justify-content-between 左右两端对齐（元素之间的间距是自动平分的）
-->
```javascript
//列排序，使用order-{breakpoint},order-first/last;
<div class = "row mt-5">
<div class = "col">第一列</div>
<div class = "col order-5">第二列</div>//第三列会在第二列前面
<div class = "col order-4">第三列</div>
</div>
<!-- 列偏移，使用offset-{breakpoint}-->
<div class = "row mt-5">
<div class = "col-md-4"></div>
<div class = "col-md-4" offset-md-4>往右偏移4列（后面所有div也会跟着偏移）</div>
</div>
//间距 使用margin工具可以让列之间产生间距
//mr-auto:使右侧的列远离到最右边
//ml-auto：使左侧的列远离到最左边
<div class = "col-md-4"></div>
<div class = "col-md-4 ml-auto">第二列跑到最右边</div>
<div class = "col-md-4 ml-md-auto">中屏下，离左边距离自动计算</div>
<div class = "col-auto mr-auto">宽度由内容撑开</div>
//嵌套 每一个列里面可以继续放行，嵌套的元素里面以父级元素为基准，再分12列
<div class = "col-sm-9" style = "height":150px;background:grey;">
<div class = "row">
<div class = "col-sm-8" col-6>子级的第一列，小屏下占8列，超小屏下占6列</div>
<div class = "col-sm-4" col-6>子级的第二列，小屏下占4列，超小屏下占6列</div>
</div>
③重置，排版，代码
//缩写
<p><abbr title = "attrbitue">attr</p>
<p><abbr title = "HypperText Markup Language" class = "initialism">HTLML</abbr></p><!--.initialism可以让字体变小一点-->
//引用与署名
<blockquote class = "blockquote">
<p>xxxxx</p>
<footer class = "blockquote-footer"><cite>来自。。。</cite></footer>
</blockquote>
//对齐
<p class = "text-left|center|right">xxxxxxxxxxxxx</p>
//特效列表
<ul class = "list-unstyled">//无特效列表，不能对嵌套元素生效
<li>red</li>
<li>
<ul class = "list-unstyled">
<li>blue</li>
</ul>
</li>
</ul>
//把标签放在一行
<ul class = "list-inline">
<li class = "list-inline-item">red</li>
<li class = "list-inline-item">red</li>
<li class = "list-inline-item">red</li>
</ul>
<p>xxxx<code><<section>></code></p>
//超出出现滚动条
<pre class = "pre-scrollable"></pre>
④图片，表格，图文
<!--缩略图 img-thumbnail-->
<div class = "col-md-4">
<img src = "images/" class = "img-thumbnail" alt = "">
</div>
//圆角图片 rounded
<div class = "col-md-4">
<img src = "images/" class = "rounded img-fluid" alt = "">
</div>
//图片对齐方式
class = "float-left"
//自己居中，先要变成block，然后在使用margin：0 auto；
<div class = "col">
<img src = "image/" style = "height:200px" class = "d-block mx-auto" alt = "">
</div>
//表格样式
<table class = "table table-hover table-dark">
//图文样式
<figure class = "figure">
<img src = "image" class = "img-fluid rounded figure-img" alt = "">
<figcaption class = "figure-caption text-center">xxx</figcaption>
</figure>
⑤边框，颜色，显示，嵌入
<div class = "text-dark bg-white|transparent">xxx</div
//display属性
<div class = "d-inline|block|inline-block|flex|table bg-primary text-white" style = "">d-inline</div>
<div class = "col bg-primary text-white d-xl-block d-none">只在超大屏幕下显示</div>"
<div class = "col bg-dark text-white d-none d-lg-block d-xl-none">只在大屏幕下显示</div>
<div class = "col bg-sucess text-white d-none d-md-block d-lg-none">只在中等屏幕下显示</div>
//在打印的时候显示，d-print-block
<div class = "row mt-5">
<div class = "col d-none d-print-block">author:xxx;wechart:xxx</div>
</div>
//嵌入视频
<div class = "row mt-5">
<div class = "embed-responsive embed-responsive-16by9">//比例
<iframe src = "http:xxxxx" allowfullscreen></iframe>
</div>
</div>
⑥Flex
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body{
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<!-- 变成弹性盒模型 -->
<div class="row">
<div class="col bg-primary text-white py-2 d-flex">这是一个弹性盒子</div>
<div class="col bg-info text-white py-2 d-inline-flex">这是一个弹性盒子</div>
</div>
<!-- 变成响应式的弹性盒模型 d-{breakpoint}-flex/inline-flex -->
<div class="row mt-1">
<div class="col bg-primary text-white py-2 d-lg-flex">这是一个弹性盒子</div>
<div class="col bg-info text-white py-2 d-lg-inline-flex">这是一个弹性盒子</div>
</div>
<!--
子元素的排列方向
1、flex-row 正序水平排列
2、flex-row-reverse 倒序水平排列
3、flex-column 正序垂直排列
3、flex-column-reverse 倒序垂直排列
-->
<div class="row bg-dark mt-5 flex-row"> <!-- 正序水平排列 -->
<div class="bg-success text-white">第1列</div>
<div class="bg-success text-white">第2列</div>
<div class="bg-success text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 flex-row-reverse"> <!-- 倒序水平排列 -->
<div class="bg-success text-white">第1列</div>
<div class="bg-success text-white">第2列</div>
<div class="bg-success text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 flex-column"> <!-- 正序垂直排列 -->
<div class="bg-success text-white">第1列</div>
<div class="bg-success text-white">第2列</div>
<div class="bg-success text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 flex-column-reverse"> <!-- 倒序垂直排列 -->
<div class="bg-success text-white">第1列</div>
<div class="bg-success text-white">第2列</div>
<div class="bg-success text-white">第3列</div>
</div>
<!-- 响应式的排列方式，flex-{breakpoint}-row/column/row-reverse/column-reverse -->
<div class="row bg-dark mt-1 flex-sm-column-reverse"> <!-- 倒序垂直排列 -->
<div class="bg-success text-white">第1列</div>
<div class="bg-success text-white">第2列</div>
<div class="bg-success text-white">第3列</div>
</div>
<!--
子元素的对齐方式
1、主轴上的对齐 - 水平对齐
2、交叉轴（纵轴）上的对齐 - 垂直对齐
-->
<div class="row bg-dark mt-5 justify-content-start"><!-- 主轴上的对齐-左对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 justify-content-end"><!-- 主轴上的对齐-右对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 justify-content-center"><!-- 主轴上的对齐-居中对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 justify-content-between"><!-- 主轴上的对齐-两端对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 justify-content-around"><!-- 主轴上的对齐-分散居中对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 justify-content-lg-around"><!-- 主轴上的对齐-分散居中对齐-响应式，justify-content-{breakpoint}-between/... -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-start" style="height: 100px;"><!-- 交叉轴上的对齐-顶对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-end" style="height: 100px;"><!-- 交叉轴上的对齐-底对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-center" style="height: 100px;"><!-- 交叉轴上的对齐-中间对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-baseline" style="height: 100px;"><!-- 交叉轴上的对齐-基线对齐 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-stretch" style="height: 100px;"><!-- 交叉轴上的对齐-如果子元素没有设置高或者设置成了auto，子元素将占满整个容器的高度 -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white" style="height: 50px;">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<div class="row bg-dark mt-1 align-items-md-start" style="height: 100px;"><!-- 交叉轴上的对齐-响应式 align-items-{breakpoint}-start/... -->
<div class="bg-danger text-white">第1列</div>
<div class="bg-danger text-white" style="height: 50px;">第2列</div>
<div class="bg-danger text-white">第3列</div>
</div>
<!--
元素的自身的对齐方式
-->
<div class="row bg-secondary mt-5" style="height: 100px;">
<div class="bg-warning text-white align-self-start">第1列</div>
<div class="bg-warning text-white align-self-end">第2列</div>
<div class="bg-warning text-white align-self-center">第3列</div>
<div class="bg-warning text-white align-self-baseline">第4列</div>
<div class="bg-warning text-white align-self-stretch">第5列</div>
</div>
<!-- 元素的自身的对齐方式-响应式，align-self-{breakpoint}-start -->
<div class="row bg-secondary mt-1" style="height: 100px;">
<div class="bg-warning text-white align-self-xl-start">第1列</div>
<div class="bg-warning text-white align-self-xl-end">第2列</div>
<div class="bg-warning text-white align-self-xl-center">第3列</div>
<div class="bg-warning text-white align-self-xl-baseline">第4列</div>
<div class="bg-warning text-white align-self-xl-stretch">第5列</div>
</div>
<!-- 填满 -->
<div class="row mt-5 bg-primary">
<div class="bg-info text-white border-right flex-fill">第1列</div>
<div class="bg-info text-white border-right flex-fill">第2列</div>
<div class="bg-info text-white border-right flex-fill">第3列</div>
</div>
<!-- 填满，响应式，flex-{breakpoint}-fill -->
<div class="row mt-1 bg-primary">
<div class="bg-info text-white border-right flex-md-fill">第1列</div>
<div class="bg-info text-white border-right flex-md-fill">第2列</div>
<div class="bg-info text-white border-right flex-md-fill">第3列</div>
</div>
<!--
伸缩值
1、.flex-grow-* 扩展比例，数字为0表示不扩展，数字为1表示扩展。只有这两个数字
2、.flex-shrink-* 收缩比例，数字为0表示不收缩，数字为1表示收缩。只有这两个数字
-->
<div class="row mt-5 bg-primary">
<div class="bg-danger border-right text-white flex-grow-1">第1列</div>
<div class="bg-danger border-right text-white">第2列</div>
<div class="bg-danger border-right text-white">第3列</div>
</div>
<div class="mt-1 bg-primary d-flex">
<div class="bg-danger border-right text-white w-100">第1列</div>
<div class="bg-danger border-right text-white flex-shrink-1">第2列</div>
</div>
<!-- 伸缩响应式，flex-{breakpoint}-{grow|shrink}-0/1 -->
<div class="row bg-primary">
<div class="bg-danger border-right text-white flex-lg-grow-1">第1列</div>
<div class="bg-danger border-right text-white">第2列</div>
<div class="bg-danger border-right text-white">第3列</div>
</div>
<!-- 自动的间距 -->
<div class="row mt-5 bg-secondary">
<div class="bg-success text-white py-2 mr-auto">第1列</div>
<div class="bg-success text-white py-2">第2列</div>
<div class="bg-success text-white py-2">第3列</div>
</div>
<div class="row mt-1 bg-secondary">
<div class="bg-success text-white py-2">第1列</div>
<div class="bg-success text-white py-2">第2列</div>
<div class="bg-success text-white py-2 ml-auto">第3列</div>
</div>
<div class="row mt-1 bg-secondary flex-column" style="height: 220px;">
<div class="bg-success text-white py-2 col-2 mb-auto">第1列</div>
<div class="bg-success text-white py-2 col-2">第2列</div>
<div class="bg-success text-white py-2 col-2">第3列</div>
</div>
<div class="row mt-1 bg-secondary flex-column align-items-end" style="height: 220px;">
<div class="bg-success text-white py-2 col-2">第1列</div>
<div class="bg-success text-white py-2 col-2">第2列</div>
<div class="bg-success text-white py-2 col-2 mt-auto">第3列</div>
</div>
<!-- Wrap -->
<div class="row mt-5 bg-secondary flex-wrap-reverse">
<div class="col-1 bg-primary text-white">第1列</div>
<div class="col-1 bg-primary text-white">第2列</div>
<div class="col-1 bg-primary text-white">第3列</div>
<div class="col-1 bg-primary text-white">第4列</div>
<div class="col-1 bg-primary text-white">第5列</div>
<div class="col-1 bg-primary text-white">第6列</div>
<div class="col-1 bg-primary text-white">第7列</div>
<div class="col-1 bg-primary text-white">第8列</div>
<div class="col-1 bg-primary text-white">第9列</div>
<div class="col-1 bg-primary text-white">第10列</div>
<div class="col-1 bg-primary text-white">第11列</div>
<div class="col-1 bg-primary text-white">第12列</div>
<div class="col-1 bg-primary text-white">第13列</div>
<div class="col-1 bg-primary text-white">第14列</div>
<div class="col-1 bg-primary text-white">第15列</div>
<div class="col-1 bg-primary text-white">第16列</div>
<div class="col-1 bg-primary text-white">第17列</div>
<div class="col-1 bg-primary text-white">第18列</div>
</div>
<!-- Wrap,响应式，flex-{breakpoint}-wrap -->
<div class="row mt-1 bg-secondary flex-xl-wrap-reverse">
<div class="col-1 bg-primary text-white">第1列</div>
<div class="col-1 bg-primary text-white">第2列</div>
<div class="col-1 bg-primary text-white">第3列</div>
<div class="col-1 bg-primary text-white">第4列</div>
<div class="col-1 bg-primary text-white">第5列</div>
<div class="col-1 bg-primary text-white">第6列</div>
<div class="col-1 bg-primary text-white">第7列</div>
<div class="col-1 bg-primary text-white">第8列</div>
<div class="col-1 bg-primary text-white">第9列</div>
<div class="col-1 bg-primary text-white">第10列</div>
<div class="col-1 bg-primary text-white">第11列</div>
<div class="col-1 bg-primary text-white">第12列</div>
<div class="col-1 bg-primary text-white">第13列</div>
<div class="col-1 bg-primary text-white">第14列</div>
<div class="col-1 bg-primary text-white">第15列</div>
<div class="col-1 bg-primary text-white">第16列</div>
<div class="col-1 bg-primary text-white">第17列</div>
<div class="col-1 bg-primary text-white">第18列</div>
</div>
<!-- 排序 -->
<div class="row bg-secondary mt-5">
<div class="col-1 bg-info text-white order-2">第1列</div>
<div class="col-1 bg-info text-white order-6">第2列</div>
<div class="col-1 bg-info text-white order-3">第3列</div>
<div class="col-1 bg-info text-white order-4">第4列</div>
<div class="col-1 bg-info text-white order-1">第5列</div>
<div class="col-1 bg-info text-white order-0">第6列</div>
<div class="col-1 bg-info text-white order-5">第7列</div>
</div>
<!-- 排序,响应式,order-{breakpoint}-10/... -->
<div class="row bg-secondary mt-1">
<div class="col-1 bg-info text-white order-sm-2">第1列</div>
<div class="col-1 bg-info text-white order-sm-6">第2列</div>
<div class="col-1 bg-info text-white order-sm-3">第3列</div>
<div class="col-1 bg-info text-white order-sm-4">第4列</div>
<div class="col-1 bg-info text-white order-sm-1">第5列</div>
<div class="col-1 bg-info text-white order-sm-0">第6列</div>
<div class="col-1 bg-info text-white order-sm-5">第7列</div>
</div>
<!--
多行对齐，对于单行是没有效果的
align-content-start 顶对齐
align-content-end 底对齐
align-content-center 中间对齐
align-content-between 上下两端对齐
align-content-around 上下分散对齐
align-content-stretch 没有给高度或者高度为auto，那高度会取父级的高度
-->
<div class="row bg-secondary mt-5 align-content-stretch " style="height: 200px;">
<div class="col-1 bg-primary text-white">第1列</div>
<div class="col-1 bg-primary text-white">第2列</div>
<div class="col-1 bg-primary text-white">第3列</div>
<div class="col-1 bg-primary text-white">第4列</div>
<div class="col-1 bg-primary text-white">第5列</div>
<div class="col-1 bg-primary text-white">第6列</div>
<div class="col-1 bg-primary text-white">第7列</div>
<div class="col-1 bg-primary text-white">第8列</div>
<div class="col-1 bg-primary text-white">第9列</div>
<div class="col-1 bg-primary text-white">第10列</div>
<div class="col-1 bg-primary text-white">第11列</div>
<div class="col-1 bg-primary text-white">第12列</div>
<div class="col-1 bg-primary text-white">第13列</div>
<div class="col-1 bg-primary text-white">第14列</div>
<div class="col-1 bg-primary text-white">第15列</div>
<div class="col-1 bg-primary text-white">第16列</div>
<div class="col-1 bg-primary text-white">第17列</div>
<div class="col-1 bg-primary text-white">第18列</div>
</div>
<!-- 多行对齐响应式, align-content-{breakpoint}-end-->
<div class="row bg-secondary mt-5 align-content-md-around" style="height: 200px;">
<div class="col-1 bg-primary text-white">第1列</div>
<div class="col-1 bg-primary text-white">第2列</div>
<div class="col-1 bg-primary text-white">第3列</div>
<div class="col-1 bg-primary text-white">第4列</div>
<div class="col-1 bg-primary text-white">第5列</div>
<div class="col-1 bg-primary text-white">第6列</div>
<div class="col-1 bg-primary text-white">第7列</div>
<div class="col-1 bg-primary text-white">第8列</div>
<div class="col-1 bg-primary text-white">第9列</div>
<div class="col-1 bg-primary text-white">第10列</div>
<div class="col-1 bg-primary text-white">第11列</div>
<div class="col-1 bg-primary text-white">第12列</div>
<div class="col-1 bg-primary text-white">第13列</div>
<div class="col-1 bg-primary text-white">第14列</div>
<div class="col-1 bg-primary text-white">第15列</div>
<div class="col-1 bg-primary text-white">第16列</div>
<div class="col-1 bg-primary text-white">第17列</div>
<div class="col-1 bg-primary text-white">第18列</div>
</div>
</div>
</body>
</html>
⑦其余工具集合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
.f div div,.pos div {
width: 5rem;
height: 5rem;
background: #ccc;
}
.pos div{
background: wheat;
border: 1px solid #000;
}
body{
height: 5000px;
}
</style>
</head>
<body>
<div class="container">
<!-- 浮动 -->
<div class="row border f">
<div class="col">
<!-- 3.x的版本里的浮动是.pull-left/.pull-right -->
<div class="float-left">左浮动</div>
<div class="float-right">右浮动</div>
<div class="float-left float-none">不浮动</div>
</div>
</div>
<!-- 响应式的浮动，float-{breakpoint}-left -->
<div class="row border f mt-1">
<div class="col">
<div class="float-md-left">中等屏幕以上会往左浮动</div>
<div class="float-sm-right">小屏幕以上会往右浮动</div>
</div>
</div>
<!-- 清除浮动,clearfix -->
<div class="row d-block border mt-1 clearfix">
<div class="float-left" style="width: 100px;height: 100px;background: #ccc;">左浮动</div>
<div class="float-right" style="width: 100px;height: 100px;background: #ccc;">右浮动</div>
</div>
<!-- 关闭图标 -->
<div class="row mt-5">
<button type="button" class="close">
<span>×</span>
</button>
</div>
<!-- 图像替换 -->
<div class="row mt-5">
<h1 class="text-hide" style="background-image: url('http://getbootstrap.com/docs/4.1/assets/brand/bootstrap-solid.svg'); width: 50px; height: 50px;">Bootstrap</h1>
</div>
<!-- 内容溢出 -->
<div class="row mt-5">
<div style="width: 200px;height: 100px;" class="border overflow-auto">这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。 此内容将垂直滚动。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-auto 的示例。</div>
<div style="width: 200px;height: 100px;" class="border overflow-hidden">这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。这是在具有设置宽度和高度尺寸的元素上使用 .overflow-hidden 的示例。</div>
</div>
<!-- 定位 -->
<div class="row mt-5 pos">
<div class="position-static">默认值，没有定位</div>
<div class="position-relative">相对定位</div>
<div class="position-absolute">绝对定位</div>
<div class="position-fixed">固定定位</div>
<div class="position-sticky">粘性定位</div>
<!-- <div class="fixed-top">固定在顶部</div>
<div class="fixed-bottom">固定在底部</div> -->
<!-- <div class="sticky-top">粘性置顶，放在这里是没有效果的，需要放在body下的第一层级</div> -->
</div>
<!-- 阴影 -->
<div class="row mt-5 justify-content-around">
<div class="bg-light rounded p-3 shadow-none">没有阴影</div>
<div class="bg-white rounded p-3 shadow-sm">小阴影</div>
<div class="bg-white rounded p-3 shadow">正常的阴影</div>
<div class="bg-white rounded p-3 shadow-lg">大的阴影</div>
</div>
<!-- 尺寸 -->
<div class="row mt-5 d-block"><!-- 宽度 -->
<div class="bg-info text-white p-3 w-25">Width 25%</div>
<div class="bg-info text-white p-3 w-50">Width 50%</div>
<div class="bg-info text-white p-3 w-75">Width 75%</div>
<div class="bg-info text-white p-3 w-100">Width 100%</div>
<div class="bg-info text-white p-3 w-auto">Width auto</div>
</div>
<!-- 高度 -->
<div class="row bg-dark mt-1 d-block" style="height: 100px;">
<div class="bg-success d-inline-block text-white p-3 h-25">Width 25%</div>
<div class="bg-success d-inline-block text-white p-3 h-50">Width 50%</div>
<div class="bg-success d-inline-block text-white p-3 h-75">Width 75%</div>
<div class="bg-success d-inline-block text-white p-3 h-100">Width 100%</div>
<div class="bg-success d-inline-block text-white p-3 h-auto">Width auto</div>
</div>
<!-- max-width -->
<div class="row d-block mt-1">
<div class="mw-100 bg-secondary text-white">宽度的最大值</div>
</div>
<!-- max-height -->
<div class="row d-block bg-dark mt-1" style="height: 100px;">
<div class="bg-success text-white mh-100" style="width: 100px; height: 200px;">高度的最大值</div>
</div>
<!-- 间距 -->
<div class="row border mt-5">
<div class="bg-danger text-white p-3 m-3">陈学辉</div>
</div>
<div class="row border mt-1">
<div class="bg-danger text-white p-3 mb-3">陈学辉</div>
</div>
<div class="row border mt-1">
<div class="bg-danger text-white py-3 my-3">陈学辉</div>
</div>
<div class="row border mt-1">
<div class="bg-danger text-white px-3 mx-3">陈学辉</div>
</div>
<div class="row border mt-1">
<!-- 3.x的版本居中是用.center-block -->
<div class="bg-danger text-white px-3 mx-auto">陈学辉</div>
</div>
<!-- 间距的响应式，{property}{sides}-{breakpoint}-{size} -->
<div class="row border mt-1">
<div class="bg-danger text-white p-3 my-lg-3">陈学辉</div>
</div>
<!-- 文本 -->
<div class="row border mt-5">
<p class="text-justify">这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！这是一段很长很长的文字！</p>
<p class="col text-lg-center">这是一段很长很长的文字！</p>
</div>
<!-- 换行和内容溢出处理 -->
<div class="text-nowrap bg-info border text-truncate " style="width: 8rem;">
This text should overflow the parent.
</div>
<!-- 文字大小写转换 -->
<div class="row d-block mt-1">
<p class="text-lowercase">KAIVON</p>
<p class="text-uppercase">kaivon</p>
<p class="text-capitalize">kaivon chen</p>
<!-- 字体粗细和斜体 -->
<p class="font-weight-bold">加粗字体</p>
<p class="font-weight-normal">正常字体</p>
<p class="font-weight-light">更细的字体</p>
<p class="font-italic">倾斜字体</p>
<!-- 等宽字体 -->
<p class="text-monospace">This is in monospace</p>
</div>
<!-- 垂直对齐 -->
<div class="row mt-5 border mt-5 d-block" style="height: 100px;">
<span class="align-baseline">baseline</span>
<span class="align-top">top</span>
<span class="align-middle">middle</span>
<span class="align-bottom">bottom</span>
<span class="align-text-top">text-top</span>
<span class="align-text-bottom">text-bottom</span>
</div>
<!-- 可见性 -->
<div class="row mt-5 border">
<div class="bg-danger text-white p-3 visible">可以看见</div>
<div class="bg-danger text-white p-3 invisible">看不见，占据空间</div>
<div class="bg-danger text-white p-3 d-none">看不见，不占据空间</div>
</div>
</div>
<div class="sticky-top" style="width: 5rem;height: 5rem;background: green;">粘性定位，在这里是有效果的</div>
</body>
</html>
⑧警告框、徽章、面包屑导航、按钮、按钮组
⑧-1警告框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body{
padding-bottom: 5000px;
}
</style>
</head>
<body>
<div class="container">
<div class="alert alert-primary">alert-primary</div>
<div class="alert alert-secondary">alert-secondary</div>
<div class="alert alert-success">alert-success</div>
<div class="alert alert-danger">alert-danger</div>
<div class="alert alert-warning">alert-warning</div>
<div class="alert alert-info">alert-info</div>
<div class="alert alert-light">alert-light</div>
<div class="alert alert-dark">alert-dark</div>
<div class="alert alert-primary">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-secondary">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-success">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-danger">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-warning">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-info">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-light">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<div class="alert alert-dark">
这是一个<a href="#" class="alert-link">链接</a>
</div>
<!-- 在警告框里添加额外的内容 -->
<div class="alert alert-success">
<h4 class="alert-heading">这是一个标题</h4>
<p>这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容这是一段很长很长的内容</p>
<hr>
<p>下面还可以添加一个说明</p>
</div>
<!-- 可以关闭的警告框 -->
<div class="alert alert-warning alert-dismissible fade show">
这是一个可以关闭的警告框，但是需要想入jquery与bottstar.js
<button class="close" data-dismiss='alert'>×</button>
</div>
<div class="alert alert-danger fade show myAlert">
通过按钮关闭警告框
</div>
<button class="closeBtn">关闭警告框</button>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
//方法
$('.closeBtn').click(function(){
$('.myAlert').alert('close');
});
//事件
$('.myAlert').on('close.bs.alert',function(){
alert('close方法被调用了');
});
$('.myAlert').on('closed.bs.alert',function(){
alert('警告框关闭了');
});
</script>
</body>
</html>
⑧-2徽章
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
.first {
font-size: 1.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="row first">
<span class="badge">徽章</span>
<span class="badge badge-primary">有颜色的徽章</span>
<span class="badge badge-secondary">有颜色的徽章</span>
<span class="badge badge-success">有颜色的徽章</span>
<span class="badge badge-danger">有颜色的徽章</span>
<span class="badge badge-warning">有颜色的徽章</span>
<span class="badge badge-info">有颜色的徽章</span>
<span class="badge badge-light">有颜色的徽章</span>
<span class="badge badge-dark">有颜色的徽章</span>
</div>
<div class="row mt-5">
<h1><span class="badge badge-primary">有颜色的徽章</span></h1>
<h2><span class="badge badge-secondary">有颜色的徽章</span></h2>
<h3><span class="badge badge-success">有颜色的徽章</span></h3>
<h4><span class="badge badge-danger">有颜色的徽章</span></h4>
<h5><span class="badge badge-warning">有颜色的徽章</span></h5>
<h6><span class="badge badge-info">有颜色的徽章</span></h6>
<h6><span class="badge badge-light">有颜色的徽章</span></h6>
<h6><span class="badge badge-dark">有颜色的徽章</span></h6>
</div>
<div class="row mt-5">
<button class="btn btn-primary">在按钮里使用徽章<span class="badge badge-light">5</span></button>
</div>
<div class="row mt-5 first">
<span class="badge">徽章</span>
<span class="badge badge-pill badge-primary">胶囊徽章</span>
<span class="badge badge-pill badge-secondary">胶囊徽章</span>
<span class="badge badge-pill badge-success">胶囊徽章</span>
<span class="badge badge-pill badge-danger">胶囊徽章</span>
<span class="badge badge-pill badge-warning">胶囊徽章</span>
<span class="badge badge-pill badge-info">胶囊徽章</span>
<span class="badge badge-pill badge-light">胶囊徽章</span>
<span class="badge badge-pill badge-dark">胶囊徽章</span>
</div>
<div class="row mt-5 first">
<a href="#" class="badge badge-pill badge-primary">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-secondary">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-success">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-danger">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-warning">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-info">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-light">胶囊徽章</a>
<a href="#" class="badge badge-pill badge-dark">胶囊徽章</a>
</div>
</div>
</body>
</html>
⑧-3面包屑导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row d-block">
<nav>
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">首页</a></li>
<li class="breadcrumb-item"><a href="#">关于我们</a></li>
<li class="breadcrumb-item active">联系我们</li>
</ol>
</nav>
</div>
</div>
</body>
</html>
⑧-4按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row d-block mt-5">
<button class="btn btn-primary">按钮</button>
<button class="btn btn-secondary">按钮</button>
<button class="btn btn-success">按钮</button>
<button class="btn btn-danger">按钮</button>
<button class="btn btn-warning">按钮</button>
<button class="btn btn-info">按钮</button>
<button class="btn btn-light">按钮</button>
<button class="btn btn-dark">按钮</button>
<button class="btn btn-link">按钮</button>
</div>
<!-- 其它类型的按钮 -->
<div class="row mt-5 d-block">
<a href="#" class="btn btn-primary">a标签按钮</a>
<button type="submit" class="btn btn-secondary">button标签按钮</button>
<input type="button" value="input标签" class="btn btn-success">
<input type="submit" value="input标签" class="btn btn-danger">
<input type="reset" value="input标签" class="btn btn-warning">
</div>
<!-- 带边框的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-outline-primary">按钮</button>
<button class="btn btn-outline-secondary">按钮</button>
<button class="btn btn-outline-success">按钮</button>
<button class="btn btn-outline-danger">按钮</button>
<button class="btn btn-outline-warning">按钮</button>
<button class="btn btn-outline-info">按钮</button>
<button class="btn btn-outline-light">按钮</button>
<button class="btn btn-outline-dark">按钮</button>
</div>
<!-- 大小不同的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-primary btn-lg">大按钮</button>
<button class="btn btn-secondary">正常按钮</button>
<button class="btn btn-success btn-sm">小按钮</button>
</div>
<!-- block类型的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-primary btn-lg btn-block">块级按钮</button>
<button class="btn btn-secondary btn-block">块级按钮</button>
</div>
<!-- 启用与停用状态的按钮 -->
<div class="row d-block mt-5">
<button class="btn btn-primary active">启用状态</button>
<a href="#" class="btn btn-secondary active">启用状态</a>
<button class="btn btn-primary" disabled>停用状态</button>
<a href="#" class="btn btn-secondary disabled">停用状态</a>
</div>
<!-- 切换按钮的active状态 -->
<div class="row d-block mt-5">
<button class="btn btn-primary active" data-toggle='button'>点击切换状态</button>
</div>
<!-- 选项卡的效果 -->
<div class="row mt-5">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary active">
<input type="radio" name="options" checked>Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options">Active
</label>
<label class="btn btn-secondary">
<input type="radio" name="options">Active
</label>
</div>
</div>
<!-- 切换按钮的active状态 -->
<div class="row d-block mt-5">
<button id="btn" class="btn btn-primary">点击切换状态</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$('#btn').button('toggle');
</script>
</body>
</html>
⑧-6按钮组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5 d-block">
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-5 btn-toolbar">
<div class="btn-group mr-2">
<button class="btn btn-success">1</button>
<button class="btn btn-success">2</button>
<button class="btn btn-success">3</button>
</div>
<div class="btn-group mr-2">
<button class="btn btn-success">5</button>
<button class="btn btn-success">6</button>
<button class="btn btn-success">7</button>
</div>
<div class="btn-group">
<button class="btn btn-success">9</button>
</div>
</div>
<div class="row btn-toolbar mt-5">
<div class="btn-group mr-2">
<button class="btn btn-secondary">1</button>
<button class="btn btn-secondary">2</button>
<button class="btn btn-secondary">3</button>
<button class="btn btn-secondary">4</button>
</div>
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">@</div>
</div>
<input type="text" class="form-control" placeholder="Input group example">
</div>
</div>
<!-- 缩放 -->
<div class="row mt-5">
<div class="btn-group btn-group-lg">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-1">
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<div class="row mt-1 ">
<div class="btn-group btn-group-sm">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Center</button>
<button class="btn btn-primary">Right</button>
</div>
</div>
<!-- 下拉菜单 -->
<div class="row mt-5">
<div class="btn-group">
<button class="btn btn-danger">1</button>
<button class="btn btn-danger">2</button>
<div class="btn-group">
<button class="btn btn-secondary dropdown-toggle" data-toggle='dropdown'>城市</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
</div>
</div>
</div>
</div>
<!-- 垂直排列 -->
<div class="row mt-5">
<div class="btn-group-vertical">
<button class="btn btn-warning">北京</button>
<button class="btn btn-warning">上海</button>
<button class="btn btn-warning">广州</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
⑨卡片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<div class="card-body">
<h3 class="card-title">这是卡片的标题</h3>
<h4 class="card-subtitle mb-3">这是卡片的幅标题</h4>
<p class="card-text">这是卡片的文本内容，需要添加一个card-text的class</p>
<a href="#" class="card-link">链接1</a>
<a href="#" class="card-link">链接2</a>
</div>
</div>
</div>
<!-- 图片 -->
<div class="col-lg-4">
<div class="card">
<img class="card-img-top" src="images/img_02.jpg" alt="">
<div class="card-body">
<p class="card-text">这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长这是图片的说明会很长很长
</p>
</div>
</div>
</div>
<!-- 列表组、页眉、页脚 -->
<div class="col-lg-4">
<div class="card">
<div class="card-header">这是卡片的头部，也叫页眉</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">这是列表的文字</li>
<li class="list-group-item">这是列表的文字</li>
<li class="list-group-item">这是列表的文字</li>
</ul>
<div class="card-footer">这是卡片的底部，也叫页脚</div>
</div>
</div>
</div>
<!-- 组合模式 -->
<div class="row mt-5">
<div class="col-lg-4">
<div class="card">
<div class="card-header">陈数</div>
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
<a href="#" class="card-link btn btn-info">链接2</a>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">这是列表的文字</li>
<li class="list-group-item">这是列表的文字</li>
<li class="list-group-item">这是列表的文字</li>
</ul>
<div class="card-footer">页脚</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<div class="card text-center">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer text-muted">2 days ago</div>
</div>
</div>
</div>
<!-- 宽度设置 -->
<div class="row mt-5">
<div class="card" style="width: 20rem;">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
</div>
</div>
<!-- 对齐 -->
<div class="row mt-5">
<div class="col-lg-4">
<div class="card text-left">
<div class="card-body">
<h5 class="card-title">左对齐</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">居中对齐</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card text-right">
<div class="card-body">
<h5 class="card-title">右对齐</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
</div>
</div>
</div>
</div>
<!-- 导航 -->
<div class="row mt-5">
<div class="card">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs">
<li class="nav-item">
<a href="#" class="nav-link active">Active</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
</div>
<div class="card-body">
<h5 class="card-title">结合导航</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<a href="#" class="card-link btn btn-primary">链接1</a>
</div>
</div>
</div>
<!-- 图像 -->
<div class="row mt-5">
<div class="card">
<!-- 图片在上边 -->
<img class="card-img-top" src="images/banner.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<!-- 图片在下边 -->
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
<img class="card-img-bottom" src="images/banner.jpg" alt="">
</div>
</div>
<!-- 文本放在图片身上 -->
<div class="row mt-5">
<div class="card">
<img class="card-img-top" src="images/banner.jpg" alt="">
<div class="card-img-overlay text-white">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small>2 days ago</small></p>
</div>
</div>
</div>
<!-- 卡片样式-背景色 -->
<div class="row mt-5">
<div class="col-3">
<div class="card text-white bg-primary">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-secondary">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-success">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-danger">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-warning">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-info">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card bg-light">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card text-white bg-dark">
<div class="card-header">卡片的头部</div>
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
</div>
<!-- 卡片样式-边框 -->
<div class="row mt-5">
<div class="col-3">
<div class="card border-primary">
<div class="card-header">卡片的头部</div>
<div class="card-body text-primary">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-secondary">
<div class="card-header">卡片的头部</div>
<div class="card-body text-secondary">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-success">
<div class="card-header">卡片的头部</div>
<div class="card-body text-success">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-danger">
<div class="card-header">卡片的头部</div>
<div class="card-body text-danger">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-warning">
<div class="card-header">卡片的头部</div>
<div class="card-body text-warning"">
<h5 class=" card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-info">
<div class="card-header">卡片的头部</div>
<div class="card-body text-info">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-light">
<div class="card-header">卡片的头部</div>
<div class="card-body border-light">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
<div class="col-3">
<div class="card border-dark">
<div class="card-header">卡片的头部</div>
<div class="card-body text-dark">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
</div>
</div>
</div>
<!-- 页眉的页脚的边框 -->
<div class="row mt-5">
<div class="col-3">
<div class="card border-success">
<div class="card-header bg-transparent border-success">卡片的头部</div>
<div class="card-body text-primary">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
</div>
<div class="card-footer bg-transparent border-success">卡片的底部</div>
</div>
</div>
</div>
<!-- 卡片排版-卡片组-->
<div class="row mt-5 card-group">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
<!-- 卡片排版-卡片之间互不相连的，但是尺寸是一样-->
<div class="row mt-5 card-deck">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
<!-- 卡片排版-瀑布流式排列 -->
<div class="row mt-5">
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题1</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题2</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题3</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_04.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题4</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="images/img_03.jpg" alt="">
<div class="card-body">
<h5 class="card-title">这是卡片的标题5</h5>
<p class="card-text">
这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一个card-text的class。这是卡片的文本内容，需要添加一，需要添加一个card-text的class
</p>
<p class="card-text"><small class="text-muted">2 days ago</small></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
10.轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
<!-- 带控制功能的轮播图 -->
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="control">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#control" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#control" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
<!-- 包含指示器功能的轮播图 -->
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="indicators">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#indicators" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#indicators" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators">
<li data-target="#indicators" data-slide-to="0" class="active"></li>
<li data-target="#indicators" data-slide-to="1"></li>
<li data-target="#indicators" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
<!-- 包含字幕的轮播图 -->
<div class="row mt-5">
<div class="col">
<div class="carousel slide" data-ride="carousel" id="captions">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第1张图</h5>
<p>这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第2张图</h5>
<p>这是第2张图的说明这是第1张图的说明这是第2张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
<div class="carousel-caption text-danger">
<h5>这是第3张图</h5>
<p>这是第3张图的说明这是第3张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明这是第1张图的说明</p>
</div>
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#captions" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#captions" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators">
<li data-target="#captions" data-slide-to="0" class="active"></li>
<li data-target="#captions" data-slide-to="1"></li>
<li data-target="#captions" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
<!-- 设置轮播图的选项 -->
<div class="row mt-5">
<div class="col">
<div class="carousel slide" id="options" data-ride="carousel" data-interval='2000' data-keyboard='true'
data-pause='false' data-wrap='true'>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="#options" class="carousel-control-prev" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="#options" class="carousel-control-next" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators">
<li data-target="#options" data-slide-to="0" class="active"></li>
<li data-target="#options" data-slide-to="1"></li>
<li data-target="#options" data-slide-to="2"></li>
</ol>
</div>
</div>
</div>
<!-- 方法与事件 -->
<div class="row mt-5">
<div class="col">
<div class="carousel slide" id="methods">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="images/pic_01.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_02.jpg" class="img-fluid">
</div>
<div class="carousel-item">
<img src="images/pic_03.jpg" class="img-fluid">
</div>
</div>
<!-- 添加左右箭头 -->
<a href="javascript:;" class="carousel-control-prev prevBtn">
<span class="carousel-control-prev-icon"></span>
</a>
<a href="javascript:;" class="carousel-control-next nextBtn">
<span class="carousel-control-next-icon"></span>
</a>
<!-- 添加指示器 -->
<ol class="carousel-indicators indicatorsBtn">
<li class="active"></li>
<li></li>
<li></li>
</ol>
</div>
<button class="btn btn-primary play">开始</button>
<button class="btn btn-primary pause">暂停</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//初始化以及开始播放
$('.play').click(function () {
$('#methods').carousel({
interval: 2000
});
$('#methods').carousel('cycle');
});
//暂停播放
$('.pause').click(function () {
$('#methods').carousel('pause');
});
//上一张功能
$('.prevBtn').click(function () {
$('#methods').carousel('prev');
});
//下一张功能
$('.nextBtn').click(function () {
$('#methods').carousel('next');
});
//指示器点击的功能
$('.indicatorsBtn li').each(function (index, element) {
$(element).click(function () {
$('#methods').carousel(index)
});
});
//两个事件
$('#methods').on('slide.bs.carousel', function (ev) { //开始切换的事件
console.log(
ev.direction, //当前走的方向
ev.relatedTarget, //当前走的哪一个图片（DOM）
ev.from, //当前走的图片的索引
ev.to, //要走到的图片的索引
);
console.log('开始走');
});
$('#methods').on('slid.bs.carousel', function () { //结束切换的事件
// do something…
console.log('走完了');
});
</script>
</body>
</html>
11.折叠面板
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<p>
<a href="#kengdie" class="btn btn-primary" data-toggle="collapse">坑爹</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#kengdie">坑爹</button>
</p>
<div class="collapse show" id="kengdie">
<div class="card card-body">
坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。
该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。
</div>
</div>
</div>
</div>
<!-- 多个目标 -->
<div class="row mt-5">
<div class="col-12">
<p>
<a href="#diaosi" class="btn btn-primary" data-toggle="collapse">屌丝</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#tuhao">土豪</button>
<button class="btn btn-primary" data-toggle="collapse" data-target="#nvshen">女神</button>
<button class="btn btn-primary" data-toggle="collapse" data-target=".all">控制全部</button>
</p>
</div>
<div class="col-4 collapse all" id="diaosi">
<div class="card card-body">
屌丝 [1]
来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
</div>
</div>
<div class="col-4 collapse all" id="tuhao">
<div class="card card-body">
土豪，网络用语。原指乡下财大气粗、没什么品味的有钱人，现多指有钱、不理性消费、喜欢炫耀的人。出自《宋书·殷琰传》：“叔宝者，杜坦之子，既土豪乡望，内外诸军事并专之。”
</div>
</div>
<div class="col-4 collapse all" id="nvshen">
<div class="card card-body">
女神是一个汉语词语，拼音是nǚ
shén，意思指对女性的神明或至尊的称谓，特指神话传说中的女性至高者。后来引申为容貌漂亮、具有智慧、优雅、贞洁以及高素质的女性。在现代社会，女神常用来定义男性心目中喜爱，但难以成为真正恋爱对象的女生。
</div>
</div>
</div>
<!-- 手风琴 -->
<div class="row mt-5">
<div class="accordion" id="accordion">
<!-- 第一项 -->
<div class="card">
<div class="card-header">
<button class="btn btn-link" data-toggle="collapse" data-target="#item1">屌丝</button>
</div>
<div class="collapse show" id="item1" data-parent="#accordion">
<div class="card-body">
屌丝 [1]
来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
</div>
</div>
</div>
<!-- 第二项 -->
<div class="card">
<div class="card-header">
<button class="btn btn-link" data-toggle="collapse" data-target="#item2">土豪</button>
</div>
<div class="collapse" id="item2" data-parent="#accordion">
<div class="card-body">
屌丝 [1]
来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
</div>
</div>
</div>
<!-- 第三项 -->
<div class="card">
<div class="card-header">
<button class="btn btn-link" data-toggle="collapse" data-target="#item3">女神</button>
</div>
<div class="collapse" id="item3" data-parent="#accordion">
<div class="card-body">
屌丝 [1]
来源于中国大陆地区的中国网络文化。表达意思是讽刺；另一意思是指喻不方便明言或不合适直言的隐语，多用于熟人之间互侃或者互贬。同时指的是比喻自嘲。多用自嘲来活跃气氛，屌丝一词传用至今已无特定人群的界限，多用于朋友，熟人之间的戏侃。
</div>
</div>
</div>
</div>
</div>
<!-- js的方法与事件 -->
<div class="row mt-5">
<div class="col">
<p>
<a href="javascript:;" class="btn btn-primary myBtn">坑爹</a>
</p>
<div class="collapse show" id="myCollapse">
<div class="card card-body">
坑爹一般用于讽刺、嘲笑或吐槽不满。意指与本人意愿有很大出入，有欺骗的意思，又包含了几丝“不给力”的意思成分。
该网络用语“坑爹”一词最早出现于网络游戏魔兽世界。
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$('.myBtn').click(function () {
//$('#myCollapse').collapse('hide');
//$('#myCollapse').collapse('show');
$('#myCollapse').collapse('toggle');
});
//事件
$('#myCollapse').on('show.bs.collapse', function () {
console.log('显示事件发生了'); //当调用show的方法的时候会触发此事件
});
$('#myCollapse').on('hide.bs.collapse', function () {
console.log('隐藏事件发生了'); //当调用hide的方法的时候会触发此事件
});
$('#myCollapse').on('shown.bs.collapse', function () {
console.log('折叠块完全显示了！');
});
$('#myCollapse').on('hidden.bs.collapse', function () {
console.log('折叠块完全隐藏了！');
});
</script>
</body>
</html>
13.下拉菜单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row mt-5">
<!-- 单一按钮的下拉菜单 -->
<div class="col-2">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">button标签下拉</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
<!-- 使用a标签 -->
<div class="col-2">
<div class="dropdown">
<a href="javascript:;" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">a标签下拉</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
</div>
<!-- 分离式按钮下拉菜单 -->
<div class="col-3">
<div class="btn-group dropdown">
<button class="btn btn-success btn-lg">分离式按钮下拉菜单</button>
<button class="btn btn-success btn-lg dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
</div>
<!-- 下拉菜单尺寸 -->
<div class="col-3 d-flex">
<div class="dropdown">
<button class="btn btn-danger btn-lg dropdown-toggle" data-toggle="dropdown">大按钮</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
<div class="dropdown">
<button class="btn btn-danger btn-sm dropdown-toggle" data-toggle="dropdown">小按钮</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
</div>
<div class="row mt-5">
<div class="col">
<div class="dropup">
<!-- 向上展开 -->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向上展开</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
<div class="col">
<div class="dropright">
<!-- 向右展开 -->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向右展开</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
<div class="col">
<div class="dropdown">
<!-- 向下展开 -->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向下展开</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
<div class="col">
<div class="dropleft">
<!-- 向左展开 -->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">向左展开</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
</div>
</div>
</div>
</div>
<!-- 菜单项 -->
<div class="row mt-5">
<div class="col">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">菜单项使用了button标签</button>
<div class="dropdown-menu dropdown-menu-right">
<!-- 右对齐 -->
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
</div>
<!-- 非交互式的下拉菜单 -->
<div class="row mt-5">
<div class="col">
<div class="dropdown">
<div class="dropdown-menu show">
<span class="dropdown-item-text">非点击的项</span>
<h4 class="dropdown-header">下拉菜单的标题</h4>
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item active">上海</a> <!-- 当前的选项 -->
<a href="#" class="dropdown-item disabled">广州</a> <!-- 禁用的选项 -->
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
</div>
<!-- 偏移属性 -->
<div class="row mt-5" style="margin-top: 260px!important;">
<div class="col">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown" data-offset="10,20">偏移</button>
<div class="dropdown-menu">
<!-- 右对齐 -->
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
<div class="col">
<div class="dropdown">
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">偏移</button>
<div class="dropdown-menu" data-reference="parent">
<!-- 右对齐 -->
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
</div>
<!-- js的方法与事件 -->
<div class="row mt-5">
<div class="col">
<div class="dropdown">
<button class="btn btn-danger dropdown-toggle" id="myBtn">方法</button>
<div class="dropdown-menu" id="myDropdown" data-reference="parent">
<!-- 右对齐 -->
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
<div class="col">
<div class="dropdown" id="myDropdown1"> <!-- 注意，事件要放在这里！！！ -->
<button class="btn btn-info dropdown-toggle" data-toggle="dropdown">事件</button>
<div class="dropdown-menu" data-reference="parent">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<button class="dropdown-item">深圳</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//方法
$('#myBtn').click(function () {
//$('#myDropdown').dropdown('show');
//$('#myDropdown').dropdown('hide');
//$('#myDropdown').dropdown('toggle');
//解决toggle的问题
$('#myDropdown').toggle(function () {
$('#myDropdown').dropdown('show');
}, function () {
$('#myDropdown').dropdown('hide');
});
});
//事件
$('#myDropdown1').on('show.bs.dropdown', function () {
console.log('调用了show方法');
});
$('#myDropdown1').on('shown.bs.dropdown', function () {
console.log('下拉列表完全显示了');
});
$('#myDropdown1').on('hide.bs.dropdown', function () {
console.log('调用了hide方法');
});
$('#myDropdown1').on('hidden.bs.dropdown', function () {
console.log('下拉列表完全隐藏了');
});
</script>
</body>
</html>
14.表单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col mt-5">
<form action="#">
<div class="form-group">
<!-- 放表单组，放置一组匹配的表单 -->
<label for="usename">用户名</label>
<input type="text" id="usename" class="form-control" placeholder="请输入用户名">
<small class="form-text text-muted">用户名需要用英文、符号组成</small>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" class="form-control" id="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="passwordAgain">确认密码</label>
<input type="password" class="form-control" id="passwordAgain" placeholder="请再次输入密码" disabled>
</div>
<div class="form-group">
<label for="area">所在地</label>
<select name="" id="area" class="form-control">
<!-- multiple:让下拉框变成多选 -->
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
<option value="">深圳</option>
</select>
</div>
<div class="form-group">
<label for="file">选择文件</label>
<input type="file" class="form-control-file" id="file">
</div>
<div class="form-group">
<label for="range">滑块</label>
<input type="range" class="form-control-range" id="range">
</div>
<!-- 复选框、单选框 -->
<div class="form-group">
<label for="">兴趣爱好：</label>
<div class="form-check form-check-inline">
<!-- 选择框要放在这个类里面， .form-check-inline是为了让表单在一行中显示 -->
<input type="checkbox" id="eat" class="form-check-input">
<label for="eat" class="form-check-label">吃饭</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="sleep" class="form-check-input">
<label for="sleep" class="form-check-label">睡觉</label>
</div>
<div class="form-check form-check-inline">
<input type="checkbox" id="play" class="form-check-input">
<label for="play" class="form-check-label">打豆豆</label>
</div>
</div>
<div class="form-group">
<label for="">性别：</label>
<div class="form-check form-check-inline">
<input type="radio" id="male" class="form-check-input" name="sex">
<label for="male" class="form-check-label">男</label>
</div>
<div class="form-check form-check-inline">
<input type="radio" id="female" class="form-check-input" name="sex">
<label for="female" class="form-check-label">女</label>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
</div>
</div>
<!--
表单的尺寸
1、大尺寸
1、.form-control-lg
2、.col-form-label-lg
2、小尺寸
1、.form-control-sm
2、.col-form-label-sm
-->
<div class="row mt-5">
<div class="col">
<div class="form-group">
<input type="text" class="form-control form-control-lg" placeholder="大尺寸的表单">
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="正常尺寸的表单">
</div>
<div class="form-group">
<input type="text" class="form-control form-control-sm" placeholder="小尺寸的表单">
</div>
<div class="form-group">
<select name="" id="" class="form-control col-form-label-lg">
<option value="" >大尺寸的下拉框</option>
</select>
</div>
<div class="form-group">
<select name="" id="" class="form-control">
<option value="">正常尺寸的下拉框</option>
</select>
</div>
<div class="form-group">
<select name="" id="" class="form-control col-form-label-sm">
<option value="">小尺寸的下拉框</option>
</select>
</div>
</div>
</div>
<!-- 只读属性 -->
<div class="row mt-5">
<div class="col">
<form action="#">
<div class="form-group">
<input type="text" class="form-control" placeholder="只读文本" readonly>
</div>
<div class="form-group">
<input type="text" class="form-control-plaintext" placeholder="没有边框的只读文本" readonly>
</div>
</form>
</div>
</div>
<!-- 表单栅格排列 -->
<form action="#"> <!-- form标签一定要放在行与列的外面 -->
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="栅格排列">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="栅格排列">
</div>
</div>
</form>
<!-- 表单表格式的排列 -->
<form action="#">
<div class="form-row"> <!-- 这个class与row的唯一区别就是间距变小了 -->
<div class="col">
<input type="text" class="form-control" placeholder="栅格排列">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="栅格排列">
</div>
</div>
</form>
<!-- 栅格系列例子 -->
<form action="#">
<div class="form-row mt-5">
<div class="col-md-6 form-group">
<label for="email1">Email</label>
<input type="email" class="form-control" id="email1" placeholder="请输入邮箱账号">
</div>
<div class="col-md-6 form-group">
<label for="password">Password</label>
<input type="password2" class="form-control" id="password2" placeholder="请输入密码">
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="homeAddres">家庭地址</label>
<input type="text" class="form-control" id="homeAddres" placeholder="请输入家庭地址">
</div>
</div>
<div class="row">
<div class="form-group col">
<label for="companyAddres">公司地址</label>
<input type="text" class="form-control" id="companyAddres" placeholder="请输入公司地址">
</div>
</div>
<div class="form-row">
<div class="col-md-6 form-group">
<label for="city">城市</label>
<input type="text" class="form-control" id="city" placeholder="请输入您所在的城市">
</div>
<div class="col-md-4 form-group">
<label for="marriage">婚姻状况</label>
<select class="form-control" id="marriage">
<option value="">已婚</option>
<option value="">未婚</option>
</select>
</div>
<div class="col-md-2 form-group">
<label for="education">学历</label>
<select class="form-control" id="education">
<option value="">博士</option>
<option value="">硕士</option>
<option value="">本科</option>
<option value="">大专</option>
<option value="">高中</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="grid">
<label for="grid" class="form-check-lable">同意所读内容</label>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<!-- 水平排列表单 -->
<form action="#">
<div class="form-group row mt-5">
<label for="email2" class="col-sm-2 col-form-label">Email</label> <!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
<div class="col-sm-10">
<input type="email" class="form-control" id="email2" placeholder="请输入email">
</div>
</div>
<div class="form-group row">
<label for="password3" class="col-sm-2 col-form-label">Password</label> <!-- col-form-lable用来决定下后面的表单进行垂直对齐 -->
<div class="col-sm-10">
<input type="password" class="form-control" id="password3" placeholder="请输入密码">
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2">兴趣爱好：</label>
<div class="col-sm-10">
<div class="form-check">
<input type="checkbox" id="eat" class="form-check-input">
<label for="eat" class="form-check-label">吃饭</label>
</div>
<div class="form-check">
<input type="checkbox" id="sleep" class="form-check-input">
<label for="sleep" class="form-check-label">睡觉</label>
</div>
<div class="form-check">
<input type="checkbox" id="play" class="form-check-input">
<label for="play" class="form-check-label">打豆豆</label>
</div>
</div>
</div>
<div class="form-group row">
<label for="" class="col-sm-2">性别：</label>
<div class="col-sm-10">
<div class="form-check">
<input type="radio" id="male" class="form-check-input" name="sex">
<label for="male" class="form-check-label">男</label>
</div>
<div class="form-check">
<input type="radio" id="female" class="form-check-input" name="sex">
<label for="female" class="form-check-label">女</label>
</div>
</div>
</div>
</form>
<!-- 内联表单 -->
<div class="row mt-5">
<div class="col">
<form action="#" class="form-inline">
<div class="form-group mr-5">
<label for="">用户名：</label>
<input type="email" class="form-control" value="kaivon@qq.com">
</div>
<div class="form-group mr-5">
<label for="">密码：</label>
<input type="password" class="form-control">
</div>
<div class="form-group mr-5">
<input type="checkbox" class="form-control-input">
<label for="" class="form-control-label">记住我</label>
</div>
<div class="form-group mr-5">
<button type="submit" class="btn btn-primary">提交</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<form action="#" class="needs-validation" novalidate>
<div class="form-row">
<div class="col-md-4 form-group">
<label for="surname">姓</label>
<input type="text" class="form-control" id="surname" placeholder="请输入姓" value="陈" required>
<div class="valid-feedback"> <!-- 验证成功对应的class -->
验证通过！
</div>
<div class="invalid-feedback"> <!-- 验证失败对应的class -->
验证失败！
</div>
</div>
<div class="col-md-4 form-group">
<label for="name">名</label>
<input type="text" class="form-control" id="name" placeholder="请输入名" value="学辉" required>
<div class="valid-feedback"> <!-- 验证成功对应的class -->
验证通过！
</div>
</div>
<div class="col-md-4 form-group">
<label for="usename">用户名</label>
<input type="text" class="form-control" id="usename" placeholder="请输入用户名" required>
<div class="invalid-feedback">请输入正确的用户名！</div>
</div>
</div>
<div class="form-row">
<div class="col-md-6 form-group">
<label for="homeAddress">家庭地址</label>
<input type="text" class="form-control" id="homeAddress" placeholder="请输入家庭地址" required>
<div class="invalid-feedback">请输入正确的家庭地址！</div>
</div>
<div class="col-md-6 form-group">
<label for="companyAddress">公司地址</label>
<input type="text" class="form-control" id="companyAddress" placeholder="请输入公司地址" required>
<div class="invalid-feedback">请输入正确的公司地址！</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="grid" required>
<label for="grid" class="form-check-label">同意所读内容</label>
<div class="invalid-feedback">你必需同意此内容后才能继续操作！</div>
</div>
</div>
<button type="submit" class="btn btn-primary">提交</button>
</form>
<!-- 自定义表单 -->
<div class="row mt-5">
<div class="col">
<div class="form-group custom-control custom-checkbox">
<input type="checkbox" id="eat" class="custom-control-input">
<label for="eat" class="custom-control-label">吃饭</label>
</div>
<div class="form-group custom-control custom-radio">
<input type="radio" id="male" class="custom-control-input" name="sex">
<label for="male" class="custom-control-label">男</label>
</div>
<div class="form-group custom-control custom-radio">
<input type="radio" id="female" class="custom-control-input" name="sex">
<label for="female" class="custom-control-label">女</label>
</div>
<!-- 在一行中排列，.custom-control-inline -->
<div class="form-group custom-control custom-radio custom-control-inline">
<input type="radio" id="male1" class="custom-control-input" name="sex1">
<label for="male1" class="custom-control-label">男</label>
</div>
<div class="form-group custom-control custom-radio custom-control-inline">
<input type="radio" id="female1" class="custom-control-input" name="sex1" disabled> <!-- 禁用表单 -->
<label for="female1" class="custom-control-label">女</label>
</div>
<!-- 下拉菜单 -->
<select name="" id="" class="form-group custom-select">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<!-- 滑块 -->
<div class="form-group">
<label for="range1">滑块</label>
<input type="range" class="custom-range" id="range1">
</div>
<div class="form-group">
<label for="range2">有范围的滑块</label>
<input type="range" class="custom-range" min="0" max="5" id="range2">
</div>
<div class="form-group">
<label for="range3">规定步长的滑块</label>
<input type="range" class="custom-range" min="0" max="5" step="0.5" id="range3">
</div>
<!-- 文件选择 -->
<div class="form-group custom-file">
<input type="file" class="custom-file-input" id="file">
<label for="file" class="custom-file-label">Choose fild</label>
</div>
</div>
</div>
</div>
<script>
(function(){
var forms=document.querySelectorAll('.needs-validation');
forms.forEach(function(form,index){
form.addEventListener('submit',function(ev){
//console.log(1);
if(form.checkValidity()===false){ //如果表单验证成功，那这个方法会返回true
ev.preventDefault();
ev.stopPropagation();
}
form.classList.add('was-validated'); //提交事件发生后，不管验证是否成功，都需要给form身上添加这个class
});
});
})();
</script>
</body>
</html>
17.输入框组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="form-row mt-5">
<div class="col">
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">@</span>
</div>
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="form-group input-group">
<input type="text" class="form-control" placeholder="邮箱名">
<div class="input-group-append">
<span class="input-group-text">@example.com</span>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">$</span>
</div>
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">.00</span>
</div>
</div>
<!-- 左边，是网址 -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">https://example.com/users/</span>
</div>
<input type="text" class="form-control">
</div>
<!-- textarea -->
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">文本输入框</span>
</div>
<textarea class="form-control"></textarea>
</div>
<!-- 尺寸 -->
<div class="form-group input-group mt-5 input-group-lg">
<div class="input-group-prepend">
<span class="input-group-text">大尺寸</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">正常尺寸</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group input-group-sm">
<div class="input-group-prepend">
<span class="input-group-text">小尺寸</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 多选框和单选框 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="radio">
</span>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
<input type="text" class="form-control">
</div>
<!-- 多个输入框与多个额外组件 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">多个输入框</span>
</div>
<input type="text" class="form-control" placeholder="请输入姓">
<input type="text" class="form-control" placeholder="请输入名">
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<span class="input-group-text">$</span>
<span class="input-group-text">0.00</span>
</div>
</div>
<!-- 按钮组合 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">左按钮</button>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary">右按钮</button>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">左按钮</button>
<button class="btn btn-outline-secondary">左按钮</button>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary">右按钮</button>
<button class="btn btn-outline-secondary">右按钮</button>
</div>
</div>
<!-- 带下拉列表的按钮组合 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">左侧下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">右侧下拉菜单</button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
</div>
<!-- 分离式按钮与input组合 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<button class="btn btn-outline-success">分离式左侧下拉菜单</button>
<button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
<input type="text" class="form-control">
</div>
<div class="form-group input-group">
<input type="text" class="form-control">
<div class="input-group-append">
<button class="btn btn-outline-success">分离式左侧下拉菜单</button>
<button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split"
data-toggle="dropdown"></button>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">北京</a>
<a href="#" class="dropdown-item">上海</a>
<a href="#" class="dropdown-item">广州</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">深圳</a>
</div>
</div>
</div>
<!-- 自定义表单组合-自定义选择（下拉框） -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<label for="select1" class="input-group-text">label标签在左边</label>
</div>
<select class="custom-select" id="select1">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</div>
<div class="form-group input-group">
<select class="custom-select" id="select2">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<div class="input-group-append">
<label for="select2" class="input-group-text">label标签在右边</label>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-danger">button标签在左边</label>
</div>
<select class="custom-select">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
</div>
<div class="form-group input-group">
<select class="custom-select">
<option value="">城市</option>
<option value="">北京</option>
<option value="">上海</option>
<option value="">广州</option>
</select>
<div class="input-group-append">
<button class="btn btn-outline-danger">button标签在右边</label>
</div>
</div>
<!-- 自定义表单组合-自定义文件 -->
<div class="form-group input-group mt-5">
<div class="input-group-prepend">
<span class="input-group-text">上传在左边</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file1">
<label for="file1" class="custom-file-label"></label>
</div>
</div>
<div class="form-group input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file2">
<label for="file2" class="custom-file-label"></label>
</div>
<div class="input-group-append">
<span class="input-group-text">上传在右边</span>
</div>
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary">按钮在左边</span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" id="file1">
<label for="file1" class="custom-file-label"></label>
</div>
</div>
<div class="form-group input-group">
<div class="custom-file">
<input type="file" class="custom-file-input" id="file2">
<label for="file2" class="custom-file-label"></label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary">按钮在右边</span>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>
18.超大屏幕与列表组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a href="#" class="btn btn-primary btn-lg">Learn more</a>
</div>
</div>
</div>
</div>
<!-- 全屏显示 -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<a href="#" class="btn btn-primary btn-lg">Learn more</a>
</div>
</div>
</div>
</div>
<!-- 全屏显示 -->
<div class="jumbotron jumbotron-fluid">
<div class="container-fluid">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>
</body>
</html>
19.模态框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
</head>
<body>
<div class="modal fade" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 垂直居中的模态框 -->
<div class="modal fade" id="modal2">
<div class="modal-dialog modal-dialog-centered"> <!-- modal-dialog-centered这个class要加在这里 -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
垂直居中的模态框
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 使用栅格系统 -->
<div class="modal fade" id="modal3">
<div class="modal-dialog modal-dialog-centered"> <!-- modal-dialog-centered这个class要加在这里 -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 bg-info border">第1列</div>
<div class="col-md-4 bg-info border">第2列</div>
<div class="col-md-4 bg-info border">第3列</div>
<div class="col-md-12 bg-info border">第4列</div>
</div>
<div class="row">
<div class="col bg-info border">第1列</div>
<div class="col bg-info border">第2列</div>
<div class="col bg-info border">第3列</div>
<div class="col bg-info border">第4列</div>
</div>
<div class="row">
<div class="col-md-5 bg-info">第1列</div>
<div class="col-md-4 bg-info ml-auto">第2列</div>
</div>
<div class="row mt-3">
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
<div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12 bg-info border">超大屏6个，大屏4个，中等屏3个，小屏2个，超小屏1个</div>
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 模态框相同内容不同 -->
<div class="modal fade" id="modal4">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<form action="#">
<div class="form-group">
<label for="username" class="col-form-label">用户名：</label>
<input type="text" class="form-control" id="username">
</div>
<div class="form-group">
<label for="comment" class="col-form-label">评论：</label>
<textarea class="form-control" id="comment"></textarea>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 尺寸大小-超大尺寸 -->
<div class="modal fade bd-example-modal-xl" id="modal5"> <!-- 这里添加.bd-example-modal-xl -->
<div class="modal-dialog modal-xl"> <!-- 这里添加.modal-xl -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
超大尺寸模态框
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 尺寸大小-大尺寸 -->
<div class="modal fade bd-example-modal-lg" id="modal6"> <!-- 这里添加.bd-example-modal-lg -->
<div class="modal-dialog modal-lg"> <!-- 这里添加.modal-lg -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
大尺寸模态框
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 尺寸大小-小尺寸 -->
<div class="modal fade bd-example-modal-sm" id="modal7"> <!-- 这里添加.bd-example-modal-sm -->
<div class="modal-dialog modal-sm"> <!-- 这里添加.modal-sm -->
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
小尺寸模态框
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- data属性 -->
<div class="modal fade" id="modal8">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
data属性
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<!-- 方法与事件 -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">标题</h5>
<button class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
data属性
</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-dismiss="modal">关闭</button>
<button class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row mt-5">
<div class="col">
<button class="btn btn-primary" data-toggle="modal" data-target="#modal1">普通模态框</button>
<button class="btn btn-secondary" data-toggle="modal" data-target="#modal2">垂直居中的模态框</button>
<button class="btn btn-danger" data-toggle="modal" data-target="#modal3">包含栅格系统的模态框</button>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="kaivon">模态框相同内容不同</button>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="陈学辉">模态框相同内容不同</button>
<button class="btn btn-success" data-toggle="modal" data-target="#modal4" data-whatever="吃瓜群众">模态框相同内容不同</button>
<button class="btn btn-info" data-toggle="modal" data-target="#modal5">超大尺寸模态框</button>
<button class="btn btn-info" data-toggle="modal" data-target="#modal6">大尺寸模态框</button>
<button class="btn btn-info" data-toggle="modal" data-target="#modal7">小尺寸模态框</button>
<!-- data属性，需要添加在button身上 -->
<!--
data-backdrop 是否显示遮罩层
data-keyboard 按esc是否关闭模态框
data-focus 让模态框获取到焦点
data-show 初始化时模态框是否显示
-->
<button class="btn btn-dark" data-toggle="modal" data-target="#modal8" data-backdrop="true" data-keyboard="false" data-focus="true" data-show="false">data属性</button>
<button class="btn btn-warning" id="myBtn">方法与事件</button>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
$('#modal4').on('show.bs.modal',function(ev){
/*
1、$(ev.relatedTarget) 这什值为点击的那个button
2、.data('whatever') 这个是获取data-开关的属性的值
*/
var value=$(ev.relatedTarget).data('whatever');
$(this).find('.modal-title').text('新评论来自于：'+value);
$(this).find('.modal-body input').val(value);
});
//方法
$('#myBtn').click(function(){
$('#myModal').modal('show');
});
/* $('#myModal').modal('show');
setTimeout(function(){
$('#myModal').modal('hide');
},2000); */
//事件
$('#myModal').on('show.bs.modal', function (e) {
console.log('显示前');
});
$('#myModal').on('shown.bs.modal', function (e) {
console.log('完全显示了');
});
$('#myModal').on('hide.bs.modal', function (e) {
console.log('隐藏前');
});
$('#myModal').on('hidden.bs.modal', function (e) {
console.log('完全隐藏了');
});
</script>
</body>
</html>
20.媒体对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body{
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<div class="media">
<a href="#"><img class="mr-3" src="images/img_05.jpg" alt="" width="150"></a>
<div class="media-body">
<h5 class="mt-0">每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
</div>
</div>
</div>
</div>
<!-- 嵌套 -->
<div class="row mt-5">
<div class="col">
<div class="media">
<a href="#"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
<div class="media mt-4">
<a href="#"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 对齐-顶部对齐 -->
<div class="row mt-5">
<div class="col">
<div class="media">
<a href="#" class="align-self-start"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
</div>
</div>
</div>
</div>
<!-- 对齐-垂直对齐 -->
<div class="row mt-5">
<div class="col">
<div class="media">
<a href="#" class="align-self-center"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
</div>
</div>
</div>
</div>
<!-- 对齐-底部对齐 -->
<div class="row mt-5">
<div class="col">
<div class="media">
<a href="#" class="align-self-end"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降
</div>
</div>
</div>
</div>
<!-- 列表 -->
<div class="row mt-5">
<div class="col">
<ul class="list-unstyle">
<li class="media">
<a href="#"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进能力下降
</div>
</li>
<li class="media my-4">
<a href="#"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通
</div>
</li>
<li class="media">
<a href="#"><img src="images/img_05.jpg" width="150" class="mr-3" alt=""></a>
<div class="media-body">
<h5>每天运动能改善记忆能力吗？</h5>
美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责记忆形成和存储区域之间的连通性，在进行一次仅仅十分钟的轻度运动（如慢走、瑜伽或太极）之后就会增强。这些发现为上了年纪的人或体能水平低下的人提供了一种简单有效的方法来减缓甚至阻止记忆丧失和认知能力下降美国加州大学欧文分校（UCI）和日本筑波大学的科学家们在研究大脑活动时发现，大脑中负责下降
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
21.导航
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title></title>
<style>
body {
padding-bottom: 1000px;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<ul class="nav"> <!-- 基础类，变成弹性盒模型 -->
<li>
<a class="nav-link" href="#">入门</a> <!-- 变成块元素，并加了一个padding -->
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
<li>
<a class="nav-link" href="#">内容</a>
</li>
<li>
<a class="nav-link" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- 使用nav标签 -->
<div class="row mt-5">
<div class="col">
<nav class="nav">
<a class="nav-link" href="#">使用nav标签</a>
<a class="nav-link" href="#">布局</a>
<a class="nav-link" href="#">内容</a>
<a class="nav-link" href="#">组件</a>
</nav>
</div>
</div>
<!-- 对齐 -->
<div class="row mt-5">
<div class="col">
<!--
1、justify-content-start
2、justify-content-center
3、justify-content-end
这三个都是弹性盒模型里的class（主轴上的对齐方式），把这三个分别演示一下
-->
<ul class="nav justify-content-start">
<li>
<a class="nav-link" href="#">对齐</a>
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
<li>
<a class="nav-link" href="#">内容</a>
</li>
<li>
<a class="nav-link" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- 垂直排列 -->
<div class="row mt-5">
<div class="col">
<!--
垂直排列的class都是弹性盒模型里的class（子元素排列方向）
1、flex-column
2、flex-sm-column
-->
<ul class="nav flex-sm-column">
<li>
<a class="nav-link" href="#">垂直排列</a>
</li>
<li>
<a class="nav-link" href="#">布局</a>
</li>
<li>
<a class="nav-link" href="#">内容</a>
</li>
<li>
<a class="nav-link" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- nav标签也可以实现垂直的导航 -->
<div class="row mt-5">
<div class="col">
<nav class="nav flex-column">
<a class="nav-link" href="#">垂直排列</a>
<a class="nav-link" href="#">布局</a>
<a class="nav-link" href="#">内容</a>
<a class="nav-link" href="#">组件</a>
</nav>
</div>
</div>
<!-- Tabs标签 -->
<div class="row mt-5">
<div class="col">
<!--
1、nav-tabs
2、此时li就应该加上nav-item这个class了。它主要设置了mrgin-bottom。为了去掉当前项的底边框
-->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">tabs标签</a> <!-- 当前激活项 -->
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">组件</a> <!-- 禁用，没有hover样式 -->
</li>
</ul>
</div>
</div>
<!-- 胶囊式（eugk）标签 -->
<div class="row mt-5">
<div class="col">
<ul class="nav nav-pills"> <!-- 通过nav-pills添加 -->
<li class="nav-item">
<a class="nav-link active" href="#">胶囊式标签</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- 分配大小-宽高由内容而定 -->
<div class="row mt-5">
<div class="col">
<!--
1、.nav-fill会将.nav-item按照比例分配空间。会把一行的空间都给分配了。但是每一个导航项的宽度不一定一样。由内容来定
-->
<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">宽度由内容而定</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- nav标签也可以使用nav-fill，但是请注意a标签身上需要添加.nav-item -->
<div class="row">
<div class="col">
<nav class="nav nav-pills nav-fill">
<a class="nav-link nav-item active" href="#">宽度由内容而定</a>
<a class="nav-link nav-item" href="#">布局</a>
<a class="nav-link nav-item" href="#">内容</a>
<a class="nav-link nav-item" href="#">组件</a>
</nav>
</div>
</div>
<!-- 分配大小-宽度为等宽 -->
<div class="row mt-5">
<div class="col">
<!--
1、.nav-justified会将.nav-item按照比例分配空间。会把一行的空间都给均分了。每一项导航的宽度都是一样的
-->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#">宽度为等宽</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">组件</a>
</li>
</ul>
</div>
</div>
<!-- nav标签也可以使用justified，但是请注意a标签身上需要添加.nav-item -->
<div class="row">
<div class="col">
<nav class="nav nav-pills nav-justified">
<a class="nav-link nav-item active" href="#">宽度为等宽</a>
<a class="nav-link nav-item" href="#">布局</a>
<a class="nav-link nav-item" href="#">内容</a>
<a class="nav-link nav-item" href="#">组件</a>
</nav>
</div>
</div>
<!--
弹性布局
1、这里使用的都是弹性布局里的class
-->
<div class="row mt-5">
<div class="col">
<!--
1、flex-column，让子元素在任何尺寸下都变成垂直排列
2、flex-sm-row，让子元素在>=中等屏幕下横着排列
让所有尺寸下都是竖着排，当尺寸为小屏及以上的时候让它横着排
-->
<nav class="nav nav-pills nav-justified flex-column flex-sm-row">
<a class="nav-item nav-link active" href="#">弹性布局</a>
<a class="nav-item nav-link" href="#">布局</a>
<a class="nav-item nav-link" href="#">内容</a>
<a class="nav-item nav-link disabled" href="#">组件</a>
</nav>
</div>
</div>
<!-- 结合下拉菜单 -->
<div class="row mt-5">
<div class="col">
<ul class="nav nav-tabs"> <!-- 最后把这个class换成.nav-pills后，它是一个胶囊式的按钮 -->
<li class="nav-item">
<a class="nav-link active" href="#">下拉菜单</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">城市</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">北京</a>
<a class="dropdown-item" href="#">上海</a>
<a class="dropdown-item" href="#">广州</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">深圳</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">布局</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">内容</a>
</li>
</ul>
</div>
</div>
<!-- 选项卡 -->
<div class="row mt-5">
<div class="col">
<!-- <ul class="nav nav-tabs"> <!-- 然后这个class可以换成是.nav-pills
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#contact">Contact</a>
</li>
</ul> -->
<!-- 也可以使用nav标签 -->
<nav class="nav nav-tabs">
<a class="nav-item nav-link active" data-toggle="tab" href="#home">Home</a>
<a class="nav-item nav-link" data-toggle="tab" href="#profile">Profile</a>
<a class="nav-item nav-link" data-toggle="tab" href="#contact">Contact</a>
</nav>
<div class="tab-content">
<div class="tab-pane fade show active" id="home">
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</div>
<div class="tab-pane fade" id="profile">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
</div>
<div class="tab-pane fade" id="contact">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
</div>
</div>
</div>
</div>
<!-- 垂直形式的选项卡 -->
<div class="row mt-5">
<div class="col-3">
<nav class="nav nav-pills flex-column"> <!-- 这里换两个class -->
<a class="nav-item nav-link active" data-toggle="tab" href="#home1">Home</a> <!-- id要换 -->
<a class="nav-item nav-link" data-toggle="tab" href="#profile1">Profile</a>
<a class="nav-item nav-link" data-toggle="tab" href="#contact1">Contact</a>
</nav>
</div>
<div class="col-9">
<div class="tab-content">
<div class="tab-pane fade show active" id="home1">
Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
</div>
<div class="tab-pane fade" id="profile1">
Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.
</div>
<div class="tab-pane fade" id="contact1">
Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.
</div>
</div>
</div>
</div>
<!-- 方法与事件 -->
<div class="row mt-5">
<div class="nav nav-pills " id="myTab">
<a class="nav-item nav-link active" href="#home2">Home</a>
<a class="nav-item nav-link" href="#profile2">Profile</a>
<a class="nav-item nav-link" href="#contact2">Contact</a>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="home2">
Velit aute mollit ipsum ad dolor consectetur nulla officia culpa adipisicing exercitation fugiat tempor. Voluptate deserunt sit sunt nisi aliqua fugiat proident ea ut. Mollit voluptate reprehenderit occaecat nisi ad non minim tempor sunt voluptate consectetur exercitation id ut nulla. Ea et fugiat aliquip nostrud sunt incididunt consectetur culpa aliquip eiusmod dolor. Anim ad Lorem aliqua in cupidatat nisi enim eu nostrud do aliquip veniam minim.
</div>
<div class="tab-pane fade" id="profile2">
Cupidatat quis ad sint excepteur laborum in esse qui. Et excepteur consectetur ex nisi eu do cillum ad laborum. Mollit et eu officia dolore sunt Lorem culpa qui commodo velit ex amet id ex. Officia anim incididunt laboris deserunt anim aute dolor incididunt veniam aute dolore do exercitation. Dolor nisi culpa ex ad irure in elit eu dolore. Ad laboris ipsum reprehenderit irure non commodo enim culpa commodo veniam incididunt veniam ad.
</div>
<div class="tab-pane fade" id="contact2">
Ut ut do pariatur aliquip aliqua aliquip exercitation do nostrud commodo reprehenderit aute ipsum voluptate. Irure Lorem et laboris nostrud amet cupidatat cupidatat anim do ut velit mollit consequat enim tempor. Consectetur est minim nostrud nostrud consectetur irure labore voluptate irure. Ipsum id Lorem sit sint voluptate est pariatur eu ad cupidatat et deserunt culpa sit eiusmod deserunt. Consectetur et fugiat anim do eiusmod aliquip nulla laborum elit adipisicing pariatur cillum.
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
<script>
//这里与列表组是一样的
//方法
$('#myTab a:last-child').tab('show'); //修改当前激活项
$('#myTab a').on('click', function (e) {
e.preventDefault();
$(this).tab('show');
});
//事件
$('#myTab a:nth-child(2)').on('show.bs.tab', function (e) {
console.log('该内容要显示了');
});
$('#myTab a:nth-child(2)').on('shown.bs.tab', function (e) {
console.log('该内容已经显示了');
});
$('#myTab a:nth-child(2)').on('hide.bs.tab', function (e) {
console.log('该内容要隐藏了');
});
$('#myTab a:nth-child(2)').on('hidden.bs.tab', function (e) {
console.log('该内容已经隐藏了');
})
</script>
</body>
</html>
–明天再更-------------------------------------------------
8357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
