第六章之辅组类与响应式工具
更新时间：2016年04月25日 10:21:10 作者：水之原
Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。本文给大家介绍BootStrap组件之辅组类与响应式工具，感兴趣的朋友一起学习吧
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实现tab切换的四种方法，并且对每个方法进行了评价，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了小程序自定义组件实现城市选择功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
这篇文章主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下2015-11-11
JavaScript实现简易轮播图最全代码解析(ES6面向对象)
这篇文章主要为大家详细介绍了JavaScript实现简易轮播图最全代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
这篇文章主要为大家介绍了JS前端的内存处理的方法全面详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要介绍了JS实现数组按升序及降序排列的方法,涉及javascript针对数组的简单排序操作相关实现技巧,需要的朋友可以参考下2017-04-04
这篇文章主要为大家详细介绍了JavaScript canvas实现跟随鼠标移动小球，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-02-02
这篇文章主要为大家详细介绍了使用JavaScript实现时间格式的切割与转换的相关知识,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-04-04
本文给大家介绍的是去年很火的一款小游戏--2048用javascript实现的思路以及代码，有需要的小伙伴可以参考下。2015-07-07
下文是base64用javascript写出来的函数和方法。非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-06-06
最新评论