背景

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

  • 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. python property

    python property 在2.6版本中,添加了一种新的类成员函数的访问方式--property. 原型 class property([fget[, fset[, fdel[, doc]]]] ...

  2. [安卓] 18、一个简单的例子做自定义动画按钮和自定义Actionbar

    在做安卓UI的时候有时候需自定义具有动画效果的按钮或需要自定义一下actionbar~ 本节用一个简单的demo讲如何自定义具有动画效果的按钮,以及个性化的actionbar 下面是效果: 其中: △ ...

  3. NanoProfiler - 适合生产环境的性能监控类库 之 大数据篇

    上期回顾 上一期:NanoProfiler - 适合生产环境的性能监控类库 之 基本功能篇 上次介绍了NanoProfiler的基本功能,提到,NanoProfiler实现了MiniProfiler欠 ...

  4. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  5. Senparc.Weixin.MP SDK 微信公众平台开发教程（十五）：消息加密

    前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...

  6. cordova 版本

    cordova 版本 npm install cordova@xxxx https://travis-ci.org/apache/cordova-cli https://www.npmjs.com/p ...

  7. 安卓学习进程（2）Android开发环境的搭建

        本节将分为五个步骤来完成Android开发环境的部署. 第一步:安装JDK. 第二步:配置Windows上JDK的变量环境 . 第三步:下载安装Eclipse . 第四步:下载安装Androi ...

  8. 关于移动开发的一些想法和认识--Android和iOS

    微信公众账号很久没更新了,发一点自己最近的想法和内容. 之前和朋友做了一个项目,现在在跟一些风投,大公司里面的几家在谈合作和投资的事宜,从这个过程中也了解到了一些信息. 关于移动平台的应用开发与游戏开 ...

  9. 免费在线loading生成。

    loading这个在项目中也是经常要使用,这里推荐一个网站http://www.ajaxload.info/可以在线生成loading. 进来页面是这样的. 勾选transparent将会生成透明的g ...

  10. javascript中的错误处理机制

    × 目录 [1]对象 [2]类型 [3]事件[4]throw[5]try[6]常见错误 前面的话 错误处理对于web应用程序开发至关重要,不能提前预测到可能发生的错误,不能提前采取恢复策略,可能导致较 ...