前端

BootStrap4核心源码学习之CSS部分

BootStrap4, front-end

Bootstrap 是全球最受欢迎的前端组件库，未读过不足以谈前端人生。

BootStrap4的核心源码，也就是我们在项目中常引用的bootstrap.min.css/bootstrap.min.js，
主要来自bootstrap/scss和bootstrap/js，本篇解读css部分。

内容

scss目录说明

通过目录，我们来了解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
bootstrap/scss
├── mixins/ // @mixin方法
├── utilities/ // 全局样式
├── _alert.scss // 警告-组件
├── _badge.scss // 徽章-组件
├── _breadcrumb.scss //面 包屑-组件
├── _buttons-group.scss // 按钮组-组件
├── _buttons.scss // 按钮-组件
├── _card.scss // 卡片-组件
├── _carousel.scss // 滚屏-组件
├── _close.scss // 关闭-全局样式
├── _code.scss // 代码-内容
├── _custom-forms.scss // 表单_自定义表单-组件
├── _dropdown.scss // 下拉菜单
├── _forms.scss // 表单-组件
├── _functions.scss // 公共方法
├── _grid.scss // 栅格-布局
├── _images.scss // 图片、图解-内容
├── _input-group.scss // 输入类-组件
├── _jumbotron.scss // 超大屏-组件
├── _list-group.scss // 列表类-组件
├── _media.scss // 媒体-布局
├── _mixins.scss // 总的@mixin方法，，引用mixins目录下文件
├── _modal.scss // 模态框-组件
├── _nav.scss // 导航-组件
├── _navbar.scss // 导航条-组件
├── _pagination.scss // 分页-组件
├── _popover.scss // 弹出框-组件
├── _print.scss // 打印样式
├── _progress.scss // 进度条-组件
├── _reboot.scss // 初始化样式
├── _root.scss // 基本颜色、屏幕断点
├── _tables.scss // 表格-内容
├── _tooltip.scss // 工具提示-组件
├── _transitions.scss // 过渡效果：折叠，显示隐藏
├── _type.scss // 排版-内容
├── _utilities.scss // 总的全局样式，引用utilities目录下文件
├── _variables.scss // 变量集合
├── bootstrap-grid.scss //栅格CSS
├── bootstrap-reboot.scss //启动CSS
└── bootstrap.scss //完整css

新的文档主要分为5大类：布局、内容、组件、全局样式、扩展（图标）；
全局样式基本在scss/utilities/文件夹下，布局、内容、组件基本在scss/文件夹下，
新的Bootstrap4取消了字体图标，开发者可以引入扩展里推荐的图标库。

三大css文件

通过本节我们将了解打包出来用于生产的三大css文件由哪些部分组成，有哪些作用，它们之间有怎样的联系。

  • 如有自己的UI组件，仅使用布局选择bootstrap-grid.scss 包含：初始化（部分）、公共方法、变量、栅格相关mixins、栅格-布局、弹性布局-样式
  • 如果以文档为主，仅带基础内容选择bootstrap-reboot.scss 包含：公共方法、变量、mixins、reboot
  • 使用所有样式选择bootstrap.scss 包含：所有

_functions.scss : 公共方法：用于检测断点、表单中用到的SVG icons、颜色处理；
_variables.scss : 变量：颜色、断点、行间距、栅格等等参数；
_mixins.scss : 抽象类：从一些枯燥重复的CSS抽象出来的方法；
_reboot.scss: CSS初始化：不同浏览器自带的默认样式不同，这样使浏览器尽可能统一，例如：Reset.css、Normalize.css

精选组件详解

本节将挑选按钮、卡片两个组件，从oocss角度进行详细的解读

按钮

可以看到，当我们使用时先引入btn，然后通过btn-primary/secondary来扩展颜色，btn-lg/sm来扩展大小；
这里体现了oocss：

  • 抽象出公共的部分：base类；
  • 往想扩展的方面增加class；
  • 类名：简单、清晰、语意化：
    整个bootstrap关于size统一是：sm、md、lg…简单、清晰的用词，
    关于按钮的皮肤：主、备、成功、危险、警告…场景化的用词来体现颜色；
  1. 定义基础的按钮样式，不直接定义宽度而是通过内容与padding来撑开按钮，让按钮大小不依赖于内容，属于oocss中：容器和内容分离
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
.btn {
  display: inline-block;
  font-weight: $btn-font-weight;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;  //文本是否被选中
  border: $btn-border-width solid transparent;
  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);
  @include transition($btn-transition);

  // Share hover and focus styles 抽象方法，可让hover和focus共享一些样式
  @include hover-focus {
    text-decoration: none;
  }
  &:focus,
  &.focus {
    outline: 0;
    box-shadow: $btn-focus-box-shadow;
  }

  // Disabled comes first so active can properly restyle
  &.disabled, // 关于伪类顺序建议通常是：link、visited、focus、hover、active
  &:disabled {
    opacity: $btn-disabled-opacity;
    @include box-shadow(none);
  }

  &:not([disabled]):not(.disabled):active,
  &:not([disabled]):not(.disabled).active {
    background-image: none;
    @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  }
}

// Future-proof disabling of clicks on `<a>` elements
a.btn.disabled,
fieldset[disabled] a.btn {
pointer-events: none; //a标签的处理，不会成为鼠标事件的target
}
  1. 定义按钮皮肤的扩展样式：primary，secondary；Base和Alternate属于oocss中：容器与样式分离
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@each $color, $value in $theme-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
  }
}

@each $color, $value in $theme-colors {
  .btn-outline-#{$color} {
    @if $color == "light" {
      @include button-outline-variant($value, $gray-900);
    } @else {
      @include button-outline-variant($value, $white);
    }
  }
}

附加：定义链接式按钮

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
.btn-link {
  font-weight: $font-weight-normal;
  color: $link-color;
  background-color: transparent;

  @include hover {
    color: $link-hover-color;
    text-decoration: $link-hover-decoration;
    background-color: transparent;
    border-color: transparent;
  }

  &:focus,
  &.focus {
    text-decoration: $link-hover-decoration;
    border-color: transparent;
    box-shadow: none;
  }

  &:disabled,
  &.disabled {
    color: $btn-link-disabled-color;
  }

  // No need for an active state here
}

  1. 定义按钮的大小拓展样式
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
// 定义大小button
.btn-lg {
  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);
}

.btn-sm {
  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);
}

//定义块级按钮
.btn-block {
  display: block;
  width: 100%;

  // Vertically space out multiple block buttons
  + .btn-block {
    margin-top: $btn-block-spacing-y;
  }
}

// Specificity overrides 对做为按钮的输入元素进行重写
input[type="submit"],
input[type="reset"],
input[type="button"] {
  &.btn-block {
    width: 100%;
  }
}
分享到