首页 > 其他分享 >【Bootstrap】010-全局样式:响应式工具

【Bootstrap】010-全局样式:响应式工具

时间:2023-02-22 17:32:08浏览次数:43  
标签:... 针对 样式 Bootstrap 010 测试用例 工具 隐藏 页面


目录

​​一、说明​​

​​二、可用的类​​

​​三、打印类​​

​​四、测试用例​​

​​1、在...上可见​​

​​2、在...上隐藏​​


一、说明

为了加快对移动设备友好的页面开发工作,利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。另外还包含了针对打印机显示或隐藏内容的工具类;

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

 

二、可用的类

通过单独或联合使用以下列出的类,可以针对不同屏幕尺寸隐藏或显示页面内容;

【Bootstrap】010-全局样式:响应式工具_响应式

【Bootstrap】010-全局样式:响应式工具_测试用例_02

 

三、打印类

和常规的响应式类一样,使用下面的类可以针对打印机隐藏或显示某些内容;

【Bootstrap】010-全局样式:响应式工具_bootstrap_03

 

四、测试用例

调整你的浏览器大小,或者用其他设备打开页面,都可以测试这些响应式工具类;

1、在...上可见

【Bootstrap】010-全局样式:响应式工具_测试用例_04

 

2、在...上隐藏

带有绿色标记的元素表示其在当前浏览器视口(viewport)中是隐藏的;

【Bootstrap】010-全局样式:响应式工具_测试用例_05

 

 

 

 

 

 

 

 

标签:...,针对,样式,Bootstrap,010,测试用例,工具,隐藏,页面
From: https://blog.51cto.com/u_13272819/6079273

相关文章

  • 【Bootstrap】009-全局样式:辅助类
    目录​​一、情境文本颜色​​​​1、说明​​​​2、演示​​​​代码演示:​​​​运行结果:​​​​3、处理差异​​​​4、向辅助技术传递意义​​​​二、情景背景色​​......
  • 【Bootstrap】008-全局样式:图片
    一、响应式图片1、说明在Bootstrap版本3中,通过为图片添加.img-responsive类可以让图片支持响应式布局。其实质是为图片设置了max-width:100%;、height:auto;和d......
  • 【MySQL】010-数据库设计的三大范式
    一、范式概述范式,数据库设计范式,数据库的设计范式,是符合某一种级别的关系模式的集合。构造数据库必须遵循一定的规则。在关系数据库中,这种规则就......
  • E010Web学习笔记-Tomcat
    一、web相关概念回顾1、软件架构C/S架构:客户端/服务器端;B/S架构:浏览器/服务端;浏览器内含静态资源解析引擎;浏览器请求数据,服务器响应来自浏览器的请求; 2、资源......
  • npm install bootstrap --save 提示依赖冲突报错
    错误如下图:依赖版本:npm版本是8.0以上的问题原因:npm8以上会检查一些包的对应关系。大佬给的解决方案如下:遇到这种情况,建议重装就好,npm8以上会检查一些包的对应关......
  • pat1010
    题不难,但是代码有一个结果报错,猜测可能如果输入0000234的话,可能会输出-1?先标记一下看看别人的#include<iostream>#include<stdio.h>usingnamespacestd;intmain(......
  • JQuery事件绑定&入口函数&样式控制与JQuery_选择器_基本选择器
    JQuery事件绑定&入口函数&样式控制4.选择器:筛选具有相似特征的元素(标签)1.基本操作学习: 1.事件绑定 2.入口函数  ......
  • 【Vue】Vue开源样式库 Vuex的使用 vuex的执行流程 Vue-router的使用 路由跳转 路由守
    目录昨日回顾纯净的Vue项目今日内容0开源样式库1Vuex的使用1.1vuex的执行流程图Vuex的使用购物车案例2Vue-router的使用2.1基本使用2.2路由的跳转传入字符串进行跳......
  • 开心档之Bootstrap4 自定义表单
    Bootstrap4自定义表单Bootstrap4可以自定义一些表单的样式来替换浏览器默认的样式。 自定义复选框如果要自定义一个复选框,可以设置<div>为父元素,类为.custom-c......
  • P2602 [ZJOI2010] 数字计数:数位DP
    https://www.luogu.com.cn/problem/P2602//#include<iostream>//#include<iomanip>//#include<unistd.h>//#include<climits>//#include<string>//#inclu......