Bootstrap - 显示：初学者的全面指南

你好，有抱负的网页开发者们！今天，我们将深入了解Bootstrap最有用的功能之一：显示工具。作为你亲切的邻居计算机老师，我将用清晰的解释和大量的例子来引导你了解这个主题。所以，拿起一杯咖啡（或者茶，如果你喜欢的话），让我们开始吧！

什么是Bootstrap显示？

在我们深入细节之前，让我们先了解Bootstrap中的“显示”是什么意思。在网页开发中，“显示”指的是元素如何在网页上显示。Bootstrap提供了一套类，让你可以轻松控制元素的显示行为。

把它想象成在房间里布置家具。有时你想让一件家具可见，有时你想隐藏它，有时你希望它根据房间的大小（或者在我们的情况下，屏幕的大小）表现出不同的行为。

表示法

Bootstrap为显示类使用了一种简单直观的表示法。通用格式是：

.d-{value}

其中{value}可以是以下几种：

值	描述
none	隐藏元素
inline	将元素显示为行内元素
inline-block	将元素显示为行内级别的块容器
block	将元素显示为块元素
table	将元素显示为表格
table-cell	将元素显示为表格单元格
table-row	将元素显示为表格行
flex	将元素显示为块级别的flex容器
inline-flex	将元素显示为行内级别的flex容器

让我们来看一些例子：

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

在这个例子中，我们使用d-inline使得两个div元素显示为行内元素。它们将并排显示而不是垂直堆叠。

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

在这里，我们使用d-block使得span元素（通常是行内元素）显示为块元素。它们将垂直堆叠。

响应式变体

现在，事情变得非常有趣！Bootstrap允许你根据屏幕大小应用不同的显示属性。这种格式的表示法是：

.d-{breakpoint}-{value}

其中{breakpoint}可以是以下几种：

断点	描述
sm	小型设备 (≥576px)
md	中型设备 (≥768px)
lg	大型设备 (≥992px)
xl	超大型设备 (≥1200px)

例如：

<div class="d-none d-md-block">
这段文本在小屏幕上将被隐藏，但在中型和更大的屏幕上可见。
</div>

这个div默认是隐藏的（d-none），但在中型屏幕和更大的屏幕上会显示为块元素（d-md-block）。

隐藏元素

在响应式设计中隐藏元素是一个常见的任务。Bootstrap通过d-none类使这项任务变得简单：

<div class="d-none">你看不见我！</div>

这个元素将完全隐藏，不受屏幕大小影响。

但是，如果你只想在特定屏幕大小上隐藏元素怎么办？这时响应式变体就派上用场了：

<div class="d-lg-none">我在大型屏幕以下的所有屏幕上都是可见的。</div>
<div class="d-none d-lg-block">我只在大型屏幕及以上出现。</div>

打印显示

Bootstrap甚至允许你控制元素在页面打印时的显示方式！使用d-print-{value}类：

<div class="d-none d-print-block">我只有在打印页面时才会显示！</div>
<div class="d-print-none">我打印页面时会消失。</div>

这对于创建无需单独样式表的打印友好版网页特别有用。

一切结合

让我们创建一个小例子，使用多个显示工具：

<div class="container">
<h1 class="d-none d-md-block">欢迎来到我的网站</h1>
<h2 class="d-md-none">欢迎</h2>

<p class="d-inline-block bg-light p-2">我总是inline-block。</p>
<p class="d-none d-lg-inline-block bg-light p-2">我在大屏幕上以行内显示。</p>

<div class="d-flex justify-content-between">
<div>Flex项目1</div>
<div>Flex项目2</div>
<div class="d-none d-xl-block">我只在超大型屏幕上显示</div>
</div>

<footer class="d-print-none">这个页脚在打印时不会出现。</footer>
</div>

在这个例子中：

• 我们有一个适用于中型屏幕及以上的大标题，以及一个适用于小屏幕的较小标题。
• 我们有两个段落，其中一个只在大屏幕上出现。
• 我们使用flexbox，第三个项目只出现在超大型屏幕上。
• 页脚不会被打印。

结论

就这样，朋友们！我们探讨了Bootstrap显示工具的方方面面。记住，掌握这些工具的关键是实践。尝试创建自己的布局，尝试不同的屏幕大小，不要害怕混合搭配这些类。

作为你的老计算机老师，我无法强调这些工具在真实世界网页开发中的价值。它们将为你节省无数个小时编写自定义CSS和调试布局问题的时间。

现在，去自信地创建响应式、自适应的布局吧！并记住，在网页开发的世界里，就像在生活中一样，有时最强大的工具是知道何时让某些东西消失。快乐编码！

Credits: Image by storyset