Bootstrap基础 组件 个人简单总结

Glyphicons 字体图标
应该创建一个嵌套的<span>标签，并将图标类应用到这个 <span>标签上。
图标类只能应用在不包含任何文本内容或子元素的元素上(span标签内必须没有内容)，
可以把它们应用到按钮、工具条中的按钮组、导航或输入框等地方。

<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
字体图标的class属性名空格不可省略，aria-hidden="true"是为了对屏幕阅读器隐藏，
因为本身字体图标没有真正意义，不需要被屏幕阅读器抓取

下拉菜单
将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative; 的元素。然后加入组成菜单的 HTML 代码。
1.整个下拉菜单包裹在.dropdown容器中
2.按钮需要添加dropdown-toggle的class属性值，需要data-toggle属性（让程序知道整个按钮是干嘛用的）
还需要aria-haspopup,aria-expanded两个属性（一个表示出现菜单，一个表示展开状态）
给按钮绑定一个ID使之后的菜单值可以联系上
3.可以在按钮中添加字体图标
4.布局菜单选项，使用ul，需要添加dropdown-menu的class属性值，
还需告诉浏览器目标事件aria-labelledby=“dropdownMenu1”
当ul获取到焦点时，屏幕阅读器是会读：“Dropdown”

<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
	 Dropdown
	<span class="caret"></span>
</button>
	 <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
 		<li><a href="#">Action</a></li>
 		<li><a href="#">Another action</a></li>
 		<li><a href="#">Something else here</a></li>
 		<li role="separator" class="divider"></li>
 		<li><a href="#">Separated link</a></li>
	</ul>
</div>

data-toggle指以什么事件触发，常用的如modal,popover,tooltips,dropdown等，
(其实就是转换属性，代码中将botton以下拉菜单形式展示)
data-target指事件的目标
aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。 
aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。
其它可选值：true表示元素是展开的；false表示元素不是展开的。

对齐
默认情况下，下拉菜单自动沿着父元素的上沿和左侧被定位为 100% 宽度。 为 .dropdown-menu 添加 .dropdown-menu-right 类可以让菜单右对齐。

标题(当添加标题时候li中不要包含a标签)
li中添加dropdown-header的class属性用于提示

<li class="dropdown-header">Dropdown header</li>

分割线(当添加分割线时候li中不要包含a标签)
li中添加divider的class属性值 以及role=“separator” separator(翻译：分离器)

禁用的菜单项
为下拉菜单中的 <li> 元素添加 .disabled 类，从而禁用相应的菜单项。

按钮组
通过按钮组容器把一组按钮放在同一行里。通过与按钮插件联合使用，可以设置为单选框或多选框的样式和行为
即把单个按钮放入 .btn-group的容器中

尺寸
只要给 .btn-group 加上 .btn-group-* 类，（.btn-group-lg ; .btn-group-sm ; .btn-group-xs）就省去为按钮组中的每个按钮都赋予尺寸类了，如果包含了多个按钮组时也适用。单个按钮尺寸用 .btn-lg等

嵌套
想要把下拉菜单混合到一系列按钮中，只须把 .btn-group 放入另一个 .btn-group 中。

垂直排列
让一组按钮垂直堆叠排列显示而不是水平排列。分列式按钮下拉菜单不支持这种方式。
添加 class=“btn-group-vertical”

两端对齐排列的按钮组
让一组按钮拉长为相同的尺寸，填满父元素的宽度。对于按钮组中的按钮式下拉菜单也同样适用。
a元素的按钮直接包到 btn-group-justified中即可
button按钮需要每个按钮包裹到.btn-group中然后在包到btn-group-justified中

分裂式按钮下拉菜单
相似地，分裂式按钮下拉菜单也需要同样的改变一些标记，但只是多一个分开的按钮。
其实就是多了一个button按钮 ，注意最好在字体图标后面再加一个span标签，
给予sr-only的class属性值，用于优化

输入框组
通过在文本输入框 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。为 .input-group 赋予
.input-group-addon 或 .input-group-btn 类，可以给 .form-control 的前面或后面添加额外的元素。
addon翻译：插件

<label for="...">...</label>
<div class="input-group">
	<span class="input-group-addon">
		<input class="checkbox" aria-label="..."></input>
	</span>
 <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
	 <span class="input-group-addon">
 		<button class="btn btn-default" type="button">go!</button>
 	</span>
</div>

span标签中可以放button，input 。使其成为按钮，选择框类型的额外元素

导航
Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

<ul class="nav nav-tabs" id="myTab">
	 <li role="presentation" class="active"><a href="#">Home</a></li>
	 <li role="presentation"><a href="#">Profile</a></li>
	  <li role="presentation"><a href="#">Messages</a></li>
</ul>
将 nav-tabs改为  nav-pills可以将导航改为胶囊式
导航切换依赖Jquery 可写js代码实现
<script>
    $(function() {
        $("#myTab li").click(function(e) {
            e.preventDefault()
            $(this).tab('show')
            window.location.href = '#' + $(this).children('a').attr('href')
        })
    })
</script>
目前个人能想到的解决切换后链接失效的代码写法，方法不是很好，有好的方式可以留言。

两端对齐 加class属性值 nav-justified

分页
为您的网站或应用提供带有展示页码的分页组件，或者可以使用简单的翻页组件。

 <nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li>
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

尺寸
想要更小或更大的分页？.pagination-lg 或 .pagination-sm 类提供了额外可供选择的尺寸。

对齐链接
你还可以把链接向两端对齐：（ul的class属性pager）

<nav aria-label="...">
  <ul class="pager">
    <li class="previous"><a href="#"><span aria-hidden="true">&larr;</span> Older</a></li>
    <li class="next"><a href="#">Newer <span aria-hidden="true">&rarr;</span></a></li>
  </ul>
</nav>

徽章
给链接、导航等元素嵌套 <span class=“badge”> 元素，可以很醒目的展示新的或未读的信息条目。

巨幕(给class一个jumbotron属性值)

<div class="jumbotron">
  <h1>Hello, world!</h1>
  <p>...</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>

页头给class一个page-header属性值)

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

组件部分后面个别内容使用可能用到jquery,建议查看官方文档
https://v3.bootcss.com/components/#alerts