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


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 相关文章推荐
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
smartupload实现文件上传时获取表单数据(推荐)
Dec 12 Javascript
详解Angular2中Input和Output用法及示例
May 21 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
Jul 21 Javascript
老生常谈js中的MVC
Jul 25 Javascript
详解vue + vuex + directives实现权限按钮的思路
Oct 24 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
Nov 06 Javascript
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
用Vue.js在浏览器中实现裁剪图像功能
Jun 18 Javascript
第七章之菜单按钮图标组件
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
真正根据utf8编码的规律来进行截取字符串的函数(utf8版sub_str )
2012/10/24 PHP
在Linux系统的服务器上隐藏PHP版本号的方法
2015/06/06 PHP
PHP如何实现订单的延时处理详解
2017/12/30 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js实现倒计时(距离结束还有)示例代码
2013/07/24 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
Egret引擎开发指南之编译项目
2014/09/03 Javascript
JQuery包裹DOM节点的方法
2015/06/11 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
Vue中之nextTick函数源码分析详解
2017/10/17 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
vue组件开发之tab切换组件使用详解
2020/08/21 Javascript
如何利用JS将手机号中间四位变成*号
2020/09/29 Javascript
python中字符串数组逆序排列方法总结
2019/06/23 Python
pytorch 图像中的数据预处理和批标准化实例
2020/01/15 Python
如何基于pythonnet调用halcon脚本
2020/01/20 Python
python入门之基础语法学习笔记
2020/02/08 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
css3实例教程 一款纯css3实现的发光屏幕旋转特效
2014/12/07 HTML / CSS
销售内勤岗位职责
2014/04/15 职场文书
服务理念口号
2014/06/11 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015年学校总务处工作总结
2015/05/19 职场文书
怎样写好工作计划
2019/04/10 职场文书
党组织关系的介绍信模板
2019/06/21 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL
交互式可视化js库gojs使用介绍及技巧
2022/02/18 Javascript