API

API - Bootstrap 5和Material Design 2.0

The utility API is a Sass-based tool to generate utility classes.


Bootstrap实用程序是使用我们的实用程序API生成的,可用于修改或扩展我们的 通过Sass的默认实用程序类集。我们的实用程序API基于一系列的Sass映射和 用于生成具有各种选项的类族的函数。如果您不熟悉 萨斯地图,在 Sass官方文档 开始。

$ utilities 地图包含我们所有的实用程序,之后与您的 自定义 $ utilities 映射(如果有)。实用程序映射包含一个键控列表 接受以下选项的实用程序组:

  • property :属性的名称,可以是字符串或字符串数组 (例如,需要水平填充或边距)。
  • response (可选):布尔值,指示是否需要响应类 被生成。默认为 false
  • rfs (可选):用于启用流体缩放的变量。看看 RFS页面以了解其工作原理。默认为 false
  • class (可选):如果您不想更改类名的变量 它与属性相同。如果您不提供 class 键, property 键是一个字符串数组,类名将是第一个元素 属性 property 的数组。
  • state (可选):伪类变体列表,如:hover或:focus 为实用程序生成。无默认值。
  • values :值列表,如果您不希望将类名作为 与值相同。如果将null用作映射键,则不会对其进行编译。
  • print (可选):布尔值,指示是否需要打印类 产生。默认为 false
  • rtl (可选):布尔值,指示实用程序是否应保留在RTL中。 默认为true。

API说明

所有实用程序变量都添加到我们内部的 $ utilities 变量中 _utilities.scss 样式表。每组实用程序如下所示:

 
          $utilities: (
            "opacity": (
              property: opacity,
              values: (
                0: 0,
                25: .25,
                50: .5,
                75: .75,
                100: 1,
              )
            )
          );
        

输出以下内容:


      .opacity-0 { opacity: 0; }
      .opacity-25 { opacity: .25; }
      .opacity-50 { opacity: .50; }
      .opacity-75 { opacity: .75; }
      .opacity-100 { opacity: 1; }
    

自定义类前缀

使用 class 选项更改已编译CSS中使用的类前缀:


  
          $utilities: (
            "opacity": (
              property: opacity,
              class: o,
              values: (
                0: 0,
                25: .25,
                50: .5,
                75: .75,
                100: 1,
              )
            )
           );
  
     

输出:


          .o-0 { opacity: 0; }
          .o-25 { opacity: .25; }
          .o-50 { opacity: .50; }
          .o-75 { opacity: .75; }
          .o-100 { opacity: 1; }
        

响应式实用程序

添加 response 布尔值以生成响应实用程序(例如, .opacity-md-25 所有断点.


  
          $utilities: (
            "opacity": (
              property: opacity,
              responsive: true,
              values: (
                0: 0,
                25: .25,
                50: .5,
                75: .75,
                100: 1,
              )
            )
           );
  
     

输出:

 
      .opacity-0 { opacity: 0; }
      .opacity-25 { opacity: .25; }
      .opacity-50 { opacity: .50; }
      .opacity-75 { opacity: .75; }
      .opacity-100 { opacity: 1; }

      @media (min-width: 576px) {
        .opacity-sm-0 { opacity: 0; }
        .opacity-sm-25 { opacity: .25; }
        .opacity-sm-50 { opacity: .50; }
        .opacity-sm-75 { opacity: .75; }
        .opacity-sm-100 { opacity: 1; }
      }

      @media (min-width: 768px) {
        .opacity-md-0 { opacity: 0; }
        .opacity-md-25 { opacity: .25; }
        .opacity-md-50 { opacity: .50; }
        .opacity-md-75 { opacity: .75; }
        .opacity-md-100 { opacity: 1; }
      }

      @media (min-width: 992px) {
        .opacity-lg-0 { opacity: 0; }
        .opacity-lg-25 { opacity: .25; }
        .opacity-lg-50 { opacity: .50; }
        .opacity-lg-75 { opacity: .75; }
        .opacity-lg-100 { opacity: 1; }
      }

      @media (min-width: 1200px) {
        .opacity-xl-0 { opacity: 0; }
        .opacity-xl-25 { opacity: .25; }
        .opacity-xl-50 { opacity: .50; }
        .opacity-xl-75 { opacity: .75; }
        .opacity-xl-100 { opacity: 1; }
      }

      @media (min-width: 1200px) {
        .opacity-xxl-0 { opacity: 0; }
        .opacity-xxl-25 { opacity: .25; }
        .opacity-xxl-50 { opacity: .50; }
        .opacity-xxl-75 { opacity: .75; }
        .opacity-xxl-100 { opacity: 1; }
      }
    

改变公用事业

通过使用相同的键来覆盖现有的实用程序。例如,如果您想要其他 响应溢出实用程序类,您可以这样做:


  
          $utilities: (
            "overflow": (
              responsive: true,
              property: overflow,
              values: visible hidden scroll auto,
            ),
          );
  
     

打印实用程序

启用 print 选项将生成实用程序类,用于 打印,仅在 @media print {...} 媒体查询中应用。


  
          $utilities: (
            "opacity": (
              property: opacity,
              print: true,
              values: (
                0: 0,
                25: .25,
                50: .5,
                75: .75,
                100: 1,
              )
            )
           );
  
     

输出:


          .opacity-0 { opacity: 0; } .opacity-25 { opacity: .25; } .opacity-50 { opacity: .5; }
          .opacity-75 { opacity: .75; } .opacity-100 { opacity: 1; } @media print { .opacity-print-0
          { opacity: 0; } .opacity-print-25 { opacity: .25; } .opacity-print-50 { opacity: .5; }
          .opacity-print-75 { opacity: .75; } .opacity-print-100 { opacity: 1; } }
        

使用API

既然您已经熟悉了实用程序API的工作原理,请学习如何添加自己的自定义 类并修改我们的默认实用程序。

添加实用程序

可以使用以下命令将新实用程序添加到默认的 $ utilities 映射中 map-merge 。例如,以下是添加响应式广告的方法 具有三个值的 cursor 实用程序。


            $utilities: map-merge( $utilities, ( "cursor": ( property: cursor, class: cursor
            responsive: true, values: auto pointer grab, ) ) );
          

修改实用程序

修改默认 $ utilities 映射中的现有实用程序 map-get map-merge 函数。在下面的示例中, 在 width 实用程序中添加一个附加值。从初始开始 map-merge ,然后指定要修改的实用程序。从那里获取 嵌套的“ width” 映射和 map-get 来访问和修改 实用程序的选项和值。


            $utilities: map-merge( $utilities, ( "width": map-merge( map-get($utilities, "width"), (
            values: map-merge( map-get(map-get($utilities, "width"), "values"), (10: 10%), ), ), ),
            ) );
          

删除实用程序

通过将组密钥设置为 null 来删除任何默认实用程序。对于 例如,要删除我们所有的 width 实用程序,请创建一个 $ utilities map-merge 并在其中添加“ width”:null


            $utilities: map-merge( $utilities, ( "width": null ) );