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


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 相关文章推荐
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
ParseInt函数参数设置介绍
Jan 02 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 Javascript
js友好的时间返回函数
Aug 24 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
May 01 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
vue webpack打包后图片路径错误的完美解决方法
Dec 07 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 Javascript
AI小程序之语音听写来了,十分钟掌握百度大脑语音听写全攻略
Mar 13 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
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php像数组一样存取和修改字符串字符
2014/03/21 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
Javascript 的addEventListener()及attachEvent()区别分析
2009/05/21 Javascript
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
轻量级javascript 框架Backbone使用指南
2015/07/24 Javascript
jquery mobile 实现自定义confirm确认框效果的简单实例
2016/06/17 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
Python实现国外赌场热门游戏Craps(双骰子)
2015/03/31 Python
flask框架使用orm连接数据库的方法示例
2018/07/16 Python
Python BS4库的安装与使用详解
2018/08/08 Python
python实发邮件实例详解
2019/11/11 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python3.7安装PyQt5 运行配置Pycharm的详细教程
2020/10/15 Python
柯基袜:Corgi Socks
2017/01/26 全球购物
大学校园活动策划书
2014/02/04 职场文书
渡河少年教学反思
2014/02/12 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
运动员口号
2014/06/09 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2016年党建工作简报
2015/11/26 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
pytorch DataLoader的num_workers参数与设置大小详解
2021/05/28 Python
这样写python注释让代码更加的优雅
2021/06/02 Python
python图片灰度化处理的几种方法
2021/06/23 Python