bootstrap

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” />