1.情景文本颜色

//各种色调的字体

<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.情景背景色

//各种色调的背景

<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">&times;</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 ">Bootstrap</div>

//超小屏幕激活隐藏

<div class="hidden-xs ">Bootstrap</div>

注:对于显示的内容,有三种变体,分别为:block、inline-block、inline。

Bootstrap 辅组类和响应式工具的更多相关文章

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

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

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

    一.辅助类 Bootstrap 在布局方面提供了一些细小的辅组样式,用于文字颜色以及背景色的设置.显示关闭图标等等. 1.情景文本颜色 各种色调的字体 <p class="text-m ...

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

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

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

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

  5. bootstrap 响应式工具

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

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

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

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

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

  8. bootstrap_栅格系统_响应式工具_源码分析

    -----------------------------------------------------------------------------margin 为负 ​使盒子重叠 ​等高 等高 ...

  9. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

随机推荐

  1. 【JNI】C向C++改造

    步骤: 1. 把c文件后缀名换成cpp2. Android.mk文件中的hello.c也要换成hello.cpp3. c++的使用的环境变量结构体中,访问了c使用的结构体的函数指针,函数名全部都是一样 ...

  2. DOS常用的简单命令

    在windows下的cmd里使用 dir 列出当前目录下的文件及文件夹 md 创建目录 rd 删除目录(只能删除空目录) cd 进入指定目录 cd .. 返回上一级目录 cd / 返回到根目录 del ...

  3. jmeter断言

    响应断言:检查的内容,如果是变量,设置为变量 断言结果:断言的结果 断言持续时间:请求事件不能超过设置的断言持续时间 Size Assertion:断言字节大小

  4. 解决修改重命名sql Server数据库名称

    错误: 消息 5030,级别 16,状态 2,第 1 行无法用排他锁锁定该数据库,以执行该操作. 解决方法:(原理一样) 1.将数据库设置为单用户模式 (单用户模式指定一次只有一个用户可访问数据库,该 ...

  5. C# 方法调用的切换器 Update 2015.02.02

    在编写应用程序时,我们经常要处理这样的一组对象,它们的类型都派生自同一个基类,但又需要为每个不同的子类型应用不同的处理方法. 通常的做法,最简单的就是用很多 if-else 去判断各自的类型,如下面的 ...

  6. MD5算法 简介

    MD5(单向散列算法)的全称是Message-Digest Algorithm 5(信息-摘要算法),经MD2.MD3和MD4发展而来.MD5算法的使用不需要支付任何版权费用. MD5功能 l 输入任 ...

  7. Ubuntu14.04 Server amd64 配置 Apache+MySQL+Django

    写在前面 因为不同版本的apache等软件文件夹和配置文件的名称设置都不尽相同,网上累死累活查了好多个博客就没一个能成功配出来的. 所以本文也不一定能帮到你,请在确定对自己有用之前不要盲目转载,以免给 ...

  8. velocity 判断 变量 是否不是空或empty

    原先的 #if($mobile) 这种写法是不准确的 ,请换成 "$!{ mobile}"!="" 说明 :    #if($mobile)   这种写法 只能 ...

  9. 自己的一份Spring的xml配置文件

    <?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.spr ...

  10. javascript,HTML,PHP,ASP做301跳转代码 SEO优化设置

    URL HTTP Redirection URL http redirection is an automatic URL change operation from one URL to anoth ...