【Bootstrap】bootstrap入门之栅格布局、弹性布局、组件类_02
2023-09-14 09:13:40 时间
目录
【前文回顾】👉 bootstrap入门之媒体查询技术、样式类_01
一.响应式网页
二.Bootstrap
三.栅格布局
Boot最重要的3个知识：① 手写媒体查询@media；② 栅格布局；③ scss
boot封装栅格的目的，就是为了简化响应式布局
栅格布局，把所有的布局看做一行
用列数来表示每一个块占据宽度的大小
一行一共12列
1.语法
div.row
>div.col-1/2/3/4/5/6/7/8/9/10/11/12
响应式 col-*-1/2/3/4/5/6/7/8/9/10/11/12
*:sm/md/lg/xl
2.源码解析
.row 弹性，可换行 左右-15px外边距。让div左右变大15px
.no-gutters 清除row的左右-15px外边距和col的左右+15px内边距
.col-n 左右+15px内边距 flex: 0 0 n/12;
3.不带数字的col类
.col
源码：flex-basis:0 基本宽度为0
flex-grow:1 主轴有多余空间的时候，把多余空间平均分配给每一个.col（不带数字）
导致不管有多少个col。都会平均分布主轴空间，直到放不下(即直到文本放不下，因为文本不能压缩)，换行
特点 (1) 不按照一行12分来计算
(2) 一行的col可以远远超过12个
4.栅格的列偏移
offset-*-n *:sm/md/lg/xl n:1~11 ——带响应式的栅格列偏移
源码：margin-left
🔹 示例1： 栅格布局练习
<!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>
.top_height{height: 377px;background: #36d;}
.bottom_height{height: 233px;background: #36d;}
</style>
</head>
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-lg-7 col-sm-12 ">
<div class="top_height mr-lg-1 mb-1"></div>
</div>
<div class="col-lg-5 col-sm-12 ">
<div class="top_height mb-1"></div>
</div>
<div class="col-lg-5 col-sm-12 ">
<div class="bottom_height mr-lg-1 mb-sm-1 mb-lg-0"></div>
</div>
<div class="col-lg-7 col-sm-12">
<div class="row no-gutters">
<div class="col-4 ">
<div class="bottom_height mr-1"></div>
</div>
<div class="col-4 ">
<div class="bottom_height mr-1"></div>
</div>
<div class="col-4 ">
<div class="bottom_height"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>运行结果：
🔹 示例2： 栅格布局练习
<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>
.top_height {
height: 377px;
background: #e8e8e8;
}
.bottom_height {
height: 233px;
background: #e8e8e8;
}
.font_small {
font-size: 0.8rem;
}
.my_img1 {
float: right;
margin-right: 30px;
margin-top: -209px;
/* 只让转换参与过渡 */
transition: transform 1s;
}
@media (min-width: 992px) and (max-width: 1199.99px) {
.my_img1 {
margin-top: -230px;
}
}
@media (min-width: 576px) and (max-width: 767.99px) {
.my_img1 {
margin-top: -250px;
}
}
.my_img1:hover {
transform: scale(1.1);
}
.my_img2 {
transition: 1s;
}
.my_img2:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<div class="row no-gutters">
<div class="col-sm-12 col-lg-7">
<div class="top_height mr-lg-1 mb-1">
<div class="w-50 pt-5 pl-5">
<div class="h2 mb-0">Apple MacBook Air系列</div>
<div class="text-muted font_small mb-3">
酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存
</div>
<div class="h4 text-primary font-weight-normal">￥6988.00</div>
<a class="btn btn-primary" href="#">查看详情</a>
</div>
<img class="my_img1" src="study_computer_img1.png" alt="" />
</div>
</div>
<div class="col-sm-12 col-lg-5">
<div class="top_height mb-1"></div>
</div>
<div class="col-sm-12 col-lg-5">
<div class="bottom_height mr-lg-1 mb-sm-1 mb-lg-0"></div>
</div>
<div class="col-sm-12 col-lg-7">
<div class="row no-gutters">
<div class="col-4">
<div class="bottom_height mr-1"></div>
</div>
<div class="col-4">
<div
class="bottom_height mr-1 d-flex flex-column justify-content-center align-items-center"
>
<img class="my_img2" src="study_computer_img4.png" alt="" />
<span class="font_small">联想小新700 电竞版游戏本</span>
<span class="h4 text-primary">￥6299.00</span>
<a class="btn btn-primary btn-sm" href="#">查看详情</a>
</div>
</div>
<div class="col-4">
<div class="bottom_height"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果：
🔹 示例3： 栅格布局练习
<!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">
<div class="row border border-danger">
<div class="col">
<span class="h1 text-dark">Bootstrap</span>
<span class="font-italic font-weight-normal h1 ml-2">CSS</span>
<span class="h2 font-weight-normal ml-2">Type</span>
</div>
</div>
<div class="border border-danger row">
<div class="col-3 border border-danger offset-9">
<input type="text" class="form-control">
</div>
</div>
<div class="row border border-danger">
<div class="col-3 border border-danger">
<ul class="list-unstyled">
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
</ul>
</div>
<div class="col-6 border border-danger">
<div class="border border-danger">
<p>三人行，必有我师</p>
<p>-----孔子曰</p>
</div>
<table class="table table-striped">
<tr>
<td>编号</td>
<td>名称</td>
<td>作者</td>
<td>价格</td>
</tr>
<tr>
<td>1001</td>
<td>西游记</td>
<td>文华</td>
<td>19.99</td>
</tr>
<tr>
<td>1001</td>
<td>西游记</td>
<td>文华</td>
<td>19.99</td>
</tr>
<tr>
<td>1001</td>
<td>西游记</td>
<td>文华</td>
<td>19.99</td>
</tr>
<tr>
<td>1001</td>
<td>西游记</td>
<td>文华</td>
<td>19.99</td>
</tr>
</table>
</div>
<div class="col-3 border border-danger">
<h2>课程简介</h2>
<ul class="list-unstyled">
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
<li><a href="">Bootstrap</a></li>
</ul>
<p>知识改变命运</p>
<p>勤奋创造奇迹</p>
</div>
</div>
<div class="border border-danger row">
<div class="col text-center p-2">版权所有---天地人web</div>
</div>
</div>
</body>
</html>运行结果：
🔹 示例4： 栅格布局练习
<!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">
<div class="row border border-dark bg-success">
<div class="col-md-2 h1">LOGO</div>
<div class="col-md-4 offset-md-6 col-sm-12">
<input type="text" class="form-control mt-2" />
</div>
</div>
<!-- 没有使用col，div使用row可以让row的左右外边距撑大div，与上面的div.row对齐 -->
<div class="row border border-dark">
<span class="h1 mr-2">Bootstrap</span>
<span class="h1 mr-2 font-weight-normal font-italic">CSS</span>
<span class="h1 font-weight-normal">Type</span>
</div>
<div class="row border border-dark">
<div class="col-lg-2 col-sm-12 border border-dark">
<ul class="list-unstyled">
<li><a href="#">电子产品</a></li>
<li><a href="#">电子产品</a></li>
<li><a href="#">电子产品</a></li>
<li><a href="#">电子产品</a></li>
</ul>
</div>
<div class="col-lg-8 col-sm-12 border border-dark">
<div class="border border-dark row">
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="w-100" src="2.jpg" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="w-100" src="2.jpg" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="w-100" src="2.jpg" />
</div>
<div class="col-lg-3 col-md-6 col-sm-12">
<img class="w-100" src="2.jpg" />
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi neque
commodi tempore accusantium sequi eaque quidem mollitia ratione earum
tempora nesciunt fugit nobis in laudantium unde incidunt a! Placeat
dolorem?
</div>
<div class="col-lg-2 col-sm-12 border border-dark">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem repellat
vero voluptatibus sequi natus vel nisi dignissimos est ullam
aspernatur nostrum unde ea velit saepe autem. Sit incidunt tempore
itaque facilis quidem porro earum delectus velit illum odit iste
cumque eaque vitae quo corrupti dignissimos quaerat laboriosam rerum
nostrum harum quis dolores consequuntur et explicabo excepturi fugiat
dolore. Nihil commodi rerum quis id illum assumenda officia odit
perferendis ea debitis autem nobis necessitatibus odio quod fugiat
explicabo voluptatum soluta eaque quisquam eos. Optio nobis alias
facere rem debitis voluptate fugiat doloremque consequatur error
mollitia magnam expedita reiciendis architecto aperiam pariatur illum
consectetur natus. Omnis libero minus perferendis architecto eveniet
delectus vel recusandae illum hic expedita eum nemo laborum enim
impedit tempore numquam quod quisquam magni eos fugit consequatur aut
labore porro commodi cum. Amet obcaecati aspernatur sed nam
repudiandae sapiente iste unde inventore beatae ducimus rerum dolore
ex est mollitia reiciendis culpa placeat quibusdam voluptate
distinctio veniam ullam praesentium natus? Officia laborum repellendus
numquam distinctio vero dolore quae placeat quia doloremque labore?
Eligendi tempora suscipit ducimus quam ullam officiis voluptas
voluptate provident ab adipisci excepturi similique voluptatem
accusantium laborum aliquid enim quos eius illum cupiditate nam
necessitatibus vero quo assumenda!
</div>
</div>
</div>
</body>
</html>
运行结果：
四.弹性布局
① 显示方式：d-*-none/block/inline/inline-block/flex ——*:sm/md/lg/xl
boot对弹性的封装特别好：d-*-flex
② 主轴的方向：flex-*-row flex-*-row-reverse flex-*-column flex-*-column-reverse
③ 项目是否换行：flex-*-wrap/nowrap
④ 项目们在主轴上的排列方式：justify-content-*-between/around/start/end/center
⑤ 项目们在交叉轴上的排列方式：align-items-*-start/center/end/baseline/stretch
<ul class="list-unstyled bg-light d-flex justify-content-around py-5 text-center">
<li>
<img src="icon1.png" alt="">
<div>品质保障</div>
</li>
<li>
<img src="icon1.png" alt="">
<div>品质保障</div>
</li>
<li>
<img src="icon1.png" alt="">
<div>品质保障</div>
</li>
<li>
<img src="icon1.png" alt="">
<div>品质保障</div>
</li>
</ul>结果：
🔹 栅格和弹性的关系
只要父元素设置了弹性，x轴从左向右的主轴(主轴方向是x轴)，可换行，就可以当做栅格的row来用。也就是说，如果不用栅格的row，可以使用弹性来写满足以上3个条件（实际上写2个条件即可，因为弹性的主轴方向默认就是x轴）就相当于row的功能。
<h4>弹性替代row</h4>
<!-- "d-flex flex-wrap"相当于row -->
<div class="d-flex flex-wrap">
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 border border-danger">1111</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 border border-danger">1111</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 border border-danger">1111</div>
<div class="col-sm-12 col-md-6 col-lg-4 col-xl-3 border border-danger">1111</div>
</div>
五.关于input 的样式
.form-control boot为文本框封装的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>修改bootstrap为文本框封装的样式类.form-control</title>
<style>
.form-control {
display: block;
width: 25%;
padding: 0.375rem 0.75rem;
font-size: 12px;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #007bff;
/* border: 1px solid #ced4da; */
border-radius: 0;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0px 0px 0px 0px #000;
}
/* 文本框提示占位符的样式 ---伪元素::placeholder */
.form-control::placeholder {
color: #6c757d;
opacity: 1;
}
</style>
</head>
<body>
<h4>文本框样式</h4>
<input type="text" class="form-control" placeholder="请输入您的内容">
</body>
</html>
运行结果：
💥 组件
在项目中有很多样式特效和js特效
通过样式和自定义属性方式，把特效进行了封装
只要我们把类名和自定义属性写对，就能完成特效
boot封装的特效，样式和功能都是有限的
boot使用自定义属性的方式，来调用封装好的js特效
例如，轮播图需要使用js写，boot就使用自定义属性的方式，调用封装好的js轮播图特效
① 哪个元素激活方法
② 方法影响的是哪个元素
1.按钮组
把多个按钮，放在一个组里显示
div. btn-group 弹性，主轴为x轴 ——水平按钮组
>a.btn
<div class="btn-group">
<a class="btn btn-danger" href="#">小鸡炖蘑菇</a>
<a class="btn btn-warning" href="#">铁锅炖大鹅</a>
<a class="btn btn-success" href="#">酸菜汆白肉</a>
<a class="btn btn-info" href="#">猪肉炖粉条</a>
</div>结果：
. btn-group-vertical 弹性，主轴为y轴 ——垂直按钮组
结果：
. btn-group-lg/sm 设置按钮组大小
<div class="btn-group-vertical btn-group-lg">
<a class="btn btn-danger" href="#">小鸡炖蘑菇</a>
<a class="btn btn-warning" href="#">铁锅炖大鹅</a>
<a class="btn btn-success" href="#">酸菜汆白肉</a>
<a class="btn btn-info" href="#">猪肉炖粉条</a>
</div>
<hr>
<div class="btn-group-vertical btn-group-sm">
<a class="btn btn-danger" href="#">小鸡炖蘑菇</a>
<a class="btn btn-warning" href="#">铁锅炖大鹅</a>
<a class="btn btn-success" href="#">酸菜汆白肉</a>
<a class="btn btn-info" href="#">猪肉炖粉条</a>
</div>执行结果：
2.下拉菜单
结构
div.dropdown 相对定位 ——查看boot类dropdown源码 3137行
>btn.dropdown-toggle 添加一个向下的小按钮
+ul.dropdown-menu 隐藏
事件
① 哪个元素激活方法 按钮 data-toggle="dropdown" ——data-toggl是数据切换的意思
② 方法影响的是哪个元素 由于在同一个父元素结构下，不需要写事件影响的目标
<!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>
</style>
</head>
<body>
<div class="container">
<h4>下拉菜单</h4>
<div class="dropdown">
<button data-toggle="dropdown" class="btn btn-info dropdown-toggle">黑暗料理</button>
<ul class="dropdown-menu">
<li><a href="#">姜丝炒土豆丝</a></li>
<li><a href="#">板蓝根泡面</a></li>
<li><a href="#">橘子炒月饼</a></li>
<li><a href="#">臭豆腐炖榴莲</a></li>
</ul>
</div>
</div>
</body>
</html>执行结果：
3.信息提示框
结构
div.alert 基本类
.alert-danger/warning...... ——提示框的颜色
.alert-dismissible ——让后代.close颜色与背景色匹配
>.close 小叉叉
事件
① 哪个元素激活方法 小叉叉 data-dismiss="alert"
② 方法影响的是哪个元素 不需要定义目标元素
<div class="container">
<h4>信息提示框</h4>
<div class="alert alert-danger alert-dismissible">
<span data-dismiss="alert" class="close">×</span>
<span>
大聪明最可爱！！！Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga perferendis eveniet obcaecati aspernatur temporibus suscipit ratione id ea quis debitis. Rem dignissimos praesentium excepturi beatae sunt modi ipsa repellendus in.
</span>
</div>
</div>结果：
4.导航
(1) 水平导航
结构
ul.nav 弹性，x轴
>li.nav-item
>a.nav-link
<div class="container">
<h4>水平导航</h4>
<ul class="nav">
<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="#">PLUS会员</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">闪购</a>
</li>
</ul>
</div>执行结果：
(2) 选项卡导航
结构
ul.nav.nav-tabs 让内部所有的的nav-link变成选项卡的样式
>li.nav-item
>a.nav-link 被选中.active
div.tab-content
>div.tab-pane 与tab-content配合，隐藏
事件
1.触发事件的元素 a data-taggle="tab" ——data-taggle是指以什么事件触发
2. 目标元素 div.tab-pane 在a中绑定 事件目标href="#目标id"
<div class="container">
<h4>选项卡导航</h4>
<ul class="nav nav-tabs">
<li class="nav-item">
<a data-toggle="tab"
class="nav-link active" href="#t1">口红</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#t2">包包</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#t3">鞋</a>
</li>
<li class="nav-item">
<a data-toggle="tab" class="nav-link" href="#t4">男明星</a>
</li>
</ul>
<div class="tab-content">
<div id="t1" class="tab-pane active">
小金条,红丝绒,女王权杖,TF,YSL,故宫
</div>
<div id="t2" class="tab-pane">
CHANEL,GUCCI,爱马仕
</div>
<div id="t3" class="tab-pane">
LV,华伦天奴,鸿星尔克,GUCCI,老北京布鞋
</div>
<div id="t4" class="tab-pane">
肖战,鹿晗儿,坤坤,岳岳,亮仔
</div>
</div>
</div>结果：
(3) 胶囊导航
结构
ul.nav.nav-pills 让内部所有的的nav-link变成选项卡的样式
>li.nav-item
>a.nav-link 被选中.active
div.tab-content
>div.tab-pane 与tab-content配合，隐藏
事件
1.触发事件的元素 a data-taggle="pill"
2.目标元素 div.tab-pane 在a中绑定 事件目标href="#目标id"
<div class="container">
<h4>胶囊导航</h4>
<ul class="nav nav-pills">
<li class="nav-item">
<a data-toggle="pill" class="nav-link active" href="#t5"> 球鞋</a>
</li>
<li class="nav-item">
<a data-toggle="pill" class="nav-link" href="#t6">汽车</a>
</li>
<li class="nav-item">
<a data-toggle="pill" class="nav-link" href="#t7">手表</a>
</li>
<li class="nav-item">
<a data-toggle="pill" class="nav-link" href="#t8">电子产品</a>
</li>
</ul>
<div class="tab-content">
<div id="t5" class="tab-pane active">
AJ1,AJ9,AJ11,AJ12,AJ13,YEEZEE
</div>
<div id="t6" class="tab-pane">
五菱宏光,大G,GTR,恩佐
</div>
<div id="t7" class="tab-pane">
百达翡丽，江诗丹顿，理查德，小天才，大聪明
</div>
<div id="t8" class="tab-pane">
机械键盘，鼠标，显卡，硬盘，pad
</div>
</div>
</div>执行结果：
5.响应式导航栏
div.navbar 相对定位，弹性，x轴，主轴两端对齐，交叉轴居中
.navbar-expand-sm/md/lg/xl
如果这个选择器成立，那么他的儿子navbar-nav的主轴变为x轴
如果不成立，那么他的儿子navbar-nav的主轴是默认的y轴
>ul.navbar-nav 弹性 y轴 ——源码默认主轴为y轴
>li.nav-item
>a.nav-link
<div class="container">
<h4>响应式导航栏</h4>
<div class="navbar navbar-expand-lg">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">导航栏1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">导航栏1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">导航栏2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">导航栏3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">导航栏4</a>
</li>
</ul>
</div>执行结果：
6.折叠效果
.btn
div.collapse
事件
1.激发事件的元素 .btn data-toggle="collapse"
2.目标元素 div 在btn中data-target="#div的id"
在a标签中绑定 事件目标用href="#目标id"
<div class="container">
<h4>折叠</h4>
<button data-target="#d1" data-toggle="collapse" class="btn btn-danger">折叠</button>
<div id="d1" class="alert alert-danger collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur iusto ullam tempora repellat suscipit nam in accusamus saepe. Aspernatur eveniet nisi natus quae dolore impedit dolor delectus nesciunt maxime suscipit.
</div>
</div>执行结果：
7.卡片
div.card
>div.cad-header
+div.card-body
+div.card-footer
注意：card-header、card-body、card-footer三个可以只有其中一个，谁离了谁都行，每一个都叫卡片
<div class="container">
<h4>卡片</h4>
<div class="card">
<div class="card-header">
<h2>背锅的总是一个人</h2>
</div>
<div class="card-body">
<p>不管是谁的错，总是你被飞</p>
</div>
<div class="card-footer">
<p>请拨打110</p>
</div>
</div>
</div>执行结果：
<div class="container">
<h4>卡片和折叠组合，手风琴</h4>
<div id="parent">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#c1">卡片1</a>
</div>
<!-- 方案三：把card-body放进collapse里，是为了点击时折叠后，不留下.card-body的div自带的内边距 -->
<div data-parent="#parent" id="c1" class="collapse">
<div class="card-body ">
<h1>高圆圆</h1>
</div>
</div>
<!-- 方案一：
可以实现折叠，只不过折叠时比较卡顿，所以.card-body和.collapse尽量不要放在一个div上一起使用
<div id="c1" class="card-body collapse">
<h1>高圆圆</h1>
</div>
-->
<!--
方案二：让.card-body套着.collapse
我们可以把.collapse放进另外一个div上，这个div放进.card-body里面
出现问题：可以实现折叠，也不卡顿，但是由于.cart-body默认是有内边距的，被留了下来
所以，统一采用方案三
<div id="c1" class="card-body">
<div class="collapse">
<h1>高圆圆</h1>
</div>
</div>
-->
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#c2">卡片2</a>
</div>
<div data-parent="#parent" id="c2" class="collapse">
<div class="card-body ">
<h1>迪丽热巴</h1>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#c3">卡片3</a>
</div>
<div data-parent="#parent" id="c3" class="collapse">
<div class="card-body ">
<h1>江疏影</h1>
</div>
</div>
</div>
</div>
</div>执行结果：
8.折叠导航栏
div.navbar
.navbar-dark 让内部3个部分的文本，都变为浅色
.bg-dark
.navbar-expand-lg 1.让按钮在lg以上隐藏，在lg以下显示
2.让ul在lg以上横向，在lg以下纵向
3.让div.navbar-collapse在lg以上显示，在lg以下隐藏
>a.navbar-brand 被父元素navbar-dark设置为浅色
+button.navbar-toggler 配合父元素navbar-expand-lg 让按钮在lg以上隐藏，在lg以下显示
>span.navbar-toggler-icon 被父元素navbar-dark设置为浅色
+div.collapse display:none 隐藏
.navbar-collapse 配合navbar-expand-lg，在lg以上显示，在lg以下隐藏
<div class="container">
<h4>折叠导航栏</h4>
<!-- .navbar-dark之所以没有封装背景，是为了让用户自定义背景 -->
<div class="navbar navbar-dark bg-dark navbar-expand-lg">
<!-- 1.最左边，永远显示的菜单项 -->
<a class="navbar-brand" href="#">Bootstrap中文网</a>
<!-- 2.md以下显示，md以上隐藏的按钮 -->
<button data-toggle="collapse" data-target="#d1" class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
<!-- 3.隐藏的菜单 -->
<div id="d1" class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#">Boot3</a></li>
<li class="nav-item"><a class="nav-link" href="#">Boot4</a></li>
<li class="nav-item"><a class="nav-link" href="#">LESS教程</a></li>
<li class="nav-item"><a class="nav-link" href="#">jQuery教程</a></li>
<li class="nav-item"><a class="nav-link" href="#">网站实力</a></li>
</ul>
</div>
</div>
</div>执行结果：
9.徽章
基本类 .badge
颜色 badge-danger/warning/info......
胶囊徽章 badge-pill
<div class="container">
<h4>徽章</h4>
<ul class="list-group">
<li class="list-group-item">赞<a class="badge badge-success badge-pill" href="#">666</a></li>
<li class="list-group-item">踩<a class="badge badge-danger" href="#">2342</a></li>
<li class="list-group-item">关注<a class="badge badge-warning" href="#">21321</a></li>
</ul>
</div>执行结果：
10.巨幕
jumbotron 巨大的内边距，带背景色
<div class="container">
<h4>巨幕</h4>
<div class="jumbotron">
<h3>做人不能太聪明</h3>
<p>拼多多话太多</p>
<p>做人不能太晓帆</p>
</div>
</div>执行结果：
11.面包屑导航
ul. breadcrumb
>li. breadcrumb-item
>a
目前只要有文本符号连接的层进关系，都叫面包屑导航
<div class="container">
<h4>面包屑导航</h4>
<ul class="breadcrumb bg-transparent">
<li class="breadcrumb-item"><a class="text-dark" href="#">首页</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="#">学习用品</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="#">笔记本电脑</a></li>
<li class="breadcrumb-item"><a class="text-dark" href="#">MBP</a></li>
</ul>
</div>执行结果：
12.分页条
ul.pagination 弹性，x轴
>li.page-item 让第一个li内部的a标签有左上，左下圆角
让最后一个li内部的a标签有右下，右上圆角
.active 让被选中的li下的a改变样式
.disabled 让被禁用li下的a改变样式
>a.page-link
<!-- css代码 -->
<style>
.pagination .page-item a.page-link{
background-color: transparent;
border-radius: 0.25rem;
}
.page-item+.page-item{
margin-left: .5rem;
}
.page-item.active a.page-link{
color:#fff;
background-color: #0aa1ed;
}
.page-item .page-link:hover{
border: 1px solid #0aa1ed;
}
</style>
<!-- HTML代码 -->
<div class="container">
<h4>分页条</h4>
<div class="bg-light d-flex justify-content-end py-3 pr-3">
<ul class="pagination mb-0">
<li class="page-item disabled">
<a class="page-link" href="#">上一页</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">下一页</a>
</li>
</ul>
</div>
</div>执行结果：
13.焦点轮播图
div.carousel
>.div.carousel-inner w-100 溢出隐藏
>div.carousel-item display-none;w-100
.active 显示
>img .w-100 ——坑！！！，需要给img设置宽度100%
第一部分的事件 在最外层 添加 data-ride="carousel"
这个事件，可以让图片显示，同时也让轮播指示器的点跟着图片动
👉 轮播指示器，与carousel-inner平级
ul.carousel-indicators
>li 第一个li添加.active
需要重写样式
事件：① 激活事件的元素 li data-slide-to="n" n对应图片，以0开头
② 事件影响的目标 li绑定最外层div.carousel的id data-target="#demo"
👉 左右箭头，与轮播指示器，还与图片div.carousel-inner平级
a.carousel-control-next/prev
>span.carousel-control-next/prev-icon
需要重写样式
事件：
① 激活事件的元素 a data-slide="prev/next"
② 事件影响的目标元素 a的href中绑定最外层div.carousel的id href="#demo"
<!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>
/* 重写轮播指示器的样式 */
.carousel-indicators li {
width: 0.8rem;
height: 0.8rem;
border-radius: 50%;
background-color: #fff;
margin: 0px 0.25rem;
}
.carousel-indicators .active {
background-color: #0aa1ed;
}
/* 重写左右箭头的样式 */
.carousel-control-prev,
.carousel-control-next {
width: 4%;
height: 20%;
top: 40%;
border-radius: 0.25rem;
background-color: #aaa;
}
.carousel-control-prev {
left: 5px;
}
.carousel-control-next {
right: 5px;
}
</style>
</head>
<body>
<div class="container">
<div id="demo" class="carousel" data-ride="carousel">
<!-- 1.轮播的图片 -->
<div class="carousel-inner">
<div class="carousel-item active">
<img class="w-100" src="banner1.png" />
</div>
<div class="carousel-item">
<img class="w-100" src="banner2.png" />
</div>
<div class="carousel-item">
<img class="w-100" src="banner3.png" />
</div>
<div class="carousel-item">
<img class="w-100" src="banner4.png" />
</div>
</div>
<!-- 2.轮播指示器 -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
<li data-target="#demo" data-slide-to="3"></li>
</ul>
<!-- 3.左右箭头 -->
<a data-slide="next" href="#demo" class="carousel-control-next">
<span class="carousel-control-next-icon"></span>
</a>
<a data-slide="prev" href="#demo" class="carousel-control-prev">
<span class="carousel-control-prev-icon"></span>
</a>
</div>
</div>
</body>
</html>
执行结果：
14.进度条
div. progress 定义进度条的槽
>div.progress-bar 定义进度条
.w-100 定义进度
.bg-secondary 定义背景色
.progress-bar-striped 带条纹的进度条
.progress-bar-animated 条纹动画的进度条
<div class="container">
<h4>进度条的项目应用</h4>
<div class="progress">
<div class="progress-bar w-100 bg-danger">危险</div>
<div class="progress-bar w-100 bg-warning">一般</div>
<div class="progress-bar w-100 bg-success">安全</div>
</div>
<br>
<hr>
<br>
<h4>进度条</h4>
<div class="progress">
<div class="progress-bar w-100 bg-danger progress-bar-striped progress-bar-animated"></div>
</div>
<div class="progress">
<div class="progress-bar w-100 bg-warning progress-bar-striped progress-bar-animated"></div>
</div>
<div class="progress">
<div class="progress-bar w-100 bg-success progress-bar-striped progress-bar-animated"></div>
</div>
<div class="progress">
<div class="progress-bar w-100 bg-info progress-bar-striped progress-bar-animated"></div>
</div>
<div class="progress">
<div class="progress-bar w-100 bg-primary progress-bar-striped progress-bar-animated"></div>
</div>
<div class="progress">
<div class="progress-bar w-100 bg-secondary progress-bar-striped progress-bar-animated"></div>
</div>
</div>执行结果：
【后文传送门】👉 bootstrap入门之Scss知识点详解_03
相关文章
- Oracle之 UTL_FILE 包用法详解_bootstrap表格分页
- Bootstrap 时间控件 datetimepicker
- mac网页设计工具Bootstrap Studio Macv6.1.3
- bootstrap-datepicker限定可选时间范围
- 移动端笔记(8)之bootstrap案例
- BootStrap应用开发学习入门1
- BootStrap插件组件使用总结
- bootstrap使用教程_bootstrap 教程
- 前端之路：bootstrap 时间日期日历控件（datetimepicker）
- 结合 Bootstrap + Vue 组件实现 Laravel 异步分页功能
- R语言缺失数据变量选择LASSO回归：Bootstrap重（再）抽样插补和推算
- SAP UI5 index.html 里的 bootstrap script 介绍
- Bootstrap基础篇—常见的CSS类详解编程语言
- bootstrap入门详解编程语言
- 下拉菜单插件bootstrap-selected 的简单应用详解编程语言