bootstrap组件

组件----图标字样

Glyphicons是一套收费的图标字体，提供了web/移动开发中常用的小图标

bootstrap中可以免费使用这套字体中对的250+个。

以服务器端字体形式出现的，即客户端若访问了使用Glyphicons字体的网站

@font-face {  font-family: 'Glyphicons Halflings';  src: url('../fonts/glyphicons-halflings-regular.eot');  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');}

注意：1》图标字体的本质不是图片，而是字体；故凡是可以使用文字的地方都可以使用不同的字体

           2》glyphicon图标字体只能用于“空元素”---不包含任何内容和子元素

<span class="glyphicon glyphicon-dashboard"></span>

组件----按钮组

.btn-group                                     水平按钮组

.btn-group-vertical                        竖直按钮组

.btn-group  .btn-group-justified     水平两端对齐的按钮组

.btn-group-lg

.btn-group-md

.btn-group-sm

.btn-group-xs

组件-----下拉菜单

下拉菜单必须HTML结构：

<div class="dropdown">相对定位的父元素

      <a data-toggle="dropdown">触发元素</a>

      <ul/div>隐藏元素</ul/div>

</div>

<div class="dropdown">    <a data-toggle="dropdown" class="btn btn-success" href="#">产品大全 <span class="caret"></span>    </a>    <ul class="dropdown-menu">      <li class="dropdown-header bg-info">家电</li>      <li class="divider"></li>      <li><a href="#">洗衣机</a></li>      <li><a href="#">电视</a></li>      <li><a href="#">冰箱</a></li>      <li><a href="#">沙发</a></li>      <li class="divider"></li>      <li class="dropdown-header bg-info">水果</li>      <li class="divider"></li>      <li><a href="#">苹果</a></li>      <li><a href="#">香蕉</a></li>      <li><a href="#">橘子</a></li>    </ul>  </div></div>

组件----自学 

路径导航(面包屑)/分页/标签/徽章/巨幕/水井/页头

面包屑:     .breadcrumb

分页：    .pagination .page

标签：  .label

徽章：  .badge

巨幕：   .jumbotron

水井：  .well

页头：  .page-header

组件---导航

标签式导航

<h5>标签-导航</h5>  <ul class="nav nav-tabs">    <li><a data-toggle="tab" href="#">水果</a></li>    <li class="active"><a data-toggle="tab" href="#">家电</a></li>    <li><a data-toggle="tab" href="#">服装</a></li>    <li><a data-toggle="tab" href="#">书籍</a></li>  </ul>

胶囊式导航

<ul class="nav nav-pills">    <li><a data-toggle="tab" href="#">水果</a></li>    <li class="active"><a data-toggle="tab" href="#">家电</a></li>    <li><a data-toggle="tab" href="#">服装</a></li>    <li><a data-toggle="tab" href="#">书籍</a></li>  </ul>

此外，还有两张导航变种：

1》两端对齐的导航   .nav .nav-tabs  .nav-justified

2》竖直放置的胶囊导航  .nav .nav-pills  .nav-stacked

组件---响应式导航

响应式导航条：在PC和平板中默认要显示的内容；但在手机中导航条默认只显示“LOGO/Brand”，以及一个“菜单折叠展开按钮”,

只有单击折叠按钮后才显示所有的菜单项。

  bootstrap中导航条按位置：

     1>顶部导航条

      2>底部导航条

  bootstrap中导航条按颜色：

    1>浅色底深色的字          .navbar-default

    2>深色底浅色的字            .navbar-inverse

  bootstrap中导航条按定位：

     1>相对定位    position：relative

      2>固定定位   position：fixed

------------------------------------------------------------------------------------

<div class="navbar 颜色 定位">  <div class="container">    <!--导航条 begin-->      <!--导航条头部begin-->    <div class="navbar-header">
      <a class="navbar-brand" href="#">        <img src="img/logo.png" alt="" style="margin-top:-5px; ">      </a>
  <button class="navbar-toggle collapsed" type="button" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span>//sr-only只有屏幕阅读器可以看见
  <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <!--导航条头部end--> <!--导航条折叠菜单begin--> <div class="navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">new</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-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> <!--导航条折叠菜单end--> <!--导航条end--> </div></div>