第六章之辅组类与响应式工具


Posted in Javascript onApril 25, 2016

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

学习要点:

1.辅组类

2.响应式工具

本节课我们主要学习一下 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">×</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。

以上所述是小编给大家介绍的BootStrap组件之辅组类与响应式工具的相关内容,希望对大家有所帮助!

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
jquery图片切换插件
Mar 16 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
Jul 27 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
深入理解Vue Computed计算属性原理
May 29 Javascript
vue实现绑定事件的方法实例代码详解
Jun 20 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
第七章之菜单按钮图标组件
Apr 25 #Javascript
第九章之路径分页标签与徽章组件
Apr 25 #Javascript
Bootstrap每天必学之轮播(Carousel)插件
Apr 25 #Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 #Javascript
Bootstrap每天必学之附加导航(Affix)插件
Apr 25 #Javascript
Bootstrap项目实战之子栏目资讯内容
Apr 25 #Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 #Javascript
You might like
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP删除HTMl标签的三种解决方法
2013/06/30 PHP
php中并发读写文件冲突的解决方案
2013/10/25 PHP
PHP配置把错误日志以邮件方式发送方法(Windows系统)
2015/06/23 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
Flash对联广告的关闭按钮讨论
2007/01/30 Javascript
JavaScript arguments 多参传值函数
2010/10/24 Javascript
JQuery触发radio或checkbox的change事件
2012/12/18 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JS判断表单输入是否为空(示例代码)
2013/12/23 Javascript
jquery向上向下取整适合分页查询
2014/09/06 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
angularJS深拷贝详解
2017/03/23 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
pymysql的简单封装代码实例
2020/01/08 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
解决pytorch多GPU训练保存的模型,在单GPU环境下加载出错问题
2020/06/23 Python
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
阿里巴巴美国:Alibaba美国
2019/11/24 全球购物
法国购买二手电子产品网站:Asgoodasnew
2020/03/27 全球购物
大学生职业生涯规划书模板
2014/01/03 职场文书
有多年工作经验的自我评价
2014/03/02 职场文书
海飞丝广告词
2014/03/20 职场文书
大学新生入学教育方案
2014/05/16 职场文书
商场营业员岗位职责
2015/04/14 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
初级职称评定工作总结
2015/08/13 职场文书
小学英语教师研修感悟
2015/11/18 职场文书