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. Linux shell 提取文件名和目录名的一些方法(转)

    很多时候在使用Linux的shell时,我们都需要对文件名或目录名进行处理,通常的操作是由路径中提取出文件名,从路径中提取出目录名,提取文件后缀名等等.例如,从路径/dir1/dir2/file.tx ...

  2. PHP使用frameset制作后台界面时,怎样实现通过操作左边框架,使右边框架中的页面跳转?

    左框架的链接,不仅要指定链接的文件名,还需要通过 target 属性指定要打开的目标框架名(即楼主要求的右框架名). 例:假设右框架为 <frame scr="lx1.htm" ...

  3. BF3 里面的z cull reverse reload

    Bf3 siggraph2011的 分享 http://advances.realtimerendering.com/s2011/White,%20BarreBrisebois-%20Renderin ...

  4. SVN MERGE 方法(原创)

    SNV merge操作 1. 创建分支 A

  5. DevExpress控件之TreeList

    基于v18.1 使用AppendNode方法手动赋值时,首先要添加treeListColumn 默认样式                                     修改后的样式   1 ...

  6. vue1和vue2获取dom元素的方法 及 nextTick() 、$nextTick()

    vue1.*版本中 在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素 例如:<div class='box' el='myBox'>你好</d ...

  7. Hessian原理与程序设计

     Hessian是比較经常使用的binary-rpc.性能较高,适合互联网应用.主要使用在普通的webservice 方法调用.交互数据较小的场景中.hessian的数据交互基于http协议,通常he ...

  8. java:注解(一)

    什么是注解 注解(Annotation),也叫(metadata)元数据.一种代码级别的说明.它是JDK1.5及以后版本引入的一个特性,与类.接口.枚举是在同一个层次.它可以声明在包.类.字段.方法. ...

  9. gitlab服务器邮箱配置

    如想用 SMTP 代替 Sendmail 发送email,添加如下相应邮箱服务商的配置到/etc/gitlab/gitlab.rb, 然后运行gitlab-ctl reconfigure使修改生效. ...

  10. .NET EF 框架-实现增删改查

    声明一个EF上下文对象 Model dbContext=new Model(); 添加操作(向表中插入一条数据) //声明一个表的实体 Contact contact =new Contact(); ...