Bootstrap之组件

一个页面要想正常访问，首先需要正常加载各种资源。

可是，我不得不说，这一点上就连BAT做的也有所欠缺。他们在专注于组件化，模块化，自动构建，他们天天在弄TDD,BDD，敏捷之道，可是我常常发现有时腾讯或百度的某些页面打开后样式全乱了，或是过长的等待，点击没有反应…

大公司都这样，更不用说一些没用心做的网站了。为什么会这样呢，因为我们强调把脚本和CSS做成外部文件引用，可是却加载失败了，我们崇尚CDN,但有些外链的CDN域名在某些地方访问不了….

所以有时把脚本，css放到页面所在的域名上也未必是坏事，至少只要你能访问到页面，就能访问到相关的资源，只是性能上差一些。

好了，言归正转，来看Bootstrap的一些常用组件，这些组件包括导航组件、菜单、进度条、列表组、面板等。

图标：
bootstrap使用字体图标，这个很好，只要字体文件加载成功了，所有小图标都可以正常显示了，不需要访问一个个图标文件了，可以有效减少HTTP请求数，并且字体图标是可以很容易改变颜色和大小的。它集成了40个Glyphicons图标，当然40个常常不够用，不够用时可以选用font-awesome，支持几百个图标，差不多了。

<i class="glyphicon glyphicon-shopping-cart"></i>

常用的标签一般是i或span。

下拉菜单：

<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><a href="#">Separated link</a></li>
  </ul>
</div>

.dropdown实际上主要定义了position:relative，这样.dropdown-menu是absolute定位的，就可以把定位的原点设置在dropdown的起始坐标上，.dropdown-menu的top设置为100%，这样可以紧贴着dropdown>button内容的下边，形成下拉效果，至于小箭头，则是

<span class="caret"></span>

来实现的。那么下拉的响应是怎么实现的呢？我们注意到data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”true” 这几个扩展属性还有id=”dropdownMenu1”，指定了下拉菜单的元素，明白了吧，id指定了下拉的目录，data-toggle决定了动作方向。aria-haspopup :true表示点击的时候会出现菜单或是浮动元素； false表示没有pop-up效果。aria-expanded:表示展开状态。默认为undefined, 表示当前展开状态未知。其它可选值：true表示元素是展开的；false表示元素不是展开的。

导航条

<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>

      <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>

.sr-only里面的内容不可见，只是为了标识含义的。
navbar也是 position: relative;的，还有其他的一些默认样式，如最小高度。navbar-header是导航标题或图标，float: left;的，所以显示在最左边。里面的导航菜单则用nav .navbar-nav来实现，.navbar-nav中的li都是float:left，因此显示到一行上，很简单吧，所以没有bootstrap我们也可以自己做，只不过使用它会更方便一些。

分页

<nav>
  <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>

有了分页组件，以后做分页再也不用自己封装也，使用模板

缩略图：

 <div class="thumbnail">
      <img src="..." alt="...">
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
      </div>
    </div>

进度条：

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>

缩略图和进度条其实也都比较简单，里面的样式可以自己分析一下。

列表组：

<ul class="list-group">
  <li class="list-group-item">Cras justo odio</li>
  <li class="list-group-item">Dapibus ac facilisis in</li>
  <li class="list-group-item">Morbi leo risus</li>
  <li class="list-group-item">Porta ac consectetur ac</li>
  <li class="list-group-item">Vestibulum at eros</li>
</ul>

列表的样式不难做，只是我们自己做的话需要考虑给第一项和最后一项特殊设置圆角，而使用bootstrap组件，则不用考虑这些了。使用emmet编辑时，只用输入这么简单的一句：

ul.list-group>li.list-group-item*5

媒体对象：

<div class="media">
  <div class="media-left">
    <a href="#">
      <img class="media-object" src="..." alt="...">
    </a>
  </div>
  <div class="media-body">
    <h4 class="media-heading">Media heading</h4>
    ...
  </div>
</div>

媒体对象特别适合博客里面的评论展示，甚至都可以什么不改直接使用，因为在普通了。

面板：

<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>

还有一些其他组件，这些组件大多是css,html来实现的，甚至不用引用bootstrap.min.js文件，所以我觉得bootstrap是一套UI库，很适合做门户，而EasyUI，jQueryUI则适合做后台的CMS。