一.辅助类
Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置、显示关闭图标等等。
1.情景文本颜色
各种色调的字体
        <p class="text-muted">柔和灰</p>
<p class="text-primary">主要蓝</p>
<p class="text-success">成功绿</p>
<p class="text-info">信息蓝</p>
<p class="text-warning">警告黄</p>
<p class="text-danger">危险红</p>

情景背景色
各种色调的背景
<p class="bg-primary">主要蓝</p>
<p class="bg-success">成功绿</p>
<p class="bg-info">信息蓝</p>
<p class="bg-warning">警告黄</p>
<p class="bg-danger">危险红</p>

关闭按钮,一般都是在右边
<button type="button" class="close">&times;</button>

.三角符号
<span class="caret"></span>

快速浮动
<div class="pull-left">左边</div>
<div class="pull-right">右边</div>

注:这个浮动其实就是 float,只不过使用了!important 加强了优先级。
 
块级居中
<div class="center-block" style="width:500px;height:50px;border: 1px solid #ccc;text-align: center;">
居中
</div>
注:就是 margin:x auto;并且设置了 display:block;。它是整个div居中,如果要div的内容居中则设置text-align: center;
 

显示和隐藏
<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(6)辅组类和响应式工具的更多相关文章

  1. 第二百三十六节,Bootstrap辅组类和响应式工具

    Bootstrap辅组类和响应式工具 学习要点: 1.辅组类 2.响应式工具 本节课我们主要学习一下 Bootstrap 的辅组类和响应式工具,辅助类提供了一组类来辅 组页面设计,而响应式工具则利用媒 ...

  2. Bootstrap 辅组类和响应式工具

    1.情景文本颜色 //各种色调的字体 <p class="text-muted">Bootstrap 视频教程</p> <p class=" ...

  3. bootstrap——辅助类和响应式工具类

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. bootstrap 响应式工具

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 借鉴bootstrap的方法,快速实现响应式开发

    响应式开发 注意:任何框架都是一个辅助手段,只需借鉴其中的核心思想,把其中核心的东西提炼出来即可.不要因为,提到响应式就想到只能够用bootstrap来实现,框架现有的东西是可以提高我们的效率,但是其 ...

  6. bootstrap 学习笔记(5)---- 图片和响应式工具

    (一)响应式图片: 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局.其实质是为图片设置了 max-width: 100%;. heig ...

  7. bootstrap的栅格系统和响应式工具

    关于bootstrap的响应式布局,昨天看了杨老师的视频教学https://www.bilibili.com/video/av18357039豁然开朗,在这里记录一下 一:meta标签的引用 < ...

  8. Bootstrap内辅助类,响应式工具,组件的个人总结

    辅助类(工具类): 文本颜色: <p class="text-muted">Fusce dapibus, tellus ac cursus commodo, torto ...

  9. 2017年最新基于Bootstrap 4 的专业、多用途响应式布局的系统模板

    本文分享一款2017年最新的2017年最新基于Bootstrap 4 的专业.多用途响应式布局的系统模板,该模板是一款强大并且非常灵活的后台管理系统模板:能适应绝大多数的web应用程序开发,比如:AP ...

随机推荐

  1. 解决 'Could not convert variant of type (NULL) into type (String)

    写存储过程中有不允许为空的字段,在客户端转化取数时显示 Could not convert variant of type (NULL) into type (String) 可以在存储过程中使用is ...

  2. RTS寻路相关资料收集

    http://www.cocoachina.com/game/20150824/13174.html RVO算法 RVO避开agent

  3. mssqlservers数据嗅探

    SQL Server - 最佳实践 - 参数嗅探问题 转.   文章来自:https://yq.aliyun.com/articles/61767 先说我的问题,最近某个存储过程,暂定名字:sp_a ...

  4. openwrt手动wifi设成client模式[笔记]

    说明:刚刷好的OPENWRT,默认是不带luci-web管理的,所以得手工SSH或TELNET上去改WIFI模式,以便通过WIFI连到现有的ROUTER去下载安装luci...: root@OpenW ...

  5. Oracle数据库操作总是显示运行中无法成功,删除表时报错 resource busy and acquire with NOWAIT specified

    1.直接运行以下语句: select t2.username,t2.sid,t2.serial#,t2.logon_timefrom v$locked_object t1,v$session t2wh ...

  6. SPSS-非参数检验

    非参数检验(卡方(Chi-square)检验.二项分布(Binomial)检验.单样本K-S(Kolmogorov-Smirnov)检验.单样本变量值随机性检验(Runs Test).两独立样本非参数 ...

  7. 定时删除文件夹"$1"下最后修改时间大于当前时间"$2"天的文件

    shell 脚本: #!/bin/bash now=`date "+%Y-%m-%d_%H:%M:%S"`      #获取当前时间 echo "当前时间: " ...

  8. Socket通讯-Netty框架实现Java通讯

    Netty简介 Netty是由JBOSS提供的一个java开源框架.Netty提供异步的.事件驱动的网络应用程序框架和工具,用以快速开发高性能.高可靠性的网络服务器和客户端程序. 也就是说,Netty ...

  9. ./configure: error: the HTTP rewrite module requires the PCRE library解决

    ./configure: error: the HTTP rewrite module requires the PCRE library解决   有时候,我们需要单独安装nginx,来处理大量的下载 ...

  10. Building and using plug-ins for Android

    [Building and using plug-ins for Android] 1.AAR plug-ins and Android Libraries Android Archive (AAR) ...