目录
一.响应式网页
二.Bootstrap
三.栅格布局
1.语法
2.源码解析
3.不带数字的col类
4.栅格的列偏移
四.弹性布局
五.关于input 的样式
💥 组件
1.按钮组
2.下拉菜单
3.信息提示框
4.导航
(1) 水平导航
(2) 选项卡导航
(3) 胶囊导航
5.响应式导航栏
6.折叠效果
7.卡片
8.折叠导航栏
9.徽章
10.巨幕
12.分页条
13.焦点轮播图
14.进度条
【前文回顾】👉 bootstrap入门之媒体查询技术、样式类_01
Boot最重要的3个知识：① 手写媒体查询@media；② 栅格布局；③ scss
boot封装栅格的目的，就是为了简化响应式布局
栅格布局，把所有的布局看做一行
用列数来表示每一个块占据宽度的大小
一行一共12列
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
.row 弹性，可换行 左右-15px外边距。让div左右变大15px
.no-gutters 清除row的左右-15px外边距和col的左右+15px内边距
.col-n 左右+15px内边距 flex: 0 0 n/12;
.col
源码：flex-basis:0 基本宽度为0
flex-grow:1 主轴有多余空间的时候，把多余空间平均分配给每一个.col（不带数字）
导致不管有多少个col。都会平均分布主轴空间，直到放不下(即直到文本放不下，因为文本不能压缩)，换行
特点 (1) 不按照一行12分来计算
(2) 一行的col可以远远超过12个
offset-*-n *:sm/md/lg/xl n:1~11 ——带响应式的栅格列偏移
源码：margin-left
🔹 示例1： 栅格布局练习
运行结果：
🔹 示例2： 栅格布局练习
运行结果：
🔹 示例3： 栅格布局练习
运行结果：
🔹 示例4： 栅格布局练习
运行结果：
① 显示方式：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
结果：
🔹 栅格和弹性的关系
只要父元素设置了弹性，x轴从左向右的主轴(主轴方向是x轴)，可换行，就可以当做栅格的row来用。也就是说，如果不用栅格的row，可以使用弹性来写满足以上3个条件（实际上写2个条件即可，因为弹性的主轴方向默认就是x轴）就相当于row的功能。
.form-control boot为文本框封装的样式
运行结果：
在项目中有很多样式特效和js特效
通过样式和自定义属性方式，把特效进行了封装
只要我们把类名和自定义属性写对，就能完成特效
boot封装的特效，样式和功能都是有限的
boot使用自定义属性的方式，来调用封装好的js特效
例如，轮播图需要使用js写，boot就使用自定义属性的方式，调用封装好的js轮播图特效
① 哪个元素激活方法
② 方法影响的是哪个元素
把多个按钮，放在一个组里显示
div. btn-group 弹性，主轴为x轴 ——水平按钮组
>a.btn
结果：
. btn-group-vertical 弹性，主轴为y轴 ——垂直按钮组
结果：
. btn-group-lg/sm 设置按钮组大小
执行结果：
结构
div.dropdown 相对定位 ——查看boot类dropdown源码 3137行
>btn.dropdown-toggle 添加一个向下的小按钮
+ul.dropdown-menu 隐藏
事件
① 哪个元素激活方法 按钮 data-toggle="dropdown" ——data-toggl是数据切换的意思
② 方法影响的是哪个元素 由于在同一个父元素结构下，不需要写事件影响的目标
执行结果：
结构
div.alert 基本类
.alert-danger/warning...... ——提示框的颜色
.alert-dismissible ——让后代.close颜色与背景色匹配
>.close 小叉叉
事件
① 哪个元素激活方法 小叉叉 data-dismiss="alert"
② 方法影响的是哪个元素 不需要定义目标元素
结果：
(1) 水平导航
结构
ul.nav 弹性，x轴
>li.nav-item
>a.nav-link
执行结果：
(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"
结果：
(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.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
执行结果：
.btn
div.collapse
事件
1.激发事件的元素 .btn data-toggle="collapse"
2.目标元素 div 在btn中data-target="#div的id"
在a标签中绑定 事件目标用href="#目标id"
执行结果：
div.card
>div.cad-header
+div.card-body
+div.card-footer
注意：card-header、card-body、card-footer三个可以只有其中一个，谁离了谁都行，每一个都叫卡片
执行结果：
执行结果：
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以下隐藏
执行结果：
基本类 .badge
颜色 badge-danger/warning/info......
胶囊徽章 badge-pill
执行结果：
jumbotron 巨大的内边距，带背景色
执行结果：
11.面包屑导航
ul. breadcrumb
>li. breadcrumb-item
>a
目前只要有文本符号连接的层进关系，都叫面包屑导航
执行结果：
ul.pagination 弹性，x轴
>li.page-item 让第一个li内部的a标签有左上，左下圆角
让最后一个li内部的a标签有右下，右上圆角
.active 让被选中的li下的a改变样式
.disabled 让被禁用li下的a改变样式
>a.page-link
执行结果：
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"
执行结果：
div. progress 定义进度条的槽
>div.progress-bar 定义进度条
.w-100 定义进度
.bg-secondary 定义背景色
.progress-bar-striped 带条纹的进度条
.progress-bar-animated 条纹动画的进度条
执行结果：
【后文传送门】👉 bootstrap入门之Scss知识点详解_03
版权声明：
本文来源网络，所有图片文章版权属于原作者，如有侵权，联系删除。
本文网址：https://www.mushiming.com/mjsbk/15591.html