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

本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅
组页面设计,而响应式工具则利用媒体查询显示或隐藏某些内容 。
一.辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置、
显示关闭图标等等。
1.情景文本颜色
样式列表
样式名 描述
text-muted 柔和灰
text-primary 主要蓝
text-success 成功绿
text-info 信息蓝
text-warning 警告黄
text-danger 危险红
//各种色调的字体
<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.情景背景色
样式列表
样式名 描述
bg-primary 主要蓝
bg-success 成功绿
bg-info 信息蓝
bg-warning 警告黄
bg-danger 危险红
//各种色调的背景
<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">&times;</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。
时间: 2024-09-30 03:38:27

第6章 辅助类和响应式工具的相关文章

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

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

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

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

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

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

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

辅组类和响应式工具

一.辅助类Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等.1.情景文本颜色//各种色调的字体<p class="text-muted">Bootstrap 视频教程</p><p class="text-primary">Bootstrap 视频教程</p><p class="text-success">Bootstrap 视频教程&

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

Ext JS 6学习文档-第8章-主题和响应式设计

主题和响应式设计 本章重点在 ExtJS 应用的主题和响应式设计.主要有以下几点内容: SASS 介绍和入门 主题 响应式设计 转载请注明出处:http://www.jeeboot.com/archives/1231.html SASS 介绍和入门 SASS (Syntactically Awesome Stylesheets) 是一个样式语言,当你使用 SASS 代替 CSS 来写样式,之后 SASS 将使用编译器编译成 CSS ,SASS 有更好的语法和一组特性使我们更容易编写样式.同时维护

十二章:构建响应式网站

响应式网页可以根据浏览设备的不同而灵活的改变尺寸.省去了重新编写网页的麻烦. 1.响应式页面的组成: (1)灵活的图像和媒体. (2)灵活的.基于网格的布局,也就是流式布局. (3)媒体查询. 2.创建可伸缩图像: 对任何想做成可伸缩图像的图像,在HTML的img标签中省略width和height属性,在样式表中,为每个想做成可伸缩图像应用:max-width:100%.还可以使用video.embed.object{max-width:100%:}让HTML5视频及其他媒体变成可伸缩. 3.创

第 20 章 项目实战--响应式轮播图[2]

学习要点: 1.响应式轮播图 主讲教师:李炎恢 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 //响应式轮播图 <div id="myCarousel" class="carousel slide"> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to=&qu