目录
前言
Bootstrap是什么？有什么用处
Bootstrap 是全球最受欢迎的前端框架，用于构建响应式、移动设备优先的网站。
我们在开发前端页面的时候，如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零开始去写，那就太浪费时间了。所以我们需要一个框架，帮我们实现一个页面的基础部分和解决一些繁琐的细节，只要在它的基础上进行个性化定制就可以了。
Bootstrap 就是这样一个简洁、直观、强悍的前端开发框架，只要学习并遵守它的标准，就能做出很专业、美观的页面，极大地提高工作效率。
一.响应式网页
Response web page响应式网页/自适应
可以根据浏览设备不同（pc，pad，phone，分辨率，尺寸，横竖屏）
而自动改变网页的布局，文本，图片的大小，不会影响用户浏览体验
测试响应式网页
💥 使用真实设备测试
优点：真实可靠
缺点：成本太高，测试周期很长
💥 第三方测试软件
优点：测试方便，简单
缺点：很多硬件是测试不了
💥 使用浏览器自带的测试软件
优点：简单
缺点：极其不靠谱
💥 学习的时候，拖放浏览器尺寸
1.编写响应式网页
(1) 移动端配置视口
只在pc上运行，可以不配置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
width=device-width 视口宽度为设备宽度
initial-scale=1.0 视口初始化时不能缩放
maximum-scale=1.0 最大缩放为1倍
user-scalable=yes 用户可以缩放
最简方式：<meta name="viewport" content="width=device-width, initial-scale=1">
(2) 初学者写响应式
内容，图片尽量使用相对单位，不要用绝对值
尽量使用流式布局（默认文档流+浮动）
尽量使用弹性布局，避免使用定位
(3) 媒体查询技术
为一个网页写多份css代码
根据浏览网页的设备不同，执行其中一份css，忽略其他的css代码
媒体查询完成响应式布局，会极大的增加代码量
复杂页面，不建议使用响应式
2.使用媒体查询
@media 条件1 and 条件2 and 条件3{
#content{width:50%}
#d1{color:red}
}
@media 条件4 and 条件5 and 条件6{
#content{width:100%}
#d1{color:green}
}
媒体查询的条件
(1) 设备 screen （pc/pad/phone）
TV
(2) 屏幕尺寸，约定俗成把所有屏幕尺寸分为5类（宽度）
超大屏 xl v>=1200px min-width:1200px —— extra large
大屏 lg 992px<=v<1200px min-width:992px and max-width:1199.99px ——large
中屏 md 768px<=v<992px ——medium
小屏 sm 576px<=v<768px ——small
超小屏 xs v<576px —— extra small
响应式标准写法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/* xl 红色字体，蓝色背景，36px */
@media screen and (min-width: 1200px) {
#d1 {
color: #f00;
background-color: #0ff;
font-size: 36px;
}
}
/* lg 蓝色字体，黄色背景，30px */
@media screen and (min-width: 992px) and (max-width: 1199.99px) {
#d1 {
color: #0ff;
background-color: #ff0;
font-size: 30px;
}
}
/* md 黄色字体，深灰色背景，24px */
@media screen and (min-width: 768px) and (max-width: 991.99px) {
#d1 {
color: #ff0;
background-color: #333;
font-size: 24px;
}
}
/* sm 深灰色字体，pink背景，16px */
@media screen and (min-width: 576px) and (max-width: 767.99px) {
#d1 {
color: #333;
background-color: pink;
font-size: 16px;
}
}
/* xs pink字体，purple背景，12px */
@media screen and (max-width: 575.99px) {
#d1 {
color: pink;
background-color: purple;
font-size: 12px;
}
}
</style>
</head>
<body>
<div id="d1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto iure
magnam voluptas est ducimus voluptate! Dolores in adipisci suscipit
deleniti natus tempora reprehenderit possimus fuga eius debitis aperiam
unde laborum! Quo error doloribus veniam saepe earum nihil labore ea
quaerat soluta nam incidunt tempora nemo deserunt fugit reiciendis sint ab
quod velit repellendus eveniet facere corporis ex molestiae sapiente
aliquid cumque quas iure odit possimus nulla officia dolor ad dolores
doloremque autem rerum praesentium. Officia obcaecati aperiam magni magnam
dicta illo veritatis minima cupiditate ipsa eaque ipsam consequuntur ea
dignissimos ducimus delectus tenetur nulla consectetur temporibus saepe
nobis. Deserunt laborum repudiandae porro velit odio quo ab iusto.
Quibusdam doloremque autem quia quos similique nesciunt incidunt vel
dignissimos consequatur repellendus quaerat expedita maxime fugiat officia
aliquam perferendis est pariatur quo. Esse error omnis possimus accusamus
aliquid facere. Magni ratione possimus quae quasi non necessitatibus in
omnis iusto doloremque quam iste porro a ducimus! Quaerat animi
dignissimos maiores adipisci dicta aliquid nesciunt placeat laudantium
minima accusantium eaque nemo recusandae ratione enim voluptatum soluta ut
voluptatem doloribus voluptate minus perferendis qui molestias dolores
inventore tempora voluptatibus distinctio eius assumenda quae odio?
Voluptatibus odit officiis animi saepe modi quas natus in voluptate
quaerat tempore soluta molestias distinctio perspiciatis rem dolorem
numquam fuga blanditiis neque excepturi quos. Cumque officiis nesciunt hic
libero vel pariatur blanditiis corporis eveniet voluptate consequatur eos
corrupti at itaque quae ducimus beatae impedit molestiae a eligendi nam
nobis accusantium aliquam aperiam sapiente repudiandae maiores minima
debitis ea doloremque ipsum fugit sunt tempore dolore. Fuga eum doloremque
</div>
</body>
</html>执行结果：
不带超小屏，并向上兼容的写法，一定要注意编写顺序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#parent {
border: 2px solid #f00;
display: flex;
flex-wrap: wrap;
}
#parent>div {
border: 2px solid #00f;
font: 24px jokerman;
box-sizing: border-box;
}
/* 不要超小屏 */
@media (min-width:576px) {
/*sm md lg xl*/
#parent>div {
flex: 0 0 50%
}
}
@media (min-width:768px) {
/*md lg xl*/
#parent>div {
flex: 0 0 33.333%
}
}
@media (min-width:992px) {
/* lg xl*/
#parent>div {
flex: 0 0 25%
}
}
@media (min-width:1200px) {
/* xl*/
#parent>div {
flex: 0 0 20%
}
}
/* @media (min-width:1200px) {
#parent>div{flex:0 0 20%}
}
@media (min-width:992px) and (max-width:1199.99px) {
#parent>div{flex:0 0 25%}
}
@media (min-width:768px) and (max-width:991.99px) {
#parent>div{flex:0 0 33.333%}
}
@media (min-width:576px) and (max-width:767.99px) {
#parent>div{flex:0 0 50%}
}
@media (max-width:575.99px) {
#parent>div{flex:0 0 100%}
} */
</style>
</head>
<body>
<div id="parent">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
</body>
</html>执行结果：
二.Bootstrap
Bootstrap是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。
为了让开发者快速开发，boot把很多样式封装成了类，我们只需要调用对应的类名
👉 1. 起步——如何使用
👉 2. 全局css样式
👉 3. 组件和js插件
👉 4. 定制sass
1.如何使用boot
(1) 定义视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">注：initial 最初的 maximum 最高的
(2) 引入css
<link rel="stylesheet" href="css/bootstrap.css">(3) 引入3个js，必须按照下面顺序引入
<script src="js/jquery.min.js" ></script>
<script src="js/popper.min.js" ></script>
<script src="js/bootstrap.min.js" ></script>补：bootstrap和bootstrap.bundle区别
bootstrap.bundle.js包含了popper.js这个框架，当我们在项目中引入bootstrap.bundle.min.js而不是bootstrap.min.js时，就不需要在前面引入popper.js。只在前面引入jquery.min.js就行了。
popper.min.js 用于设置弹窗、提示、下拉菜单，是第三方插件<script src="bootstrap-4.4.1/js/popper.min.js"></script> <script src="bootstrap-4.4.1/js/bootstrap.min.js"></script> <!-- 上面2个文件的引入等价于下面一个文件的引入--> <script src="bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
(4) 所有的boot代码要求写在div.container中
2.全局样式
Bootstrap 编码规范：编写灵活、稳定、高质量的 HTML 和 CSS 代码的规范。
(1) 容器相关
.container 定宽容器，在不同屏幕下都有最大宽度
congtainer 在每个分辨率范围内有不同的定宽。
➡️ 在576-768之间定宽是max-width:540px；
➡️ 在768-992 之间定宽是max-width:960px；
➡️ 在992-1200之间定宽是max-width:1140px
.container-fluid 变宽容器，宽度永远是body的100%
所有的boot代码必须都写在容器中
(2) 按钮相关
① .btn 基本类，每个按钮必须加的类
btn的源码在bootstrap 2460-2498共38行
基本类的源码中定义了行内块，文本，伪类等的样式
② 带颜色的按钮：btn-danger/warning/success/info/primary/secondary/dark/light
btn-info的源码在bootstrap 2606-2638共32行
③ 镂空按钮：.btn-outline-danger
④ 按钮大小：.btn-lg/sm/block
<div class="container">
<h4>按钮相关</h4>
<input class="btn btn-danger btn-block" type="button" value="红色按钮">
<button class="btn btn-warning">黄色按钮</button>
<a href="#" class="btn btn-success">绿色按钮</a>
<a href="#" class="btn btn-info">信息按钮</a>
<a href="#" class="btn btn-primary">主要按钮</a>
<a href="#" class="btn btn-secondary">次要按钮</a>
<a href="#" class="btn btn-dark">深色按钮</a>
<a href="#" class="btn btn-light">浅色按钮</a>
<br>
<hr>
<br>
<h4>镂空按钮</h4>
<a href="#" class="btn btn-outline-danger btn-lg">红色镂空</a>
<a href="#" class="btn btn-outline-info btn-sm">info镂空</a>
<br>
<hr>
<br>
</div>执行结果：
(3) 图片相关
① rounded 4px 圆角
② rounded-circle 50%圆角（椭圆形）
③ img-thumbnail 带边框，带内边距的缩略图
④ img-fluid 响应式图片，可以缩放，但是不能超过图片本身尺寸的100%
<div class="container">
<h4>图片相关</h4>
<img src="2.jpg" class="img-thumbnail" alt="">
<img src="2.jpg" class="rounded">
<img src="2.jpg" class="rounded-circle">
</div>执行结果：
(4) 文本相关
① 文本颜色：text-muted/danger/warning/primary....
② 大小写，首字符大写：text-uppercase/lowercase/capitalize
③ 字体加粗：font-weight-light/normal/bold
④ 斜体：font-italic
⑤ 字号 ：.h1~~.h6
⑥ 水平对齐方式
text-align：left/center/right/justify ——这是原生的正常css代码
text-*-left/center/right *:sm/md/lg/xl ——这是boot封装的带响应式的水平对齐方式
注意：boot没有封装响应式的justify
我们可以参照boot源码对响应式的水平对齐方式的封装写法，自己封装响应式的justify
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
/* boot没有封装响应式的justify，我们自己可以仿照boot的封装方式，对justify进行封装，代码如下 */
@media (min-width: 576px) {
.text-sm-justify {
text-align: justify !important;
}
}
@media (min-width: 768px) {
.text-md-justify {
text-align: justify !important;
}
}
@media (min-width: 992px) {
.text-lg-justify {
text-align: justify !important;
}
}
@media (min-width: 1200px) {
.text-xl-justify {
text-align: justify !important;
}
}
</style>
</head>
<body>
<div class="container">
<h4>文本相关</h4>
<div class="text-muted text-capitalize font-weight-bold font-italic h3 text-justify">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi autem
eum itaque recusandae neque totam voluptatum cupiditate suscipit
blanditiis illum ea iste nisi velit laborum perferendis veniam a eos
modi alias sed vero obcaecati architecto perspiciatis minus veritatis
maxime quisquam. Consequuntur accusamus fuga magnam pariatur maxime sed
molestiae enim accusantium impedit fugiat nulla aliquam minima nam
soluta assumenda odit quam ducimus ab. Iusto sunt excepturi aliquid at
doloribus corrupti eveniet id velit odit soluta officiis necessitatibus
odio minus. Fugiat assumenda praesentium aliquam labore illo nostrum
voluptatum tempore alias adipisci hic molestias in architecto nobis
dicta ipsa itaque ut? Inventore sit officiis nesciunt explicabo hic
quibusdam quis deleniti beatae dolor consectetur? Distinctio mollitia
iusto eum autem illo libero qui deserunt harum doloribus ipsum eos
eaque! Dolores iure excepturi eaque quos quas corrupti sunt rem
doloribus harum eum velit in ab molestias explicabo quia veniam
similique debitis ut aliquid nemo nulla aperiam consectetur maiores quam
culpa! Expedita iure hic ab dicta velit fugiat sunt distinctio magni
saepe accusamus optio repellendus animi suscipit sint accusantium dolor
molestiae officiis eum sed consequuntur quod facilis aspernatur deleniti
corporis eos qui nihil. Quibusdam est velit veniam facilis qui non animi
commodi a eius aut quod eum.
</div>
</div>
</body>
</html>执行结果：
(5) 列表相关
① list-unstyled 去点
② 列表组
ul. list-group
>li.list-group-item
.list-group-item-danger/info/warning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>列表相关</h4>
<ul class="list-unstyled list-group">
<li class="list-group-item list-group-item-danger">电锯惊魂</li>
<li class="list-group-item list-group-item-warning">死神来了</li>
<li class="list-group-item list-group-item-success">速度与激情</li>
<li class="list-group-item list-group-item-info">小丑回魂</li>
<li class="list-group-item list-group-item-primary">咒怨</li>
</ul>
</div>
</body>
</html>执行结果：
(6) table相关
① table 基本类
② table-bordered 带边框
③ table-danger/warning/info....表格背景
④ table-striped 各行变色，在奇数行添加一层0.05的黑纱
⑤ table-hover 鼠标悬停时，给tr添加0.075的黑纱
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>表格相关</h4>
<table class="table-hover table-striped table table-bordered table-danger ">
<tr>
<th>编号</th>
<th>名称</th>
<th>类型</th>
</tr>
<tr>
<td>1001</td>
<td>魔女</td>
<td>异能</td>
</tr>
<tr>
<td>1002</td>
<td>战斗天使</td>
<td>科幻</td>
</tr>
<tr>
<td>1003</td>
<td>疾速追杀</td>
<td>杀手</td>
</tr>
</table>
</div>
</body>
</html>执行结果：
(7) 辅助相关类
◼️ 边框
① 基本类：border/border-top/border-right/border-bottom/border-left
② 去除边框：border-0/border-top-0/border-right-0/border-left-0/border-bottom-0
③ 边框颜色：border-danger/warning/info
◼️ 背景颜色：bg-transparent/white/danger/info......
◼️ 圆角
① rounded 4px的圆角
② rounded-circle 50%
③ rounded-top/right/bottom/left 设置某个方向的两个圆角
④ rounded-0 去除圆角
◼️ 浮动
float-*-left/right/none *:sm/md/lg/xl
父元素解决高度坍塌：.clearfix
.clearfix的源码在bootstrap 6273行
◼️ 尺寸（单位为%） ——如想使用其他尺寸，可以自己单独写
w-25/50/75/100
h-25/50/75/100
◼️ 内外边距
m/mt/mr/mb/ml/mx/my-*-0/1/2/3/4/5/auto 196个类
mr即margin-right，元素的右外边距
mx即x轴水平方向的左右外边距，即左右外边距
ml即margin-left，元素的左外边距
my即y轴垂直方向的上下外边距，即上下外边距
p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 168个类
*:sm/md/lg/xl
0 0
1 0.25rem
2 0.5rem
3. 1rem
4 1.5rem
5 3rem
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h4>内外边距</h4>
<div class="border border-danger mt-sm-0 mt-md-5 px-sm-0 px-md-5">Lorem ipsum dolor sit.</div>
<br>
<hr>
<br>
<h4>浮动</h4>
<div class="border border-dark clearfix">
<div class="bg-warning float-sm-left float-md-right float-lg-none">11111</div>
<div class="bg-success float-sm-left float-md-right float-lg-none">22222</div>
<div class="bg-danger float-sm-left float-md-right float-lg-none">33333</div>
</div>
<br>
<hr>
<br>
<h4>辅助类</h4>
<div class="bg-transparent rounded border border-info border-top-0">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi doloribus corporis aut harum nemo voluptatem cupiditate possimus adipisci vel sit.
</div>
<br>
<hr>
</div>
</body>
</html>执行结果：
🔹 示例1：手写媒体查询 @media练习
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
#content{
height: 400px;
background: linear-gradient(to right,#0d0439,#592a4c);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.font_lg{
color:#fff;
font-weight: bolder;
font-size: 60px;
}
.details{color:#aaa;}
.imgs{
display: flex;
flex-wrap: wrap;
}
/* 自己新增的样式---添加a标签的hover样式 */
li a:hover{
color: #f9fcfa !important;
text-decoration: none;
}
@media (min-width:576px) {
.details{ font-size: 12px;}
.imgs>img{width: 100%;}
}
@media (min-width:768px) {
.details{ font-size: 16px;}
.imgs>img{width: 50%;}
}
@media (min-width:1200px) {
.details{ font-size: 18px;}
.imgs>img{width: 25%;}
}
</style>
</head>
<body>
<div class="container">
<ul class="list-unstyled bg-dark clearfix py-2 mb-0">
<li class="float-left ml-4"><a class="text-muted" href="#">Bootstrap中文网</a></li>
<li class="float-left ml-3"><a class="text-muted" href="#">起步</a></li>
<li class="float-left ml-3"><a class="text-muted" href="#">全局css</a></li>
<li class="float-left ml-3"><a class="text-muted" href="#">组件</a></li>
<li class="float-left ml-3"><a class="text-muted" href="#">插件</a></li>
<li class="float-left ml-3"><a class="text-muted" href="#">定制</a></li>
</ul>
<div id="content">
<p class="font_lg mt-5">Bootstrap</p>
<p class="details">简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。</p>
<a href="#" class="btn btn-primary">Bootstrap3中文文档(v3.3.7)</a>
<a href="#" class="btn btn-link text-muted btn-sm">Bootstrap2中文文档(v2.3.2)</a>
</div>
<div class="imgs">
<img src="boot-1.png" alt="">
<img src="boot-2.png" alt="">
<img src="boot-3.png" alt="">
<img src="boot-4.png" alt="">
</div>
<!-- **之后会说到栅格的知识，届时使用栅格布局，就可以不用写媒体查询以及 .imgs{display: flex;flex-wrap: wrap;}**
<div class="row no-gutters">
<img class="col-xl-3 col-md-6 col-sm-12 " src="boot-1.png" alt="">
<img class="col-xl-3 col-md-6 col-sm-12 " src="boot-2.png" alt="">
<img class="col-xl-3 col-md-6 col-sm-12 " src="boot-3.png" alt="">
<img class="col-xl-3 col-md-6 col-sm-12 " src="boot-4.png" alt="">
</div> -->
</div>
</body>
</html>运行结果：
素材：boot-1.jpg、boot-2.jpg、boot-3.jpg、boot-4.jpg
🔹 示例2：手写媒体查询 @media练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<meta name="viewport" content="width=device-width,initial-scale=1" />
<link rel="stylesheet" href="css/bootstrap.css" />
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
.container>div {
border: 1px solid #000;
}
.container>div>div {
border: 1px solid #000;
}
</style>
</head>
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-xl-2 col-md-2 col-sm-12">
<ul class="list-unstyled">
<li class="border border-danger"><a href="">豆蔻年华</a></li>
<li class="border border-danger"><a href="">豆蔻年华</a></li>
<li class="border border-danger"><a href="">豆蔻年华</a></li>
<li class="border border-danger"><a href="">豆蔻年华</a></li>
</ul>
</div>
<div class="col-xl-8 col-md-10 col-sm-12">
<div class="row no-gutters">
<div class="col-sm-6 col-md-3 p-1">
<img class="w-100" src="2.jpg" alt="" />
</div>
<div class="col-sm-6 col-md-3 p-1">
<img class="w-100" src="2.jpg" alt="" />
</div>
<div class="col-sm-6 col-md-3 p-1">
<img class="w-100" src="2.jpg" alt="" />
</div>
<div class="col-sm-6 col-md-3 p-1">
<img class="w-100" src="2.jpg" alt="" />
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus
repellendus et hic aut magnam minima quos alias animi illo inventore
reprehenderit veniam explicabo officia fuga tenetur saepe commodi.
Laudantium ratione ullam officia quidem rem animi iure necessitatibus
ducimus quia reiciendis ut beatae minus ipsam facere sapiente dolorum
labore tempore vel eum totam eveniet perspiciatis fugit itaque libero
commodi dolor minima asperiores expedita earum iste amet quam ipsum
est voluptate quasi praesentium enim modi doloremque sed sint at nobis
autem fugiat deserunt odit error. Debitis consequatur tempore numquam
aliquid obcaecati ipsam nemo ipsum rem nam. Eveniet explicabo et
consectetur accusantium recusandae?
</div>
<div class="col-xl-2 d-md-none col-sm-12 d-xl-block">
右侧广告 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Praesentium qui tempora doloribus quisquam porro beatae odio quas sint
ex in aliquid quo distinctio! Natus quidem rem voluptatum nam esse ab
deserunt sed incidunt iste possimus laborum labore est eaque facere in
placeat reprehenderit at nostrum vitae ad. Quo hic consequatur enim
esse eligendi impedit itaque quasi quod voluptas beatae qui architecto
voluptatibus obcaecati minus numquam officiis ad repellat dolore eos
rem mollitia ullam vitae quam. Animi nesciunt molestiae debitis
officiis deleniti aliquid dolor? Dolores vero eum et sequi aut vitae
ad repellat vel id libero minima porro saepe dolore. Quaerat.
</div>
</div>
</div>
</body>
</html>运行结果：
【后文传送门】👉 bootstrap入门之栅格布局、弹性布局、组件类_02
234
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
