第六章之辅组类与响应式工具
时间:2019-03-24
本文章向大家介绍第六章之辅组类与响应式工具,主要包括第六章之辅组类与响应式工具使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
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 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 来来来,让咱重新认识一下算法的复杂度!
- 带你通过字节跳动面试---操作系统复习
- Java 8 中的接口和抽象类到底有啥区别?
- Android自定义View实现简单炫酷的球体进度球实例代码
- 详解android 中文字体向上偏移解决方案
- Android自定义控件仿ios下拉回弹效果
- 当飞桨PaddleHub遇到微信小程序,AI也能指物作诗
- Android仿QQ好友详情页下拉顶部图片缩放效果
- 数组对象转为Map
- TensorFlow2.X使用图片制作简单的数据集训练模型
- Android高性能日志写入方案的实现
- MySQL 三万字精华总结 + 面试100 问,吊打面试官绰绰有余(收藏系列)
- 想后台运行没想到导致磁盘满了
- 来看一道"简单的"C语言面试题
- 这行代码的打印结果确实让人迷惑!