3.Bootstrap-CSS之辅助

一些可能会派上用场的辅助类:

文本类:如果文本是个链接鼠标移动到文本上会变暗。

.text-muted "text-muted" 类的文本样式
.text-primary "text-primary" 类的文本样式
.text-success "text-success" 类的文本样式
.text-info "text-info" 类的文本样式
.text-warning "text-warning" 类的文本样式
.text-danger "text-danger" 类的文本样式

背景类:

.bg-primary 表格单元格使用了 "bg-primary" 类
.bg-success 表格单元格使用了 "bg-success" 类
.bg-info 表格单元格使用了 "bg-info" 类
.bg-warning 表格单元格使用了 "bg-warning" 类
.bg-danger 表格单元格使用了 "bg-danger" 类

其他:

.pull-left 元素浮动到左边
.pull-right 元素浮动到右边
.center-block 设置元素为 display:block 并居中显示
.clearfix 清除浮动
.show 强制元素显示
.hidden 强制元素隐藏
.sr-only 除了屏幕阅读器外,其他设备上隐藏元素
.sr-only-focusable 与 .sr-only 类结合使用,在元素获取焦点时显示(如:键盘操作的用户)
.text-hide 将页面元素所包含的文本内容替换为背景图
.close 显示关闭按钮
.caret 显示下拉式功能
时间: 2024-07-29 00:07:25

3.Bootstrap-CSS之辅助的相关文章

解决了部署到Heroku时无法显示bootstrap CSS样式的问题

今天使用了bootstrap-sass进行布局,真的很好用,据说是tweet 开源的一个东东,本地一切都OK的时候欢喜的git push heroku后,发现bootstrap css的样式并没有预期中的显示出来,感觉还是挺沮丧,但是有问题就要解决,于是抱着技术问题问Google的态度,搜索了下,在 stackoverflow上找到了解决方法,不得不说stackoverflow真是个好东西,我的问题大部分都是在那上面解决的. 原文: I could not view the site with

Bootstrap css简单使用

http://www.bootcss.com/ 这是中文官网 这里简单的用一下基本的css: 引用基本样式: <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <td style="width: 60%;"> <a class="btn btn-info" href="java

Bootstrap Css

Bootstrap 1.Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的.您可以从 http://getbootstrap.com/ 上下载 Bootstrap 的最新版本. 2.实例采用的是百度的静态资源库(http://cdn.code.baidu.com/)上的Bootstrap资源.百度的静态资源库的 CDN 服务,访问速度更快.加速效果更明显.没有速度和带宽限制.永久免费,引入代码如下: h

Bootstrap CSS 栅格、代码和表格

一.bootstrap栅格 下图总结了 Bootstrap 网格系统如何跨多个设备工作: 例如: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-s

bootstrap.css.map这个文件有何用处?该怎能使用它?

. ├── bootstrap.css ├── bootstrap.css.map ├── bootstrap.min.css ├── bootstrap-theme.css ├── bootstrap-theme.css.map └── bootstrap-theme.min.css 0 directories, 6 files 我先说一下什么是source map文件. source map文件是js文件压缩后,文件的变量名替换对应.变量所在位置等元信息数据文件,一般这种文件和min.js主

Bootstrap CSS教程

Bootstrap 教程 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 本教程将向您讲解 Bootstrap 框架的基础,通过学习这些内容,您将可以轻松地创建 Web 项目.教程被分为 Bootstrap 基本结构.Bootstrap CSS.Bootstrap 布局组件和 Bootstrap 插件几个部分.每个部分都包含了与该主题相关的简单有用的实例. 现在开

(二)Bootstrap CSS 概览

在这一章中,我们将讲解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践. HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创

17/9/6 bootstrap.css去掉后引发的样式错乱

最近写的新官网的项目一直都是用的bootstrap的框架,今天的的页面其中一个模块使用的插件和bootstrap冲突,当把bootstrap.css去掉后,页面中的部分样式发生了错乱 主要表现为margin和padding值不好使  ,是因为定位后导致块元素属性消失 position定位 或 浮动 后引起的 解决方法: 该元素添加  display:block

Bootstrap CSS(一)

1.Bootstrap CSS 概览 1.1HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> xxx </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览

Bootstrap CSS 概览

HTML 5 文档类型(Doctype) Bootstrap 使用了一些 HTML5 元素和 CSS 属性.为了让这些正常工作,您需要使用 HTML5 文档类型(Doctype). 因此,请在使用 Bootstrap 项目的开头包含下面的代码段. <!DOCTYPE html> <html> .... </html> 如果在 Bootstrap 创建的网页开头不使用 HTML5 的文档类型(Doctype),您可能会面临一些浏览器显示不一致的问题,甚至可能面临一些特定情