Bootstrap4速成笔记四 Collapse,Dropdown,Jumbotron

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>