深度了解bootstrap源码之sass篇（六）

发表于

前言

这一章主要学习badges。

研究对象

badges（徽章）组件。

使用方法和效果

在bootstrap里，徽章通常和其它组件套用，例如 链接按钮、按钮组、菜单等，目的是消息数量提示。

使用方法：<span class="badge">1</span>

badges.scss

源文：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
//
// 徽章
// --------------------------------------------------
// 基础样式
.badge {
  display: inline-block;
  min-width: 10px; //设置最小宽度，防止无内容。
  padding: 3px 7px;
  font-size: $font-size-small;
  font-weight: $badge-font-weight;
  color: $badge-color;
  line-height: $badge-line-height;
  vertical-align: baseline; // 注①，vertical-align属性指设置元素的垂直对齐方式，该属性在元素属于inline或是inline-block（table-cell也可以）下才会起作用。
  white-space: nowrap; // 详看注②，white-space指如何处理元素内的空白，nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
  text-align: center;
  background-color: $badge-bg;
  border-radius: $badge-border-radius;
  // 无内容的徽章会样式坍塌，不要再IE8下使用，因为 IE8 不支持 :empty 选择符。
  &:empty {
    display: none;
  }
  // 胶囊式按钮的徽章样式处理
  .btn & {
    position: relative;
    top: -1px;
  }
  .btn-xs & {
    top: 0;
    padding: 1px 5px;
  }
  // 设置胶囊式导航内处于激活状态的元素所包含的徽章展示相匹配的样式。
  a.list-group-item.active > &,
  .nav-pills > .active > a > & {
    color: $badge-active-color;
    background-color: $badge-active-bg;
  }
  .nav-pills > li > a > & {
    margin-left: 3px;
  }
}
// 链接元素激活状态下徽章样式
a.badge {
  &:hover,
  &:focus {
    color: $badge-link-hover-color;
    text-decoration: none;
    cursor: pointer;
  }
}

相关说明

  • 注①：属性值baseline，

    w3c指：元素放置在父元素的基线上

    那么，基线在哪儿？打开PS(photoshop)，新建一个画布，输入文字，在编辑状态下文字下面不是有根横线么，那就是基线的位置。如图

    得知基线后，baseline如何根据基线放置？如图：

    同理，延伸一下其它属性值，如 top、texttop、middle、bottom、text-bottom、sub、super。这些属性值都基于父元素的基线定位。如果想直接看效果可以去张鑫旭前辈的demo，也许你会看到张鑫旭前辈讲述他对vertical-align的理解这篇文章，不过我认为他在对几个属性值定位的总结并不十分准确，可以说是不正确的。供参考是ok的。

    理解计算机是如何计算baseline的，是vertical-align定位的关键。

    经我多番百度得出父元素的line-height会影响基线的位置，line-height不会撑开元素大小，但在计算过程中，line-height改变了某个区间值，影响了基线位置的计算。所以，你可能会看到，爷爷辈元素line-height值高于父元素固定高宽时，父元素大小没变化，但子元素的sub,super,top,bottom等属性值有明显的不同，额外说明：line-height有具有继承的作用，爷爷辈元素的line-height会被父元素继承，这一点应值得注意。

    关于vertical-align的定位我并没有说全，也说的不是十分准确，请你尽量保持参考态度，尤其在有line-height和vertical-align的关系下，即使经我总结，我也只能认为vertical-align定位是基于baseline的，计算机在计算baseline时line-height也会参与进来。那计算机到底是如何计算baseline的不属本章要点，不过我认为仍值得好好研究一番。

  • 注②：white-space属性是一个容易叫人忽略的属性，记住这个属性能让你的css代码更显细心。