Boot strap 官网
https://www.bootcss.com/
接下来我将一步一步进入 Bootstrap的介绍
一.响应式布局
Responsive web page 响应式网页/自适应网页
页面根据浏览设备不同
自动改变布局，图片/文本效果
不会影响用户体验
1.完成响应式布局，我们要做的事情
①设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width 视口宽度为设备宽度
initial-scale=1.0 初始化视口不缩放
maximum-scale=1.0 最大缩放倍率，1倍
user-scalable=0 用户不能缩放
特点：1.视口的设置，只有网页在移动端显示时才会生效，PC显示看不出效果
2.视口的简写方式，
<meta name="viewport" content="width=device-width, initial-scale=1">
②刚开始时为了不破坏页面的布局的建议:
多使用流式布局（默认文档流+浮动）和弹性布局，少用定位
文本，图片，尺寸，尽量使用相对单位，少用绝对单位
复杂页面，不适合使用响应式编写-
③使用css提供的媒体查询技术(稍后介绍)
2.响应式网页的测试
①使用真实设备测试
优点：真实可靠
缺点：成本太高，测试任务量巨大
②第三方测试工具
好处：测试成本低廉，效果尚可
缺点：很多硬件功能无法实现
③chrome自带的测试软件
测试效果极其有限
④直接拖动浏览器,控制页面大小,进行测试
3.媒体查询技术
Media 媒体，只浏览网页的设备
设备:screen: pc/ pad/phone
显示设备:TV 电视
应用设备:print 打印机
屏幕尺寸
|
超小屏 xs |
size<576px |
|
小屏 sm |
576px<=size<768px 条件写为 min-width:576px and max-width:767.99px |
|
中屏 md |
768px <=size<992px |
|
大屏 lg |
992px <=size<1200px |
|
超大屏 xl |
size>=1200px |
写法:
@media 条件{ //如@media screen and (min-width:576px) and (max-width:767.99px){}
选择器{样式声明}
选择器{样式声明}
选择器{样式声明}
}
条件： 设备 and 屏幕尺寸
@media设备 and 屏幕尺寸{
选择器{样式声明}
}
简写方式
①条件中，只写尺寸
@media 屏幕尺寸{ //如@media (min-width:576px) and (max-width:767.99px){}
选择器{样式声明}
}
②尺寸条件也可简写
@media (min-width:576px){}
@media (min-width:768px){}
@media (min-width:992px) {}
@media (min-width:1200px) {}
这种写法的优势，小屏编写的样式，如果较大屏幕没有重写，直接会应用小屏幕的样式
二.Bootstrap
boot把常用样式进行了封装，我们使用的时候，只需要调用类名
但是，关于具体数值和具体颜色的类名，中大型项目不会使用
接下来从这官网的五点一一介绍.起步----如何使用boot ;全局css;.组件和插件;.scss;.boot项目
1.起步----如何使用boot
Bootstrap3屏幕类型
/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */
/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }
/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }
/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }
Bootstrap4 屏幕类型 下面的介绍 以Bootstrap4为准
/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的设备优先的） */
/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min)
①添加视口的设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
②按照顺序导入4个文件
官网https://www.bootcss.com/中可以下载得到这些文件
<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>
③添加div,设置类名container，所有html元素写在这个div中
<div class="container"></div>
2.全局css
boot把很多样式封装成了类，我只需要调用类名就可以使用
但是，封装的具体数值和具体颜色，使用很少,记住常用的即可
I:接下来一一介绍常用的类
①容器
1.定宽容器 container 在不同屏幕下都定义了最大宽度 如<div class='container'></div>
2.变宽容器container-fluid 宽度随着body改变而变化
②按钮相关的class
.btn 基本类 行内块，文本，边框背景，过渡，伪类
按钮颜色 btn-danger/warning/success/info/primary/secondary/dark/light
按钮的大小 btn-lg/sm
镂空按钮 btn-outline-danger/warning......
块级按钮 btn-block
③图片
rounded 圆角
rounded-circle 圆
img-thumbnail 有边框，有内边距的缩略图
img-fluid 图片尺寸可以改变，但是不能超过图片原始尺寸的100%
④文本相关的样式
文本颜色 text-muted/danger/warning.........
文本大小写 text-uppercase/lowercase/capitalize
文本加粗 font-weight-normal/bold/light
斜体 font-italic
字号 .h1~~.h6
文本水平对齐方式 boot为水平对齐封装了响应式,没有封装两端对齐justify
text-*-left/center/right *:sm/md/lg/xl 响应小屏/中屏/大屏/超大屏的对齐方式
⑤列表组
去除列表标识 list-unstyled
列表组 ul. list-group 弹性，y轴 设置四个角的圆角
>li. list-group-item 设置圆角上下外边距
. list-group-item-danger 列表项的颜色
⑥table相关的样式
table 基本类，宽度，后续th,td的样式
table-bordered 设置表格本身和th,td的边框
table-danger 表格背景
table-striped 给奇数tr添加一层黑纱
table-hover 给tr鼠标悬停时添加一层黑纱
II,辅助类---所有元素都能设置的类
①边框
基本类 border
border-top/right/bottom/left 单独设置某条边框有或没有0
border-0 清除边框
border-top/right/bottom/left-0 单独设置某条边框没有
边框颜色 border-danger/white......
②浮动
float-*-left/right/none *:sm/md/lg/xl 响应式的在对应大小屏幕上朝对应方向浮动
clearfix 解决高度坍塌 添加该属性即可
③背景
bg-transparent/danger/warning...... 改变背景颜色
④圆角
rounded 普通的圆角 0.25rem为半径的四角
rounded-circle 50%的圆角
rounded-top/right/bottom/left 单方向两角取0.25rem为半径圆角
rounded-0 去除圆角
⑤内外边距
m/mt/mr/mb/ml/my/mx-0/1/2/3/4/5/auto
四边外边距/上外边距/右外边距/下外边距/左外边距/上下外边距/左右外边距-取值0到5 auto居中
m/mt/mr/mb/ml/my/mx-*-0/1/2/3/4/5/auto *:sm/md/lg/xl 对应响应式的外边距调整
p/pt/pr/pb/pl/py/px-0/1/2/3/4/5 内边距-取值0到5没有auto
p/pt/pr/pb/pl/py/px-*-0/1/2/3/4/5 *:sm/md/lg/xl 对应响应式的内边距调整
其中的值代表的单位
0:0px
1: 0.25rem
2: 0.5rem
3: 1rem
4: 1.5rem
5: 3rem
⑥尺寸
w-25/50/75/100 取父元素的百分比值
h-25/50/75/100 取父元素的百分比
3.栅格布局
①栅格的原理
把所有的布局，看做一行，每一行分成12份
那么通过元素占据的份数，来控制元素的布局
父元素 .row 弹性，可换行，主轴是x，左右-15px外边距
类 .no-gutters 清除弹性容器的左右-15外边距 清除所有子元素col的左右15内边距
子元素 .col-n 左右+15内边距(父元素no-gutters 可以清除) n表示占12份中的多少份
源码写法为flex:0 0 (n/12)% 即主轴占比
②响应式栅格
col-*-1/2/3/4/5/6/7/8/9/10/11/12 *：sm/md/lg/xl
响应不同屏幕尺寸下元素占据不同的份数
③不带数字的col类
.col 自动把整个row进行平分显示
一行中col的个数，可以超过12个,知识全部均分了,当超过一行后会自动换行
④列偏移
offset-*-1/2/3/4/5/6/7/8/9/10/11 *:sm/md/lg/xl
响应不同屏幕尺寸下将某元素忘右移动1到11份 没有12(默认一行只有12份),
源码是margin-left
4.弹性布局
①栅格布局和弹性布局的关系
只要父元素设置了display: flex;flex-wrap: wrap;
那么子元素都可以使用col
②boot对于display的封装
d-*-inline/block/inline-block/flex/table/inline-flex
*:sm/md/lg/xl
③boot对弹性属性的封装
boot对弹性封装的非常好
项目换行
flex-*-wrap
flex-*-nowrap *:sm/md/lg/xl
主轴方向
flex-*-row
flex-*-row-reverse
flex-*-column
flex-*-column-reverse
*:sm/md/lg/xl
项目们在主轴上的排列方式
justify-content-*-between
justify-content-*-around
justify-content-*-start
justify-content-*-center
justify-content-*-end
*:sm/md/lg/xl
项目们在交叉轴上的排列方式
align-items-*-stretch
align-items-*-baseline
align-items-*-start
align-items-*-end
align-items-*-center
*:sm/md/lg/xl
5.文本框样式
form-control 块级，w-100 字体，背景，边框，过渡
.form-control {
display: block;
width: 100%;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
View Code
三.组件和插件
很多网页中的特效，需要使用js完成
boot把这些特效进行了封装，不需要写js就能出现效果
boot使用自定义属性的方式，进行了封装
1.下拉菜单
<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>
View Code
结构
div. dropdown 相对定位
>btn. dropdown-toggle 向下小三角
+ul. dropdown-menu display:none
事件
①激活事件的元素 btn data-toggle="dropdown"
②事件作用的目标元素 ul 在标准结构中，有共同的父级元素，所以不需要绑定
效果
点击后
2.按钮组
btn-group 横向列表组 弹性，x轴，去掉中间的圆角
btn-group-vertical 纵向按钮组 弹性，y轴，去除中间圆角
按钮组大小 btn-group-sm/lg
<h4>按钮组</h4>
<div class="btn-group-vertical btn-group-sm btn-group-lg">
<a class="btn btn-danger" href="">红油火锅</a>
<a class="btn btn-warning" href="">可乐鸡翅</a>
<a class="btn btn-info" href="">北京烤鸭</a>
<a class="btn btn-success" href="">涪陵榨菜</a>
<a class="btn btn-primary" href="">南洲拉面</a>
</div>
View Code
<!-- 纵向按钮组 -->
<div class="btn-group-vertical">
<a class="btn btn-danger" href="">红油火锅</a>
<a class="btn btn-warning" href="">可乐鸡翅</a>
<a class="btn btn-info" href="">北京烤鸭</a>
<a class="btn btn-success" href="">涪陵榨菜</a>
<a class="btn btn-primary" href="">南洲拉面</a>
</div>
View Code
<!-- 横向按钮组 -->
<div class="btn-group">
<a class="btn btn-danger" href="">红油火锅</a>
<a class="btn btn-warning" href="">可乐鸡翅</a>
<a class="btn btn-info" href="">北京烤鸭</a>
<a class="btn btn-success" href="">涪陵榨菜</a>
<a class="btn btn-primary" href="">南洲拉面</a>
</div>
View Code
<!-- 普通按钮组 -->
<a class="btn btn-danger" href="">红油火锅</a>
<a class="btn btn-warning" href="">可乐鸡翅</a>
<a class="btn btn-info" href="">北京烤鸭</a>
<a class="btn btn-success" href="">涪陵榨菜</a>
<a class="btn btn-primary" href="">南洲拉面</a>
View Code
效果为如图
3.信息提示框
div. alert 相对定位，圆角，内边距
.alert-danger 颜色
>span. close 关闭的小叉叉
事件
①激活事件 span data-dismiss="alert"
②作用于大div 父子结构，不需要绑定
<h4>信息提示框</h4>
<div class="alert alert-danger">
中午,巴拉巴拉,下午巴拉巴拉 !
<span data-dismiss='alert' class="close">×</span>
</div>
<input type="search">
<a href="" class="btn btn-link">信息提示框</a>
View Code
4.导航
①水平导航
ul.nav 弹性，x轴
>li.nav-item
>a.nav-link
<h4>水平导航</h4>
<!-- justify-content-around 源码为justify-content: space-around -->
<!-- nav 弹性 换行 清除左内边距 下外边距 清除li前面的样式 -->
<ul class="nav justify-content-around">
<!-- nav-link 转为block 悬停和获取焦点foucs去除下划线 -->
<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>
<li class='nav-item'><a class='nav-link' href="#">PLUS会员</a></li>
</ul>
View Code
②选项卡导航
ul.nav.nav-tabs
>li.nav-item
>a.nav-link
.active
div. tab-content
>div.tab-pane
.active
事件
①激活元素 a data-toggle="tab" 绑定对应div href="#tab3"
②作用元素 div.tab-pane#tab3
<h4>选项卡导航</h4>
<!-- nav-tabs与nav-item 和 nav-link配合使用 -->
<ul class="nav nav-tabs">
<li class="nav-item">
<!-- data-toggle='tab'点击a激活事件 active默认初始激活通多href找到对应的id内容 -->
<a data-toggle='tab' class="nav-link active" href="#tab1">魔兽点卡</a>
</li>
<li class="nav-item">
<a data-toggle='tab' class="nav-link" href="#tab2">星骓坐骑</a>
</li>
<li class="nav-item">
<a data-toggle='tab' class="nav-link" href="#tab3">百分百掉无敌</a>
</li>
<li class="nav-item">
<a data-toggle='tab' class="nav-link" href="#tab4">爱情火箭</a>
</li>
</ul>
<!-- tab-content与tab-pane配合使用使之隐藏display:none -->
<div class="tab-content">
<!-- tab-content与active配合使用使之出现display:block -->
<div id="tab1" class="tab-pane active">一月 一季度 半年 一年</div>
<div id="tab2" class="tab-pane">世界boss 商城购买 拍卖行购买 副本掉落</div>
<div id="tab3" class="tab-pane">单刷 组队 野团 组团</div>
<div id="tab4" class="tab-pane">时空本 团本 无人副本 竞技场</div>
</div>
View Code
③胶囊导航
ul.nav.nav-pills
>li.nav-item
>a.nav-link
.active
div. tab-content
>div.tab-pane
.active
事件
①激活元素 a data-toggle="pill" 绑定对应div href="#tab3"
②作用元素 div.tab-pane#tab3
1 <h4>胶囊导航</h4> 2 <!-- nav-pills 与nav-link配合添加圆角--> 3 <ul class="nav nav-pills"> 4 <li class="nav-item"> 5 <a href="#pill1" data-toggle='pill' class="nav-link active">鞋子</a> 6 </li> 7 <li class="nav-item"> 8 <a href="#pill2" data-toggle='pill' class="nav-link">手表</a> 9 </li> 10 <li class="nav-item"> 11 <a href="#pill3" data-toggle='pill' class="nav-link">电脑</a> 12 </li> 13 <li class="nav-item"> 14 <a href="#pill4" data-toggle='pill' class="nav-link">汽车</a> 15 </li> 16 </ul> 17 18 <div class="tab-content"> 19 <div id="pill1" class="tab-pane active">AJ1,AJ3,AJ6,AJ7,AJ11,Yeeze</div> 20 <div id="pill2" class="tab-pane">理查德 江诗丹顿 百达翡丽 劳力士 小天才</div> 21 <div id="pill3" class="tab-pane">机械键盘 switch RTX3080TI 红白机</div> 22 <div id="pill4" class="tab-pane">911 Panama 毒药 五菱宏光 GTR 大G F650 地狱猫 恩佐</div> 23 </div>View Code
5.响应式导航栏
div. navbar 弹性，x轴，两端对齐，交叉轴居中，可换行
. navbar-expand-sm/md/lg/xl 让ul的主轴在某个屏幕以上变成x轴
>ul.navbar-nav 弹性，y轴主轴
>li.nav-item
>a.nav-link
<h4>响应式导航栏</h4>
<!--navbar相对定位,弹性,换行,交叉轴居中,主轴两端对齐,内边距 -->
<!-- navbar-expand-md 响应中屏下,x轴为主轴,不换行,主轴起点对齐-->
<div class="navbar navbar-expand-md">
<!-- navbar-nav弹性y轴主轴 去除li样式,下外边距清除 做内边距清除-->
<ul class="navbar-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="">布加迪</a></li>
<li class="nav-item"><a class="nav-link" href="">迈巴赫</a></li>
<li class="nav-item"><a class="nav-link" href="">Panama</a></li>
<li class="nav-item"><a class="nav-link" href="">东风大运</a></li>
</ul>
</div>
View Code
6.折叠
.btn data-toggle="collapse" data-target="#c1"
div. collapse#c1 隐藏
1 <h4>折叠</h4> 2 <!--data-target='#c1' 点击按钮找到id对应的内容 data-toggle='collapse' 调用事件collapse隐藏 --> 3 <!-- btn btn-danger按钮样式 --> 4 <button data-target='#c1' data-toggle='collapse' class="btn btn-danger">折叠</button> <!-- href='#c1'也可替代data-target='#c1' 但不推荐如此--> 5 <!-- collapse display:none隐藏--> 6 <div id="c1" class="collapse"> 7 巴拉巴拉巴拉 <br> 8 巴拉 巴拉 巴拉 9 </div>View Code
7.卡片
div.card 弹性，y轴
>div.card-header
+div.card-body
+div.card-footer
1 2 3 <h4>卡片</h4> 4 <!-- card 定位 弹性y轴为主轴 最小宽度 边框 圆角 --> 5 <div class="card"> 6 <!-- card-header 下外边框 内边距 背景色 下边框 --> 7 <div class="card-header"> 8 <h3>卡片标题</h3> 9 </div> 10 <!-- card-body 四条内边距 弹性flex:1 1 auto --> 11 <div class="card-body"> 12 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam natus tempore laboriosam beatae rerum eveniet sint accusantium dolorum aut quas repellat distinctio nesciunt vel deserunt autem atque in fugit laborum.</p> 13 </div> 14 <!--card-footer 内边距 背景 上边框 --> 15 <div class="card-footer"> 16 <p>联系方式</p> 17 </div> 18 </div> 19View Code
8.手风琴
结合卡片和折叠
1 <h4>手风琴</h4> 2 <!-- 结合卡片和折叠做出的效果 --> 3 <div id="fuqin"> 4 5 <div class="card"> 6 7 8 <div class="card-header"> 9 <a data-toggle='collapse' href="#col_1">卡片1</a> 10 </div> 11 12 <div data-parent='#fuqin' id="col_1" class="collapse"> 13 <div class="card-body " > 14 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut neque soluta iste distinctio eos corrupti vel eligendi error facere pariatur suscipit autem magnam veniam doloribus totam accusamus repellendus in cupiditate. 15 </div> 16 </div> 17 18 19 <div class="card-header"> 20 <a data-toggle='collapse' href="#col_2">卡片2</a> 21 </div> 22 23 <div data-parent='#fuqin' id="col_2" class="collapse"> 24 <div class="card-body " > 25 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut neque soluta iste distinctio eos corrupti vel eligendi error facere pariatur suscipit autem magnam veniam doloribus totam accusamus repellendus in cupiditate. 26 </div> 27 </div> 28 29 30 <div class="card-header"> 31 <a data-toggle='collapse' href="#col_3">卡片3</a> 32 </div> 33 34 <div data-parent='#fuqin' id="col_3" class="collapse"> 35 <div class="card-body " > 36 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut neque soluta iste distinctio eos corrupti vel eligendi error facere pariatur suscipit autem magnam veniam doloribus totam accusamus repellendus in cupiditate. 37 </div> 38 </div> 39 40 </div> 41 </div> 42View Code
9.媒体对象
div. media 弹性，x轴 ，交叉轴起点
1 <h4>媒体对象</h4> 2 <!-- media 弹性交叉轴起点对齐 --> 3 <div class="media border border-danger p-2 rounded"> 4 <img style="width: 8rem;border: 1px solid #000000;" src="image/10.png" alt=""> 5 <div> 6 <h4>闪亮闪亮</h4> 7 <p>闪亮的薏米</p> 8 </div> 9 </div> 10View Code
10.折叠导航栏
div.navbar
.navbar-dark 我当前这个导航栏的背景是深色，请把我内部所有文本变成浅色
①让不隐藏的a标签，文本为浅色
②让ul中的a标签，文本为浅色
③让按钮中的三条线，文本为浅色
. bg-dark
. navbar-expand-lg ①配合.navbar-nav让ul的主轴在lg以上变为x轴(li横向显示)
在lg以下默认为y轴(li纵向显示)
②配合.navbar-toggler让button在lg以上隐藏，在lg以下显示
③配合.navbar-collapse让ul在lg以上显示，在lg以下隐藏
>a.navbar-brand 永远显示的a标签
+button.navbar-toggler
>span.navbar-toggler-icon 按钮中的三条线
+div.collapase.navbar-collapse
>ul.navbar-nav
>li.nav-item>a.nav-link
1 <!-- navbar 弹性 换行 交叉轴居中 两端对齐 -->
2 <!-- navbar-dark 背景为深色字体为浅白色 -->
3 <!-- navbar-expand-lg 配合对应屏幕下对应样式 -->
4 <div class="navbar navbar-dark bg-success navbar-expand-lg">
5 <!-- navbar-brand 行内块 不换行 继承行高-->
6 <a href="#" class="navbar-brand">bootstrap</a>
7 <!-- navbar-toggler 字体大小 行高1倍字体 背景透明 圆角 边框 -->
8 <!-- data-toggle='collapse'配合navbar-expand-lg 隐藏-->
9 <!-- data-target='#col_6' 事件下拉框 -->
10 <button class="navbar-toggler " data-toggle='collapse' data-target='#col_6'>
11 <!--navbar-toggler-icon行内块 高宽 内容为空 文本居中 背景不重复居中 背景大小百分比 与另一个navbar-dark配合一起使用添加背景
12 .navbar-dark .navbar-toggler-icon {
13 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
14 }
15 -->
16 <span class="navbar-toggler-icon"></span>
17 </button>
18
19
20 <!-- navbar-collapse与 navbar-expand-lg配合对应屏幕下隐藏-->
21 <!-- collapse 隐藏 id与data-target配合调用 -->
22 <div class="navbar-collapse collapse" id="col_6">
23 <!-- navbar-nav弹性y为主轴 去除li样式-->
24 <ul class="navbar-nav">
25 <!-- nav-link块级 -->
26 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
27 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
28 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
29 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
30 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
31 <li class="nav-item"><a href="#" class="nav-link">aass</a></li>
32 </ul>
33 </div>
34 </div>
View Code
11徽章
小按钮
badge 基本类
badge-danger/warning....
badge-pill 胶囊
1 <h4>徽章</h4> 2 <!-- list-unstyled 去除li样式 --> 3 <ul class="list-unstyled "> 4 <!-- list-group-item 圆角 --> 5 <li class="list-group-item"> 6 <!--badge 行内块 内边距 字体大小75% 字体加粗700 行高1倍字体 文本居中 基线对齐 圆角 --> 7 <!-- badge-danger 字体颜色 背景色 --> 8 点赞<a href="#" class="badge badge-danger">21212</a> 9 </li> 10 11 <li class="list-group-item"> 12 关注<a href="#" class="badge badge-warning badge-pill">22002</a> 13 </li> 14 15 <li class="list-group-item"> 16 踩<a href="#" class="badge badge-success">2112</a> 17 </li> 18 </ul> 19View Code
12.焦点轮播图
结构
|
第一部分结构 div.carousel 相对定位 >div.carousel-inner 相对定位，w-100,溢出隐藏 >div .carousel-item 隐藏 .active 显示 >img.w-100 第一部分事件 在最外层div.carousel 中添加 data-ride="carousel" 第二部分结构 轮播指示器 div.carousel#demo ul.carousel-indicators >li 第二部分事件 li data-slide-to="图片的下标，从0开始" data-target="#demo" 第二部分需要重写样式 .carousel-indicators li{ width: 0.8rem;height: 0.8rem; background-color: #fff; border-radius: 50%; margin: 0 5px; } .carousel-indicators li.active{ background-color: #0aa1ed; } 第三部分的结构 左右箭头 a. carousel-control-next/prev >span. carousel-control-next/prev-icon 第三部分重写的样式 .carousel-control-next{ width: 4%;height: 20%; background-color: #aaa; border-radius: 0.25rem; top:40%; } .carousel-control-prev{left: 0.25rem;} .carousel-control-next{right: 0.25rem;} 第三部事件 <a data-slide="next" class="carousel-control-next" href="#demo"> <span class="carousel-control-next-icon"></span> </a> <a data-slide="prev" class="carousel-control-prev" href="#demo"> <span class="carousel-control-prev-icon"></span> </a> |
1 <style type="text/css">
2 /* 重新设置li样式 */
3 .carousel-indicators li{
4 width: 0.8rem;height: 0.8rem;
5 background-color: #FFF3CD;
6 border-radius: 50%;
7 margin: 0 5px;
8 }
9 .carousel-indicators li.active{
10 background-color: #0AA1ED;
11 }
12 .carousel-indicators li:hover{
13 cursor: pointer;
14 }
15
16
17
18 /* 重新设置箭头a标签的样式 */
19 .carousel-control-prev,
20 .carousel-control-next {
21 width: 4%;
22 height: 20%;
23 background-color: #AAAAAA;
24 border-radius: 0.25rem;
25 top: 40%;
26 }
27 .carousel-control-prev{left: 0.25rem;}
28 .carousel-control-next{right: 0.25rem;}
29
30
31 </style>
32
33
34 <!-- carousel相对定位 -->
35 <!-- 在最外层div添加data-ride 开启事件其旋转木马(自动轮播图片)-->
36 <!--id="demo"方便左右箭头控制以及点击按钮切换 -->
37 <div class="carousel" data-ride='carousel' id="demo">
38 <!-- 1轮播图片 -->
39 <!-- carousel-inner 相对定位 w-100与父元素等宽 溢出隐藏占页面空间 -->
40 <div class="carousel-inner">
41 <!-- carousel-item 定位 隐藏不占页面空间 -->
42 <!-- active 用于显示 只在一个carousel上加 -->
43 <div class="carousel-item active">
44 <!-- 图片w-100让图片充满 -->
45 <img class="w-100" src="banner1.png">
46 </div>
47 <div class="carousel-item">
48 <img class="w-100" src="banner2.png">
49 </div>
50 <div class="carousel-item">
51 <img class="w-100" src="banner3.png">
52 </div>
53 <div class="carousel-item">
54 <img class="w-100" src="banner4.png">
55 </div>
56 </div>
57 <!-- 2 轮播指示器 -->
58 <!-- carousel-indicators轮播指示器 定位,样式-->
59 <ul class="carousel-indicators">
60 <!-- active 与第一个active对应 -->
61 <!-- data-slide-to='0' 鼠标自动切换对应下标的图片从0开始-->
62 <!-- 由于li点击控制的是整个轮播图 所以点击绑定外层div id data-target='#demo'-->
63 <li class="active" data-slide-to='0' data-target='#demo'></li>
64 <li data-slide-to='1' data-target='#demo'></li>
65 <li data-slide-to='2' data-target='#demo'></li>
66 <li data-slide-to='3' data-target='#demo'></li>
67 </ul>
68 <!-- 3左右箭头 -->
69 <!-- carousel-control-next添加右箭头(占位很大需要重新设置样式) -->
70 <!-- data-slide='next'事件点击后切换图片 -->
71 <a href="#demo" class="carousel-control-next" data-slide='next'>
72 <!--carousel-control-next-icon添加右箭头图标 -->
73 <span class="carousel-control-next-icon"></span>
74 </a>
75 <!-- data-slide='prev'事件点击后切换图片 -->
76 <a href="#demo" class="carousel-control-prev" data-slide='prev'>
77 <span class="carousel-control-prev-icon"></span>
78 </a>
79
80
81 </div>
View Code
13.巨幕
jumbotron 巨大的内边距，背景灰色，圆角
1 <h4>巨幕</h4> 2 <!-- jumbotron 大内边距 背景灰色 圆角 --> 3 <!-- bg-primary 改变背景色 --> 4 <div class="jumbotron bg-primary"> 5 欢迎来到博客园! 6 </div>View Code
14.分页条
结构
|
ul. pagination 弹性，x轴，去除左内边距，去除列表标识项 >li.page-item 让第一个li和最后一个li中的a添加圆角 . disabled 禁用 .active 选中 >a.page-link 设置了边框，文本，背景，以及伪类的样式 |
<style type="text/css">
.page-item+.page-item{
margin-left: 10px;
}
.page-link{
border-radius: 0.25rem;
padding-left: 15px;
padding-right: 15px;
}
/* 自定义背景 */
.mybg{
background: linear-gradient(to bottom,#f5f4f5 0%,#e6e6e5 100%);
}
/* 第一页背景 */
.page-item .disabled .page-link{
background-color:#F8F8F8 ;
}
/* 悬停边框色 */
.page-link:hover{
background-color: transparent;
border-color: #0AA1ED;
}
<h4>分页</h4>
<!-- div修改部分样式 居右 背景 内边距 等 -->
<div class="d-flex justify-content-end pr-5 py-2 mybg">
<!-- 结构ul>li*n>a -->
<!-- pagination 弹性 x轴 出去左内边距 去列表标识 圆角-->
<ul class="pagination mb-0">
<!-- page-item 最后一个和第一个a标签加圆角-->
<!-- disabled 禁用 -->
<li class="page-item disabled">
<!-- page-link设置边框文本背景以及伪类的样式 -->
<a href="#" class="page-link">上一页</a>
</li>
<!-- active 被选中 -->
<li class="page-item active">
<a href="#" class="page-link">1</a>
</li>
<li class="page-item">
<a href="#" class="page-link">2</a>
</li>
<li class="page-item">
<a href="#" class="page-link">3</a>
</li>
<li class="page-item">
<a href="#" class="page-link">4</a>
</li>
<li class="page-item">
<a href="#" class="page-link">下一页</a>
</li>
</ul>
</div>
View Code
15..面包屑导航
结构
|
每个li之间有连接符号的导航 ul. breadcrumb 弹性，x主轴，可换行，背景色 >li. breadcrumb-item 让除了第一个li其它的li之前都添加一个连接符号 我们可以重写连接符号 .breadcrumb-item + .breadcrumb-item::before{ content:">"; } |
<style type="text/css">
.breadcrumb-item + .breadcrumb-item::before{
content: '>';
/* 修改连接符 */
}
</style>
<h4>面包屑导航</h4>
<!--breadcrumb 弹性 x轴主轴 可换行 添加背景色 -->
<ul class="breadcrumb bg-transparent">
<!--breadcrumb-item 与后面的 breadcrumb-item 添加连接符 可以重写 -->
<li class="breadcrumb-item"><a class="text-dark small" href="#">博客园</a></li>
<li class="breadcrumb-item"><a class="text-dark small" href="#">学习用品</a></li>
<li class="breadcrumb-item"><a class="text-dark small" href="#">笔记本电脑</a></li>
<li class="breadcrumb-item"><a class="text-dark small" href="#">MBP2020</a></li>
</ul>
View Code
bootstrap介绍的差不多了接下来介绍scss传送门