背景

通过添加下列类，可以快捷的变换背景颜色，如果是链接的话，鼠标移动上去会变暗

  • bg-primary 被修饰元素将会应到primary类，显示吃淡蓝色，文本颜色会变成白色。
  • bg-success 被修饰元素表示成功的信息，背景变成绿色
  • bg-info 被修饰元素背景颜色会变成淡蓝色
  • bg-warining 被修饰元素表示值得注意的信息，背景颜色变成土黄色
  • bg-danger 被修饰元素表示危险的信息，背景颜色会变成红色

其他

浮动

  • pull-left 元素浮动到左边

  • pull-right 元素浮动到右边

    内容居中

  • center-block 设置元素为display：block并居中显示

    清除浮动

  • clearfix 清除浮动

    显示和隐藏内容

  • show 显示元素（包括屏幕阅读器）

  • hidden 隐藏元素（包括屏幕阅读器）

    屏幕阅读器

  • sr-only 让元素对所有设备隐藏，除了屏幕阅读器

  • sr-only-focusable 在元素获得焦点的时候显示

    样式

  • close 会产生通用的关闭图标

  • caret 显示出通用的下拉框

Bootstrap学习笔记系列7-----Bootstrap简单背景CSS及其他辅助类的更多相关文章

  1. Bootstrap学习笔记系列3-------Bootstrap简单表单显示

    表单布局 垂直或基本表单 基本的表单结构时BootStrap自带的,创建基本表单的步骤如下: 向父<form>元素添加role = "form": 为了获取最佳的间距, ...

  2. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

  3. bootstrap学习笔记系列4------bootstrap按钮

    按钮标签 在<a>,<button>或input元素上使用按钮class.但是为了避免跨浏览器的不一致性,建议使用<button>标签. <!DOCTYPE ...

  4. bootstrap学习笔记<一>（bootstrap用法）

    首先引入bootstrap官网链接:http://www.bootcss.com/ bootstrap 3下载地址:http://v3.bootcss.com/getting-started/#dow ...

  5. Bootstrap学习笔记系列2-------Bootstrap简单表格处理

    标签 <table> 为表格添加基础样式 <thead> 表格标题行的容器元素,用来识别列 <tbody> 表格主提中的表格行的容器元素 <tr> 单行 ...

  6. Bootstrap学习笔记系列5------Bootstrap图片显示

    通过添加一下的class来实现bootstrap对图片的支持 img-round 通过border-radius:6px 来获得图片圆角 img-circle 通过border-radius:50%来 ...

  7. Bootstrap学习笔记系列6-----Bootstrap文本显示

    通过对文本或者链接添加下面的类,会使其展示不同的颜色,如果文本是个链接,鼠标移动到文本上,颜色会变暗. text-muted柔和的文本(深色) text-primary 表示基础的文本(蓝色) tex ...

  8. bootstrap学习笔记<八>（bootstrap核心布局风格——栅格系统）

    栅格系统(bootstrap的核心之一,也是bootstrap的主要布局风格) 栅格系统是对原有div布局的升级版.打破了传统div模式只能纵向垂直排列的弊端,大大提高了页面布局的速度和效果,也很好的 ...

  9. Bootstrap学习笔记(二) 表单

    在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...

随机推荐

  1. Windows 安装 MongoDB 服务

    第一步 以管理员权限打开命令提示符 按Windows+R键(Ctrl和Alt中间的那个,有微软Logo的键),输入cmd打开命令提示符 第二步 创建数据库目录. 使用mkdir命令,创建数据库的目录和 ...

  2. 使用ViwePager显示图片时如何防止内存泄露。

    内存泄露的检测. 1. 在Android Studio中运行你的应用,然后切换到输出窗口的Android tab. 2. 尽情的玩耍你的应用,最好各个功能都用到,如果是Viewpager,则多滑动一些 ...

  3. 如何把IP转换成经纬度（Java版）

    经常有这种需求,拥有用户的IP地址,想要在地图上显示用户的访问量.这个时候就需要用到经纬度...应为一般的地图插件都是基于经纬度的. 那么问题来了,如何把IP转换成经纬度? 百度API 最国产的方式, ...

  4. “胡”说IC——菜鸟工程师完美进阶

    “胡”说IC——菜鸟工程师完美进阶(数十位行业精英故事分享,顶级猎头十多年来经验总结,对将入或初入IC电子业“菜鸟”职业发展.规划的解惑和点拨.) 胡运旺 编著   ISBN 978-7-121-22 ...

  5. PHP 环境塔建

    快速搭建环境可用软件 每种语言的第一步都是要先搭建环境 WAMP(windows系统下搭建php开发环境): APPSERVER L(Linux)A(Apache)M(Mysql)P(Php)架构 P ...

  6. Python中的参数

    Python中的参数 1. python函数参数有多重形式: * test(arg1,arg2,`*args`) * test(arg1,arg2,`*args`,`**kwargs`) 2. 其中比 ...

  7. Sqlserver 中exists 和 in

    如图,现在有两个数据集,左边表示#tempTable1,右边表示#tempTable2.现在有以下问题: 1.求两个集的交集? 2.求tempTable1中不属于集#tempTable2的集? 先创建 ...

  8. KnockoutJS 3.X API 第四章 表单绑定(10) textInput、hasFocus、checked绑定

    textInput绑定目的 textInput绑定主要用于<input>或者<textarea>元素.他提供了DOM和viewmodel的双向更新.不同于value绑定,tex ...

  9. ssh(sturts2_spring_hibernate) 框架搭建之hibernate1

    一.hibernate简单了解: ⑴.hibernate一个java领域里面的一个持久化的ORM框架. 持久化:就是对对象的数据修改,hibernate会把修改的数据同步到数据库中. ORM:Obje ...

  10. Oracle Dataguard之switchover

    Oracle Dataguard的角色转换包含两类:Switchover和Failover.Switchover指主备之间角色转换,主库降为备库,备库升级为主库.而failover则是指主库出现问题时 ...