Bootstrap表单样式

1.基本输入框intput 可以在容器中用form-group或row来表示 ,默认会显示100%宽度

input type有text/password/datetime/datetime-local/date/month/time/week/number/email/url/search/tel和color

form-inline:表示全部排一行

form-horizontal:每一组水平排列

用form-group表示

<div class="container form-horizontal">
         <div class="form-group">//可以把form-group换成row
                   <label for="txtUsername">用户名：</label>
                   <input type="text" class="form-control" id="txtuserName" placeholder="请输入用户名">
         </div>
         <div class="form-group">
                   <label for="txtPassword">密码:</label>
                   <input type="password" class="form-control" id="txtPassword" placeholder="请输入密码">
         </div>
</div>

用row表示

<div class="container">
         <div class="row">
                   <label class="control-label col-lg-1">用户名</label>
                   <div class="col-lg-3">
                            <input type="color" id="txtuserName2" class="form-control" placeholder=" 请输入用户名" value=""/>
                   </div>
         </div>
         <div class="row">
                   <label class="control-label col-lg-1">密码</label>
                   <div class="col-lg-3">
                            <input type="text" id="txtPassword2" class="form-control" placeholder=" 请输入密码" value=""/>
                   </div>
         </div>     
</div>

2.下拉框

//单选与多选

<div class="form-horizontal">
         <div class="form-group">
                   <label class="control-label col-lg-1"></label>
                   <div class="col-lg-3">
                            <select class="form-control">
                                     <option>Javascript</option>
                                     <option>Html</option>
                                     <option>Css</option>
                            </select>
                   </div>
         </div>
         <div class="form-group">
                   <label class="control-label col-lg-1"></label>
                   <div class="col-lg-3">
                            <select class="form-control" multiple="multiple">
                                     <option>Javascript</option>
                                     <option>Html</option>
                                     <option>Css</option>
                            </select>
                   </div>
         </div>
</div>

3.文本框

4.多选框与单选框

<fieldset>//此设置禁用这个以内的所有控件将变为禁用

<div class="radio">
         <label class="radio-inline">
                   <input type="radio" name="sex" value="" />男
         </label><label class="radio-inline">
                   <input type="radio" name="sex" value="" />女
         </label>
</div>
<div class="checkbox">
         <label class="checkbox-inline">
                   <input type="checkbox" value="" />HTML
         </label>
         <label class="checkbox-inline">
                   <input type="checkbox" value="" checked/>CSS
         </label>
         <label class="checkbox-inline disabled">
                   <input type="checkbox" value="" disabled="disabled"/>Javascript
         </label>
</div>
</fieldset>

5.验证颜色、图标提示

has-warning:警告状态显示黄色

has-error：错误状态显示红色

has-success：成功状态显示绿色

只有在form-group容器标签上添加对应的标签，该容器中的都会受到影响

class="sr-only" 表示隐藏

验证样式容器上添加class="has-feekback", 在input标签后面加一个<span>标签，图标要用到fonts字体文件

输入框大小 input-sm input-lg 比正常小与正常大

控件组大小form-group-lg form-group-sm 比正常小与正常大

宽度可以使用网格row/col来设置

<div class="form-horizontal">
         <div class="form-group has-warning has-feedback">
                   <label class="control-label col-lg-2">Has-warning</label>
                   <div class="col-lg-3">
                            <input type="text" class="form-control" placeholder="has-warning" value="" />
                            <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
                            <span>验证失败</span>
                   </div>
         </div>
                   <div class="form-group has-error has-feedback">
                   <label class="control-label col-lg-2">Has-error</label>
                   <div class="col-lg-3">
                            <input type="text" class="form-control" placeholder="has-error" value="" />
                            <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
                   </div>
         </div>
                   <div class="form-group has-success has-feedback">
                   <label class="control-label col-lg-2">Has-success</label>
                   <div class="col-lg-3">
                            <input type="text" class="form-control" placeholder="has-success" value="" />
                            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
                   </div>     
         </div>
</div>

6.按钮 a input button span div submit reset

风格btn-default btn-primary btn-success btn-info btn-warning btn-danger btn-link样式

大小btn-lg btn-sm btn-xs 按钮块btn-block宽度显示100%

状态hover active focus disabled

<div class="container">
　　<button class="btn">基础按钮</div>
　　<a class="btn" role="button">A标签</a>
　　<input type="button" class="btn" value"input按钮"/>
</div>

7.图片

img-responsive响应式img-rounded圆角 img-circle圆 img-thumbnail缩略图使用在<img class=""上

响应式与缩略图会跟着浏览器大小而改变

8.图标可用<i> 与<span>

9.输入框样式

只需给class="input-group"类新增class="input-group-addon" input-group-btn

<div class="container">
         <div class="input-group">
                   <span class="input-group-addon">$</span>
                   <input type="text" class="form-control"/>
                   <span class="input-group-addon" id="basic-addon2">.oo</span>
         </div>
         <div class="input-group">
                   <span class="input-group-addon"><input type="checkbox"/></span>
                   <input type="text" class="form-control" placeholder="用户名" />
         </div>
         <div class="input-group">
                   <input type="text" class="form-control" placeholder="输入用户名"/>
                   <span class="input-group-btn">
                            <button type="button" class="btn btn-primary" >搜索</button>
                   </span> 
         </div>
         <div class="input-group">
                   <div class="input-group-btn">
                            <button class="btn btn-default">请选择</button>
                            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                                     <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                     <li><a href="#">宝贝</a></li>
                                     <li><a href="#">店铺</a></li>
                            </ul>
                   </div>
                   <input type="text" class="form-control" placeholder="输入关键字" />
                   <span class="input-group-btn">
                   <button type="button" class="btn btn-primary" >搜索</button>
                   </span>
         </div>
</div>

posted @ 2016-05-22 21:24 xszjk 阅读(274) 评论(0) 收藏举报

刷新页面返回顶部

xszjk

Bootstrap表单样式

公告