2.10 Bootstrap 响应式实用工具

这篇具有很好参考价值的文章主要介绍了2.10 Bootstrap 响应式实用工具。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


Bootstrap 响应式实用工具

2.10 Bootstrap 响应式实用工具,Bootstrap,bootstrap,前端,html

Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发。这些可以通过媒体查询结合大型、小型和中型设备,实现内容对设备的显示和隐藏。

需要谨慎使用这些工具,避免在同一个站点创建完全不同的版本。响应式实用工具目前只适用于块和表切换

- 超小屏幕 手机 (<768px) 小屏幕 平板 (≥768px) 中等屏幕 桌面 (≥992px) 大屏幕 桌面 (≥1200px)
.visible-xs-* 可见 隐藏 隐藏 隐藏
.visible-sm-* 隐藏 可见 隐藏 隐藏
.visible-md-* 隐藏 隐藏 可见 隐藏
.visible-lg-* 隐藏 隐藏 隐藏 可见
.hidden-xs 隐藏 可见 可见 可见
.hidden-sm 可见 隐藏 可见 可见
.hidden-md 可见 可见 隐藏 可见
.hidden-lg 可见 可见 可见 隐藏

从 v3.2.0 版本起,形如 .visible-*-* 的类针对每种屏幕大小都有了三种变体,每个针对 CSS 中不同的 display 属性,列表如下:

类组 CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;

因此,以超小屏幕(xs)为例,可用的 .visible-*-* 类是:.visible-xs-block.visible-xs-inline.visible-xs-inline-block

.visible-xs.visible-sm.visible-md.visible-lg 类也同时存在。但是从 v3.2.0 版本开始不再建议使用。除了 <table> 相关的元素的特殊情况外,它们与 .visible-*-block 大体相同。

打印类

下表列出了打印类。使用这些切换打印内容。

class 浏览器 打印机
.visible-print-block
.visible-print-inline
.visible-print-inline-block
隐藏 可见
.hidden-print 可见 隐藏

下面的实例演示了上面所列举的帮助器类的用法。调整浏览器的窗口大小,或者在不同的设备上加载实例,测试响应式实用工具类。

<div class="container" style="padding: 40px;">
    <div class="row visible-on">
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-xs">特别小型</span>
            <span class="visible-xs">✔ 在特别小型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-sm">小型</span>
            <span class="visible-sm">✔ 在小型设备上可见</span>
        </div>
        <div class="clearfix visible-xs"></div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-md">中型</span>
            <span class="visible-md">✔ 在中型设备上可见</span>
        </div>
        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;
        box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">
            <span class="hidden-lg">大型</span>
            <span class="visible-lg">✔ 在大型设备上可见</span>
        </div>
    </div>
</div>

2.10 Bootstrap 响应式实用工具,Bootstrap,bootstrap,前端,html

勾号(✔) 表示元素在当前视口中可见。文章来源地址https://www.toymoban.com/news/detail-557962.html

到了这里,关于2.10 Bootstrap 响应式实用工具的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 网页设计升阶秘籍:用Bootstrap打造响应式网站!

    介绍:Bootstrap是一个流行的前端框架,它集成了HTML、CSS和JavaScript,旨在帮助开发者快速构建响应式和移动优先的网站。以下是Bootstrap的详细介绍: 响应式设计:Bootstrap的核心特性之一是其响应式布局系统,这意味着使用Bootstrap构建的网站能够自适应不同尺寸的屏幕,包括手

    2024年02月21日
    浏览(32)
  • 如何在windows10实现键盘控制音量快捷键 - F12增大音量、F11减低音量、F10静音 - 使用微软官方的PowerToys实用工具中的Keyboard Manager自定义快捷键

    微软官方限定,“ 快捷键至少必须有2个键 ”--- 建议使用右边的alt+F12来单手操作 安装powertoys (微软官方出品,内含“ 键盘管理器 ”,官网介绍链接) 迅雷下载: https://github.com/microsoft/PowerToys/releases/download/v0.68.0/PowerToysSetup-0.68.0-x64.exe 百度网盘下载: 链接:https://pan.baid

    2024年02月09日
    浏览(67)
  • 大学生bootstrap框架网页作业成品 web前端大作业期末源码 航海王html+jquery+bootstrap响应式网页制作模板 学生海贼王动漫bootstrap框架网站作品

    HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。 ⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页

    2024年02月11日
    浏览(74)
  • 前端——bootstrap响应式网页制作-星游记主题(大作业+源码)

    在b站上看见了童年神作的续集(虽然是个人自制) 作品:【自制星游记续】十年后,我们再飞行!!! 【自制星游记续】十年后,我们再飞行!!!_哔哩哔哩_bilibili 六一快乐,伙伴们。部分BGM来自:北京来的狼,鹿泊言{其实还有举杯邀酒请孤独,老杯做了很多动画bgm,很

    2024年02月11日
    浏览(45)
  • Web大学生网页作业成品 bootstrap响应式网站开发 基于HTML+CSS+JS+Bootstrap制作火锅美食网站(4页)

    🎀 精彩专栏推荐👇🏻👇🏻👇🏻 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 💂 作者主页: 【主页——🚀获取更多优质源码】 🎓 web前端期末大作业: 【📚毕设项目精品实战案例 (1000套) 】 🧡 程序员有趣的告白方式:【💌HTML七夕情人节表白网页制作

    2024年02月08日
    浏览(51)
  • Linux性能优化--实用工具:性能工具助手

    本章介绍一些在Linux系统上可用的实用程序,它们能够加强性能工具的有效性和可用性。实用工具本身不是性能工具,但是当它们与性能工具一起使用时,它们可以帮助完成如下功能:自动执行繁琐的任务、分析性能统计数据,以及创建性能工具友好的应用程序。 阅读本章后

    2024年02月07日
    浏览(46)
  • 无极低代码,免费工具在线实用工具分享

      在当今数字化的时代,我们需要尽可能地减少手动操作,提高工作效率。这就是为什么我们需要一些在线工具来帮助我们完成一些繁琐的任务。以下是一些无极低代码网集成的在线工具,可以帮助您更快、更轻松地完成任务。 项目周期计算 :可以帮助您计算项目周期,以

    2024年02月16日
    浏览(56)
  • 推荐九大类实用的AI工具网站 | 最实用的AI工具网站推荐大全(建议收藏!!!)

    随着AI技术的快速发展,越来越多的网站开始提供AI工具,以帮助用户解决日常工作和生活中的问题。在这篇博客中,将为大家推荐一些实用的AI工具网站。 Write With Transformer(https://transformer.huggingface.co/):基于GPT系列模型的自动写作工具,可以帮助用户完成各种写作任务。

    2024年02月08日
    浏览(59)
  • [Python] 缓存实用工具

    cachetools 是一个 Python 库,提供了用于缓存的实用工具,包括各种缓存算法和数据结构,如 LRU (最近最少使用)缓存、 TTL (时间到期)缓存等。使用 cachetools 可以轻松地在 Python 应用程序中实现缓存功能,提高性能并减少对重复计算的需求。 以下是一个简单示例代码,演示

    2024年03月09日
    浏览(39)
  • 编程实用工具推荐

    Snipaste,一款简单强大的截图贴图利器 下载地址:Snipaste Codelf通过搜索在线开源平台Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Projec的项目源码,帮开发者从中找出已有的匹配的变量名。这个搜索服务支持直接搜索中文。codeif支持中文查询,输入中文意思,codeif可

    2024年02月12日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包