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

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 on line 27:

让我们首先看一下根元素的样式，该样式在第27行的_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:

这是body元素样式，如第57行的_reboot.scc ：

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:

p元素的这些样式在p 109行的_reboot.scss中找到：

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的第16到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从第29行到第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.

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

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上找到的模型，创建一个预定义印刷比例Sass地图 ， $type-scales 。 在地图上的刻度可以被传递到萨斯混入 ，通过使用他们创造的字体大小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) on CodePen.

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

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建立您的第一个网站课程，以快速，有趣地介绍Bootstrap的功能。

翻译自: https://www.sitepoint.com/build-responsive-type-scale-bootstrap/

bootstrap 响应式