Bootstrap5方法论摘要

行之所致
406 阅读3分钟
  • 组件应当使用基准类（base class）构建，并通过修饰符类（modifier class）进行扩展。
    • btn基础类, btn-share, btn-im, btn-primary, btn-danger...
    • 修饰符类并非总是必需的，因此请确保只有在能够实际减少代码数量并防止不必要的样式覆盖的情况下才去创建新的修饰符类。
        /* 基础类 */
    .btn {
        display: inline-block;
        font-weight: 400;
        line-height: 1.5;
        color: #212529;
        text-align: center;
        text-decoration: none;
        vertical-align: middle;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        background-color: transparent;
        border: 1px solid transparent;
        padding: .375rem .75rem;
        font-size: 1rem;
        border-radius: .25rem;
        transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    }
    /* 修饰类 */
    .btn-primary {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
  • 组件的状态应当遵循常规的 z-index体系 使用逻辑。
    • 组件元素体系
      • Bootstrap 中的某些组件是使用重叠元素构建的,不修改元素的border属性的情况下防止双重边框（margin负值解决）比如分页（pagination）组件。
      • 这些组件共享一个z-index体系，有0 - 3构成。
      • 0 是默认值（或初始值），1 是赋予 :hover，2 是赋予 :active/.active，3 是赋予 :focus。
      • 设计原则完全按照用户意图来设定。
      .page-link:focus {
      z-index: 3;
      outline: 0;
      box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

    * 把z-index干掉

component-z-index.png

  * 添加上z-index

component-z-index1.png

* 遮罩层组件
    * $zindex-dropdown:                   1000;
    * $zindex-sticky:                     1020;
    * $zindex-fixed:                      1030;
    * $zindex-modal-backdrop:             1040;
    * $zindex-offcanvas:                  1050;
    * $zindex-modal:                      1060;
    * $zindex-popover:                    1070;
    * $zindex-tooltip:                    1080;
    * 根据我们的业务需求，提前把这些维护起来，也少因为层级问题和UI产品扯皮了。

  • 尽可能使用 HTML 和 CSS 来实现功能，而不是 JavaScript

    • HTML 和 CSS 在浏览器中的执行速度也比 JavaScript 快，并且浏览器通常为你提供了大量功能。
    • 虽然我们 可以 编写自己的表单验证插件并根据输入状态为父元素添加相应的类（class），例如将文本设置为红色，但是我们更喜欢使用每个浏览器都提供的 :valid/:invalid 伪元素（pseudo-element）。

  • 组件应当支持响应式布局和移动设备优先

    • Bootstrap 的 CSS 样式是基于响应式布局而构建的，这一方式通常被称为 移动设备优先（mobile-first）。
    • 这种支持响应式布局的方式意在减少 CSS 样式的覆盖，因为只有在视口（viewport）变大时你才需要添加额外的样式。

  • 尽可能避免对 HTML 结构的强依赖（例如，子选择器）

    • 避免组件对 HTML 结构的强依赖。

  • 尽可能使用工具类来修改样式，而不是自定义样式

    • 自浮动和定位布局以后，flex布局大量被前端开始使用，如果把这些布局类抽象为工具类可以大大提升开发效率。
    .flex {
    display: flex;
}
/* 缩写为 .flex */

.flex.f-jc-fs {
    justify-content: flex-start;
}
avatar
文章
阅读
粉丝