Idle Works, Idle Thoughts

BootStrap 4 学习笔记

Content

Typography

使用 text-* 类控制文本

Images

img-fluid 将设置 max-width: 100%; height: auto;,图像会自动扩展为其父元素大小。

img-thumbnail 可以设置有弧度的 1px border.

使用 float-*text-* 组合来实现图片对齐,也可以用 mx-auto 自动对齐 block-level 的图像,如:mx-auto d-block(使图片居中)。

如果使用 <picture> 标签,则应注意,img-* 要直接应用到 <img> 而非 <picutre>

备注:HTML <picture> 标签可包含多个 <source> 和一个 <img> 元素。浏览器会根据 <source> 来选择最适合的图片,如果没有找到,就使用 <img> 图片。例如:

<picture>
  <source srcset="logo-wide.png" media="(min-width: 600px)">
  <img src="logo-narrow.png" alt="Logo">
</picture>

又如(如果浏览器不支持 SVG,则会选择 png 版本):

<picture>
  <source srcset="logo.svg" type="image/svg+xml">
  <img src="logo.png" alt="Logo">
</picture>

Figures

如果需要为图片添加文字说明,则应使用 <figure> 标签,例如:

<figure class="figure">
    <img src="..." class="figure-img img-fluid rounded">
    <figcaption class="figure-caption">Descriptions</figcaption>
</figure>

<figcaption> 添加 text-* 类即可控制文本对齐。

Utilities

borders

可以选择添加边框,或指定位置添加边框。有以下类:

可以选择哪些位置不加边框:

可以选择边框颜色:border border-*

可以设置有弧度的边框:

Clearfix

消除浮动内容的影响:

<div class='clearfix'>...</div>

其实现大致如:

@mixin clearfix() {
    &:after {
        display: block;
        content: "",
        clear: both;
    }
}

Color

文本颜色text-* 和背景颜色 bg-*

公用的可选颜色有:primary, secondary, success, danger, warning, info, light, dark, white.

文本颜色还有:body, muted, black-50, white-50.

背景颜色还有:transparent.

背景渐变色 bg-gradient-*,需要将 $enable-gradients 设置为 true(默认为 false)。

Display

控制一个元素显示与否。写法:

其中 value 的值是:none, inline, inline-block, block, table, table-cell, table-row, flex, inline-flex.

注意,媒体选择是基于 breakpoint or larger,例如 d-lg-none 表示在 lg, xl 上都不显示。

d-none 隐藏元素,或者 d-{sm,md,lg,xl}-none 基于屏款隐藏元素。

通过复杂的组合,可以实现在不同屏幕上显示不同的内容:

可以通过 d-print-* 控制打印机输出。

Text

使用 text-* 控制文本显示、对齐等。

文本对齐:

文本自动换行:text-wrap。阻断换行(强制显示在一行):text-nowrap。对长文本,溢出部分用省略号显示:text-truncate(会添加 display: inline-block;display: block)。

无空格长文本自动换行:text-break(将设置 overflow-wrap: break-word,以及为 IE/Edge 兼容性设置 word-break: break-word),。

大小写转换:

字重:

等宽字体:text-monospace

重置字体颜色(使用父元素颜色):text-reset。如设置链接字体和父元素相同:

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

删除文本装饰(如链接下划线):text-decoration-none