1.栅格系统

containter:用于固定宽度并支持响应式布局的容器

container-fluid:用于100%宽度,占据全部视口(viewport)的容器

row:行,必须在container或container-fluid之内

col-md/xs-*:设置块的列宽

col-md/xs-offset-*:列偏移

col-md-push/pull:推/拉

2.排版

<h1><h6>:尺寸

<small>:副标题

<p></p>:段落

lead:中心内容,字体变大

<mark></mark>内敛文本,特殊的曙色

<del></del>被删除的文本

<s></s>无用文本

<ins></ins>插入文本

<u></u>:带下划线的文本

<small><small>:小号文本

<strong></strong>:着重

<em></em>:斜体

text-left/center/right/justify:左中有下对齐

text-lowercase/uppercase/capitalize:小写/大写/首字母大写

<abbr></abbr>:基本缩略语

initialism:首字母缩略语

<br>:地址

<blockquote></blockquote>:引用

<footer></footer>:表名引用来源

<cite></cite>:标签语

blockquote-reverse:内容左右对齐

list-unstyled:无样式列表

list-inline:将所有元素放置在同一行

<d1><dt></dt><dd></dd>...</d1>:描述内容

d1-horizontal:水平排列的描述

3.代码

<code></code>:让代码显示出来

<kbd></kbd>:标记用户通过键盘输入的内容

<pre></pre>:正确的展示代码,尖括号需要转义

<var></var>:标记变量

<samp></samp>:来标记程序输出的内容

4.表格

table:表格的基本样式

table-striped:条纹

table-bordered:增加边框

table-hover:鼠标悬停

table-condensed:紧缩表格

active/success/info/warning/danger:状态,颜色。

table-responsive:响应式表格,缩小时会有水平滚动条

5.表单

form-control:文本都会有

form-group:表单通用类,每个表单都有

form-inline:内容左对齐,并表现为inline-block级别,内联表单

sr-only:隐藏内联表单的标签

form-horizontal:水平表单

placeholder:默认值

checkbox-inline /radio-inline:多选或单选控件

form-control-static:将纯文本和label元素放置在同一行

readonly:只读

has-feedback:文本框中添加额外的值

form-group-lg/form-group-sm :尺寸

6.按钮

btn:

btn-default:

role="button":于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接当前页面中的其他部分,必须添加

btn=lg/sm/xs:尺寸

btn-block:拉伸至父元素的100%

opacity:禁用

7.图片

img-responsive :可以让图片支持响应式布局

center-block:让图片水平居中

img-rounded/circle/thumbnail:圆角/原型/边框

8.其它

text-info/success/danger..:文字颜色或属性

bg-info/success..:背景颜色或属性

close:”x“关闭符号

caret:三角符号

!important:让任意元素左右浮动

clearfix:清除浮动

show/hidden:显示/隐藏

Bootstrap——全局CSS样式的更多相关文章

  1. bootstrap全局CSS样式学习

    参考http://v3.bootcss.com/css/,根据自己的记忆进行的复述,加深记忆. 首先介绍bootstrap全局CSS样式 只通过使用bootstrap.css,即可获得统一的样式设置. ...

  2. 响应式布局和BootStrap 全局CSS样式

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  3. 14、响应式布局和BootStrap 全局CSS样式知识点总结-part1

    1.什么是响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,这个概念是为解决移动互联网浏览而诞生的. 简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一 ...

  4. Bootstrap全局CSS样式之排版

    Bootstrap能全然友好的支持html5的文本元素,这里不再赘述,详细可參考我还有一篇文章<html的文本元素总结>,这里主要针对Bootstrap封装好的CSS文本样式做一下汇总. ...

  5. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  6. Bootstrap全局CSS样式之表格

    .table--基础表格样式. .table-striped--给<tbody>之内的每一行添加斑马条纹样式: .table-bordered--为表格添加边框: .table-hover ...

  7. Bootstrap全局CSS样式之button和图片

    .btn-default--button的默认样式. .btn-primary--button的首选样式: .btn-success--button的成功样式: .btn-info--button的一 ...

  8. Bootstrap全局CSS样式之表单

    .form-control--将单独的表单控件赋予一些全局样式,如默认宽度width:100%. .form-group--包裹表单控件,获得最好的排列: .form-inline--将表单设置为内联 ...

  9. bootstrap全局css样式

    以下从官网抄来的,感觉还是很实用的,运用得好,灵活运用,非常方便快捷,能大大提高开发效率,也为调整不同尺寸的屏幕节省了时间. hidden-xs @media (max-width: 767px){ ...

  10. 15、响应式布局和BootStrap 全局CSS样式知识点总结-part2

    1.表格 <div class="container"> <table class="table "> <thead> &l ...

随机推荐

  1. How To Commit Just One Data Block Changes In Oracle Forms

    You have an Oracle Form in which you have multiple data blocks and requirement is to commit just one ...

  2. HDU1565方格取数

    典型的状态压缩DP问题.第i行的取法只受到第i-1行的影响.首先每一行的取法要相容(不能有两个相邻),然后相邻行之间也要相容.将每一个格子看做两种状态,1表示取,0表示不取.这样每一行就是一个01串, ...

  3. opengl interface

    glTranslate()是移动坐标系,比如glTranslate(-1.5,0,0),之后你画的图就是在屏幕左边1.5个单位~glRotation()是做旋转的,第一个参量是angle,后面3个分别 ...

  4. MyBatis-Invalid bound statement (not found)-问题处理

    最近把工程改为Hibernate和MyBatis并存,并存只要注意两点即可: 1.使用同一个dataSource 2.事物交给Hibernate进行管理(Hibernate4+)  Hibernate ...

  5. java 几个线程池的理解

    http://www.cnblogs.com/dolphin0520/p/3932921.html 这个文章写的很好

  6. 2016.6.20 tomcat安装出现No Java Virtual Machine found in..

    安装tomcat时,选择安装路径为自定义路径,但是出现提示: No Java Virtual Machine found in.. 心想这和java虚拟机什么关系啊.百度了之后发现,安装过程中有一步是 ...

  7. Android使用OKHttp3实现下载(断点续传、显示运行进度)

    OKHttp3是现在很流行的Android网络请求框架,那么怎样利用Android实现断点续传呢,今天写了个Demo尝试了一下,感觉还是有点意思 准备阶段 我们会用到OKHttp3来做网络请求,使用R ...

  8. 通过a标签(不丢失referrer)打开另一个窗口

    第一页 //这个是显示窗口的方法 function frmshow(arr){ var old; var val =$.trim($("#phone").val()); if (v ...

  9. SVN客户端忽略无关文件

    修改前请先备份文件 ~/.subversion/config. 1,打开Terminal,输入命令: $ open ~/.subversion/config   2,在打开的文件中寻找:`global ...

  10. python selenium2 - 鼠标键盘操作

    文件路径:Python27\Lib\site-packages\selenium\webdriver\common\action_chains.py action_chains[鼠标键盘动作] 方法说 ...