Heim  >  Artikel  >  Web-Frontend  >  Bootstrap全局CSS样式之表单_html/css_WEB-ITnose

Bootstrap全局CSS样式之表单_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:40:201125Durchsuche

.form-control??将单独的表单控件赋予一些全局样式,如默认宽度width:100%;

.form-group??包裹表单控件,获得最好的排列;

.form-inline??将表单设置为内联表单,只适用于视口(viewport)至少在 768px 宽度时;

.sr-only??将label标签隐藏;

.help-block??用于设置提示文本;

.form-horizontal??可以将label标签和控件组水平并排布局;

.radio-inline、.checkbox-inline??将相应控件水平排列;

.form-control-static??将p元素设置为静态控件;

.has-error、.has-warning、has-success??分别对应校验状态;

.has-feedback??为控件添加辅助图标(与图标引用类联合使用);

.input-lg??创建大一些的表单控件;

.input-sm??创建小一些的表单控件;

    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width,initial-scale=1">    <title>CSS全局样式_栅格系统</title>    <!--    <link rel="stylesheet" href="bootstrap.min.css" type="text/css">    -->    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">    <style type="text/css">    </style><div class="container">    <form role="form" class="form-inline">        <div class="form-group">            <label class="sr-only">用户名</label>            <input type="text" class="form-control" placeholder="用户名/邮箱/手机号">        </div>        <div class="form-group">            <label class="sr-only">密码</label>            <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合密码">        </div>        <div class="form-group">            <label class="sr-only">生日</label>            <input type="date" class="form-control" placeholder="出生年月">        </div>        <div class="form-group">            <label class="sr-only">上传头像</label>            <input type="file" class="form-control input-lg">            <p class="help-block">选择您需要的头像文件</p>        </div>    </form>    <form role="form" class="form-horizontal">        <div class="form-group">            <label class="col-sm-4 control-label">用户名</label>            <div class="col-sm-8">                <input type="text" class="form-control" placeholder="用户名/邮箱/手机号">            </div>        </div>        <div class="form-group">            <label class="col-sm-4 control-label">密码</label>            <div class="col-sm-8">                <input type="password" class="form-control" placeholder="输入6-14位英文和数字组合密码">            </div>        </div>        <div class="form-group">            <label class="col-sm-4 control-label">生日</label>            <div class="col-sm-8">                <input type="date" class="form-control" placeholder="出生年月">            </div>        </div>        <div class="form-group">            <div class="col-sm-offset-4 col-sm-8">                <div class="checkbox">                    <label>                        <input type="checkbox">记住密码                    </label>                </div>            </div>        </div>        <div class="form-group">            <div class="col-sm-offset-4 col-sm-8">                <button class="btn btn-default">登录</button>            </div>        </div>    </form>    <form role="form" class="form-horizontal">        <div class="form-group">           <label>喜欢的球队</label>            <div class="checkbox">                <label>                    <input type="checkbox">广州恒大                </label>                <label>                    <input type="checkbox">上海上港                </label>                <label>                    <input type="checkbox">北京国安                </label>            </div>        </div>        <div class="form-group">           <label>性别</label>            <div class="radio">                <label>                    <input type="radio" checked name="gender">男                </label>                <label>                    <input type="radio" name="gender">女                </label>            </div>        </div>        <div class="form-group">            <label>所属城市</label>            <select class="form-control" multiple>                <option>北京</option>                <option>上海</option>                <option>广州</option>            </select>        </div>        <div class="form-group">            <label class="sr-only"></label>            <textarea class="form-control" rows="5" placeholder="请文明用语"></textarea>        </div>        <p class="form-control-static">请按照邮箱格式输入:hello@163.com</p>        <div class="form-group">            <label>密码</label>            <input class="form-control" type="password" disabled>        </div>        <div class="form-group">            <label>昵称</label>            <input class="form-control" type="text" placeholder="胖虎" readonly>        </div>        <div class="form-group has-error has-feedback">            <label>用户名</label>            <input class="form-control" type="text">            <span class="glyphicon glyphicon-remove form-control-feedback"></span>        </div>        <div class="form-group has-success has-feedback">            <label>用户名</label>            <input class="form-control" type="text">            <span class="glyphicon glyphicon-ok form-control-feedback"></span>        </div>        <div class="form-group has-warning has-feedback">            <label>用户名</label>            <input class="form-control" type="text">            <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>        </div>    </form>
</div>




版权声明:本文为博主原创文章,未经博主允许不得转载。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn