BootStrap4工具类之可见性

最新推荐文章于 2022-11-02 16:49:55 发布
最新推荐文章于 2022-11-02 16:49:55 发布
阅读量387 收藏
点赞数
文章标签： bootstrap4 工具类 可见性 visible invisible
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32617703/article/details/103366052
版权

目录

官方文档地址

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

其他文档地址

说明

使用可见性通用类别设置元素的 visibility。这不会改变 display 值，并且有助于对大部分使用者隐藏内容，但是在屏幕阅读器仍然保存它们。

visible与invisible

<div class="container">
    <div class="visible">...</div>
    <div class="invisible">...</div>
</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>09可见性</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>

<div class="container">
    <div class="visible">...</div>
    <div class="invisible">...</div>
</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>
qq_32617703
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
BootStrap4（三）工具类-公共样式
weixin_45650998的博客
09-02 266
公共样式
Bootstrap系列之可见性（Visibility）
老__L的博客
06-03 756
可见性（Visibility）
bootstrap框架-----可见 隐藏
weixin_30405421的博客
09-21 439
可见框架-像素选择 -block-inline :块内联元素 -inline-block将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格 可以设置宽度和高度地块元素的属性 visible-md sd sx - block-inline ; inline-block; hidden：隐...
Bootstrap响应式工具类
歪脖先生的博客
05-11 879
响应式工具类 Bootstrap提供了响应式类和打印机类。使用响应式类，可以针对不同设备显示或隐藏某些内容。使用工具类，可以针对打印机和浏览器显示或隐藏某些内容。 有针对性的使用这些工具类，可用避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类，可以在不同设备上提供不同的展现形式。 响应式类 响应式类中，以.visible-开头的类表示仅在某尺寸的屏幕上显示，在其他屏幕上都隐藏；...
Bootstrap中的utilities（工具类）
09-19 397
垂直对齐：align-baseline/align-top/align-middle/align-bottom/align-text-top/align-text-bottom。元素的自身的对齐方式-响应式：align-self-{breakpoint}-start/end/center/baseline/stretch。主轴上的对齐-分散居中对齐-响应式：justify-content-{breakpoint}-between/...具有设置宽度和高度尺寸的元素上使用 .overflow-hidden。
Bootstrap 响应式实用工具实例详解
08-31
在Bootstrap中，`hidden-*`和`visible-*`是一组常用的响应式实用工具类。`hidden-*`用于隐藏特定设备尺寸下的内容，而`visible-*`则用于在特定设备尺寸下显示内容。例如，`hidden-sm`类会隐藏在小型设备上的内容，而...
bootstrap响应式工具使用详解
11-27
总的来说，Bootstrap响应式工具通过媒体查询、网格系统、可见性和隐藏类以及浮动和定位方法，帮助开发者创建跨平台、响应式的用户界面。通过灵活运用这些工具，你可以轻松构建适应各种设备的网页，提供一致的用户...
bootstrap4:bootstrap4的练习代码
05-10
2. **响应式工具**：Bootstrap 4 提供了一系列响应式工具类，如`.hidden-*`和`.visible-*`，用于控制元素在不同设备上的可见性。随着断点（如`.sm`, `.md`, `.lg`, 和 `.xl`）的使用，你可以决定内容在手机、平板、...
Bootstrap 第6章 辅助类和响应式工具
08-12
Bootstrap是世界上最流行的前端开发框架之一，它为开发者提供了丰富的组件、样式和工具，极大地提高了网页设计和开发的效率。在第六章中，我们将深入探讨Bootstrap中的辅助类和响应式工具，这些工具对于创建美观且...
bootstrap自定义样式之bootstrap实现侧边导航栏功能
12-02
在实际应用中，可以进一步优化这个侧边导航栏，例如，使用媒体查询（media queries）来更精确地控制不同屏幕尺寸下的显示，或者考虑将两套菜单合并，通过JavaScript动态切换它们的可见性，从而减少HTML结构的复杂性...
Bootstrap 4样式的工具类总结
qq_44701472的博客
03-16 442
一、 公共样式 1、 使用.close和&times构建一个关闭按钮 2、 使用.clearfix给浮动的区域的父元素添加，实现清理浮动的功能。Float - [sm | md | lg | xl ] – lef t、float - [ sm | md | lg |xl ]- right和float - [ sm | md | lg | xl ] – none. 3、 使用.text...
bootstrap3的visible-*
ling811的专栏
11-25 6260
1、visible-*是根据屏幕的宽度来显示内容的，用于手机浏览器。 2、代码： 无标题文档 .col-xs-6 .col-sm-3 visible-xs 通过调整浏览器的宽度或在手机上即可查看这些案例的实际效果。 .col-xs-6 .col-sm-3 被隐藏的v
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工具使用
wangshiqi666的博客
11-02 1658
html中boorstrap使用
Bootstrap4官方文档 | 新特性入门
go
08-12 1852
阅读目录入门Bootstrap4安装下载方式引入软件包管理器内容预编译的引导程序CSS文件JS文件Bootstrap程序源代码浏览器和设备支持的浏览器移动设备桌面浏览器IE浏览器Javascript禁用数据属性API事件程序化API异步功能和转换默认设置主题化Sass布局Container响应 & 反应灵敏响应断点内容页面默认值字体标题和段落列表预格式化文字Tables表格Forms表单鼠标效果其他元素HTML5 [hidden]属性版式全局设置标题自定义标题显示标题段落内联文字元素缩略语块引用命名
BootStrap4工具类之显示样式类系列
爱喝水的qdy的博客
12-04 487
目录官方地址其他文档地址如何运作命名例子隐藏元素显示在打印中命名例子整体代码 官方地址 https://getbootstrap.com/docs/4.4/utilities/display/ 其他文档地址 https://getbootstrap.net https://getbootstrap.net/docs/utilities/position/ http://bs4.vx.l...
Bootstrap介绍及Bootstrap常用类名
qq_50906507的博客
08-24 1536
Bootstrap介绍及Bootstrap常用类名
如何使用Bootstrap 4显示和隐藏元素
BowenXu11的博客
11-05 1337
bootstrap不同版本语法不一样，这是4的语法 如何使用Bootstrap4显示和隐藏元素 为了更快地进行移动设备开发，请使用响应式显示类来按设备显示和隐藏元素。避免创建相同站点的完全不同版本，而是相应地为每个屏幕大小隐藏元素。 要隐藏元素，只需使用.d-none类或其中一个.d-{sm,md,lg,xl}-none类进行任何响应式屏幕变化。 要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d--none类与一个.d--*类组合在一起，例如，.d-none .d-md-block .d-xl-none
如何使用Bootstrap4显示和隐藏元素
07-05 1835
为了更快地进行移动设备开发，请使用响应式显示类来按设备显示和隐藏元素。避免创建相同站点的完全不同版本，而是相应地为每个屏幕大小隐藏元素。 要隐藏元素，只需使用.d-none类或其中一个.d-{sm,md,lg,xl}-none类进行任何响应式屏幕变化。 要仅在给定的屏幕尺寸间隔上显示元素，您可以将一个.d--none类与一个.d--*类组合在一起，例如，.d-none .d-md-block .d-xl-none将隐藏所有屏幕尺寸的元素，中型和大型设备除外。 ...
bootstrap visible
最新发布
08-24
- *2* [BootStrap4工具类之可见性](https://blog.csdn.net/qq_32617703/article/details/103366052)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值