Bootstrap组件的使用

五.常用组件

总结：

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{

width: 4%;height: 20%;

border-radius: 0.5rem;top:40%;

}

③轮播指示器

ul.carousel-indicators  定位，弹性布局

>li.active .carousel-indicators设置了li的宽度高

由于boot默认的宽高不符合我们的需求，需要重写

.carousel-indicators li{

width: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