BootStrap4工具类之显示样式类系列

最新推荐文章于 2023-05-26 21:30:50 发布
最新推荐文章于 2023-05-26 21:30:50 发布
阅读量487 收藏
点赞数
分类专栏： BootStrap4 文章标签： bootstrap4 工具类 display
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103394983
版权

目录

官方地址

https://getbootstrap.com/docs/4.4/utilities/display/

其他文档地址

如何运作

使用 display 的工具类来改变 display 属性，官方故意只支持display 所有可能的一个子集，
可以依据需求将这些 Class 调整出各种效果。

命名

.d-{value} for xs

.d-{breakpoint}-{value} for sm, md, lg, and xl.

值可以替换成以下：

  • none
  • inline
  • block
  • inline-block
  • flex
  • inline-flex
  • table
  • table-cell
  • table-row

例子

<div class="container">
    <h1>实例</h1>
    <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>
</div>

隐藏元素

Screen SizeClass
Hidden on all.d-none
Hidden only on xs.d-none .d-sm-block
Hidden only on sm.d-sm-none .d-md-block
Hidden only on md.d-md-none .d-lg-block
Hidden only on lg.d-lg-none .d-xl-block
Hidden only on xl.d-xl-none
Visible on all.d-block
Visible only on xs.d-block .d-sm-none
Visible only on sm.d-none .d-sm-block .d-md-none
Visible only on md.d-none .d-md-block .d-lg-none
Visible only on lg.d-none .d-lg-block .d-xl-none
Visible only on xl.d-none .d-xl-block

显示在打印中

命名

.d-print-{value}

  • .d-print-none
  • .d-print-inline
  • .d-print-block
  • .d-print-inline-block
  • .d-print-flex
  • .d-print-inline-flex
  • .d-print-table
  • .d-print-table-cell
  • .d-print-table-row

例子

<h3>实例</h3>
<div class="d-print-none">Screen Only (Hide on print only)</div>
<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>

整体代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no"/>
    <title>12显示</title>
    <!--<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">-->

    <!-- 新 Bootstrap4 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<pre class="pre-scrollable">

</pre>

<div class="container">
    <h1>如何运作</h1>
    <p>
        使用 display 的工具类来改变 display 属性，
        我们故意只支持 display 所有可能的一个子集，
        可以依据需求将这些 Class 调整出各种效果。
    </p>

    <div class="container">
        <h1>命名</h1>
        <p>
            <code>.d-{value}</code> for xs
        </p>
        <p>
            <code>.d-{breakpoint}-{value}</code> for sm, md, lg, and xl.
        </p>
        <h2>值可以替换成以下：</h2>
        <ul>
            <li>
                <code>none</code>
            </li>

            <li>
                <code>inline</code>
            </li>

            <li>
                <code>block</code>
            </li>

            <li>
                <code>inline-block</code>
            </li>

            <li>
                <code>flex</code>
            </li>

            <li>
                <code>inline-flex</code>
            </li>

            <li>
                <code>table</code>
            </li>

            <li>
                <code>table-cell</code>
            </li>

            <li>
                <code>table-row</code>
            </li>
        </ul>
    </div>
</div>


<div class="container">
    <h1>实例</h1>
    <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>
</div>

<div class="container">
    <h1>隐藏元素</h1>
    <table class="table table-bordered table-striped table-hover">
        <thead>
        <tr>
            <th>Screen Size</th>
            <th>Class</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Hidden on all</td>
            <td><code class="highlighter-rouge">.d-none</code></td>
        </tr>
        <tr>
            <td>Hidden only on xs</td>
            <td><code class="highlighter-rouge">.d-none .d-sm-block</code></td>
        </tr>
        <tr>
            <td>Hidden only on sm</td>
            <td><code class="highlighter-rouge">.d-sm-none .d-md-block</code></td>
        </tr>
        <tr>
            <td>Hidden only on md</td>
            <td><code class="highlighter-rouge">.d-md-none .d-lg-block</code></td>
        </tr>
        <tr>
            <td>Hidden only on lg</td>
            <td><code class="highlighter-rouge">.d-lg-none .d-xl-block</code></td>
        </tr>
        <tr>
            <td>Hidden only on xl</td>
            <td><code class="highlighter-rouge">.d-xl-none</code></td>
        </tr>
        <tr>
            <td>Visible on all</td>
            <td><code class="highlighter-rouge">.d-block</code></td>
        </tr>
        <tr>
            <td>Visible only on xs</td>
            <td><code class="highlighter-rouge">.d-block .d-sm-none</code></td>
        </tr>
        <tr>
            <td>Visible only on sm</td>
            <td><code class="highlighter-rouge">.d-none .d-sm-block .d-md-none</code></td>
        </tr>
        <tr>
            <td>Visible only on md</td>
            <td><code class="highlighter-rouge">.d-none .d-md-block .d-lg-none</code></td>
        </tr>
        <tr>
            <td>Visible only on lg</td>
            <td><code class="highlighter-rouge">.d-none .d-lg-block .d-xl-none</code></td>
        </tr>
        <tr>
            <td>Visible only on xl</td>
            <td><code class="highlighter-rouge">.d-none .d-xl-block</code></td>
        </tr>
        </tbody>
    </table>
</div>

<div class="container">
    <h1>显示在打印中</h1>
    <h2>命名</h2>
    <p>
        <code>.d-print-{value}</code>
    </p>
    <ul>
        <li>
            <code>.d-print-none</code>
        </li>

        <li>
            <code>.d-print-inline</code>
        </li>

        <li>
            <code>.d-print-block</code>
        </li>

        <li>
            <code>.d-print-inline-block</code>
        </li>

        <li>
            <code>.d-print-flex</code>
        </li>

        <li>
            <code>.d-print-inline-flex</code>
        </li>

        <li>
            <code>.d-print-table</code>
        </li>

        <li>
            <code>.d-print-table-cell</code>
        </li>

        <li>
            <code>.d-print-table-row</code>
        </li>
    </ul>
    <h3>实例</h3>
    <div class="d-print-none">Screen Only (Hide on print only)</div>
    <div class="d-none d-print-block">Print Only (Hide on screen only)</div>
    <div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
</div>
<!--<div style="width: 10px; height: 9000px;"></div>-->
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
爱喝水的qdy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap4管理类后台模板
12-18
Bootstrap4 是一个流行的前端开发框架，它为开发者提供了丰富的组件和工具，用于快速构建响应式、移动优先的网站和后台管理界面。这个“Bootstrap4管理类后台模板”旨在帮助开发者轻松创建美观且功能齐全的后台管理...
Bootstrap响应式工具类
歪脖先生的博客
05-11 879
响应式工具类 Bootstrap提供了响应式类和打印机类。使用响应式类，可以针对不同设备显示或隐藏某些内容。使用工具类，可以针对打印机和浏览器显示或隐藏某些内容。 有针对性的使用这些工具类，可用避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类，可以在不同设备上提供不同的展现形式。 响应式类 响应式类中，以.visible-开头的类表示仅在某尺寸的屏幕上显示，在其他屏幕上都隐藏；...
BootStrap4工具类之屏幕阅读器
爱喝水的qdy的博客
12-03 330
目录官方文档地址其他文档地址sr-onlysr-only-focusable整体代码 官方文档地址 https://getbootstrap.com/docs/4.4/utilities/screen-readers/ 其他文档地址 http://bs4.vx.link http://bs4.vx.link/index.html?tmpui_page=/pages/utilities ht...
Bootstrap（一）
博客
06-30 2030
Container容器和container-fluid容器最大的不同之处在于宽度的设定。Container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。 网格选项 网格系统在各种屏幕和设备上的约定:.row.col-auto.w-100 换行的网格系统包括五种宽度预定义，用于 构建复杂的响应布局，可以根据需要定义在特小 小 中、 大*、 特大 超大*五种屏幕(设备)下的样式。 1.覆盖所有设备 2
Boostrap系列之display 属性
老__L的博客
05-31 687
display 属性
BootStrap4.0+响应式显示/隐藏元素
叹之
08-22 5315
隐藏元素 d-none: 无条件隐藏 d-sm-none: 设备尺寸大于等于sm时隐藏 d-md-none: 设备尺寸大于等于md时隐藏 d-lg-none: 设备尺寸大于等于lg时隐藏 d-xl-none: 设备尺寸大于等于xl时隐藏 显示元素 d-sm-block: 设备尺寸大于等于sm时显示 d-md-block: 设备尺寸大于等于md时显示 d-lg-block: 设备尺寸大于等于lg时显示 d-xl-block: 设备尺寸大于等于xl时显示 组合 d-none d-sm-block: 设
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
11-30
在本文中，我们将深入探讨BootStrap框架中的图片样式、辅助类样式以及CSS组件的实例应用。Bootstrap是一款流行的前端开发框架，它提供了丰富的预定义样式和组件，使得开发者能够快速构建响应式和移动设备优先的网页...
自适应式国外Bootstrap主题类网站html源码模板
06-08
2. **预定义组件**：Bootstrap提供了一系列预设的CSS样式和JavaScript组件，如导航条（Navbar）、按钮（Buttons）、表单（Forms）、下拉菜单（Dropdowns）、模态框（Modals）等，大大简化了网页开发过程。...
bootstrap4实现购物商城
06-18
在Bootstrap 4中，我们可以使用媒体对象或者响应式图像类来优化图片在不同设备上的显示效果，确保图片在任何环境下都能保持合适的大小和比例。 总的来说，Bootstrap 4 为构建购物商城提供了强大的工具和资源。通过...
Bootstrap基本样式学习笔记之按钮(4)
09-01
Bootstrap是世界上最流行的前端开发框架之一，它为创建响应式、移动设备优先的网站提供了丰富的工具和组件。在本文中，我们将深入探讨Bootstrap中的一个关键组件——按钮（Buttons），特别是关于其基本样式和尺寸...
Bootstrap（CSS库）
12-29
Bootstrap包是个相对简单的程序库，但也提供了优雅的HTML和CSS规范。它与CSS框架Blueprint存在很多相似之处。 值得一提的是，Bootstrap并不会在Twitter平台上运行，Twitter只是促进了它的开发，并将它公布出来。 正如Twitter架构师马克·奥托（Mark Otto）在Twitter开发者博客上所写的那样，“Bootstrap 使用了一些最新的Web 浏览器技术，向开发者提供了时尚的排版、样式、按钮、表格、网格、导航和一切所需的东西，而且它所占资源极小，用gzip压缩后只有6k。” 由于Firefox，Chrome和Safari等浏览器对W3C标准有着较好的支持，Bootstrap在网页跨浏览器兼容方面应该会有不错表现。虽然目前Bootstrap还不支持IE 7和IE 8，但相关团队正在为此加紧工作。
bootstrap3全局css样式中文文档
06-13
bootstrap3全局css样式中文文档，设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。
bootStarp4.5学习笔记day01
weixin_63494444的博客
05-26 225
的取值：start（默认值位于容器开头）、end（位于容器结尾）、center（位于容器中间）、between（两端对齐，项目之间的间隔相等）和around（每个项目两侧的间隔相等）。.d-none .d-sm-block：只在xs（超小屏幕）上隐藏；.d-lg-none .d-xl-block：只在lg上隐藏；.d-xl-none：只在xl上隐藏；.d-flex类和.d-inline-flex类来将任意一个容器指定为Flex布局；.d-md-none .d-lg-block：只在md（）上隐藏；
Bootstrap CSS根据屏幕大小控制隐藏与显示
热门推荐
极客神殿
09-14 1万+
Bootstrap 提供了一些辅助类，以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备，实现内容对设备的显示和隐藏。 需要谨慎使用这些工具，避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换。 超小屏幕 小屏幕 中等屏幕 大屏幕 手机 (<768px) 平板 (≥768px) 桌面 (≥992px) 桌面 (≥1200...
Bootstrap4样式之工具类
weixin_45884768的博客
03-11 1933
Bootstrap4样式之工具类1 构建关闭按钮2 实现浮动3 隐藏标签元素4 设置区域溢出的显示5 设置元素可见与不可见6 设置内容对齐方式7 设置内边距8 设置外边距。9 设置元素尺寸10 设置元素最大最小尺寸为100%11 设置元素阴影效果12 设置元素的display模式13 设置文本的对齐方式14 设置文本溢出换行15 设置字母大小写16 设置字体样式17 删除超链接下划线 1 构建关闭...
css-displayd属性
weixin_55178279的博客
05-09 409
Display显示属性 通过我们的显示实用程序，可以快速、有效地改变要显示的显示值和更多，包括对一些更常见的值的支持，以及一些用于在打印时控制显示的附加功能。 Dislay属性 显示适用于从xs到xl,的所有breakpoints的实用程序类，其中没有breakpoints缩写。 这是因为这些类是从min-width: 0;并且因此不受媒体查询的限制。 然而，其余的断点包含断点缩写。 因此，这些类使用以下格式来命名： .d-{value}用于小屏幕适配（即手机适配） .d-{brea...
如何使用Bootstrap4显示和隐藏元素
安琦科技
02-25 3595
如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发，请使用响应式显示类来按设备显示和隐藏元素。避免创建相同站点的完全不同版本，而是相应地为每个屏幕大小隐藏元素。 要隐藏元素，只需使用.d-none类或其中一个.d-{sm,md,lg,xl}-none类进行任何响应式屏幕变化。 要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d-*-none类与一个.d-*-*类组合在一...
Bootstrap介绍及Bootstrap常用类名
qq_50906507的博客
08-24 1536
Bootstrap介绍及Bootstrap常用类名
bootstrap 工具类名总结 适合初学者
twinkle的博客
05-24 1104
// 边框 添加边框 使用类名 border(四周加上边框) border-top border-left border-bottom border-right 去掉边框 使用类名 border-0(删除四周的边框) border-top-0 border-left-0 border-bottom-0 border-right-0 边框颜色 使用类名 在使用border的类名上 在添加 border-primary border-secondary bordde
使用bootstrap工具类设置网页元素的样式
最新发布
07-10
使用Bootstrap的工具类可以方便地设置网页元素的样式。...这只是Bootstrap工具类的一小部分示例，Bootstrap提供了众多工具类，用于快速设置元素的样式。你可以根据需要参考Bootstrap的文档和示例来选择适合的工具类。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值