Bootstrap 是否可以在引导框架内对文本进行调整?

p1iqtdky  于 2023-09-28  发布在  Bootstrap
关注(0)|答案(5)|浏览(108)

这可能是一个愚蠢的问题,但我确信我不是唯一一个想知道的人。
我知道对齐类:<p class="text-center">Text Centered within the block element</p><p class="text-right">Text aligned to the right within the block element</p><p class="text-left">Text aligned to the left within the block element</p>
在Twitters Bootstrap框架中是否有一组类来证明文本的正确性?
例如<p class="text-justify">Sample Text Goes Here</p>
为什么 Bootstrap 似乎没有包含text-align: justify之类的实用程序功能?

mlmc2os5

mlmc2os51#

Bootstrap 3Bootstrap 4中,可以使用:

<p class="text-justify">Justified text.</p>

Official documentation
(更新)此功能已从Bootstrap 5中删除

请注意,我们没有为对齐的文本提供实用程序类。虽然从美学上讲,对齐的文本可能看起来更吸引人,但它确实使单词间距更加随机,因此更难阅读。
基于官方UX建议:不要使用对齐文本!;)

txu3uszq

txu3uszq2#

不能。但是你可以在bootstrap.css上添加一个新类

.text-justify {
  text-align: justify;
}

更新

以前版本的bootstrap不支持text-justify。但是bootstrap 3添加了一个类text-justify

sr4lhrrt

sr4lhrrt3#

您可以添加到您的**main.csscustom.css或您创建的*.css文件中,也可以直接添加到bootstrap.css**文件的顶部:

.text-justify {
  text-align: justify;
}

如果你直接将它添加到**bootstrap.css**文件中,从v3.0.0开始,它会变成这样:

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

article,
aside,
details,
...
...
…

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */

/*! normalize.css v2.1.0 | MIT License | git.io/normalize */

.text-justify {
  text-align: justify;
}

article,
aside,
details,
...
...
…
vnzz0bqm

vnzz0bqm4#

在Bootstrap中有一个类可用于此。

class = 'text-justify'

您可以在Bootstrap documentation中查看文本对齐。

axr492tv

axr492tv5#

Bootstrap 5中没有内置的类,但我们可以使用**Bootstrap Utility API**扩展现有的text-align实用程序并生成text-justify类。
默认情况下,Bootstrap 5会生成以下文本对齐类:text-starttext-centertext-end(及其响应版本)。
我们可以通过向text-align实用程序添加一个附加值来生成text-justify类:

$utilities: map-merge(
  $utilities,
  (
    "text-align": map-merge(
      map-get($utilities, "text-align"),
      (
        values: map-merge(
          map-get(map-get($utilities, "text-align"), "values"),
          (justify: justify),
        ),
      ),
    ),
  )
);

完整SCSS代码:

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/variables-dark";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/root";
@import "bootstrap/scss/utilities";

// extend `text-align` utility
$utilities: map-merge(
  $utilities,
  (
    "text-align": map-merge(
      map-get($utilities, "text-align"),
      (
        values: map-merge(
          map-get(map-get($utilities, "text-align"), "values"),
          (justify: justify),
        ),
      ),
    ),
  )
);

// include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "bootstrap/scss/utilities/api";

DEMOhttps://stackblitz.com/edit/bootstrap-5-qjdfsx?file=src%2Fstyles.scss

CSS输出:

.text-justify { text-align: justify !important; }

@media (min-width: 576px) {
  .text-sm-justify { text-align: justify !important; }
}

@media (min-width: 768px) {
  .text-md-justify { text-align: justify !important; }
}

@media (min-width: 992px) {
  .text-lg-justify { text-align: justify !important; }
}

@media (min-width: 1200px) {
  .text-xl-justify { text-align: justify !important; }
}

@media (min-width: 1400px) {
  .text-xxl-justify { text-align: justify !important; }
}

相关问题