Collapse切换可见性组件
collapse组件可以修改组件的可见性
使用方法:首先创建一个collapse包装类,被collapse包装的内容默认为不可见效果;然后在容器类中设置需要设置可见性的内容;然后在容器外设置链接或者按钮用来设置可见性,两者的类均设置为按钮类型,情景类自定,data-toggle触发属性设置为"collapse"切换效果
再在容器上设置一个id(我的是collapse demo),链接的href属性和按钮的目标属性指向ID(我这里是"#collapse-demo"),详情见下面代码
<div class="component demo">
<a href="#collapse-demo" class="btn btn-primary" data-toggle="collapse">Action link</a>
<button class="btn btn-primary" data-toggle="collapse" data-target="#collapse-demo">Action buttom</button>
<div class="collapse" id="collapse-demo">
<div class="card card-body">hello</div>
</div>
</div>
效果
Collapse比较常见的是与Accordion搭配产生手风琴的一个效果
使用方法:首先在最外层设置accordion包装类,然后可以在其内部设置几张平行且地位相同的卡片,在这里介绍一张卡片的效果;
首先在一张卡片中设置上header与body,其中header存储切换的按钮,body存储内容,然后在body外套上collapse设置默认不可见
代码
<div id="accordion">
<!--card1-->
<div class="card">
<div class="card-header">
<a href="#collapse-1" data-toggle="collapse">title</a>
</div>
<div class="collapse" id="collapse-1">
<div class="card-body">content1</div>
</div>
</div>
<!--card2-->
<div class="card">
<div class="card-header">
<a href="#collapse-2" data-toggle="collapse">title</a>
</div>
<div class="collapse" id="collapse-2">
<div class="card-body">content2</div>
</div>
</div>
<!--card3-->
<div class="card">
<div class="card-header">
<a href="#collapse-3" data-toggle="collapse">title</a>
</div>
<div class="collapse" id="collapse-3">
<div class="card-body">content3</div>
</div>
</div>
</div>
现在的效果是三张卡片可以一起显示,如若想要设置成手风琴效果,可以加上accordion属性,即在每张卡片的collapse容器上设置data-parent属性为"accordion",将需要默认显示的卡片的collapse类中加入情景类show
代码(只贴一张卡)
<div id="accordion">
<div class="card">
<div class="card-header">
<a href="#collapse-1" data-toggle="collapse">title</a>
</div>
<div class="collapse show" id="collapse-1" data-parent="#accordion">
<div class="card-body">content1</div>
</div>
</div>
</div>
效果
Dropdown下拉菜单组件
可以通过实现dropdown实现下拉菜单效果,使用时需要导入popper.js包,具体导入方法可见使用bootstrap的dropdown部件时报错:Bootstrap dropdown require Popper.js
导入之后开始使用dropdown
首先一样写一个类为"dropdown"的div作为容器,然后在其内设置一个"dropdown-menu"的菜单选项,再设置多个类为"dropdown-item"的链接选项栏,如果需要使用分隔符可以加上类为"dropdown-divider"的div,如果需要使用头部的提示信息行可以加上类为"dropdown-header"的头,这样大致就成了
然后设置显示下拉菜单的按钮,使用button或者a,类为"btn",情景效果类自定,然后在类中加入"dropdown-toggle"实现箭头效果,data-toggle属性设置为"dropdown"实现下拉菜单的触发,如果是链接设置上href,就完成了两种方法的下拉菜单。
<div class="component demo">
<div class="dropdown">
<button class="btn btn-outline-warning dropdown-toggle" data-toggle="dropdown">Dropdown</button>
<a href="#" class="btn btn-outline-info dropdown-toggle" data-toggle="dropdown">Dropdown</a>
<div class="dropdown-menu">
<div class="dropdown-header">web language</div>
<a href="#" class="dropdown-item">HTML</a>
<a href="#" class="dropdown-item">CSS</a>
<a href="#" class="dropdown-item">JS</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">More</a>
</div>
</div>
</div>
如果想要将文字功能与箭头功能分离开,可以首先设置文字为链接,类设置为"btn btn-情景类"从而设置上链接为按钮效果;保留原先的button设置,删除文本只保留箭头;最后将容器设置成btn-group从而使链接文本与箭头宽度契合,这样就实现了分离
<div class="component demo">
<div class="btn-group">
<a href="#" class="btn btn-outline-info">Dropdown</a>
<button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div class="dropdown-header">web language</div>
<a href="#" class="dropdown-item">HTML</a>
<a href="#" class="dropdown-item">CSS</a>
<a href="#" class="dropdown-item">JS</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">More</a>
</div>
</div>
</div>
默认的下拉菜单效果是向上显示的,如果想要向上显示,可以在容器类中设置一个dropup类使箭头向上,然后修改定位方式为相对父元素绝对定位(向上),我这里稍微修了修位置
<div class="component demo">
<div class="btn-group dropup" style="position: absolute;bottom: 40%">
<a href="#" class="btn btn-outline-info">Dropdown</a>
<button class="btn btn-outline-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
<div class="dropdown-menu">
<div class="dropdown-header">web language</div>
<a href="#" class="dropdown-item">HTML</a>
<a href="#" class="dropdown-item">CSS</a>
<a href="#" class="dropdown-item">JS</a>
<div class="dropdown-divider"></div>
<a href="#" class="dropdown-item">More</a>
</div>
</div>
</div>
如果需要修改下拉单的对齐位置,可以在menu类中使用dropdown-menu-left/right参数;修改过后如果需要对下拉菜单进行微调,可以在箭头按钮中再设置一个data-offset偏移参数
dropdown也提供了其组件配套的动作show,shown,hide,hidden,意思就如字面,使用JS的on方法监听即可,使用jquery将动作监听到下拉组件,动作参数设置成"(action).bs.dropdown",例如"show.bs.dropdown",然后在函数内部写上动作需要的结果就行了
我这里使用了id,便于监听
('#dropdown-d').on('show.bs.dropdown', function(event) {
/* Act on the event */
console.log("show")
});
$('#dropdown-d').on('shown.bs.dropdown', function(event) {
/* Act on the event */
console.log("shown")
});
$('#dropdown-d').on('hide.bs.dropdown', function(event) {
/* Act on the event */
console.log("hide")
});
$('#dropdown-d').on('hidden.bs.dropdown', function(event) {
/* Act on the event */
console.log("hidden")
});
Jumbotron大屏显示组件
jumbotron组件可以使一些空间以较大形式进行显示,相对会规整一些
使用方法:首先套一个类为"jumbotron"的div作为包装,然后在内部写内容即可,如需要设置大屏文本可以将类设置为"lead"
在这里使用到了diaplay类和mb类,diaplay是在h标签设置文字大小的基础上升级的大小设置,display-number,number从1到4时文字大小逐渐缩小;mb全称margin bottom,设置底部与下一个控件的距离,mb-number,number从1到5距离逐渐增大
Display
mb
具体代码
<div class="component demo">
<div class="jumbotron">
<h1 class="display-2">hello</h1>
<p class="lead mb-1">Welcome</p>
<a href="#" class="btn btn-primary btn-lg">Button</a>
</div>
</div>