BootStrap中的表单大全
表单
基础表单
对于表单中的input、textarea、select,一般我都会加上类”form-control”,它设置元素的默认宽度为100%(并不是绝对,比如下述的内联表单)。并且每个元素(包括label和待输入元素)都会加上”form-group”。它的样式只有一个。margin-bottom:15px。
<form action=""> <div class="form-group"> <label for="">用户名:</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <label for="">密码:</label> <input type="password" class="form-control"/> </div> </form>
内联表单
通过给最外层元素(form-group的父元素)加上”form-inline”。表示所有表单元素都在一行显示(充足的宽度的情况下)。并且”.form-inline .form-group”展示为内联块元素(inline-block)。并且”.form-inline .form-control”的宽度是auto。这样可以保证在一行展示。
<form action="" class="form-inline"> <div class="form-group"> <label for="">用户名:</label> <input type="text" class="form-control"/> </div> <div class="form-group"> <label for="">密码:</label> <input type="password" class="form-control"/> </div> </form>
水平表单
不同于普通表单和内联表单。如果要将label和input表单元素显示在一行,则需要使用”form-horizontal”。该类联合”form-group”使用,就相当于网格系统中的”row”。所以它的子类有”col-md-*”,而label的 “control-label”—-“.form-horizontal .control-label”,有文本右对齐的效果。如果不加这个,label和input的会显得不对齐。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="control-label col-md-1">用户名:</label> <div class="col-md-3"> <input type="text" class="form-control"/> </div> </div> <div class="form-group form-group-sm"> <label for="" class="control-label col-md-1">密码:</label> <div class="col-md-3"> <input type="password" class="form-control input-sm"/> </div> </div> </form>
表单大小
控制input大小的是”input-sm”,”input-lg”,它们使input输入框比正常看起来更小或者更大。与此对应的是label中文本的大小。需要在父级”form-group”同时加上”form-group-sm”,”form-group-lg”。如上面一个demo的密码输入框。
输入框
在HTML5中,输入框(input)标签中的type支持了更多的类型。有text、password、datatime、datatime-local、date、month、time、week、number、email、url、search、tel和color。标签<input>上只有赋值了特定的type才能显示正确的样式。有些元素只有在手机上才能显示其效果。
下拉框select
与输入框类似。只是将input改成了select,同时加上了”form-control”类。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="control-label col-md-2 col-md-pull-1">请选择:</label> <div class="col-md-3 col-md-pull-1"> <select name="" id="" class="form-control"> <option value="">HTML</option> <option value="">CSS</option> <option value="">Javascript</option> <option value="">JAVA</option> <option value="">PHP</option> <option value="">Nodejs</option> </select> </div> </div> </form>
col-md-pull-*是左偏移。
文本域
和上面类似。
<form action="" class="form-horizontal"> <div class="form-group"> <label for="" class="control-label col-md-2 col-md-pull-1">textarea:</label> <div class="col-md-3 col-md-pull-1"> <textarea name="" id="" rows="3" class="form-control"> hello </textarea> </div> </div> </form>
多选框和单选框
为了使radio和checkbox元素显示在一行,并且和label对齐。bootstrap提供了两种选择。其一:
<div class="form-group"> <label for="" class="radio"> <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 <input type="radio" name="sex"/>保密 </label> <label for="" class="checkbox"> <input type="checkbox"/>HTML <input type="checkbox"/>CSS <input type="checkbox"/>JavaScript </label> </div>
label本身是inline-block的。但是.radio,.checkbox本身却是block的。
所以用一个label包裹多个单选框或复选框,这样会显得很不专业(haha)。还有,很多的 也是很不美观的。So,第二种写法来了。
<div class="form-group"> <label for="" class="radio-inline"> <input type="radio" name="sex"/>男 </label> <label for="" class="radio-inline"> <input type="radio" name="sex"/>女 </label> <label for="" class="radio-inline"> <input type="radio" name="sex"/>保密 </label> <br /> <label for="" class="checkbox-inline"> <input type="checkbox" />HTML </label> <label for="" class="checkbox-inline"> <input type="checkbox" />CSS </label> <label for="" class="checkbox-inline"> <input type="checkbox" />JavaScript </label> </div>
表单验证
has-success:成功,绿色。
has-warning:警告,黄色。
has-error:错误,红色。
在”form-group”上加上对应的样式即可。为了更好的验证,我们还可以继续加上”has-feedback”。然后在input(”form-control”)后面元素同级加上”form-control-feedback”。语义清晰明了。代码如下:
<form action="" class="form-horizontal"> <div class="form-group has-error has-feedback"> <label for="" class="control-label col-md-2 col-md-pull-1">用户名:</label> <div class="col-md-3 col-md-pull-1"> <input type="text" class="form-control" /> <span class="form-control-feedback glyphicon glyphicon-remove"></span> </div> </div> <div class="form-group has-warning has-feedback"> <label for="" class="control-label col-md-2 col-md-pull-1">密码:</label> <div class="col-md-3 col-md-pull-1"> <input type="text" class="form-control" /> <span class="form-control-feedback glyphicon glyphicon-warning-sign"></span> </div> </div> <div class="form-group has-success has-feedback"> <label for="" class="control-label col-md-2 col-md-pull-1">邮箱:</label> <div class="col-md-3 col-md-pull-1"> <input type="text" class="form-control" /> <span class="form-control-feedback glyphicon glyphicon-ok"></span> <span>格式正确</span> </div> </div> </form>
按钮
多按钮与按钮风格
bootstrap中的按钮风格多样。button、a、input、span、div等都可以成为按钮,只要它具有”btn btn-样式”。但是为了更好的兼容性和可读性最好不要这样用,尽量使用button标签。
<button class="btn btn-default">按钮</button> <button class="btn btn-primary">按钮</button> <button class="btn btn-info">按钮</button> <button class="btn btn-link">按钮</button> <button class="btn btn-success btn-xs">按钮</button> <button class="btn btn-warning btn-sm">按钮</button> <button class="btn btn-error btn-lg">按钮</button> <!--btn-block使按钮独占一行--> <button class="btn btn-default btn-block">按钮</button> <button class="btn btn-primary btn-block">按钮</button> <button class="btn btn-info btn-block">按钮</button> <button class="btn btn-link btn-block">按钮</button> <button class="btn btn-success btn-xs btn-block active">按钮</button> <button class="btn btn-warning btn-sm btn-block focus">按钮</button> <button class="btn btn-error btn-lg btn-block">按钮</button>
按钮大小
如上述,使用”btn-xs”,”btn-sm”,”btn-lg”可以设置按钮大小。
按钮状态
如上述,有效的有”active”,”focus”。
图片
img-responsive:响应式图片,主要针对响应式设计。
img-rounded:圆角。
img-circle:圆形。
img-thumbnail:缩略图,表现为外层加了一个边框。
图标
bootstart内置了很多小图标。使用方式如下。其实在上面的”form-control-feedback”中已经使用了。其中”glyphicon”是必须的。
<span class="glyphicon glyphicon-search"></span>
输入框组
输入框组是一个”input-group”。我们需要加一些后缀(比如邮箱后缀)和前缀(金钱符号¥、$等)则需要使用到”input-group-addon”或者”input-group-btn”。语义简单清晰。如下:
<!--邮箱--> <div class="input-group"> <input type="text" class="form-control" /> <span class="input-group-addon">@gmail.com</span> </div> <!--货币--> <div class="input-group"> <span class="input-group-addon">$</span> <input type="text" class="form-control"> <span class="input-group-addon">.00</span> </div> <!--单选--> <div class="input-group"> <span class="input-group-addon"> <input type="radio"/> </span> <input type="text" class="form-control"/> </div> <!--多选--> <div class="input-group"> <span class="input-group-addon"> <input type="checkbox"/> </span> <input type="text" class="form-control" /> </div> <!--淘宝输入框组--> <div class="input-group"> <div class="input-group-btn"> <button class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 请选择<span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="javascript:void(0)">宝贝</a></li> <li><a href="javascript:void(0)">店铺</a></li> </ul> </div> <input type="text" class="form-control" /> <span class="input-group-btn"> <button class="btn btn-primary">搜索</button> </span> </div>
小结
“form-horizontal”,”form-inline”都是表单组最外层的标签。
一个表单组以”form-group”作为父元素。类似的还有”input-group”,以及以后可能会将的”button-group”。它们都可以设置大小。
”form-group-lg”,”input-lg”,”input-group-lg”,”btn-lg”等。
验证样式有”has-error”,”has-success”,”has-warning”。同元素可以加上”has-feedback”。以便让验证更完整。
按钮有很多样式,大小可以设置。
图片常用的四个样式。
bootstarp内置了很多图标。
输入框组以”input-group”开头,子元素有”input-group-addon”,”input-group-btn”等等。
以上所述是小编给大家介绍的BootStrap中的表单大全,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!