bootstrap中表格，表单，按钮，图片，字体图标等使用

bootstrap中表格，表单，按钮，图片，字体图标，下拉菜单等使用

表格：

<table class="table table-bordered table-hover text-center">

表单：

垂直表单、内联表单、水平表单、静态,只读和禁用

垂直表单：(form默认垂直表单）

<form>
   <!--标签+控件: label+input/select/...-->
   <!--form-group:表单控件组-->
   <div class="form-group">
       <label for="email">邮箱:</label>
       <input type="email" class="form-control" id="email" name="email" placeholder="Email">
   </div>
   <div class="form-group">
       <label for="password">密码:</label>
       <input type="password" class="form-control" id="password" name="password" placeholder="Password">
   </div>

</form>

内联表单：(formt添加class="form-inline")

内联表单: 所有的表单元素全部在同一行显示,通常来说不需要标签说明,必须在sm或以上屏幕才有效(> 768px)

<form class="form-inline">
   <div class="form-group">
       <label for="email" class="sr-only">邮箱:</label>
       <input type="text" class="form-control" id="email" name="email" placeholder="Email">
   </div>

   <div class="form-group">
       <label for="password" class="sr-only">密码:</label>
       <input type="password" class="form-control" id="password" name="password" placeholder="Password">
   </div>

</form>

水平表单：（给form添加class="form-horizontal"）

<form action="" class="form-horizontal">
   <div class="form-group">
   <label for="email" class="col-sm-2 control-label">邮箱:</label>
   <div class="col-sm-10">
       <input type="email" id="email" class="form-control" placeholder="Email">
   </div>
   </div>
   <div class="form-group has-error input-lg">
       <label for="password" class="col-sm-2 control-label">密码:</label>
       <div class="col-sm-10">
           <input type="password" id="password" class="form-control" placeholder="Password">
       </div>
   </div>

</form>

静态,只读和禁用

静态：class="form-control-static"

只读：readonly

禁用：disabled

<form class="form-horizontal">
               <h3 class="text-center">编辑用户</h3>
               <div class="form-group">
                   <label class="col-sm-2 control-label" for="account">用户:</label>
                   <div class="col-sm-8">
                       <input type="text" class="form-control" placeholder="Account" id="account">
                       <!--静态控件-->
<!--                        <p class="form-control-static">admin</p>-->
                   </div>
               </div>

               <div class="form-group">
                   <label class="col-sm-2 control-label" for="role">身份:</label>
                   <div class="col-sm-8">
                       <!--只读控件-->
                       <input type="text" class="form-control" id="role" placeholder="超级管理员" value="超级管理员"  readonly>
                   </div>
               </div>

               <div class="form-group">
                   <div class="checkbox col-sm-8 col-sm-offset-2">
                       <input type="checkbox" id="change" disabled> <label for="change">更改</label>
                   </div>
               </div>

               <div class="col-sm-8 col-sm-offset-2">
                   <button class="btn btn-primary btn-lg btn-block">保存</button>
               </div>

           </form>

图片：

<img class="img-responsive">    响应式

<img class="center-block">         块居中
<img class="img-rounded">        圆角
<img class="img-circle">              圆形

<img class="img-thumbnail">      缩放图

前景色与背景色：

前景色：

<p class="text-muted">  </p>    正常色

<p class="text-primary">  </p>  蓝色

<p class="text-info">  </p>        浅蓝色

<p class="text-success">  </p>   浅绿色

<p class="text-warning">  </p>   粉色

<p class="text-danger">  </p>     红色

背景色：

<p class="bg-primary">  </p>  蓝色

<p class="bg-info">  </p>        浅蓝色

<p class="bg-success">  </p>   浅绿色

<p class="bg-warning">  </p>  粉色

<p class="bg-danger">  </p>    红色

清除浮动：

<div class="clearfix"></div>

字体图标：

字体图标放在<span>标签属性中

可以自定义字体图标大小, 因图标非图片,所以会自动无损放大

<span class="glyphicon glyphicon-envelope text-success" style="font-size: 2rem"></span>

下拉菜单：

<div class="dropdown" style="margin-top: 200px;">
   <!--按钮-->
   <button type="button" class="btn btn-default" data-toggle="dropdown">
       前端开发 <span class="caret"></span>
   </button>

   <ul class="dropdown-menu">
<!--        可选:下拉菜单的标题/辅助性说明文字-->
       <li class="dropdown-header">必备基础</li>
       <li><a href="">HTML5</a></li>
       <li><a href="">CSS3</a></li>
       <li><a href="">JavaScript</a></li>
       <!--可选的分隔条,当下拉项过多时,可以进行分组管理-->
       <li class="divider"></li>
       <li class="dropdown-header">常用框架</li>
       <li><a href="">jQuery</a></li>
       <li><a href="">Bootstrap</a></li>
   </ul>
</div>

按钮：

1.可以用作按钮的元素:button,input:button,a

2.按钮的预定义样式

3.预定义的按钮大小

4.按钮状态: 激活

5.按钮状态:禁用

<h3>1.可以用作按钮的元素:button,input:button,a</h3>
   <button type="button" class="btn btn-info" role="button">button按钮</button>
   <input type="button" class="btn btn-default" role="button" value="input按钮">
   <a href="http://www.php.cn" class="btn btn-primary">a标签按钮</a>

   <h3>2.按钮的预定义样式</h3>
   <button type="button" class="btn btn-default" role="button">default默认灰</button>
   <button type="button" class="btn btn-primary" role="button">primary首选蓝</button>
   <button type="button" class="btn btn-success" role="button">success成功绿</button>
   <button type="button" class="btn btn-info" role="button">info提示浅蓝</button>
   <button type="button" class="btn btn-warning" role="button">waring警告橙黄色</button>
   <button type="button" class="btn btn-danger" role="button">danger危险红</button>
   <button type="button" class="btn btn-link" role="link">Link链接</button>

   <h3>3.预定义的按钮大小</h3>
   <button type="button" class="btn btn-default btn-lg" role="button">大按钮</button>
   <button type="button" class="btn btn-primary" role="button">默认大小按钮</button>
   <button type="button" class="btn btn-success btn-sm" role="button">小按钮</button>
   <button type="button" class="btn btn-success btn-xs" role="button">极小按钮</button>

   <h3>4.按钮状态: 激活</h3>
   <button type="button" class="btn btn-info">未激活</button>
   <button type="button" class="btn btn-info active">激活</button>
   <h3>5.按钮状态:禁用</h3>
   <button type="button" class="btn btn-primary btn-lg">启用</button>
   <button type="button" class="btn btn-primary btn-lg disabled">禁用</button>
   <a href="http://www.php.cn" class="btn btn-warning disabled">php中文网</a>

按钮工具条和按钮组：

<!--创建一个按钮工具条-->
<div class="btn-toolbar">
   <!--按钮组-->
   <div class="btn-group btn-group-vertical btn-group-sm">
       <button type="button" class="btn btn-default">编辑</button>
       <button type="button" class="btn btn-default">删除</button>
       <button type="button" class="btn btn-default">撤消</button>
   </div>

   <div class="btn-group  btn-group-lg">
       <button type="button" class="btn btn-info">复制</button>
       <button type="button" class="btn btn-success">粘贴</button>
       <button type="button" class="btn btn-warning">剪切</button>
   </div>

   <div class="btn-group">
       <button type="button" class="btn btn-info">前端技术</button>
       <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown">
           <span class="caret"></span>
       </button>

       <ul class="dropdown-menu">
           <!--        可选:下拉菜单的标题/辅助性说明文字-->
           <li class="dropdown-header">必备基础</li>
           <li><a href="">HTML5</a></li>
           <li><a href="">CSS3</a></li>
           <li><a href="">JavaScript</a></li>
           <!--可选的分隔条,当下拉项过多时,可以进行分组管理-->
           <li class="divider"></li>
           <li class="dropdown-header">常用框架</li>
           <li><a href="">jQuery</a></li>
           <li><a href="">Bootstrap</a></li>
       </ul>

   </div>
</div>