Bootstrap学习记录【8】
1.导航
下拉与按钮:
基本样式:.nav
与.nav-tabs
等组合使用
(1).nav-tabs
(标签型导航)
(2).nav-pills
(胶囊型导航)
(3).nav-staked
(堆栈导航)
(4).nav-justified
(自适应导航)
(5).breadcrumb
(面包屑式导航)单独使用,直接加在ol、ul中,一般用于导航,主要作用是告诉用户现在所处页面位置
状态:.active
:选中 .disabled
:禁用
2.下拉菜单.dropdown
下一层:.dropdown-toggle
下拉箭头:.caret
分离线:.divider
解释说明:.dropdown-header
<div class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> Java <b class="caret"></b> </a>
<ul class="dropdown-menu">
<li class="dropdown-header">-aaa-</li>
<li><a href="#">jmeter</a></li>
<li><a href="#">EJB</a></li>
<li><a href="#">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#">分离的链接</a></li>
<li class="divider"></li>
<li><a href="#">另一个分离的链接</a></li>
</ul>
</div>
3.模态框.modal
点击出现弹框。覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
开始演示模态框
</button>
<!-- 模态框(Modal) -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×
</button>
<h4 class="modal-title" id="myModalLabel">
模态框(Modal)标题
</h4>
</div>
<div class="modal-body">
在这里添加一些文本
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary">
提交更改
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
两种打开模态框的方式:
(1)设置data-toggle="modal" data-target="#myModal"
见上述代码,通过设置来指定要切换的模态框;
(2)为按钮绑定动态点击事件:$('#myModal').modal('show');
换其它内容:
在<div class="modal-body">在这里添加一些文本</div>
中进行切换,比如添加<form>
表单等
4.折叠.collapse
<button type="button" class="btn btn-success" data-toggle="collapse"
data-target="#demo">
简单的可折叠组件
</button>
<div id="demo" class="collapse in">
Nihil anim keffiyeh helvetica, craft beer labore wes anderson
cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
vice lomo.
</div>
详情(菜鸟教程):
https://www.runoob.com/bootstrap/bootstrap-navbar.html
学习来源:
https://www.bilibili.com/video/BV1Pz4y1k7g5?from=search&seid=12895899452417695000
学习进度:106、107、108(完结)