bootstrap--组件

点击这里，过去看看

组件

Glyphicons 字体图标

Bootstrap 假定所有的图标字体文件全部位于 …/fonts/ 目录内

部分图表

如何使用

所有图标都需要一个基类和对应每个图标的类
创建一个嵌套的 < span> 标签，并将图标类应用到这个 < span> 标签上
所有图标都需要一个基类和对应每个图标的类
不要和其他组件混合使用
只对内容为空的元素起作用

类名
glyphicon	图标基类
glyphicon-search	对应每个图标的类

下拉菜单

类名	定义
dropdown	定义为下拉菜单，将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里
caret	三角符号。通常在span标签里，作为下拉菜单符号
dropdown-toggle	定义 button为可控制菜单展开与收回
dropup	父级添加可以让菜单向上弹出（默认是向下弹出的）
.dropdown-menu	ul添加，定义为包含的li为下拉菜单项
.dropdown-menu-right	ul添加，菜单右对齐
dropdown-header	li添加，添加标题来标明一组动作
disabled	li，禁用相应的菜单项
< li role=“separator” class=“divider”>< /li>	为下拉菜单添加一条分割线，用于将多个链接分组。

按钮组

类名	定义
btn-group	div添加，定义为按钮组
btn-toolbar	在< div class=“btn-group”>父级div添加，可将按钮组分组，
.btn-group-（lg）（xs）（md）（sm）	为按钮组中的每个按钮都赋予尺寸类
btn-group-vertical	定义按钮组为垂直排列
btn-group .btn-group-justified	按钮组占满宽度，两端对齐

嵌套

.btn-group 放入另一个 .btn-group 中。

垂直排列

按钮式下拉菜单

类名	定义
btn-sm	button上添加，定义尺寸

输入框组

通过在文本输入框 < input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展

类名	定义
input-group	div添加，定义为输入框组
input-group-addon	添加span中，一般为文本或图标，放在 input标签前面或后面
input-group-（lg）（xs）（md）（sm）	输入框组尺寸
input-group-btn	输入框组内的按钮组，添加在< input type=“text” class=“form-control” aria-label="…">前面或后面

只支持文本输入框 < input>
不支持在输入框的单独一侧添加多个额外元素（.input-group-addon 或 .input-group-btn）
不支持在单个输入框组中添加多个表单控件

<div class="input-group">
  <span class="input-group-addon" id="basic-addon1">@</span>
  <input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-describedby="basic-addon2">
  <span class="input-group-addon" id="basic-addon2">@example.com</span>
</div>

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <span class="input-group-addon">.00</span>
</div>

<label for="basic-url">Your vanity URL</label>
<div class="input-group">
  <span class="input-group-addon" id="basic-addon3">https://example.com/users/</span>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
</div>

导航

确保导航组件的可访问性，务必在 < ul> 的最外侧的逻辑父元素上添加 role=“navigation” 属性，或者用一个 < nav> 元素包裹整个导航组件。不要将 role 属性添加到 < ul> 上

标签页

注意 .nav-tabs 类依赖 .nav 基类。

类名	定义
nav	基类
nav-tabs	水平方向排列
nav-stacked	垂直方向堆叠排列（胶囊式）
nav-pills	水平方向堆叠排列（胶囊式）
nav-justified	输入框组，两端对齐

<ul class="nav nav-tabs">
  <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>

胶囊式标签页

<ul class="nav nav-pills">
  <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>

垂直排列

两端对齐

禁用

添加下拉菜单

类名	定义
dropdown	在 li 标签中添加，定义为下拉菜单

导航条

== 务必使用 < nav> 元素，或者，如果使用的是通用的 < div> 元素的话，务必为导航条设置 role = “navigation” 属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。==

类名	定义
navbar	nav添加，定义为导航条
navbar-default	nav添加，定义为导航条颜色
navbar-fixed-bottom	可以让导航条固定在顶部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中
navbar-fixed-top	可以让导航条固定在底部，并且还可以包含一个 .container 或 .container-fluid 容器，从而让导航条居中
navbar-static-top	创建一个与页面等宽度的导航条，它会随着页面向下滚动而消失。还可以包含一个 .container 或 .container-fluid 容器（与 .navbar-fixed-* 类不同的是，你不用给 body 添加任何内补（padding））
< div class=“container-fluid”>	nav内部嵌套
< div class=“navbar-header”>	设置为导航条的头部
navbar-brand	一般为导航条头部中的logo ，添加在导航条头部中的标签里
collapse	基类，定义可折叠
navbar-collapse	可折叠的导航条，添加div中，div嵌套在.container中
< ul class=“nav navbar-nav”>	包裹的li标签为导航条内容
active	默认选中
dropdown	< ul class=“nav navbar-nav”> 中li标签添加，定义为导航条下拉菜单按钮
divider	下拉菜单分割线
navbar-form navbar-left	form标签中添加，定义为导航条中的搜索框，向左边浮动
navbar-btn	定义为导航条中的按钮
navbar-text	定义导航条的文本，一般添加在p标签中
breadcrumb	ul添加，定义为面包屑导航

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

汉堡包导航菜单按钮

<a href="#menu" class="navbar-toggle" data-toggle="collapse">
						<span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
	</a>

面包屑导航

<h3>路径导航-面包屑导航</h3>
			<ul class="breadcrumb">
				<li><a href="">index</a></li>
				<li><a href="">news</a></li>
				<li><a href="">email</a></li>
				<li><a href="">my</a></li>
			</ul>

如下

分页

< nav aria-label=“Page navigation”>	分页导航条
< ul class=“pagination”>	定义分页
pagination-lg	尺寸
pager	两端对齐

标签

巨幕

页头

省略图

警告框

将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框，.alert 类是必须要设置的，另外我们还提供了有特殊意义的4个类（例如，.alert-success），代表不同的警告信息。

类名	定义
	警报不可受理
alert	警告框基类
alert-warnin	警告框颜色
alert-dismissible	不可受理
close	点击关闭
data-dismiss=“alert”	button添加，确保点击关闭的是警告框
.alert-link	工具类，可以为链接设置与当前警告框相符的颜色。添加a标签上

进度条

类名	定义
progress	定义为进度条
progress-bar	定义进度条的进度
progress-bar-success	进度条颜色
progress-bar-striped	进度条的条纹效果，IE9 及更低版本不支持
active	为 .progress-bar-striped 添加 .active 类，使其呈现出由右向左运动的动画效果。IE9 及更低版本的浏览器不支持。

媒体对象

这是一个抽象的样式，用以构建不同类型的组件，这些组件都具有在文本内容的左或右侧对齐的图片（就像博客评论或 Twitter 消息等）。

media	定义为媒体对象
media-left	子级添加，类似于.pull-left
media-body	子级添加，主体内容
media-heading	主体内容的头
media-middle	图片或其他媒体类型可以顶部、中部或底部对齐。默认是顶部对齐。

列表组

类名	定义
list-group	定义为列表组容器
list-group-item	定义为列表组容器下的子项目

面版

panel	基类，定义为面板容器
panel-default	定义面板容器的颜色
panel-heading	子级添加为面板容器内容的头
panel-body	子级添加为面板容器内容
panel-footer	子级添加为面板容器内容的注脚
panel-title	为了给链接设置合适的颜色，务必将链接放到带有 .panel-title 类的标题标签内

top