bootstrap辅助类和响应式工具
来源:互联网 发布:豚丫丫这款软件好吗 编辑:程序博客网 时间:2024/06/01 19:54
学习笔记
一.辅助类
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 辅助类和响应式工具
- bootstrap辅助类和响应式工具
- Bootstrap辅助类和响应式工具
- bootstrap辅助类和响应式工具
- Bootstrap-辅助类和响应工具
- Bootstrap之辅助类样式,响应式工具和小图标组件
- BootStrap(2)——图片、辅助类、响应式工具、表单
- 第六章.辅助类和响应式工具
- Bootstrap-CSS-按钮-图片-辅助类-响应式
- bootstrap响应式工具
- css中辅助类和响应式工具所有测试方法案例
- Bootstrap学习-响应式工具
- bootstrap-内联表单 水平(横向)表单 响应式图片 辅助类
- Bootstrap辅助类
- Bootstrap辅助类
- bootstrap 辅助类
- Bootstrap学习-辅助类
- bootstrap辅助类
- dfa
- 转:centos7.2安装jdk1.6和/etc/profile不生效问题
- serialize()中文乱码
- django生成项目文件
- 梯度下降法
- bootstrap辅助类和响应式工具
- 学生信息管理系统总结1安装SQL server
- 关于zsh的一些配置
- python web后台 技术栈
- Java中String、StringBuffer和StringBuilder的区别
- vb.net窗体位于屏幕中间
- Mybatis分页实现中的几个注意点
- NoClassDefFoundError: org.apache.flink.streaming.connectors.kafka.FlinkKafkaConsumer09
- vue调用jquery click