• Bootstrap5 methodology: v5.bootcss.com/docs/extend…
  • Components should be built with a Base Class and extended with a modifier Class.
    • Btn-share, BTN-IM, bTN-primary, BTN-Danger… bTN-Share, BTN-IM, BTN-primary, BTN-Danger…
    • Modifier classes are not always required, so be sure to create new ones only if you can actually reduce the amount of code and prevent unnecessary style overwriting.
        /* Basic class */
    .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;
    }
    /* Modifiers */
    .btn-primary {
        color: #fff;
        background-color: #0d6efd;
        border-color: #0d6efd;
    }
Copy the code
  • The state of the component should follow the normal Z-index architecture usage logic.
    • Component element system
      • Some components in Bootstrap are built with overlapping elements to prevent double borders without modifying the border attribute of the element, such as pagination components.
      • These components share a Z-index system, consisting of 0-3 components.
      • 0 is the default (or initial) value, 1 is to hover, 2 is to active/. Active, and 3 is to focus.
      • Design principles are set entirely according to user intent.
      .page-link:focus {
      z-index: 3;
      outline: 0;
      box-shadow: 0 0 0 0.2 rem rgba(0.123.255.0.25);
  }
Copy the code
    * Kill z-IndexCopy the code

* Add z-indexCopy the code

$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; * Maintain these in advance according to our business needs, and there is less bickering over hierarchy and UI products.Copy the code

  • Use HTML and CSS instead of JavaScript whenever possible

    • HTML and CSS are also faster to execute in browsers than JavaScript, and browsers generally provide you with a lot of functionality.
    • While we could write our own form validation plug-in and add a class for the parent element based on the input state, such as setting the text to red, we prefer to use the: Valid /:invalid pseudo-element that every browser provides.

  • Components should support responsive layout and mobile device preference

    • Bootstrap’s CSS styles are built around a responsive layout, which is often referred to as mobile-first.
    • This support for responsive layouts is intended to reduce CSS style coverage, since you only need to add additional styles when the viewport gets larger.

  • Avoid strong dependencies on HTML structures whenever possible (for example, child selectors)

    • Avoid heavy dependency of components on HTML structure.

  • Whenever possible, use utility classes to modify styles rather than customize them

    • Personally, the design principle of Bootstrap is to use a lot of tools, including margin and padding, but I think it is best to use less for business development.
    • Since floating and positioning layouts, Flex layouts have been used extensively by the front end, and abstracting these layout classes into utility classes can greatly improve development efficiency.
    .flex {
    display: flex;
}
/* Abbreviated to.flex */

.flex.f-jc-fs {
    justify-content: flex-start;
}
Copy the code