只需要在需要禁用的表单控件上加上“disabled”即可：

xs sm md lg分别对应4种屏幕大小  主要区别是  超过规定范围后会把叠在一起的内容显示为一排

bootstrap默认把页面大小划分为12份，如果你想你的表单占据大小也可以使用col-xs-*
col-xs-6  会把一行分为两列
col-xs-4  会把一行分为3列

.btn{
   text-overflow:ellipsis;
   overflow:hidden;
   white-space:pre;
}

或者添加

没有第一种方法好用，需要逐个添加

Bootstrap框架默认给各个组件提供了基本动画的过渡效果，如果要使用，有两种方法：

   调用统一编译的bootstrap.js；

   调用单一的过渡动画的JavaScript插件文件transition.js（以下代码引入Bootstrap上对外公布的transition.js的地址）。

<script src="http://cdn.bootcss.com/bootstrap/2.3.1/js/bootstrap-transition.js"></script>

面板中嵌套列表组：

与面板中嵌套表格一样，可以在面板中嵌套列表组。使用方法与之前的嵌套表格一样。

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>

面板--面板中嵌套表格 一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。 <div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">    <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性    </p>    <table class="table table-bordered">        <thead>            <tr>                <th>＃</th>                <th>我的书</th>                <th>发布时间</th>            </tr>        </thead>        <tbody>            <tr>                <td>1</td>                <td>《图解CSS3》</td>                <td>2014-07-10</td>            </tr>        </tbody>    </table>    </div>    <div class="panel-footer">作者：大漠</div> </div> 我们在实际使用的时候需要把table提取到panel-body外面： <div class="panel panel-default">    <div class="panel-heading">图解CSS3</div>    <div class="panel-body">…</div>    <table class="table table-bordered">…</table>    <div class="panel-footer">作者：大漠</div> </div>

前面介绍水平表单时说过，如果表单使用了类名“form-horizontal”，其中“form-group”就相当于网格系统中的“row”

radio 靠 name 属性来实现单选

在基础面板一节中了解到，panel样式并没有对主题进行样式设置，而主题样式是通过panel-default来设置。在Bootstrap框架中面板组件除了默认的主题样式之外，还包括以下几种主题样式，构成了一个彩色面板：

    panel-primary：重点蓝

    panel-success：成功绿

   panel-info:信息蓝

   panel-warning：警告黄

   panel-danger：危险红

使用方法就很简单了，只需要在panel的类名基础上增加自己需要的类名

带面板头部和面板尾部的面板：

panel-heading:用来设置面板头部样式，表现为灰色背景色

panel-footer:用来设置面板尾部样式，表现为灰色背景色

panel-body放在panel-heading与panel-footer之间

基础面板非常简单，就是一个div容器运用了“panel”样式，产生一个具有边框的文本显示块。由于“panel”不控制主题颜色，所以在“panel”的基础上增加一个控制颜色的主题“panel-default”，另外在里面添加了一个“div.panel-body”来放置面板主体内容,，其内容设置了padding:15px

自定义列表组

Bootstrap框加在链接列表组的基础上新增了两个样式：

    list-group-item-heading：用来定义列表项头部样式

    list-group-item-text：用来定义列表项主要内容

这两个样式最大的作用就是用来帮助开发者可以自定义列表项里的内容，

带徽章列表组：

带徽章的列表组其实就是将Bootstrap框架中的徽章组件和基础列表组结合在一起的一个效果。具体做法很简单，只需要在“list-group-item”中添加徽章组件“badge

<ul class="list-group">
    <li class="list-group-item">        <span class="badge">13</span>揭开CSS3的面
    </li>
    <li class="list-group-item">        <span class="badge">456</span>CSS3选择器
    </li>
    <li class="list-group-item">        <span class="badge">892</span>CSS3边框
    </li>
    <li class="list-group-item">        <span class="badge">90</span>CSS3背景
    </li>
    <li class="list-group-item">        <span class="badge">1290</span>CSS3文本
    </li>
</ul>

基础列表组：

☑  list-group：列表组容器，常用的是ul元素，当然也可以是ol或者div元素

  ☑  list-group-item：列表项，常用的是li元素，当然也可以是div元素

简单实例如下：

<ul class="list-group">    <li class="list-group-item">揭开CSS3的面纱</li>    <li class="list-group-item">CSS3选择器</li>    <li class="list-group-item">CSS3边框</li>    <li class="list-group-item">CSS3背景</li>    <li class="list-group-item">CSS3文本</li> </ul>

列表组是Bootstrap框架新增的一个组件，可以用来制作列表清单、垂直导航等效果，也可以配合其他的组件制作出更漂亮的组件