BootSummary

######################################################
#                                                    #
#            命令格式     解释      作用             #
#            长命令格式为 效果 命令                  #
######################################################


< abbr title="limited">ltd</abbr>  将limited以ltd形式显示，获得焦点时会显示全称        缩写


<span class="glyphicon glyphicon-user"></span> 提供(user)类型的字形图标                字形图标
<button> <span...></span>text</button>  将字形标签嵌套到其他标签中


<span class="caret"></span>             显示下三角                                      下三角


<button type="button" class="btn btn-primary" data-toggle="button">text</button> 用来设置同时存在下压态和正常态的按钮




下拉菜单
<div class="dropdown">
<随意标签 data-toggle="dropdown">test</随意标签>
<ul class="dropdown-menu">
<li>text</li>
<li class="divider"><li>华丽的分割线
</ul>
</div>
<随意标签 data-toggle="dropdown pull-right">test</随意标签>                              向右对齐
<li class="dropdown-header">text</li>                                                    下拉菜单标题

js调用下拉菜单
$(.id名).dropdown('toggle')

按钮组相关

设置一个按钮组
<div class="btn-group">
<button...>text</button>
<button...>text</button>
.
.
</div>

将多个按钮组结合到一起
<div class="btn-toobar">
<div class="btn-group">
<div class="btn-group">
.
.
</div>

设置某一按钮组属性
<div class="btn-group btn-group-lg">

设置按钮组垂直显示
<div class="btn-group-vertical">
...
</div>

按钮组嵌套下拉菜单
<div class="btn-group">
<button...>text</button>
<button...>text</button>
<div class="btn-group">
然后内容参照上面下拉菜单中随意标签以下部分
</div>
</div>

上拉菜单
<div class="btn-group dropup">
下面部分参照上面的按钮组嵌套下拉菜单


输入框组
向表单中输入框组中添加前缀或后缀
<div class="input-group">
<span class="input-group-addon">text</span>
<input type="text" class="form-control">
</div>

确定文本域大小
<div class="input-group input-group-sm">

前缀或后缀也可以是单选按钮或者是单选按钮组


标签式导航菜单
<ul class="nav nav-tabs">
<li class="active">text</li>
<li>text</li>
</ul>
带active属性的标签为被激活标签，不可用
可以用点击事件激活被点击标签然后清除原来的被激活的标签来实现标签的特效

胶囊式导航栏
<ul class="nav nav-pills">下面部分不变

垂直的胶囊式导航菜单
<ul class="nav nav-pills nav-stacked">下面部分不变

两端对齐的导航元素
<ul class="nav nav-pills nav-justified">下面部分不变

禁用标签
<li class="disabled">text</li>

带下拉标签的胶囊导航条
只需要把上面下拉菜单中的div换成li标签然后大功告成


看起来比较大的导航栏文字
<nav class="navbar ">
<div class="navbar-header">
<div class="navbar-brand">随意标签以及文字</div>
</div>
</nav>

注意，nav标签中有header元素时可以有两个div（一个头一个不是头）否则只能有一个

navbar-left:向左对齐 navbar-right:向右对齐

将导航栏固定在顶部
<nav class="navbar navbar-fixed-top" role="navigation">

将导航栏固定在底部
<nav class="navbar navbar-fixed-bottom" role="navigation">

随着页面滚动的导航栏
<nav class="navbar navbar-static-top " role="navigation">

黑色背景白色文字的倒置导航栏
<nav class="navbar navbar-inverse" role="navigation">


面包屑导航
<ul class="breadcrumb">
<li></li>
<li></li>
<li></li>
</ul>


分页导航
<ul class="pagination">
<li><a href="#">text</a></li>
<li></li>
<li></li>
<li></li>
</ul>

可以用active属性定义当前页面，用disabled属性定义不可点击链接

可以用类似下面的方式定义分页工具的大小
<ul class="pagination pagination-xs">

上一页下一页的分页方式
<ul class="pager">
<li></li>
<li></li>
</ul>

&larr华丽的左箭头←→华丽的右箭头&rarr

左右对齐的分页
<ul class="pager">
<li class="previous">text</li>
<li class="next">text</li>
</ul>


标签
<span class="lable lable-success">text</span>
至此defult,warming,primairy等属性


徽章（类似消息条数显示）
<span class="badge">text</span>


超大屏幕显示
<div class="jumbotron">
	<div class="container">
		内容
	</div>
</div>

如果上面container与jumbotron互换位置的话两边会出现空白


缩略图
<div class="col-sm-6">
<a href="#" class="thumbnail">图片</a>
</div>
在网格布局中在图片周围添加class=“"thumbnail"的a标签会添加四个像素的内边距和一个灰色边框当
鼠标悬停在图片上的时候会动态显示图像的轮廓

向缩略图中添加HTML内容可以把class="thumbnail"的a标签改成div。如果想要图像分组需要把他们放在一个无序
列表中且每个列表项向左浮动


警告框
<div class="alert alert-warming">text</div>

可关闭的警告框
<div class="alert alert-success alert-dismissable">
	<button type="button" class="close" data-dismiss="alert">
		text(×华丽的X号)
	</button>
</div>


进度条
<div class="progress">
	<div class="progress-bar" aria-valuemin="0" aria-valuemax="100" style="width: 17%">
	<span>text</span>
	</div>
</div>
解说：上面那个progress是外面那个灰色的条条
	  里面那个progress-bar是那个蓝色的进度
	  aria-valuemin/max表示最大最小（貌似没用）
	  style用来确定进度
	  span元素用于显示进度或一些其他内容

进度条也可以有success，warming等属性
只需要在progress的div后面加一个progress-striped然后在里面那个div中添加progress-bar-success就可以了
在上面条件下在progress-striped后面天际一个active就可以实现螺纹动态
进度条叠加（原理就是在一个div中叠加多个不同颜色和宽度的div ps ：style属性用来控制长度）


多媒体对象（ps：就是我暑假做的前端，实现图片浮动到一边）
<div class="media">
	<a href="#">
		<img src="#">//图片
	</a>//实现链接，也可以不实现
	<div class="media-body">//文章部分
		<h4 class="media-head">//标题
		//文章内容内容部分也可以嵌套媒体对象
	</div>
</div>
a标签的calss命名成pullright就可以实现图片在右面了
把主div换成ul然后把media换成media-list然后在里面实现嵌套什么的就可以实现类似qq空间评论的功能了（太机智了）


添加列表组
<ul class="list-group">
	<li class="list-group-item">text</li>
	<li class="list-group-item">text</li>
	<li class="list-group-item">text</li>
	<li class="list-group-item">text</li>
</ul>
注：那个text中可以随意添加任何乱七八糟的内容，不仅限于文字


面板结构
<div class="panel">
	<div class="panel-heading">
		面板标题,这里的div可以结合warming什么的显示不同颜色
	</div>
	<div class="panel-body">
		这里这个body可有可无，当然也可以直接换成一些类似于列表的乱七八糟的东西
	</div>
	<div class="panel-footer">text</div>
</div>


well 用来显示塌陷效果
<div class="well">text</well>

大的well
<div class="well well-lg">text</div>


模态框
<button class="btn btn-primary " data-toggle="modal"data-target="#mymodal">text</button>
<!-- 这里的data-toggle="modal" 和 data-target="#mymodal"是必须的，前面那句说明这里是调用modal
	后面那句说明要调用的modal的id-->
	<div class="modal fad" id="mymodal" aria-hidden="true"><!--hidden属性用于触发前隐藏-->
		<div class="modal-content">
		<!--用来保证模态框位置-->
			<div class="modal-header">
				text
			</div>

			<div class="modal-body">
				text
			</div>
			<div class="modal-footer">
				text
				<button type="button" class="btn" data-dismiss="modal">
				<!-- data-dismiss="modal"用于关闭当前模态框-->
			</div>
		</div>
	</div>

$('#modal类名').on('hidden/show.bs.modal',function(){隐藏或显示时执行的动作})


滚动监听
<nav id="id1" class="navbar navbar-default" role="navigation">
	//其实这里可以是任意组件用a标签包裹，href=#要定位到的类名，例如href=#id22不局限于导航条但一般都是导航条吧
</nav>
<div data-spy="scroll" data-target="实现监听的a标签的父元素id或class例如#id1" data-offset="0"
style="height:x ;overflow:auto ;position: relative">//relative用于精确定义到导航条的准确位置
<h4 id="id22">这里不一定要是h标签</h4>//点击导航栏时应该是定义到这里
<任意标签>text</任意标签>
</div>

删除当前滚动标签中某部分
在要删除的标签中加入可以被触发的js事件例如上例中的<h4>标签：
<h4 id"id22">ios<small><a href="#" onclick="remove(this);">delete</a></small></h4>
下面的是js函数
<script type="text/javascript">
	$(function(){
		remove=function(e){
			$(e).parents(".section").remove();//删除当前元素
			$('[data-spy="scroll"]').each(function(){
				var $spy = $(this).scrollspy('refresh')
			});
		}
		$("#id1").scrollspy();
	});
</script>

滚动触发函数（相当于一个钩子）
在上一行的$("#id1").scrollspy();后面加上下面的代码就可以实现
$('#id1').on('activate.bs.scrollllspy',function(){
	//想要执行的动作
})


工具提示符
上面随便有个什么标签
<button type="button" class="btn btn-defult" data-toggle="tooltip" data-placement="top" title="text">text</button>
上面的button可以用任意标签代替，data-toggle属性是必须的 
	  data-palce属性用来确定工具提示符出现的方向(left,top,bottom,right)
	  title属性用来设置显示的值
下面的js用来激活标签
<script>
	$(function(){ $("[data-toggle='tolltip']").tooltip();});
</script>


弹出框
<button type="btn btn-success" title="弹出框头内容"
   data-container="body" data-toggle="popover" data-placement="top"
   data-content="弹出框内容">
   text
</button>
然后有下面的js对其进行激活
<script>$(function()
	{$("[data-toggle='popover']").popover;
	});
</script>


确定表单内元素大小
<form role="form">
#确定输入框文字大小
	<div class="form-group">
		<input type="" class="form-control input-lg" placeholder="默认内容">
	</div>
#确定输入框等元素大小
	<div class="col-lg-4">
		<input type="" class="form-control" placeholder="默认内容">
	</div
</form>