文字(Text)

文字通用类别的文档和示例,用于控制对齐、环绕、粗细等。

文本对齐方式

使用文字对齐类别轻松地将文本重新对齐元件。对于开始、结束和中心对齐可以使用与网格系统相同之视窗宽度断点的响应式类别。

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

<p class="text-start">Start aligned text on all viewport sizes.</p>
        <p class="text-center">Center aligned text on all viewport sizes.</p>
        <p class="text-end">End aligned text on all viewport sizes.</p>
        
        <p class="text-sm-start">Start aligned text on viewports sized SM (small) or wider.</p>
        <p class="text-md-start">Start aligned text on viewports sized MD (medium) or wider.</p>
        <p class="text-lg-start">Start aligned text on viewports sized LG (large) or wider.</p>
        <p class="text-xl-start">Start aligned text on viewports sized XL (extra-large) or wider.</p>
请注意,我们不为两端对齐的文字(justified text)提供通用类别。虽然从美学上来讲,两端对齐的文字看起来更吸引人,但这也让文字间距更加随意,也因此更难阅读。

文本换行和溢出

使用.text-wrap类别来包覆文字。

This text should wrap.
<div class="badge bg-primary text-wrap" style="width: 6rem;">
        This text should wrap.
        </div>

可搭配.text-nowrap类别防止换行。

This text should overflow the parent.
<div class="text-nowrap bd-highlight" style="width: 8rem;">
        This text should overflow the parent.
        </div>

文字断行

使用.text-break设定word-wrap: break-word和word-break: break-word预防长文破坏元件的排版。Bootstrap使用word-wrap以取代更常见的方法overflow-wrap来获得更广泛的浏览器支持,增加word-break: break-word来避免flex容器的问题。

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
请注意,因为最常使用的RTL语言阿拉伯语言不能断行。因此.text-break已从我们的RTL编译CSS中移除。

文本转换(大小写)

使用文字大写字母类别将元件中的文字内容转大写。

Lowercased text.

Uppercased text.

CapiTaliZed text.

<p class="text-lowercase">Lowercased text.</p>
        <p class="text-uppercase">Uppercased text.</p>
        <p class="text-capitalize">CapiTaliZed text.</p>

请注意.text-capitalize只有将第一个字母转为大写,而其他字母不受影响。

字体大小

快速的改变文字的font-size。标题类别(例如:.h1–.h6)使用了font-size、font-weight和line-height,但以下的通用类别只使用font-size。这些通用类别的尺寸设定也符合HTML的标题元素,所以当数字增加时,他们的尺寸也会跟着变小。

.fs-1 text

.fs-2 text

.fs-3 text

.fs-4 text

.fs-5 text

.fs-6 text

<p class="fs-1">.fs-1 text</p>
        <p class="fs-2">.fs-2 text</p>
        <p class="fs-3">.fs-3 text</p>
        <p class="fs-4">.fs-4 text</p>
        <p class="fs-5">.fs-5 text</p>
        <p class="fs-6">.fs-6 text</p>

透过修改$font-sizes的Sass map来客制化您的font-size。

字体粗细和斜体

使用这些通用类别来快速地改变文字内容的font-weight或font-style。font-style通用类别的缩写为.fst-*,font-weight通用类别的缩写为.fw-*。

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

<p class="fw-bold">Bold text.</p>
        <p class="fw-bolder">Bolder weight text (relative to the parent element).</p>
        <p class="fw-normal">Normal weight text.</p>
        <p class="fw-light">Light weight text.</p>
        <p class="fw-lighter">Lighter weight text (relative to the parent element).</p>
        <p class="fst-italic">Italic text.</p>
        <p class="fst-normal">Text with normal font style</p>

行高

使用.lh-*通用类别来改变行高。

Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.

But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.

I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.

But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.

<p class="lh-1">Some placeholder content to show off the line height utilities. Happy birthday. You could've been the greatest. She ride me like a roller coaster. I messed around and got addicted. You just gotta ignite the light and let it shine! I'm intrigued, for a peek, heard it's fascinating. Catch her if you can. I should've told you what you meant to me 'Cause now I pay the price. Do you ever feel, feel so paper thin.</p>
        <p class="lh-sm">But you better choose carefully. Yo, shout out to all you kids, buying bottle service, with your rent money. She's sweet as pie but if you break her heart. Just own the night like the 4th of July! In another life I would be your girl. Playing ping pong all night long, everything's all neon and hazy. Shorty so bad, I’m sprung and I don’t care.</p>
        <p class="lh-base">I can feel a phoenix inside of me. Maybe a reason why all the doors are closed. We go higher and higher. Passport stamps, she's cosmopolitan. Someone said you had your tattoo removed. All my girls vintage Chanel baby. Someone said you had your tattoo removed.</p>
        <p class="lh-lg">But I will get there. This is real so take a chance and don't ever look back, don't ever look back. You could travel the world but nothing comes close to the golden coast. Of anything and everything. Venice beach and Palm Springs, summertime is everything. Do you ever feel already buried deep six feet under? It's time to bring out the big balloons. So cover your eyes, I have a surprise. So I don't have to say you were the one that got away.</p>

Monospace

选择使用.font-monospace来更换为monospace字体堆叠。

This is in monospace

<p class="font-monospace">This is in monospace</p>

重置颜色

使用.text-reset来重置一个文字或连接色彩,以便它们继承父层的颜色。

Muted text with a reset link.

<p class="text-muted">
        Muted text with a <a href="#" class="text-reset">reset link</a>.
        </p>

文字装饰

使用文字装饰类别来装饰元件中的文字。

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed
<p class="text-decoration-underline">This text has a line underneath it.</p>
        <p class="text-decoration-line-through">This text has a line going through it.</p>
        <a href="#" class="text-decoration-none">This link has its text decoration removed</a>

Sass

Variables

// stylelint-disable value-keyword-case
        $font-family-sans-serif:      system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        $font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        // stylelint-enable value-keyword-case
        $font-family-base:            var(--#{$variable-prefix}font-sans-serif);
        $font-family-code:            var(--#{$variable-prefix}font-monospace);
        
        // $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
        // $font-size-base effects the font size of the body text
        $font-size-root:              null;
        $font-size-base:              1rem; // Assumes the browser default, typically `16px`
        $font-size-sm:                $font-size-base * .875;
        $font-size-lg:                $font-size-base * 1.25;
        
        $font-weight-lighter:         lighter;
        $font-weight-light:           300;
        $font-weight-normal:          400;
        $font-weight-bold:            700;
        $font-weight-bolder:          bolder;
        
        $font-weight-base:            $font-weight-normal;
        
        $line-height-base:            1.5;
        $line-height-sm:              1.25;
        $line-height-lg:              2;
        
        $h1-font-size:                $font-size-base * 2.5;
        $h2-font-size:                $font-size-base * 2;
        $h3-font-size:                $font-size-base * 1.75;
        $h4-font-size:                $font-size-base * 1.5;
        $h5-font-size:                $font-size-base * 1.25;
        $h6-font-size:                $font-size-base;
        

Maps

Font-size utilities are generated from this map, in combination with our utilities API.

$font-sizes: (
        1: $h1-font-size,
        2: $h2-font-size,
        3: $h3-font-size,
        4: $h4-font-size,
        5: $h5-font-size,
        6: $h6-font-size
        );
        

Utilities API

Font and text utilities are declared in our utilities API in scss/_utilities.scss.

    "font-family": (
        property: font-family,
        class: font,
        values: (monospace: var(--#{$variable-prefix}font-monospace))
        ),
        "font-size": (
        rfs: true,
        property: font-size,
        class: fs,
        values: $font-sizes
        ),
        "font-style": (
        property: font-style,
        class: fst,
        values: italic normal
        ),
        "font-weight": (
        property: font-weight,
        class: fw,
        values: (
          light: $font-weight-light,
          lighter: $font-weight-lighter,
          normal: $font-weight-normal,
          bold: $font-weight-bold,
          bolder: $font-weight-bolder
        )
        ),
        "line-height": (
        property: line-height,
        class: lh,
        values: (
          1: 1,
          sm: $line-height-sm,
          base: $line-height-base,
          lg: $line-height-lg,
        )
        ),
        "text-align": (
        responsive: true,
        property: text-align,
        class: text,
        values: (
          start: left,
          end: right,
          center: center,
        )
        ),
        "text-decoration": (
        property: text-decoration,
        values: none underline line-through
        ),
        "text-transform": (
        property: text-transform,
        class: text,
        values: lowercase uppercase capitalize
        ),
        "white-space": (
        property: white-space,
        class: text,
        values: (
          wrap: normal,
          nowrap: nowrap,
        )
        ),
        "word-wrap": (
        property: word-wrap word-break,
        class: text,
        values: (break: break-word),
        rtl: false
        ),
        
返回顶部