02.bootStrap全局样式及组件使用之进度条及字体图标

发表于 | 分类于

全局样式

首页点进全局样式，拉到按钮那一栏

1
2
3
4
5
6
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>

<button type="button" class="btn btn-warning">（警告）Warning</button>

<button type="button" class="btn btn-danger">（危险）Danger</button>

发现成功class名背景色绿色，警告黄色，危险红色

进度条

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="progress">
  <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
    <span class="sr-only">40% Complete (success)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
    <span class="sr-only">20% Complete</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
    <span class="sr-only">60% Complete (warning)</span>
  </div>
</div>
<div class="progress">
  <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
    <span class="sr-only">80% Complete (danger)</span>
  </div>
</div>

观察颜色相同的类名，其实是差不多的

所以可以得出结论：其他组件class名的尾缀也是这么命名的。

字体图标

what？用字代表图标嘛，好处

  1. 矢量，不会失真，任意大小

  2. 兼容性强,本质上就是字体啊

  3. 减少http请求

既然是字，那么可以设置大小，颜色，text-align:center

bootStrap自text-align:center带字体图标，把类名加上就好

官方使用方法：

不要和其他组件混合使用

​ 图标类不能和其它组件直接联合使用。它们不能在同一个元素上与其他类共同存在。应该创建一个嵌套的 <span> 标签，并将图标类应用到这个 <span> 标签上。

只对内容为空的元素起作用

​ 图标类只能应用在不包含任何文本内容或子元素的元素上。