文章目录五.弹性布局的class六.表单组件一.常用组件五.弹性布局的class设置元素的显示方式d-*-none/block/inline/inline-block/flex/inline-flex...*：sm/md/lg/xl设置弹性的属性d-*-flex/inline-flex 设置弹性容器flex-*-row/column/row-reverse/column-rever...
五.弹性布局的class
- 设置元素的显示方式
d-*-none/block/inline/inline-block/flex/inline-flex...
*：sm/md/lg/xl - 设置弹性的属性
d-*-flex/inline-flex设置弹性容器
flex-*-row/column/row-reverse/column-reverse响应式的主轴方向
flex-*-wrap/nowrap/wrap-reverse响应式的换行设置
justify-content--between/around/start/center/end 响应式主轴方向对齐方式
align-items--start/center/end/baseline/stretch 响应式设置交叉轴对齐方式 - 弹性与栅格的关系
栅格 row 弹性，主轴x轴，可换行，左右-15px外边距
col-n flex:0 0 n% 左右+15px内边距
先写div.d-flex.flex-wrap
在在子div中写div.col-1，也可以完成栅格
即所有设置弹性，设置换行的，就可以完成栅格布局
六.表单
- 表单元素的排列方向
form-group堆叠表单，垂直方向排列
form-inline内联表单，水平方向排列(弹性，主轴x轴，可换行，交叉轴居中)，可以完美的替代栅格的row - 表单元素的样式
文本框的样式form-control：设置了：块级，w-100 字体属性，背景，边框，过渡
组件
网页中一些复杂的效果，之前必须用js，dom，jq来解决
一.常用组件
- 按钮组
btn-group横向按钮组
btn-group-vertical垂直按钮组
设置按钮组的大小
btn-group-lg大按钮组
btn-group-sm小按钮组
boot把js进行了封装，导致我们需要调用js的时候，使用自定义属性执行事件
boot调用事件，注意两件事- 调用事件的方式（靠自定义属性控制）
- 事件影响的对象(自定义属性)
- 下拉菜单
- 样式结构
div.dropdown相对定位
>btn.dropdown-toggle添加一个向下的小三角
+ul.dropdown-menudisplay：none; - 事件
button自定属性 data-toggle=“dropdown”
由于ul和button有共同的父级，不需要设置ul为目标<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> <li><a href="#">佳木斯</a></li> </ul> </div>
- 样式结构
- 信息提示框
- 结构
div.alert基本类
.alert-danger/warning...设置提示框颜色
.alert-dismissible让内部的小x改变字体颜色
span.close右浮动 - 事件
spandata-dismiss="alert"
自动把父元素div关闭<h4>信息提示框</h4> <div class="alert alert-danger alert-dismissible"> 你好，我是奋斗的程序胖！！ <span data-dismiss="alert" class="close">×</span> </div>
- 结构
- 导航
- 水平导航
ul.nav弹性，x轴，可换行，去点，去除左内边距
.nav-justified作为.nav-item的祖先元素，让每一个li宽度相同，然后平分整个弹性容器
li标签.nav-item
a标签.nav-link块级，设置了hover等伪类<h5>水平导航</h5> <ul class="nav nav-justified"> <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="#">知道</a> </li> </ul> - 选项卡导航
- 结构
ul.nav.nav-tabs设置下边框，让后代.nav-link鼠标悬停时边框显示颜色
li.nav-item
a.nav-link—.active被选中
内容部分
div.tab-content
div.tab-pane与父元素tab-content配合，设置了display:none;----.active显示display:block - 事件
- 自定属性写给a标签
adata-toggle="tab" - 事件改变谁
div.tab-pane id="tab1"
ahref="#tab1"<ul class="nav nav-tabs"> <li class="nav-item"> <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> <div class="tab-content"> <div id="tab1" class="tab-pane active">TF,YSL,Dior,故宫,mac</div> <div id="tab2" class="tab-pane">Dior,LV,爱马仕,chanel,guuci</div> <div id="tab3" class="tab-pane">SKII,雅诗兰黛,中草堂,海蓝之谜</div> <div id="tab4" class="tab-pane">AJ，yezee</div> </div>
- 自定属性写给a标签
- 结构
- 胶囊导航
- 结构
ul.nav.nav-pills
li.nav-item
a.nav-link—.active被选中
内容部分
div.tab-content
div.tab-pane与父元素tab-content配合，display:none----.active显示display:block - 事件
- 自定属性写给谁
adata-toggle="pill" - 事件改变谁
div.tab-pane id="tab1"
ahref="#tab1"<h5>胶囊导航</h5> <ul class="nav nav-pills"> <li class="nav-item"> <a data-toggle="pill" class="nav-link" href="#tab5">运动鞋</a> </li> <li class="nav-item"> <a data-toggle="pill" class="nav-link" href="#tab6">电子产品</a> </li> <li class="nav-item"> <a data-toggle="pill" class="nav-link" href="#tab7">汽车</a> </li> <li class="nav-item"> <a data-toggle="pill" class="nav-link" href="#tab8">手表</a> </li> </ul> <div class="tab-content"> <div id="tab5" class="tab-pane">AJ1,AJ11,AJ12,AJ13</div> <div id="tab6" class="tab-pane">macbookPro,PS,AnyWare</div> <div id="tab7" class="tab-pane">五菱宏光,眼镜蛇，地狱猫，GTR,大G,F650,恩佐</div> <div id="tab8" class="tab-pane">江诗丹顿,百达翡丽,卡地亚，欧米伽</div> </div>
- 自定属性写给谁
- 结构
- 水平导航
- 响应式导航栏
div.navbar弹性，x轴
.navbar-expand-* *:sm/md/lg/xl
与ul的.navbar-nav配合
在屏幕以上让li横向显示
在屏幕以下让li纵向显示
ul.navbar-nav弹性，y轴
li.nav-item
a.nav-link<h5>响应式导航栏</h5> <!-- lg屏幕以上,横向显示 --> <!-- lg屏幕一下,纵向显示 --> <div class="navbar navbar-expand-lg"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="">GTR</a> </li> <li class="nav-item"> <a class="nav-link" href="">大G</a> </li> <li class="nav-item"> <a class="nav-link" href="">F650</a> </li> <li class="nav-item"> <a class="nav-link" href="">恩佐</a> </li> </ul> </div> - 折叠
- 结构
button
+div.collapse设置了隐藏display:none; - 事件
buttondata-toggle="collapse"data-target="#d1"绑定要折叠的div的id<h5>折叠</h5> <button data-toggle="collapse" data-target="#d1" class="btn btn-danger">折叠按钮</button> <div id="d1" class="collapse"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam quod maxime aliquam minus molestias quisquam unde qui dolores voluptatem consectetur distinctio deleniti corporis optio similique sit nesciunt saepe recusandae aut. </div>
- 结构
- 折叠导航栏
- 结构
div.navbar
.navbar-dark让div内部所有文本，变成白色。但是要单独写背景色.bg-dark
.navbar-expand-*有三个功能
1.与后代button配合，让按钮在*以上隐藏，*以下显示
2.与后代ul配合，让li在*以上横向显示，*以下纵向显示
3.与后代div.navbar-collapse配合,让div在*以上显示，在*以下隐藏
a.navbar-brand商标,有内边距，外边距，字号，行高，hover去下划线
button.navbar-toggler
span.navbar-toggler-icon
div#d1.collapse.navbar-collapse让div在*以上可以显示，*以下隐藏
ul.navbar-nav
li.nav-item
a.nav-link - 事件
buttondata-toggle="collapse" data-target="#d1"<h5>折叠导航栏</h5> <div class="navbar bg-dark navbar-dark navbar-expand-md"> <!-- 1.任何情况都显示的a标签 --> <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，div内部的ul>li，在md以上横向显示，md以下纵向显示 --> <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="#">sass教程</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.carousel 相对定位，让后代以我定位
div.carousel-inner相对定位，w-100,溢出隐藏
div.carousel-item*4相对定位，w-100, display:none
.active在一个item上添加active，让这张图片display:block
img.w-100(防止左右箭头会溢出)
事件 最外层含.carousel的div 后添加data-ride="carousel" - 轮播指示器
ul.carousel-indicators绝对定位，弹性主轴为x
li
需要重写li的样式
事件 li.carousel-indicators li{ width: 0.8rem;height: 0.8rem; border-radius: 50%; background: #fff; } .carousel-indicators .active{ background: #0aa1ed; }
data-target="#demo"#demo是div.carousel的id
data-slide-to="0"图片的下标 - 左右箭头
a.carousel-control-next/prev
span.carousel-control-next/prev-icon画箭头
注意重写样式
事件.carousel-control-prev,.carousel-control-next { width:4%;height:20%; background: #aaa; top:40%; border-radius: 0.25rem; }
adata-slide="prev/next" href="#demo"
完整代码：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>焦点轮播图</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: .8rem;height: .8rem; background: #fff; border-radius: 50%; } .carousel-indicators .active{ background-color: #0aa1ed; } .carousel-control-prev,.carousel-control-next{ width: 4%;height: 20%; background-color: #aaa; top: 40%; border-radius: .25rem; } .carousel-control-prev{left: .25rem;} .carousel-control-next{right: .25rem;} </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="img/banner1.png" alt=""> </div> <div class="carousel-item"> <img class="w-100" src="img/banner2.png" alt=""> </div> <div class="carousel-item"> <img class="w-100" src="img/banner3.png" alt=""> </div> <div class="carousel-item"> <img class="w-100" src="img/banner4.png" alt=""> </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="prev" href="#demo" class="carousel-control-prev"> <span class="carousel-control-prev-icon"></span> </a> <a data-slide="next" href="#demo" class="carousel-control-next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> </body> </html>
- 轮播图片
252
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
