Bootstrap学习记录【8】【插件】

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">
					&times;
				</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（完结）