bootstrap 响应式_如何使用Bootstrap建立响应式量表

r囧r小猫 2022-12-03 01:43 212阅读 0赞

bootstrap 响应式

**In this tutorial, we’ll be taking an in-depth look at how Bootstrap handles typography and how we can modify the code in a couple of different ways to create a responsive type scale. This is often referred to as “responsive typography”, the aim of which is to keep your typography readable on all screen sizes and avoid giant headings on mobiles!**

**在本教程中，我们将深入研究Bootstrap如何处理排版，以及如何以几种不同的方式修改代码以创建响应型缩放。** **这通常被称为“响应式排版”，其目的是使您的排版在所有屏幕尺寸上均可读，并避免手机上出现巨大标题！**

## Bootstrap如何默认设置排版 **(**How Bootstrap Sets Up Typography by Default**)** ##

To understand the way Bootstrap typography works, we need to begin looking into the source `SCSS` files to explore the setup and default settings.

要了解Bootstrap排版的工作方式，我们需要开始研究源`SCSS`文件以探索设置和默认设置。

*Note: for the sake of clarity throughout this tutorial, I’ve commented out styles from the Bootstrap code that are* NOT *associated with typography.*

*注意：为了使本教程更加清晰，我从Bootstrap代码中注释掉了* *与排版无关的* *样式* *。*

### `html`元素 **(**The `html` Element**)** ###

Let’s first look at styles for the root element, found in [`_reboot.scss`][reboot.scss] on line 27:

让我们首先看一下根元素的样式，该样式在第27行的[`_reboot.scss`][reboot.scss]找到：

html {
      font-family: sans-serif;
      line-height: 1.15;
      -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
      // -ms-overflow-style: scrollbar;
      // -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }

From the `html` element there’s not much to report in terms of setting up a *type scale*. However, it’s worth noting the `-*-text-size-adjust: 100%;` declarations. These have been used to prevent some mobile browsers from increasing the font size of their own accord.

从`html`元素开始，关于设置*类型scale的*报告不多。 但是，值得注意的是`-*-text-size-adjust: 100%;` 声明。 这些已被用来防止某些移动浏览器自行增加字体大小。

### `body`元素 **(**The `body` Element**)** ###

Here are the `body` element styes, as found in [`_reboot.scc` on line 57][reboot.scc_ on line 57]:

这是`body`元素样式，如[第57行的`_reboot.scc`][reboot.scc_ on line 57] ：

body {
      // margin: 0; // 1
      font-family: $font-family-base;
      font-size: $font-size-base;
      font-weight: $font-weight-base;
      line-height: $line-height-base;
      color: $body-color;
      text-align: left; // 3
      // background-color: $body-bg; // 2
    }

Now we can start to see some typographic styes being applied. In terms of type scale, we only need to be concerned with `font-size`. By default, this is set via the `$font-size-base` variable found in `_variables.scss`, and is equal to `1rem`.

现在我们可以开始看到一些印刷样式。 就类型比例而言，我们只需要关心`font-size` 。 默认情况下，这是通过`_variables.scss`的`$font-size-base`变量`_variables.scss` ，等于`1rem` 。

### `p`元素 **(**The `p` Element**)** ###

These styles for the `p` element are found in [`_reboot.scss` on line 109][reboot.scss_ on line 109]:

`p`元素的这些样式在`p` [109行的`_reboot.scss`][reboot.scss_ on line 109]中找到：

p {
      margin-top: 0;
      margin-bottom: $paragraph-margin-bottom;
    }

Not much to report here: the `p` tag simply inherits its `font-size` and `line-height` from the body as you would expect.

这里没有太多要报告的内容： `p`标签只是从主体继承了它的`font-size`和`line-height` ，就像您期望的那样。

### `h1`到`h6`元素 **(**The `h1` through `h6` Elements**)** ###

These styles are found in [`_type.scss` from lines 16 to 21][type.scss_ from lines 16 to 21]:

这些样式在[`_type.scss`的第16到21行][type.scss_ from lines 16 to 21]中找到：

h1, .h1 { font-size: $h1-font-size; }
    h2, .h2 { font-size: $h2-font-size; }
    h3, .h3 { font-size: $h3-font-size; }
    h4, .h4 { font-size: $h4-font-size; }
    h5, .h5 { font-size: $h5-font-size; }
    h6, .h6 { font-size: $h6-font-size; }

You can see here the element and the utility class are given the `font-size` through a variable. The corresponding variables are found in `_variables.scss` on lines 246 to 251. Looking at these variables, we can see the default sizes set out to work across all browser and viewport widths:

您可以在此处看到通过变量为元素和实用程序类提供了`font-size` 。 相应的变量位于246至251行的`_variables.scss`中。通过查看这些变量，我们可以看到默认大小适用于所有浏览器和视口宽度：

$h1-font-size: $font-size-base * 2.5 !default;
    $h2-font-size: $font-size-base * 2 !default;
    $h3-font-size: $font-size-base * 1.75 !default;
    $h4-font-size: $font-size-base * 1.5 !default;
    $h5-font-size: $font-size-base * 1.25 !default;
    $h6-font-size: $font-size-base !default;

Looking at a type scale for the above, it’s clear that an increase of `.25rem` is used until the `h1`, which is given a `.5rem` increase.

看着型阻垢针对上述情况，很明显的增加`.25rem`被使用，直到`h1` ，它被赋予了`.5rem`增加。

These sizes can be overridden in a custom variables file if you’re using a Sass compiler, but it still leaves you with one `font-size` for each heading across all browser and viewport widths.

如果您使用的是Sass编译器，则可以在自定义变量文件中覆盖这些大小，但是对于所有浏览器和视口宽度的每个标题，它仍然为您提供一种`font-size` 。

### `.display-1`至`.display-4`实用程序类 **(**The `.display-1` through `.display-4` Utility Classes**)** ###

The following code is fond in [`_type.scss` from lines 29 to 48][type.scss_ from lines 29 to 48]:

以下代码在[`_type.scss`从第29行到第48行][type.scss_ from lines 29 to 48] ：

// Type display classes
    .display-1 {
      font-size: $display1-size;
      // font-weight: $display1-weight;
      // line-height: $display-line-height;
    }
    .display-2 {
      font-size: $display2-size;
      // font-weight: $display2-weight;
      // line-height: $display-line-height;
    }
    .display-3 {
      font-size: $display3-size;
      // font-weight: $display3-weight;
      // line-height: $display-line-height;
    }
    .display-4 {
      font-size: $display4-size;
      // font-weight: $display4-weight;
      // line-height: $display-line-height;
    }

As with the heading elements, the display utility class sizes are defined as variables in the `_variables.scss` file on lines 259 to 262. Again, if you’re working with a Sass compiler you can override these in a custom variables file.

与标题元素一样，在259至262行的`_variables.scss`文件中，将显示实用程序类的大小定义为变量。同样，如果您使用的是Sass编译器，则可以在自定义变量文件中覆盖它们。

That about covers the setup from Bootstrap, and we can now look at ways of making a responsive type scale that’s quickly adjustable.

内容涵盖了Bootstrap的设置，现在我们可以看看制作快速可调的响应式比例尺的方法。

## 创建自适应类型量表 **(**Creating the Responsive Type Scale**)** ##

It’s worth expanding on what I mean by a *Responsive Type Scale*. By default, Bootstrap `font-size` for headings and its `display-*` classes are explicitly set using variables found in `_variables.scss` and rules found in `_type.scss`.

值得一提的是*响应式量表* 。 默认情况下，引导`font-size`的标题和`display-*`类使用变量明确设置中发现的`_variables.scss`和发现规则`_type.scss` 。

Setting one `font-size` outright for headings across all screen and viewport sizes can quite quickly lead to oversized headings that make for a poor user experience.

为所有屏幕和视口大小的标题设置一个完全没有`font-size`的标题会很快导致标题过大，从而导致较差的用户体验。

You could, of course, create some media queries when it suits to pull down font sizes that look over-sized, but it’s at this point that you lose any form of a type scale hierarchy. We *[need type hierarchy][]* to follow the flow of the document.

您当然可以在适合拉下看起来过大的字体大小时创建一些媒体查询，但是此时您会丢失任何形式的类型缩放层次结构。 我们*[需要类型层次结构][need type hierarchy]*来遵循文档的流程。

In comes the *Responsive Type Scale* and a nice Sassy way to implement it into a Bootstrap project! If you don’t use Sass or SCSS, you can simply update the pen I use for examples and extract the compiled CSS.

引入了*响应式类型量表*和一种将其实施到Bootstrap项目中的不错的轻松方式！ 如果您不使用Sass或SCSS，则只需更新我用作示例的笔并提取已编译CSS。

### Bootstrap的响应类型量表概述 **(**An Overview of the Responsive Type Scale for Bootstrap**)** ###

We are going to set up three main things:

我们将建立三个主要方面：

*  a type scale map for quick changes and experiments
    
    类型比例图，用于快速更改和实验
 *  a function to check if the scale is valid for use
    
    检查秤是否有效的功能
 *  two mixins to allow us the flexibility of adjusting the font sizes at any given time.
    
    两个mixin，使我们可以在任何给定时间灵活地调整字体大小。

It’s worth noting that, should your design not include a type scale that works on a common multiple, using the `mixin` won’t work and you’ll need to look at the compiled `CSS` in the pen to get the code you need to update the font sizes.

值得一提的是，如果您的设计中没有包含可以使用公倍数的类型比例尺，则无法使用`mixin`并且您需要查看笔中已编译的`CSS`以获得更新代码所需的代码。字体大小。

### 自适应类型比例尺图 **(**The Responsive Type Scales Map**)** ###

Create a [Sass map][] of pre-defined typographic scales, `$type-scales`, according to the model found on [type-scale.com][]. The scales in the map can be passed to the [Sass mixin][] that creates the font sizes by using their `key` from the `key: value` pairs.

根据[type-scale.com上][type-scale.com]找到的模型，创建一个预定义印刷比例[Sass地图][Sass map] ， `$type-scales` 。 在地图上的刻度可以被传递到[萨斯混入][Sass mixin] ，通过使用他们创造的字体大小`key`与`key: value`对。

After the map of scales, two variables are defined: `$heading-type-scale-base` and `$display-type-scale-base`. These variables hold the initial scales that are used from a zero-width viewport or browser and upward. These variables accept a key from the `$type-scales` map or can be passed a unitless value:

在比例图之后，定义了两个变量： `$heading-type-scale-base`和`$display-type-scale-base` 。 这些变量保存从零宽度视口或浏览器开始使用的初始比例。 这些变量接受`$type-scales`映射中的键，或者可以将其传递为无单位值：

$type-scales : (
      minor-second: 1.067,
      major-second: 1.125,
      minor-third: 1.200,
      major-third: 1.250,
      perfect-fourth: 1.333,
      augmented-fourth: 1.414,
      perfect-fifth: 1.500,
      golden-ratio: 1.618
    );
    
    $heading-type-scale-base : minor-third;
    $display-type-scale-base : minor-third;

### 如何检查响应式量表的值 **(**How to Check the Responsive Type Scales Value**)** ###

It’s important that you aren’t restricted to only the values in the map, as that may not be suitable for your design.

重要的是，不要只限于映射中的值，因为这可能不适合您的设计。

For this reason, the function below will check if the value passed to the mixin is one of the values set in the `$type-scales` map or it must be a unitless value to create the type scale:

因此，下面的函数将检查传递给mixin的值是`$type-scales`映射中设置的值之一，还是必须为创建单位scale的无单位值：

@function check-type-scale-value($scale) {
    
      // Check $scale against the values in $type-scales.
      @if map-has-key($type-scales, $scale) {
    
        // If the value of $scale is defined in
        // $type-scales, return the value of $scale.
        @return map-get($type-scales, $scale);
    
      // If the value of $scale is not defined in the
      // $type-scales map, check if the value is a number
      // and that the number is a unitless value.
      } @else if type-of($scale) == number and unitless($scale) {
    
        // If the value of $scale is a unitless number,
        // return the number.
        @return $scale;
    
      // Lastly, should the value passed to $scale be neither
      // found in the $type-scales map nor a unitless number,
      // throw a Sass error to explain the issue.
      } @else {
    
        // Throw a Sass error if the $scale value is
        // neither found in the $type-scales map nor
        // a unitless number.
        @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map.";
      }
    
    }

Next we will build up the mixins for creating the initial font sizes.

接下来，我们将构建用于创建初始字体大小的mixins。

### 创建标题和显示字体大小 **(**Creating the Heading and Display Font Sizes**)** ###

I first wrote the `CSS` to achieve a responsive type scale when the alpha version of Bootstrap 4 was available. But since the release of the stable version of the library, I’ve revamped things to use the default `SCSS` setup, which makes it convenient to include the code in Bootstrap projects.

当Bootstrap 4的Alpha版本可用时，我首先编写`CSS`来实现响应型缩放。 但是自从该库的稳定版本发布以来，我已经进行了一些改进，以使用默认的`SCSS`设置，这使得在Bootstrap项目中包含代码很方便。

The first `mixin` is used to create the heading font sizes from `h6` to `h1`:

第一个`mixin`用于创建从`h6`到`h1`的标题字体大小：

@mixin create-heading-type-scale($scale) {
    
        // Check the $scale value and store in a variable to be
        // used when calculating the font sizes.
        $the-heading-type-scale: check-type-scale-value($scale);
    
        // Starting from h6, multiply each previous value by the scale
        // to get the next font size
        $font-size-h6 : $font-size-base;
        $font-size-h5 : $font-size-h6 * $the-heading-type-scale;
        $font-size-h4 : $font-size-h5 * $the-heading-type-scale;
        $font-size-h3 : $font-size-h4 * $the-heading-type-scale;
        $font-size-h2 : $font-size-h3 * $the-heading-type-scale;
        $font-size-h1 : $font-size-h2 * $the-heading-type-scale;
        // $font-size-display-base is made global to allow for accessing the
        // varibale in the next mixin.
        $font-size-display-base : $font-size-h1 !global;
    
        // Add the created font sizes to the elements and classes
        h1, .h1 { font-size: $font-size-h1; }
        h2, .h2 { font-size: $font-size-h2; }
        h3, .h3 { font-size: $font-size-h3; }
        h4, .h4 { font-size: $font-size-h4; }
        h5, .h5 { font-size: $font-size-h5; }
        h6, .h6 { font-size: $font-size-h6; }
    }

Above, the font sizes are first created and stored in variables starting from the `$base-font-size` and multiplying each previous value by the type scale value. The same principle is applied below but we start from the `$font-size-display-base`:

在上面，首先创建字体大小并将其存储在从`$base-font-size`开始的变量中，并将每个先前的值乘以类型比例值。 下面应用了相同的原理，但我们从`$font-size-display-base` ：

@mixin create-display-type-scale($scale) {
    
        // Store default type scale in a variable for calculations
        $the-display-type-scale: check-type-scale-value($scale);
    
        // Create variables to reference the previous font size
        $font-size-display-4 : $font-size-display-base + $font-size-base;
        $font-size-display-3 : $font-size-display-4 * $the-display-type-scale;
        $font-size-display-2 : $font-size-display-3 * $the-display-type-scale;
        $font-size-display-1 : $font-size-display-2 * $the-display-type-scale;
    
        // Add the created font sizes to the elements and classes
        .display-4 { font-size: $font-size-display-4; }
        .display-3 { font-size: $font-size-display-3; }
        .display-2 { font-size: $font-size-display-2; }
        .display-1 { font-size: $font-size-display-1; }
    }

### 删除根`font-size` **(**Drop the Root `font-size`**)** ###

I like to drop the root `font-size` to `14px` for mobiles and work my way up to `16px` and then `18px`. Below is the `SCSS` to do so using the breakpoint sizes of `md` and `lg`:

我喜欢将移动设备的根`font-size`到`14px` ，然后按照最大`16px`和`18px`方式工作。 下面是使用`md`和`lg`的断点大小执行此操作的`SCSS` ：

html {
        font-size: 14px;
        @media (min-width: 768px) {
            font-size: 16px;
        }
        @media (min-width: 992px) {
            font-size: 18px;
        }
    }

## 结语 **(**Wrapping It Up**)** ##

Once all this work is done, it’s all about including your mixins and choosing your desired scales!

完成所有这些工作之后，就包括添加mixin并选择所需的音阶！

// Create the heading font sizes
    @include create-heading-type-scale($heading-type-scale-base);
    
    // Create the display font sizes
    @include create-display-type-scale($display-type-scale-base);
    
    // At the Bootstrap md breakpoint, adjust the heading font sizes.
    @media (min-width: 768px) {
        @include create-heading-type-scale(minor-third);
    }

As you can see, you can include the mixin at any breakpoint and completely change your type scale. Each font size can still be overridden if necessary and all looks good.

如您所见，您可以在任何断点处包含mixin，并完全更改类型比例。 如有必要，每种字体大小仍可以覆盖，并且看起来都不错。

## Bootstrap响应式量表的实际应用 **(**The Bootstrap Responsive Type Scale in Action**)** ##

You can see the Bootstrap responsive type scale in action in this pen:

您可以在这支笔中看到Bootstrap响应式字体的实际使用情况：

See the Pen [Bootstrap 4 Responsive Type Scale][] by SitePoint ([@SitePoint][SitePoint]) on [CodePen][].

请参阅[CodePen][SitePoint]上的[SitePoint][CodePen] ( [@SitePoint][SitePoint] )的Pen [Bootstrap 4响应类型比例][Bootstrap 4 Responsive Type Scale] 。

I hope this tutorial has given you an insight into how you can customize Bootstrap to work for you by providing a better understanding of how to achieve a responsive type scale using this popular library.

希望本教程通过更好地了解如何使用此流行的库实现响应式字体缩放，使您对如何自定义Bootstrap使其更有效地有所了解。

**If you’ve got the basics of Bootstrap under your belt but are wondering how to take your Bootstrap skills to the next level, check out our [Building Your First Website with Bootstrap 4][] course for a quick and fun introduction to the power of Bootstrap.**

**如果您掌握了Bootstrap的基础知识，但又想知道如何将Bootstrap技能提高到一个新的水平，请查看我们的[使用Bootstrap 4建立您的第一个网站][Building Your First Website with Bootstrap 4]课程，以快速，有趣地介绍Bootstrap的功能。**

> 翻译自: [https://www.sitepoint.com/build-responsive-type-scale-bootstrap/][https_www.sitepoint.com_build-responsive-type-scale-bootstrap]

bootstrap 响应式

[reboot.scss]: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss#L27
[reboot.scc_ on line 57]: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss#L57
[reboot.scss_ on line 109]: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_reboot.scss#L109
[type.scss_ from lines 16 to 21]: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_type.scss#L16
[type.scss_ from lines 29 to 48]: https://github.com/twbs/bootstrap/blob/v4-dev/scss/_type.scss#L29
[need type hierarchy]: https://www.sitepoint.com/focus-on-typography-part-2-hierarchy/
[Sass map]: https://www.sitepoint.com/using-sass-maps/
[type-scale.com]: https://type-scale.com
[Sass mixin]: https://www.sitepoint.com/sass-basics-the-mixin-directive/
[Bootstrap 4 Responsive Type Scale]: https://codepen.io/SitePoint/pen/GQEyvQ/
[SitePoint]: https://codepen.io/SitePoint
[CodePen]: https://codepen.io
[Building Your First Website with Bootstrap 4]: https://www.sitepoint.com/premium/courses/building-your-first-website-with-bootstrap-4-2995
[https_www.sitepoint.com_build-responsive-type-scale-bootstrap]: https://www.sitepoint.com/build-responsive-type-scale-bootstrap/