辅组类和响应式工具

一.辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置、显示关闭图标等等。
1.情景文本颜色

//各种色调的字体
<p class="text-muted">Bootstrap 视频教程</p>
<p class="text-primary">Bootstrap 视频教程</p>
<p class="text-success">Bootstrap 视频教程</p>
<p class="text-info">Bootstrap 视频教程</p>
<p class="text-warning">Bootstrap 视频教程</p>
<p class="text-danger">Bootstrap 视频教程</p>
2.情景背景色

//各种色调的背景
<p class="bg-primary">Bootstrap 视频教程</p>
<p class="bg-success">Bootstrap 视频教程</p>
<p class="bg-info">Bootstrap 视频教程</p>
<p class="bg-warning">Bootstrap 视频教程</p>
<p class="bg-danger">Bootstrap 视频教程</p>
3.关闭按钮
<button type="button" class="close">×</button>

4.三角符号
<span class="caret"></span>

5.快速浮动
<div class="pull-left">左边</div>
<div class="pull-right">右边</div>
注:这个浮动其实就是 float,只不过使用了!important 加强了优先级。

6.块级居中
<div class="center-block">居中</div>
注:就是 margin:x auto;并且设置了 display:block;。

7.清理浮动
<div class="clearfix"></div>
注:这个 div 可以放在需要清理浮动区块的前面即可。

8.显示和隐藏
<div class="show">show</div>
<div class="hidden">hidden</div>
响应式工具
在媒体查询时,针对不同的屏幕大小,有时需要显示和隐藏部分内容。响应式工具类, 就提供了这种解决方案。

//超小屏幕激活显示
<div class="visible-xs-block a">Bootstrap</div>

//超小屏幕激活隐藏
<div class="hidden-xs a">Bootstrap</div>

注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。

原文地址:http://blog.51cto.com/8818968/2116106

时间: 2024-10-28 16:27:12

辅组类和响应式工具的相关文章

第二百三十六节,Bootstrap辅组类和响应式工具

Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色

第 6 章 辅组类和响应式工具

学习要点: 1.辅组类 2.响应式工具 主讲教师:李炎恢 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具, 辅助类提供了一组类来辅组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容. 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 样式列表 样式名描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text

Bootstrap 辅组类和响应式工具

1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class="text-primary">Bootstrap 视频教程</p> <p class="text-success">Bootstrap 视频教程</p> <p class="text-info">Bootst

第6章 辅助类和响应式工具

本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容 . 一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置. 显示关闭图标等等. 1.情景文本颜色 样式列表 样式名 描述 text-muted 柔和灰 text-primary 主要蓝 text-success 成功绿 text-info 信息蓝 text-warning 警告黄 text-danger 危

bootstrap 学习笔记(5)---- 图片和响应式工具

(一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放. 注意:如果需要让使用了 .img-responsive 类的图片水平居中,请使用 .center-block 类,不要用 .text-center 代码:<img src="..." c

Bootstrap 辅助类和响应式工具(四)

一.辅助类 <div class="container"> <p class="text-muted">Bootstrap练习系统学习,没有bg-muted 类别</p> <p class="bg-success text-success">Bootstrap练习系统学习</p> <p class="bg-danger text-danger">Boots

移动web——bootstrap响应式工具

基本介绍 1.利用媒体查询功能并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容. 基本使用 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=&

7款响应式网页测试工具

响应式设计几乎是当代网页设计的基础构成之一.在实际设计和开发的过程中,想要让网站按照设计响应不同尺寸屏幕,设计师和前端需要花费相当的时间来进行测试和优化.所以,今天我们搜集了7款功能强大的响应式页面测试工具,下面就一一介绍一下. 1. XRESPOND 这款名为 XRespond 的工具自称为“虚拟设备实验室”,这个称号其实是名副其实的. 通过Xrespond 打开网页,你可以看到它在不同屏幕尺寸下的样子,整个布局是横向的,所以你需要横向滚动页面才能看到它所有的样子. 屏幕上方的标签会标识出它是

【前端】响应式媒体查询

响应式媒体查询 媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> <link rel="stylesheet&