Bootstrap 3.3.7学习笔记14

Bootstrap 3.3.7学习笔记14

今天周日，不放假了。继续学习Bootstrap！今天学得主要内容就是bootstrap给出的各种小组件的样式。课题会很零散，内容会比较多。

---

分页导航

知识点：

• 分页pagination是指我们在看图片新闻的时候经常会有好几个网页组成一个新闻，每个网页之间的翻动就是由图片下方的1，2，3，…，9这样的分页导航完成的。 很显然它本质也是一个ul。当然其实分页导航最常见的地方还是在搜索引擎的搜索结果页面里面。
• 还有一种类型的分页导航就是我不显示这里一共有几页，我只给出两个按钮，一个是上一页，一个是下一页。
• 这里是一篇对于分页导航UI细节的分析文章。

---

警示框

知识点：

• 可关闭警示框中的叉叉，是用一个button标签配上class="close"和自定义属性data-dismiss="alert"完成的。另外，因为close类中包含一句float: right;，所以无论html代码中你把它放在文字的前或后它总是出现在警示框的最右侧。
• 警示框<div class="alert alert-info" role="alert">中的role="alert"也是为了给残疾人设备使用而添加的，所以我学到目前的猜测是，网页开发中照顾到残疾人交互的方式就是给各种元素添加role属性。

---

进度条

知识点：

• 在进度条的条纹样式实现有两种方式
  第一种（官方文档目前的推荐）：

      <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-striped" style="width:40%"></div>
      </div>

  第二种：

  <div class="progress progress-striped">
      <div class="progress-bar progress-bar-success" style="width:40%"></div>
  </div>

  两种比较其实还是第一种的逻辑性好一些，直接给那个进度条加纹路，而不是给它的父元素。

• 同样在让进度条条纹动起来的时候有两种方式：
  第一种：（官方文档目前的推荐）：

      <div class="progress">
          <div class="progress-bar progress-bar-success progress-bar-striped active" style="width:40%"></div>
      </div>

  第二种：

  <div class="progress progress-striped active">
      <div class="progress-bar progress-bar-success" style="width:40%"></div>
  </div> 

  然后也是第一种直观一点。

---

暂无想法的一些组件

标签<span class="label label-default">，徽章<span class="badge">，缩略图<div class="thunbnail">or<img class="thumbnail">，媒体对象，面板，列表组，巨幕，页头，Well