Bootstrap03

一.表单(以下示例 * 代表class)

　　注意:a.使用表单的关键字form

　　　　b.所有的提示词使用label包裹

　　　　c.所写内容按div分类,使得层次分明

　　1.基本表单+表单组合+内联表单

　　*=form-inline 使得标签都归为一行,即为内联

　　*=form-group 分组,使得层次分明

　　*=input-group 使指定符号与输入框分组

　　*=input-group-addon 使指定符号位于输入框之前

 <form class="form-inline">

             <div class="form-group">

                 <label>姓名</label>

                 <input type="text" name="" id="" value="" />

             </div>

             <div class="form-group">

                 <label>密码</label>

                 <input type="password" name="" id="" value="" />

             </div>

             <div class="form-group">

                 <label>薪资</label>

                 <div class="input-group">

                     <span class="input-group-addon">$</span>

                     <input type="text" name="" id="" value="" />

                 </div>

             </div>

         </form>

　　2.水平排列

　　*=form-horizontal 表示水平分布

　　*=control-label 控件组与水平分布一同实现inline所有标签同行的效果

 <form class="form-horizontal">

             <label class="col-md-6 control-label">用户名</label>

             <input class="col-md-6" type="text" name="" id="" value="" />

             <label class="col-md-6 control-label">邮箱</label>

             <input class="col-md-6" type="email" name="" id="" value="" />

         </form>

　　3.多选框与禁用

　　*=checkbox disabled 表示多选与禁用

 <div class="checkbox disabled">

             <label>

                 <input type="checkbox" disabled="disabled" name="" id="" value="" />吃饭

             </label>

         </div>

         <div class="checkbox">

             <label >

                 <input type="checkbox" name="" id="" value="" />睡觉             </label>

         </div>

         <div class="checkbox ">

             <label>

                 <input type="checkbox" name="" id="" value="" />打豆豆             </label>

         </div>

二.图片

　　1.响应式图片 img-responsive

　　2.图片形状

　　　　a.img-rounded

　　　　b.img-circle

　　　　c.img-thumbnail

三.辅助类

　　1.文本颜色

　　　　*=text-muted 灰白色

　　　　*=text-primary 海军蓝

　　　　*=text-success 成功绿

　　　　*=text-info 天空蓝

　　　　*=text-danger 危险红

　　　　*=text-warning 警告黄

　　2.背景颜色

　　　　*=bg-primary 海军蓝

　　　　*=bg-info 天空蓝

　　　　*=bg-warning 警告黄

　　　　*=bg-danger 危险红

　　　　*=success 成功绿

　　3.关闭按钮 *=close

　　4.三角符号 *=caret

四.响应式

　　1.显示 *=visible-lg/md/sm/xs-block/inline

　　2.隐藏 *=hidden-lg/md/sm/xs

巴特西

Bootstrap03

最新文章

热门文章