bootstrap CSS#
一、容器
.container
包裹其他元素
div.row
必须放在.container
里面
二、文本对齐方式:
text-center
text-left
text-right
三、块标签对齐方式:
pull-left
pull-right
center-block
四、栅格系统:
.col-xs-2
.col-sm-2
.col-md-2
.col-lg-2
偏离 .col-xs-offset-2
五、排版样式 :
h1 .page-header
small
p .leader
着重 <strong>
</strong>
斜体 <em>
</em>
六、文字的颜色(带有样式滑动效果):
text-muted
柔和色
text-primary
浅蓝色
text-success
深绿色
text-info
深蓝色
text-warning
浅黄色
text-danger
红色
七、缩略语:
<abbr title='鼠标经过显示的文字'>缩写</abbr>
八、列表:
<ul>
.list-unstyled 取消样式(去除原有圆点和边距)
<ul>
.list-group 圆角列表
<li>
.list-group-item 列表项目
或者使用<div>和<p>
<ul>
.list-inline 行列表(取消了块特性)
九、自定义列表:
<dl>
<dt>
<dd>
<dl>
.dl-horizontal 水平列表(dt在左,列表项在右)
十、代码:
<code>
</code>
灰底红字
<pre>```</pre>
原样输出(如代码段)
十一、表格:
<table>
.table
表格样式 (后面的样式必须基于此样式)
.table-bordered
加边框的表格
.table-striped
条纹表格(隔行换色效果)
.table-hover
鼠标经过效果
.table-condensed
紧缩表格(让表格变得紧凑)
.table-responsive
响应式表格(将div.table-responsive包裹table)
<tr>
(<td>
也适用) .active
灰色
.danger
红色
.warning
浅黄色
.success
浅绿色
十二、表单:
<div>
颜色 .form-group
用于包裹一组表单控件(如: 用户名为一组 密码为一组)
.has-success
绿色
.has-error
红色
.has-warning
黄色
<input>
.form-control
(用于text password textarea select)
.input-sm
小
.input-md
中等大小(默认)
.input-lg
大
<label>
.control-label
<p>
.help-block
灰色文字(用于提示)
多选框 用div.checkbox
包裹label
label
包裹input[type=checkbox]
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox" />记住密码
</label>
<div>
</div>
或者div.form-group
下直接用label.checkbox
包裹input[type=checkbox]
单选框 div.checkbox
改成div.radio
或者 label.checkbox
改成label.radio
水平多选框 div.checkbox
改成 div.checkbox-inline
或者 label.checkbox
改成label.checkbox-inline
水平单选框 div.radio
改成div.radio-inline
或者label.radio
改成label.radio-inline
表单占位 input
标签中添加属性 placeholder="
要显示的内容”
内联表单 form.form-inline
水平表单 form.horizontal
再把div.form-group
中的元素使用div栅格系统控制
静态控件 p.form-control-static
表单禁用 input
标签添加disabled
属性
十三、显示和隐藏:
.show
显示
.hidden
隐藏
.sr-only
隐藏
十四、按钮:
用于button
(兼容性好) input[type=button submit reset]
a
标签
.btn
基础样式
.btn-default
灰色
.btn-primary
蓝色
.btn-success
绿色
.btn-info
浅蓝色
.btn-warning
黄色
.btn-danger
红色
.btn-link
类似a标签样式的按钮
.btn-xs
最小
.btn-sm
小按钮
.btn-md
中等大小(默认)
.btn-lg
大按钮
按钮变成块元素 .btn-block
按钮的活动状态 .active
按钮的禁用状态 .disabled
十五、img图片:
.img-rounded
圆角矩形 (IE8不支持圆角)
.img-circle
椭圆
.img-thumbnail
缩略图
十六、响应式图片:
.img-responsive
根据浏览器窗口大小调整
关闭按钮 (位于父容器的右上角)
span.close
<span class="close">×</span>
十六、向下箭头:
span.caret
<span class="caret"></span>
lyphicons
图标 用于span
.glyphicon
基本样式
.glyphicon-align-left
十七、下拉菜单:
下拉菜单项右对齐
ui.dropdown-menu pull-right
禁用菜单项
ul.dropdown-menu
下的li
加上.disabled
样式
十八、按钮组:
用带有.btn-group
的div
包裹所有按钮
十九、按钮工具栏:
用带有.btn-toolbar的div
包裹div.btn-group
二十、按钮组尺寸
.btn-group-lg
.btn-group-md
.btn-group-sm
.btn-group-xs
按钮组和下拉菜单嵌套
使用btn-group
的话 用于下拉的按钮必须加上dropdown-toggle
按钮组垂直排列
.btn-group-vertical
两端对齐的按钮组 (只适用于a
元素,不适用于button
元素)
div.btn-group btn-group-justifed
向上弹出式菜单
div.btn-group
加上.dropup
样式
输入框组
用div.input-group
包裹span.input-group-addon
和input.form-control
可以有多个
二十一、输入框组尺寸:
给div.input-group
加上.input-group-lg md sm
二十二、将单选框或复选框放入输入框组:
将<input type="checkbox" />
让span.input-group-addon
中
将<input type="radio" />
让span.input-group-addon
中
带有下拉菜单的输入框组
下拉菜单组这一块不用加div.btn-group
分段按钮
这一块不用加div.btn-group
二十三:标签页(选项页):
用ul.nav
nav-tabs
包裹li
li.active
表示当前选中的选项卡
二十四、胶囊式标签页:
ul.nav
nav-pills
li
li.active
表示当前选中的选项卡
二十五、堆叠式选项卡(竖向 只能和胶囊式标签页配合):
ul.nav
nav-pills
加上 .nav-stacked
两端对齐的导航(可用于tabs和pills)
ul.nav
nav-pills
加上 .nav-justified
禁用的链接(标签)
li.disableds
带下拉菜单的导航
导航条
使导航条固定在顶部 在div.navbar
加上.navbar-fixed-top
(需要为body
设置padding
)
使导航条固定在底部 在div.navbar
加上.navbar-fixed-bottom
导航条静止在顶部(默认) div.navbar
加上.navbar-static-top
反色导航条
div.navbar navbar-inverse
导航条按钮
button.btn btn-primary navbar-btn
导航条中的文本
p.navbar-text
导航条中的链接
a.navbar-link
面包屑导航 (ul
和ol
都适用)
ol.breadcrumb
li
li
加上.active
表示当前页面
默认分页(上一页123456下一页)
ul.pagination
<li><a>«</a><li>上一页
<li><a>1</a><li>
<li><a>2</a><li>
<li><a>3</a><li>
<li><a>»</a><li>下一页
激活状态(当前页) li.active
禁用状态 li.disabled
翻页 ui.pager
<li class="previous"><a>上一页</a></li>
<li class="next"><a>下一页</a></li>
禁用状态 li.disabled
标签 span.label
颜色 label-default
label-primary
label-info
label-success
label-warning
label-danger
徽章 span.badge
(建议放置于a标签内)
大屏幕 div.jumbotron
此时建议将div.container
放置于div.jumbotron
中
页面标题(灰色小线条)
h1.page-header
缩略图 a.thumbnail
中放置img
标签
定制内容 将div.caption
放置于div.thumbnail
里面
<div class="thumbnail">
<img />
<div class='caption'>
内容
</div>
</div>
警告框 div.alert
警告框颜色 alert-success
info
warning danger
可关闭的警告框
将button.close
(需要加上属性 data-dismiss='alert')
放到div.alert
中
警告框中的链接
div.alert
中放入a.alert-link
进度条 div.progress
<div class='progress'>
<div class='progress-bar' style='width:80%'>
</div>
</div>
进度条颜色 progress-bar-success
info
warning
danger
条纹进度条 div.progress
加上progress-striped
样式
激活的进度条 div.progress progress-striped active
进度条堆叠 将多个div.progress-bar
放入div.progress
列表组
ul.list-group
li.list-group-item
{.active}
在此可以使用徽章(加上span.badge
)
也可以使用标签(加上span.label
label-info
pull-right
)
链接列表
div.list-group
a.list-group-item
也可以用上面列表组的方法实现(li
中添加a
标签)
面板
div.panel panel-default
(其他颜色primary
success
info
warning
danger
)
{div.panel-heading}
面板标题
div.panel-body
面板内容
{div.panel-footer}
面板底部
Well
墙 div.well
灰色圆角背景
well
尺寸 div.well well-sm
div.well well-lg
判断IE浏览器版本加载不同样式表##
因为IE各版本的浏览器对我们制作的WEB标准的页面解释不一样,具体就是对CSS的解释不同,我们为了兼容这些,可运用条件注释来各自定义,最终达到兼容的目的。比如:
<!– 默认先调用css.css样式表 –>##
<link rel=”stylesheet” type=”text/css” href=”css.css” />
<!–[if IE 7]>
<!– 如果IE浏览器版是7,调用ie7.css样式表 –>##
<link rel=”stylesheet” type=”text/css” href=”ie7.css” />
<![endif]–>
<!–[if lte IE 6]>
<!– 如果IE浏览器版本小于等于6,调用ie.css样式表 –>##
<link rel=”stylesheet” type=”text/css” href=”ie.css” />
<![endif]–>
这其中就区分了IE7和IE6向下的浏览器对CSS的执行,达到兼容的目的。同时,首行默认的css.css还能与其他非IE浏览器实现兼容。
注意:默认的CSS样式应该位于HTML文档的首行,进行条件注释判断的所有内容必须位于该默认样式之后。
这也是所谓的css hack技术…