通过向父元素添加 .clearfix，可以轻松清除浮动。

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

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

// Usage as a mixin
.element {
  @include clearfix;
}

下面的示例演示如何使用 .clearfix。如果没有 .clearfix，div将不会跨越按钮，这将导致布局损坏。

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-left">示例按钮向左浮动</button>
  <button type="button" class="btn btn-secondary float-right">示例按钮向右浮动</button>
</div>

可使用 aria-label 标签，为屏幕阅读器用户添加文字定义（为阅读障碍者提供访问支持）。

<button type="button" class="close" aria-label="Close">
  <span aria-hidden="true">×</span>
</button>

将这些规则应用到 <iframe>、<embed>、 <video>、 <object> 上，当需要配合其它属性（如响应式）时，也可以加入 .embed-responsive-item 定义。

你可以将任何代码嵌入到 <iframe> 中，并使用 .embed-responsive 实现同比例收缩，至于 .embed-responsive-item 不是严格要求的-虽然我们鼓励使用它。

<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>

长宽比例处理

<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

默认情况下，为两个值提供了溢出功能，但它们没有响应式的。

<div class="overflow-auto">...</div>
<div class="overflow-hidden">...</div>

使用 .position-* 样式，可以实现快速定位-虽然它们不包含响应式支持。

<div class="position-static">...</div>
<div class="position-relative">...</div>
<div class="position-absolute">...</div>
<div class="position-fixed">...</div>
<div class="position-sticky">...</div>

固定在top顶部

<div class="fixed-top">...</div>

固定在bottom底部

<div class="fixed-bottom">...</div>

贴齐于top顶部

<div class="sticky-top">...</div>

使用屏幕阅读器通用样式定义，隐藏屏幕阅读器不支持的设备元素。

<a class="sr-only sr-only-focusable" href="#content">跳到主要内容</a>

使用 .text-hide 样式可以保持标签的亲和性及SEO优化需求，引入后，需要使用 background-image 属性来提供视觉展示，而不是文字内容（文字内容随即隐藏）。

<h1 class="text-hide" style="background-image: url('images/logo-ico.png'); width: 68px; height: 68px;">光年后台模板</h1>

<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>

使用 vertical-alignment 通用样式改变元素的对齐，注意：垂直对齐仅影响 内联inline、 内联块inline-block、 内联表inline-table、 表格单元格table cell元素。

可选属性有 .align-baseline、 .align-top、 .align-middle、.align-bottom、 .align-text-bottom、 .align-text-top 。

<span class="align-baseline">baseline基准</span>
<span class="align-top">top顶部</span>
<span class="align-middle">middle垂直居中</span>
<span class="align-bottom">bottom底部</span>
<span class="align-text-top">text-top文本顶部</span>
<span class="align-text-bottom">text-bottom文本底部</span>

在表格单元格中：

<table style="height: 100px;">
  <tbody>
    <tr>
      <td class="align-baseline">baseline</td>
      <td class="align-top">top</td>
      <td class="align-middle">middle</td>
      <td class="align-bottom">bottom</td>
      <td class="align-text-top">text-top</td>
      <td class="align-text-bottom">text-bottom</td>
    </tr>
  </tbody>
</table>

使用通用样式的 visibility 设置元素的可见性，这不会改变元素的 display 值，也不会影响布局，.invisible 元素仍占用页面空间，内容将隐藏但仍然保留在屏幕阅读器中。

根据需要选用 .visible 或 .invisible 两个样式类。

<div class="visible">...</div>
<div class="invisible">...</div>