[关闭]
@phper 2015-04-01T02:53:41.000000Z 字数 11112 阅读 7219

bootstrap学习笔记-第3章 表单

bootstrap


这一篇继续学习一下bootstrap里的表单。

基础表单

表单就是<form>标签,其中包括文本输入框下拉选择框单选按钮复选按钮文本域按钮等。

bootstrap里面的form风格一般是这样。先外围来一个<form role="form">然后,中间的每个元素,都会被<div class="form-group">围住。比如:下面这个简单的:

  1. <form role="form">
  2. <div class="form-group">
  3. <label for="exampleInputEmail1">邮箱:</label>
  4. <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址">
  5. </div>
  6. <div class="form-group">
  7. <label for="exampleInputPassword1">密码</label>
  8. <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码">
  9. </div>
  10. <div class="checkbox">
  11. <label>
  12. <input type="checkbox"> 记住密码
  13. </label>
  14. </div>
  15. <button type="submit" class="btn btn-default">进入邮箱</button>
  16. </form>

效果如图:

水平表单

Bootstrap框架默认的表单是垂直显示风格,见上图。但很多时候我们需要的水平表单风格(标签居左,表单控件居右)见下图。

<form>加上一个.form-horizontalclass就可以了。还有就是得改变里面<input>元素外面也必须套一层<div>,并加上网格布局标识col-sm-2类似这样的。以后会讲到:

  1. <form class="form-horizontal" role="form">
  2. <div class="form-group">
  3. <label for="inputEmail3" class="col-sm-2 control-label">邮箱</label>
  4. <div class="col-sm-10">
  5. <input type="email" class="form-control" id="inputEmail3" placeholder="请输入您的邮箱地址">
  6. </div>
  7. </div>
  8. <div class="form-group">
  9. <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
  10. <div class="col-sm-10">
  11. <input type="password" class="form-control" id="inputPassword3" placeholder="请输入您的邮箱密码">
  12. </div>
  13. </div>
  14. <div class="form-group">
  15. <div class="col-sm-offset-2 col-sm-10">
  16. <div class="checkbox">
  17. <label>
  18. <input type="checkbox"> 记住密码
  19. </label>
  20. </div>
  21. </div>
  22. </div>
  23. <div class="form-group">
  24. <div class="col-sm-offset-2 col-sm-10">
  25. <button type="submit" class="btn btn-default">进入邮箱</button>
  26. </div>
  27. </div>
  28. </form>

效果如图:

内联表单

内联表单的意思是将表单的控件都在一行内显示。类似于:

很简单,只要在<from>上加上.form-line的class 就可以了。还是这个例子:

  1. <form class="form-inline" role="form">
  2. <div class="form-group">
  3. <label for="exampleInputEmail2">邮箱</label>
  4. <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址">
  5. </div>
  6. <div class="form-group">
  7. <label for="exampleInputPassword2">密码</label>
  8. <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码">
  9. </div>
  10. <div class="checkbox">
  11. <label>
  12. <input type="checkbox"> 记住密码
  13. </label>
  14. </div>
  15. <button type="submit" class="btn btn-default">进入邮箱</button>
  16. </form>

运行结果如上图。

表单控件(输入框input)

<input> 框是很常见的,在bootstrap中也优化的蛮不错。type=?如果为了设配更多的类型,必须要填:email, text, password,button, submit等。为了让控件在各种表单风格中样式不出错,需要添加类名form-control的class,如:

  1. <form role="form">
  2. <div class="form-group">
  3. <input type="email" class="form-control" placeholder="Enter email">
  4. </div>
  5. </form>

效果图:

下拉选择框select

select 分为下拉单个选择和多个多行选择,有它的参数multiple决定。同样,为了让控件在各种表单风格中样式不出错,需要添加类名form-control的class,如:

  1. <form role="form">
  2. <div class="form-group">
  3. <select class="form-control">
  4. <option>1</option>
  5. <option>2</option>
  6. <option>3</option>
  7. <option>4</option>
  8. <option>5</option>
  9. </select>
  10. </div>
  11. <div class="form-group">
  12. <select multiple class="form-control">
  13. <option>1</option>
  14. <option>2</option>
  15. <option>3</option>
  16. <option>4</option>
  17. <option>5</option>
  18. </select>
  19. </div>
  20. </form>

效果如图:

文本域textarea

文本域一般用来填写较多的文字,在bootstrap中它和原始使用方法一样,设置rows可定义其高度,设置cols可以设置其宽度。但如果textarea元素中添加了类名“form-control”类名,则无需设置cols属性。因为Bootstrap框架中的“form-control”样式的表单控件宽度为100%或auto。

  1. <form role="form">
  2. <div class="form-group">
  3. <textarea class="form-control" rows="3"></textarea>
  4. </div>
  5. </form>

复选框checkbox和单选择按钮radio

之前我用原生的checkbox 和 radio 最蛋疼的问题,就是文字对齐问题,太蛋疼了。css我又用的很烂,所以bootstrap把它优化了下。很傻很爽。用对应的div class=radio checkbox包住就可以了。

  1. <form role="form">
  2. <h3>案例1</h3>
  3. <div class="checkbox">
  4. <label>
  5. <input type="checkbox" value="">
  6. 记住密码
  7. </label>
  8. </div>
  9. <div class="radio">
  10. <label>
  11. <input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
  12. 喜欢
  13. </label>
  14. </div>
  15. <div class="radio">
  16. <label>
  17. <input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
  18. 不喜欢
  19. </label>
  20. </div>
  21. </form>

效果如图:对的齐齐的。

复选框checkbox和单选择按钮radio 水平排列。

上面的是换行了的,有的时候是需要水平一行显示的。
1、如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
2、如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”

像上面那样的div=checkbox radio就不要了,因为他们就是换行用的

  1. <form role="form">
  2. <div class="form-group">
  3. <label class="checkbox-inline">
  4. <input type="checkbox" value="option1">游戏
  5. </label>
  6. <label class="checkbox-inline">
  7. <input type="checkbox" value="option2">摄影
  8. </label>
  9. <label class="checkbox-inline">
  10. <input type="checkbox" value="option3">旅游
  11. </label>
  12. </div>
  13. <div class="form-group">
  14. <label class="radio-inline">
  15. <input type="radio" value="option1" name="sex">男性
  16. </label>
  17. <label class="radio-inline">
  18. <input type="radio" value="option2" name="sex">女性
  19. </label>
  20. <label class="radio-inline">
  21. <input type="radio" value="option3" name="sex">中性
  22. </label>
  23. </div>
  24. </form>

效果如图:

表单控件大小

之前我们用表单都是默认的大小,有的会随着窗口变化而变化。Bootstrap框架还提供了两个不同的类名,用来控制表单控件的高度。这两个类名是:
1、input-sm:让控件比正常大小更小
2、input-lg:让控件比正常大小更大

我们试一下:

  1. <input class="form-control input-lg" type="text" placeholder="添加.input-lg,控件变大">
  2. <input class="form-control" type="text" placeholder="正常大小">
  3. <input class="form-control input-sm" type="text" placeholder="添加.input-sm,控件变小">

效果如图:

但是,因为它只是高度变化了,宽度还是100%显示的。

所以,如果我们也想控制长度的话,那就必须用到网格系统了,类似:col-xs-4来控制:

首先要用到前面我们说到的水平表单form-horizontal

  1. <form role="form" class="form-horizontal">
  2. <div class="form-group">
  3. <div class="col-xs-4">
  4. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  5. </div>
  6. <div class="col-xs-4">
  7. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  8. </div>
  9. <div class="col-xs-4">
  10. <input class="form-control input-lg" type="text" placeholder=".col-xs-4">
  11. </div>
  12. </div>
  13. </form>

效果如图:

表单控件状态(焦点状态)

焦点状态是通过伪类“:focus”来实现。在form-control已经定义好了,所以我们只需要添加这个类就可以了。

  1. <form role="form" class="form-horizontal">
  2. <div class="form-group">
  3. <div class="col-xs-6">
  4. <input class="form-control input-lg" type="text" placeholder="不是焦点状态下效果">
  5. </div>
  6. </div>
  7. </form>

当我们鼠标点进去的时候,周边一圈是淡蓝色的边,就是focus的状态了:

表单控件状态(禁用状态)

和原生的一样,只需要通过增加disabled就能禁用表单的输入。bootstrap对它进行了很多的优化。

  1. <input class="form-control" type="text" placeholder="表单已禁用,不能输入" disabled>

鼠标放上去就会变成一个禁止的标志。

在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态

  1. <form role="form">
  2. <fieldset disabled>
  3. <div class="form-group">
  4. <label for="disabledTextInput">禁用的输入框</label>
  5. <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
  6. </div>
  7. <div class="form-group">
  8. <label for="disabledSelect">禁用的下拉框</label>
  9. <select id="disabledSelect" class="form-control">
  10. <option>不可选择</option>
  11. </select>
  12. </div>
  13. <div class="checkbox">
  14. <label>
  15. <input type="checkbox"> 无法选择
  16. </label>
  17. </div>
  18. <button type="submit" class="btn btn-primary">提交</button>
  19. </fieldset>
  20. </form>

效果如图:

表单控件状态(验证状态)

有时候,我们输入数据后,验证会直接反馈到表单上,这样会比较直接,bootstrap提供了以下表单验证:
1、.has-warning:警告状态(黄色)
2、.has-error:错误状态(红色)
3、.has-success:成功状态(绿色)
使用的时候只需要在form-group的<div>上对应添加状态类名。

  1. <form role="form">
  2. <div class="form-group has-success">
  3. <label class="control-label" for="inputSuccess1">成功状态</label>
  4. <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5. </div>
  6. <div class="form-group has-warning">
  7. <label class="control-label" for="inputWarning1">警告状态</label>
  8. <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  9. </div>
  10. <div class="form-group has-error">
  11. <label class="control-label" for="inputError1">错误状态</label>
  12. <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  13. </div>
  14. </form>

效果如图:

<label class="control-label">加个contrlo-label 会继承上层div容器的颜色样式,所以文字也会变颜色。

有时候,我们光看颜色变化了,其实还是提示的不够明显,不同的状态会提供不同的 icon,比如成功是一个对号(√),错误是一个叉号(×)等。在Bootstrap框中也提供了这样的效果。上层div容器加个has-feedback类就可以了。请注意,此类名要与has-errorhas-warninghas-success在一起,然后还需要在<input>框后面添加一个<span>

  1. <form role="form">
  2. <div class="form-group has-success has-feedback">
  3. <label class="control-label" for="inputSuccess1">成功状态</label>
  4. <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5. <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  6. </div>
  7. <div class="form-group has-warning has-feedback">
  8. <label class="control-label" for="inputWarning1">警告状态</label>
  9. <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
  10. <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
  11. </div>
  12. <div class="form-group has-error has-feedback">
  13. <label class="control-label" for="inputError1">错误状态</label>
  14. <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
  15. <span class="glyphicon glyphicon-remove form-control-feedback"></span>
  16. </div>
  17. </form>

<span> 里面加了3个class:lyphicon glyphicon-warning-sign form-control-feedback

success : glyphicon-ok
warning : glyphicon-warning-sign
error : glyphicon-remove

效果图:

表单提示信息

上面的表单提示提示,是显示在表达右边的,bootstrap中还可以是文字的提示的,就需要用help-block样式,将提示信息以块状显示,并且显示在控件底部。

  1. <form role="form">
  2. <div class="form-group has-success has-feedback">
  3. <label class="control-label" for="inputSuccess1">成功状态</label>
  4. <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  5. <span class="help-block">你输入的信息是正确的</span>
  6. <span class="glyphicon glyphicon-ok form-control-feedback"></span>
  7. </div>
  8. </form>

效果如图:

如果我想把提示信息放到一行显示,可以借助于网格系统col-sm-5这样子:

  1. <form role="form">
  2. <div class="form-group">
  3. <label class="control-label" for="inputSuccess1">成功状态</label>
  4. <div class="row">
  5. <div class="col-xs-6">
  6. <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
  7. </div>
  8. <span class="col-xs-6 help-block">你输入的信息是正确的</span>
  9. </div>
  10. </div>
  11. </form>

效果如图:

按钮

bootstrap中一般采用<button>来做按钮,而且优化的很不错,而且针对不同的情况做了分类:

  1. <button class="btn" type="button">基础按钮.btn</button>
  2. <button class="btn btn-default" type="button">默认按钮.btn-default</button>
  3. <button class="btn btn-primary" type="button">主要按钮.btn-primary</button>
  4. <button class="btn btn-success" type="button">成功按钮.btn-success</button>
  5. <button class="btn btn-info" type="button">信息按钮.btn-info</button>
  6. <button class="btn btn-warning" type="button">警告按钮.btn-warning</button>
  7. <button class="btn btn-danger" type="button">危险按钮.btn-danger</button>
  8. <button class="btn btn-link" type="button">链接按钮.btn-link</button>

效果如图:蛮绚丽多彩的。

按钮大小

上面的按钮大小都是默认的大小,会随着页面大小而变化,bootstrap中也是可以控制其大小的。

btn-lg大型按钮,btn-sm小型按钮, btn-xs超小型

  1. <button class="btn btn-primary btn-lg" type="button">大型按钮.btn-lg</button>
  2. <button class="btn btn-primary" type="button">正常按钮</button>
  3. <button class="btn btn-primary btn-sm" type="button">小型按钮.btn-sm</button>
  4. <button class="btn btn-primary btn-xs" type="button">超小型按钮.btn-xs</button>

效果如下:

块状按钮

在一些h5 页面,一个按钮是占据一行的,并且随着页面大小变化而变化。可以加个bt-block就可以了:

  1. <button class="btnbtn-primary btn-lg btn-block" type="button">大型按钮.btn-lg</button>
  2. <button class="btnbtn-primary btn-block" type="button">正常按钮</button>
  3. <button class="btnbtn-primary btn-sm btn-block" type="button">小型按钮.btn-sm</button>
  4. <button class="btnbtn-primary btn-xs btn-block" type="button">超小型按钮.btn-xs</button>

效果:

按钮状态——禁用状态

要禁用一个按钮,可以加disabled属性或者加一个class=disabled也行:

  1. <button class="btnbtn-primary btn-lg btn-block" type="button" disabled>通过disabled属性禁用按钮</button>
  2. <button class="btnbtn-primary btn-block disabled" type="button">通过添加类名disabled禁用按钮</button>
  3. <button class="btnbtn-primary btn-sm btn-block" type="button">未禁用的按钮</button>

效果:

图像

在Bootstrap框架中对于图像的样式风格提供以下几种风格,只需要在<img>标签上添加对应的类名:

1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

  1. <img alt="140x140" src="http://placehold.it/140x140"> 默认
  2. <img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">圆角
  3. <img class="img-circle" alt="140x140" src="http://placehold.it/140x140">圆形
  4. <img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">缩略
  5. <img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">响应式

效果如图:

图标

图标就是icon 很有用。很多图标都会用icon来做,bootstrap中提供了很多icon图标。都是有 glyphicon 提供的。用个<span>元素即可, 所有icon都是以glyphicon-前缀的类名开始,然后后缀表示图标的名称:

  1. <span class="glyphicon glyphicon-search"></span>
  2. <span class="glyphicon glyphicon-asterisk"></span>
  3. <span class="glyphicon glyphicon-plus"></span>
  4. <span class="glyphicon glyphicon-cloud"></span>

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注