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

目录

一、说明

二、可用的类

三、打印类

四、测试用例

1、在...上可见

2、在...上隐藏


一、说明

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

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

 

二、可用的类

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

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

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

 

三、打印类

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

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

 

四、测试用例

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

1、在...上可见

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

 

2、在...上隐藏

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

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