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


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 相关文章推荐
Google Dart编程语法和基本类型学习教程
Nov 27 Javascript
jquery仿百度经验滑动切换浏览效果
Apr 14 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
javascript 封装Date日期类实例详解
May 28 Javascript
Node层模拟实现multipart表单的文件上传示例
Jan 02 Javascript
详解如何用VUE写一个多用模态框组件模版
Sep 27 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 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
Windows下的PHP5.0详解
2006/11/18 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
PHP实现在线阅读PDF文件的方法
2015/06/17 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
如何通过PHP实现Des加密算法代码实例
2020/05/09 PHP
jQuery实现页面滚动时层智能浮动定位实例探讨
2013/03/29 Javascript
javascript分页代码实例分享(js分页)
2013/12/13 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JS实现完全语义化的网页选项卡效果代码
2015/09/15 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
react-router JS 控制路由跳转实例
2017/06/15 Javascript
jquery animate动画持续运动的实例
2017/11/29 jQuery
webstorm和.vue中es6语法报错的解决方法
2018/05/08 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python让图片按照exif信息里的创建时间进行排序的方法
2015/03/16 Python
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
python初学之用户登录的实现过程(实例讲解)
2017/12/23 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Python tkinter常用操作代码实例
2020/01/03 Python
python map比for循环快在哪
2020/09/21 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
GOOD AMERICAN官网:为曲线性感而设计
2017/12/28 全球购物
C语言开发工程师测试题
2016/12/20 面试题
顶碗少年教学反思
2014/02/21 职场文书
毕业生欢送会主持词
2014/03/31 职场文书
公证委托书格式
2014/09/13 职场文书
英文邀请函
2015/02/02 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python