标签： bootstrap

Update for Bootstrap 4 (2018)

The hidden-* and visible-* classes no longer exist in Bootstrap 4. If you want to hide an element on specific tiers or breakpoints in Bootstrap 4, use the d-* display classes accordingly.

Remember that extra-small/mobile (formerly xs) is the default (implied) breakpoint, unless overridden by a larger breakpoint. Therefore, the -xs infix no longer exists in Bootstrap 4.

Show/hide for breakpoint and down:

hidden-xs-down (hidden-xs) = d-none d-sm-block
hidden-sm-down (hidden-sm hidden-xs) = d-none d-md-block
hidden-md-down (hidden-md hidden-sm hidden-xs) = d-none d-lg-block
hidden-lg-down = d-none d-xl-block
hidden-xl-down (n/a 3.x) = d-none (same as hidden)

Show/hide for breakpoint and up:

hidden-xs-up = d-none (same as hidden)
hidden-sm-up = d-sm-none
hidden-md-up = d-md-none
hidden-lg-up = d-lg-none
hidden-xl-up (n/a 3.x) = d-xl-none

Show/hide only for a single breakpoint:

hidden-xs (only) = d-none d-sm-block (same as hidden-xs-down)
hidden-sm (only) = d-block d-sm-none d-md-block
hidden-md (only) = d-block d-md-none d-lg-block
hidden-lg (only) = d-block d-lg-none d-xl-block
hidden-xl (n/a 3.x) = d-block d-xl-none
visible-xs (only) = d-block d-sm-none
visible-sm (only) = d-none d-sm-block d-md-none
visible-md (only) = d-none d-md-block d-lg-none
visible-lg (only) = d-none d-lg-block d-xl-none
visible-xl (n/a 3.x) = d-none d-xl-block

Demo of the responsive display classes in Bootstrap 4
Also, note that d-*-block can be replaced with d-*-inline, d-*-flex, d-*-table-cell, d-*-table etc.. depending on the display type of the element. Read more on the display classes

Reference: https://stackoverflow.com/questions/35351353/missing-visible-and-hidden-in-bootstrap-v4

文本颜色

<!-- BootStrap4 文字颜色 -->
<p class="text-muted">柔和的文本</p>
<p class="text-primary">重要的文本</p>
<p class="text-success">执行成功的文本</p>
<p class="text-info">代表提示信息的文本</p>
<p class="text-warning">警告文本</p>
<p class="text-danger">危险操作文本</p>
<p class="text-secondary">副标题</p>
<p class="text-dark">深灰色文本</p>
<p class="text-light">浅灰色文本</p>
<p class="text-white">白色文本</p>

柔和的文本

重要的文本

执行成功的文本

代表提示信息的文本

警告文本

危险操作文本

副标题

深灰色文本

浅灰色文本

白色文本

背景颜色

<!-- BootStrap4 背景颜色 -->
<p class="bg-primary text-white">重要的背景颜色</p>
<p class="bg-success text-white">执行成功的背景颜色</p>
<p class="bg-info text-white">信息提示背景颜色</p>
<p class="bg-warning text-white">警告背景颜色</p>
<p class="bg-danger text-white">危险背景颜色</p>
<p class="bg-secondary text-white">副标题背景颜色</p>
<p class="bg-dark text-white">深灰背景颜色</p>
<p class="bg-light text-dark">浅灰背景颜色</p>

重要的背景颜色

执行成功的背景颜色

信息提示背景颜色

警告背景颜色

危险背景颜色

副标题背景颜色

深灰背景颜色

浅灰背景颜色