说明
本文每个bootstra4的class用法和HTML结构相关
结构和样式的表明用css选择器简单表示
其中[]代表可选
||代表或者
其中data-是H5中数据存储的方式，
在bootstrap4中不能缺省，用[]进行表示，会和class分开
折叠
.button[data-toggle="collapse" data-target="#demo"]
div#demo.collapse[.show || .fade][data-parent="#parentBox"(可选)]
最简手风琴效果
<div class="parent">
<div>
<a href="#demo1" data-toggle="collapse">First</a>
<div id="demo1" class="collapse" data-parent=".parent">This is the first demo</div>
</div>
<div>
<a href="#demo2" data-toggle="collapse">Second</a>
<div id="demo2" class="collapse" data-parent=".parent">This is the second demo</div>
</div>
<div>
<a href="#demo3" data-toggle="collapse">Third</a>
<div id="demo3" class="collapse" data-parent=".parent">This is the third demo</div>
</div>
</div>
卡片式手风琴
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
选项一
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
#1 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
选项二
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
#2 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
选项三
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
#3 内容：菜鸟教程 -- 学的不仅是技术，更是梦想！！！
</div>
</div>
</div>
</div>
模态框
button.btn.btn-primary[type="button" data-toggle="modal" data-target="#myModal"]
div.modal.fade.#myModal
div.modal-dialog[.modal-sm|lg]
div.modal-content
div.modal-header
h4.modal-title{this is the header}
button.close[type="button" data-dismiss="modal"]{×}
div.modal-body
div.modal-footer
button.close[type="button" data-dismiss="modal"]{关闭}
提示框
<a href="#" data-toggle="tooltip" title="我是提示内容" data-placement="top|bottom|right|left">鼠标移动到这儿显示</a>
$(function(){
$('[data-toggle="tooltip"]').tooltip()
})
弹出框
<a href="#" data-toggle="popover" title="弹出框标题" data-content="弹出框内容" data-placement="top|bottom|right|left" data-trigger="focus||hover">多次点我</a>
$('[data-toggle="popover"]').popover()
data-trigger:focus>>>点击其他地方可关闭弹出框，默认点击再次元素才能关闭
hover>>>悬浮于元素显示，移开鼠标后消失
滚动监听
<style>
body{position: relative;}/* 设置了data-spy="scroll" 的元素设置了relative才能起作用 */
</style>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
...
<ul class="navbar-nav">
<li><a href="#section1">Section 1</a></li>
...
</nav>
<div id="section1">
<h1>Section 1</h1>
<p>Try to scroll this page and look at the navigation bar while scrolling!</p>
</div>
...
</body>
网友评论