五.常用组件
总结：
|
boot中事件，关注两件事 1.事件是如何触发的。自定义属性触发，触发方式是这个属性的值 2.事件触发的目标 button绑定目标 data-target="#id" a绑定目标 href="#id" |
4.导航
①水平导航
|
ul.nav>li.nav-item>a.nav-link ul.nav 弹性布局，去点，主轴方向默认x轴 li.nav-item 配合ul.nav-justified让li等宽显示 a.nav-link 块级，内边距撑开，hover,focus等 |
②选项卡导航
|
导航的样式 ul.nav.nav-tabs>li.nav-item>a.nav-link .nav-tabs 让水平导航，变为选项卡导航 显示内容的样式 div.tab-content>div.tab-pane div.tab-content 没有任何样式，作为子代选择器的路径 div.tab-pane 与父元素配合，让当前元素display:none .active 与.tab-content配合，让当前元素显示
事件 <a data-toggle="tab" href="#tab1" class="nav-link">东北菜</a> 给div.tab-pane添加id，把id放到对应a标签的href中 定义事件触发之后，执行的目标 |
③胶囊导航
|
ul.nav.nav-pills li.nav-item a.nav-link data-toogle="pill" href="#对应id" 内容 div.tab-content>div.tab-pane |
5.导航栏(重点)
|
div.navbar.navbar-expand-* ul.navbar-nav 默认为弹性，主轴为y 父级div的navbar-expand-* 与子级ul.navbar-nav 组成后代选择器，对ul的主轴方向进行了控制。 比如navbar-expand-md,当屏幕w>=768px，ul的主轴方向变为row，所有li横向显示。当屏幕w<768px,ul的主轴方向为默认的column，所有li纵向显示 li.nav-item a.nav-link |
6.折叠
|
button data-toggle="collapse" data-target="#div的id" div.collapse display:none隐藏 |
7.卡片
|
div.card> div.card-header div.card-body div.card-footer 如果在card中a标签，那么a可以使用card提供的样式.card-link 对于一个card来说，除了div.card，其它都可以省略 |
8.手风琴(卡片+折叠)
|
注意： 1. .collapse不能和.card-body在同一个div上 不然在隐藏/显示的时候，会发生卡顿 解决方案 div.collapse>div.card-body 2.多个折叠部分可以同时打开 解决方案：在最外层，添加div#parent,所有的卡片都在这个div中 在所有的div.collapse上，添加事件data-parent="#parent" 这样就可以保证，在div#parent中，同时最多只有一个折叠区域是打开状态 |
9.折叠导航栏
|
最外层 div.navbar.navbar-expand-*.bg-dark.navbar-dark 内部3部分 a.navbar-brand 不隐藏，显示在最前面的菜单 button.navbar-toggler>span.navbar-toggler-icon 折叠按钮 div.collapse.navbar-collapse 折叠的导航菜单 >ul.navbar-nav>li.nav-item>a.nav-link 功能解释 1. .navbar-dark 对最外层div没有任何影响，告诉内部的 .navbar-brand,和.navbar-nav和.navbar-toggler-icon 告诉他们，导航栏是深色的，你们要用浅色文字 2. .navbar-expand-*和.navbar-collapse配合 .collapse 作用display:none; .navbar-expand-* .navbar-collapse{display:flex} 所以只要屏幕符合*的要求，这里的div就是显示状态 屏幕不符合*的要求，那么这个选择器就失效了 div就要按照.collapse的样式，隐藏 简单来说：.navbar-expand-* .navbar-collapse中的*，决定了菜单在什么屏幕下显示，什么屏幕下隐藏 |
10.媒体对象
|
<div class="media border rounded p-3"> <img src="chengliang.jpg" alt=""/> <div class="media-body ml-3"> <h4>闪闪亮亮</h4> <p>180天团成员</p> </div> </div> |
11.焦点轮播图
①图片轮播
|
div.carousel 相对定位 >div.carousel-inner 相对定位，宽100%，溢出隐藏 >div.carousel-item.active display:none .active:显示 >img.w-100 如果宽度不是100%,右边的箭头会出去 事件 给div.carousel添加data-ride="carousel" 轮播图就可以动了 |
②左右箭头
|
div.carousel#id >a.carousel-control-prev/next data-slide="prev/next" href="#id" 由于boot给默认的左右箭头不符合我们的需求 所以样式需要重写 .carousel-control-prev,.carousel-control-next{ 4%;height: 20%;
border-radius: 0.5rem;top:40%; } |
③轮播指示器
|
ul.carousel-indicators 定位，弹性布局 >li.active .carousel-indicators设置了li的宽度高 由于boot默认的宽高不符合我们的需求，需要重写 .carousel-indicators li{ 0.8rem;height:0.8rem; margin-left:0.4rem; margin-right:0.4rem;border-radius: 50%; } .carousel-indicators .active{ background-color: #0aa1ed; } 事件：li data-slide-to="图片的index" 从0开始 data-target="#id" 17:10~17:25休息 |
12.模态框
|
<div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"></div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div>
|
六.其他组件
1.巨幕
|
巨大的内边距，和边框，背景色 div.jumbotron |
2.徽章
|
把徽章看作小按钮 基本类 badge 徽章颜色 badge-danger/warning..... 胶囊徽章 badge-pill |