Bootstrap响应式工具类

2024-06-02 13:56:52

响应式工具类

Bootstrap提供了响应式类和打印机类。使用响应式类，可以针对不同设备显示或隐藏某些内容。使用工具类，可以针对打印机和浏览器显示或隐藏某些内容。

有针对性的使用这些工具类，可用避免为同一个网站创建完全不同的版本。相反，通过使用这些工具类，可以在不同设备上提供不同的展现形式。

响应式类

响应式类中，以.visible-开头的类表示仅在某尺寸的屏幕上显示，在其他屏幕上都隐藏；以.hidden-开头的类表示仅在某尺寸的屏幕上隐藏，在其他屏幕上都显示。通过单独或联合使用下表中列出的类，可以针对不同屏幕尺寸隐藏或显示页面内容。

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

因此，以超小屏幕（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基本相同。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。

Bootstrap响应式工具类相关推荐

Bootstrap响应式测试用例
测试用例调整你的浏览器窗口大小,或者用其他设备打开页面,都可以测试这些响应式工具类. 带有绿色标记的元素,表示其在当前浏览器视口(viewport)中是可见的. 带有绿色标记的元素,表示其在当前浏览 ...
Web前端快速开发 Bootstrap 响应式UI框架
文章目录前言 Bootstrap介绍 Bootstrap3 Bootstrap 响应式UI框架使用布局容器栅格系统响应式工具类 bootstrap4 bootstrap5 变化的内容前言 ...
Bootstrap全局css样式_图片，响应式工具
响应式图片在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.<!DOCTYPE html> <html lang=& ...
bootstrap的栅格系统和响应式工具
关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下一:meta标签的引用 < ...
Bootstrap(全局CSS之表单按钮图片辅助类响应式工具)
表单基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...
Bootstrap 响应式开发(2021.10.13)
目录一.响应式开发 1.框架含义 2.响应式 3.响应式尺寸划分二.Bootstrap简介 1.Bootstrap概念 2.查阅Bootstrap文档 3.Bootstrap的使用 (1)创建文件 ...
Bootstrap响应式Web开发(一)
Bootstrap响应式Web开发(一) 目录 Bootstrap响应式Web开发(一) 一.Bootstrap的概念.特点及组成二.浏览器三.Visual Studio Code 四.移动端开发 ...
全局CSS之表单按钮图片辅助类响应式工具)
前言: 本节课我们接着上节课内容继续讲全局CSS的样式,今天主要讲表单.按钮.图片.辅助类.以及响应式工具 1. 表单 1.1基本表单 class="form-control" ...
Bootstrap_03_(全局CSS之表单按钮图片辅助类响应式工具)
表单基本表单 class="form-control":可以给<input>.<textarea>.<select>元素设置宽度为100% 示 ...

最新文章

热门文章