首页 > Web开发 > 详细

Bootstrap——全局CSS样式

时间:2018-01-09 22:47:53      阅读:255      评论:0      收藏:0      [点我收藏+]

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样式

原文:https://www.cnblogs.com/yangmingxianshen/p/8253977.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!