direktori cari
Getting started Accessibility(无障碍) Browsers and devices(浏览器和设备) Build tools(构建工具) Contents(内容) Download(下载) JavaScript Theming Bootstrap(主题Bootstrap) Webpack Components: Alerts Alerts(警报) Components: Badges Badges(徽章) Components: Breadcrumb Breadcrumb Components: Button group Button group(按钮组) Components: Buttons Buttons(按钮) Components: Cards Components: Carousel Cards(卡) Carousel(圆盘传送带) Components: Collapse Collapse(折叠) Components: Dropdowns Dropdowns(下拉菜单) Components: Forms Forms(表单) Components: Input group Input group(输入群组) Components: Input group Jumbotron(广告大屏幕) Components: List group List group(列表组) Components: Modal Modal(互动视窗) Components: Navbar Navbar(导航栏) Components: Navs Navs(导航栏) Components: Pagination Pagination(分页) Components: Popovers Popovers(弹出框) Components: Progress Progress(进度条) Components: Scrollspy Scrollspy(滚动监听) Components: Tooltips Tooltips(提示工具) Content Code(代码) Figures(图片区) Images(图片) Reboot(重置) Tables(表格) Typography(排版) Layout Grid(网格) Layout(布局) Media object(多媒体对象) Utilities for layout(排版通用类别) Migration Migrating to v4(迁移到v4) Utilities Borders(边框) Clearfix(清除浮动) Close icon(关闭图标) Colors(颜色) Display property(显示属性) Embeds(内嵌) Flex(弹性) Float(浮动) Image replacement(图像替换) Position(位置) Screenreaders(荧幕阅读器) Sizing(尺寸) Spacing(间隔) Text(文本) Vertical alignment(垂直对齐) Visibility(能见度)
watak

自定义引导4与我们的新内置Sass变量,为全球风格的首选项,以便于主题和组件的变化。

导言

在Bootstrap 3中,主题化很大程度上是由更少的、自定义的css中的变量重写驱动的,以及我们在我们的dist档案。通过一些努力,我们可以完全重新设计Bootstrap 3的外观,而无需触及核心文件。引导4提供了一种熟悉但略有不同的方法。

现在,主题化由Sass变量、Sass映射和自定义CSS完成。不再有专门的主题样式表;相反,您可以启用内置主题来添加渐变、阴影等。

沙斯

利用我们的源代码Sass文件来利用变量、映射、混合体等等。

文件结构

尽可能避免修改Bootstrap的核心文件。对于Sass来说,这意味着创建您自己的样式表来导入引导程序,以便您可以修改和扩展它。假设您已经下载了源文件或正在使用包管理器,那么您的文件结构如下所示:

your-project/├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

在你的custom.scss,您将导入Bootstrap的源Sass文件。你有两个选择:包括所有的引导,或选择你需要的部分。我们鼓励后者,但要注意,组件之间存在一些需求和依赖关系。您还需要为我们的插件添加一些JavaScript。

// Custom.scss// Option A: Include all of Bootstrap@import "node_modules/bootstrap/scss/bootstrap";
// Custom.scss// Option B: Include parts of Bootstrap// Required@import "node_modules/bootstrap/scss/functions";@import "node_modules/bootstrap/scss/variables";@import "node_modules/bootstrap/scss/mixins";// Optional@import "node_modules/bootstrap/scss/reboot";@import "node_modules/bootstrap/scss/type";@import "node_modules/bootstrap/scss/images";@import "node_modules/bootstrap/scss/code";@import "node_modules/bootstrap/scss/grid";

设置就绪后,您可以开始修改custom.scss.还可以开始在// Optional根据需要分部门。

变量默认值

引导程序4中的每个Sass变量包括!default标志允许您在自己的Sass中重写变量的默认值,而无需修改Bootstrap的源代码。根据需要复制和粘贴变量,修改它们的值,并删除!default旗子。如果一个变量已经被赋值,那么它将不会被重新赋值的默认值在引导。

变量可以在默认变量之前或之后重写同一Sass文件。但是,在重写Sass文件时,您的重写必须在导入引导程序的Sass文件之前进行。

下面是一个更改background-colorcolor<body>在通过国家预防机制导入和编译Bootstrap时:

// Your variable overrides$body-bg: #000;$body-color: #111;// Bootstrap and its default variables@import "node_modules/bootstrap/scss/bootstrap";

根据需要,对Bootstrap中的任何变量重复,包括下面的全局选项。

映射和循环

引导4包含了少量的Sass映射,键值对使得生成相关CSS的家族变得更容易。我们使用Sass地图作为我们的颜色,网格断点,等等。就像Sass变量一样,所有Sass映射都包括!default标志,可以重写和扩展。

例如,要修改$theme-colors映射,将以下内容添加到您的自定义Sass文件中:

$theme-colors: (  "primary": #0074d9,  "danger": #ff4136);

若要将新颜色添加到$theme-colors,添加新的键和值:

$theme-colors: (  "custom-color": #900);

功能

引导程序使用了几个Sass函数,但只有一个子集适用于一般主题化。我们包含了三个从颜色地图中获取值的函数:

@function color($key: "blue") {
  @return map-get($colors, $key);}@function theme-color($key: "primary") {
  @return map-get($theme-colors, $key);}@function gray($key: "100") {
  @return map-get($grays, $key);}

这些允许您从Sass地图中选择一种颜色,就像使用v3中的颜色变量一样。

.custom-element {
  color: gray("100");
  background-color: theme-color("dark");}

我们还有另一个功能来获得一个特定的水平的颜色$theme-colors地图。负的等级值会使颜色变浅,而较高的值则会变暗。

@function theme-color-level($color-name: "primary", $level: 0) {
  $color: theme-color($color-name);
  $color-base: if($level > 0, #000, #fff);
  $level: abs($level);

  @return mix($color-base, $color, $level * $theme-color-interval);}

实际上,您可以调用该函数并传入两个参数:$theme-colors%28E.。g.,主要或危险%29和数字级别。

.custom-element {
  color: theme-color-level(primary, -10);}

将来还可以添加其他函数,或者添加您自己的自定义Sass,以便为其他Sass映射创建级别函数,如果您想要更详细,甚至可以添加一个通用函数。

色彩对比

我们在Bootstrap中包含的一个附加功能是颜色对比功能,color-yiq.它利用YIQ颜色空间自动返回光%28#fff%29或黑暗%28#111%29基于指定基色的对比度颜色。此函数对于生成多个类的混和或循环特别有用。

例如,要从我们的$theme-colors地图:

@each $color, $value in $theme-colors {  .swatch-#{$color} {
    color: color-yiq($value);  }}

它也可用于一次性对比需要:

.custom-element {
  color: color-yiq(#000); // returns `color: #fff`}

还可以使用颜色映射函数指定基色:

.custom-element {
  color: color-yiq(theme-color("dark")); // returns `color: #fff`}

SASS选项

使用内置的自定义变量文件自定义引导程序4,并轻松切换新的全局css首选项。$enable-*一些变量。重写变量的值并用npm run test视需要而定。

您可以在_variables.scss档案。

Variable

Values

Description

$spacer

1rem (default), or any value > 0

Specifies the default spacer value to programmatically generate our spacer utilities.

$enable-rounded

true (default) or false

Enables predefined border-radius styles on various components.

$enable-shadows

true or false (default)

Enables predefined box-shadow styles on various components.

$enable-gradients

true or false (default)

Enables predefined gradients via background-image styles on various components.

$enable-transitions

true (default) or false

Enables predefined transitions on various components.

$enable-hover-media-query

true or false (default)

$enable-grid-classes

true (default) or false

Enables the generation of CSS classes for the grid system (e.g., .container, .row, .col-md-1, etc.).

$enable-caret

true (default) or false

Enables pseudo element caret on .dropdown-toggle.

$enable-print-styles

true (default) or false

Enables styles for optimizing printing.

颜色

Bootstrap的许多组件和实用程序都是通过Sass映射中定义的一系列颜色构建的。这个映射可以在Sass中循环以快速生成一系列规则集。

所有颜色

Bootstrap 4中提供的所有颜色都可以作为Sass变量和我们的Sass映射提供。scss/_variables.scss档案。这将在随后的小版本中扩展,以添加更多的阴影,类似于灰度调色板我们已经包括了。

蓝色

靛蓝

粉红

橙色

绿

提尔

青色

下面是如何在Sass中使用这些内容:

// With variable.alpha { color: $purple; }// From the Sass map with our `color()` function.beta { color: color("purple"); }

颜色工具类也可用于设置colorbackground-color

在未来,我们的目标是为每种颜色的阴影提供Sass地图和变量,就像我们对下面的灰度颜色所做的那样。

主题色彩

我们使用所有颜色的子集来创建一个较小的调色板,用于生成配色方案,也可以作为Sass变量和我们的Sass映射使用。scss/_variables.scss档案。

初等

二次

成功

危险

警告

信息

轻光

黑暗

格雷斯

的灰色变量集和Sass映射scss/_variables.scss在整个项目中保持一致的灰色阴影。

100

200

300

400

500

600

700

800

900

_variables.scss,你会找到我们的颜色变量和Sass地图。下面是一个例子$colorsSass地图:

$colors: (  "blue": $blue,  "indigo": $indigo,  "purple": $purple,  "pink": $pink,  "red": $red,  "orange": $orange,  "yellow": $yellow,  "green": $green,  "teal": $teal,  "cyan": $cyan,  "white": $white,  "gray": $gray-600,  "gray-dark": $gray-800) !default;

在映射中添加、删除或修改值,以更新它们在许多其他组件中的使用方式。不幸的是,在这个时候,每一个组件使用此Sass映射。今后的更新将努力改进这一点。在此之前,计划利用${color}变量和这个Sass地图。

组件

Bootstrap的许多组件和实用程序都是用@each在Sass映射上迭代的循环。这对于我们生成组件的变体尤其有帮助。$theme-colors并为每个断点创建响应变量。当您自定义这些Sass映射并重新编译时,您将自动看到这些循环中反映的更改。

修饰符

许多Bootstrap组件都是使用基础修饰符类的方法构建的。这意味着大部分样式都包含在基类中(例如.btn),而样式变体仅限于修饰符类(例如,.btn-danger)。这些修饰符类是从$theme-colors地图构建的,以定制我们修饰符类的数量和名称。

下面是我们如何遍历$theme-colors生成修饰符的映射。.alert组件和我们所有的.bg-*背景实用程序。

// Generate alert modifier classes@each $color, $value in $theme-colors {  .alert-#{$color} {
    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));  }}// Generate `.bg-*` color utilities@each $color, $value in $theme-colors {
  @include bg-variant('.bg-#{$color}', $value);}

响应性

这些Sass循环也不限于彩色地图。您还可以生成组件或实用程序的响应变体。例如,我们的响应性文本对齐实用程序将@each循环的$grid-breakpoints包含媒体查询的Sass地图。

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);    .text#{$infix}-left   { text-align: left !important; }    .text#{$infix}-right  { text-align: right !important; }    .text#{$infix}-center { text-align: center !important; }  }}

如果您需要修改$grid-breakpoints,您的更改将应用于遍历该映射的所有循环。

Artikel sebelumnya: Artikel seterusnya: