Bootstrap学习笔记（2）Form

来源：互联网发布：淘宝客户关系管理红包编辑：程序博客网时间：2024/06/01 08:51

Form

在form控制中的input，textarea，select标签在Bootstrap中都有样式的支持，同时也支持lists，checkbox标签。每个form的状态信息（如错误，警告，成功）都包含在样式中。Bootstrap在2.0的版本提供了四种form样式：

1、Vertical（默认）

2、Search

3、Inline

4、Horizontal

在之前的版本Horizontal是默认，而现在的版本默认的是Vertical。

vertical form

先来一个vertical form的例子：

<!DOCTYPE html>   <html lang="en">   <head>   <meta charset="utf-8">   <title>Twitter Bootstrap Version2.0 default form layout example</title>   <meta name="description" content="Twitter Bootstrap Version2.0 default form layout example from w3resource.com.">   <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  </head>  <body>  <form class="well">    <label>Label name</label>    <input type="text" class="span3" placeholder="Type something…">    <span class="help-inline">Associated help text!</span>    <label class="checkbox">      <input type="checkbox"> Check me out    </label>    <button type="submit" class="btn">Submit</button>  </form>  </body>  </html>

因为vertical为默认form样式，所以class中的form-vertical可以省略。而此处的class的well值为form创建了container（它也有其他的用途）。

search form

这里是一个search form的例子：

<!DOCTYPE html>   <html lang="en">   <head>   <meta charset="utf-8">   <title>Twitter Bootstrap Version2.0 search form layout example</title>   <meta name="description" content="Twitter Bootstrap Version2.0 search form layout example from w3resource.com.">   <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  </head>  <body>  <form class="well form-search">    <input type="text" class="input-medium search-query">    <button type="submit" class="btn">Search</button>  </form>  </body>  </html>

这里的 form标签及之后的input和button标签都附加了特殊的class。这里的input被设定为block-level的元素

Inline form

下面是inline form的例子：

<!DOCTYPE html>   <html lang="en">   <head>   <meta charset="utf-8">   <title>Twitter Bootstrap Version2.0 inline form layout example</title>   <meta name="description" content="Twitter Bootstrap Version2.0 inline form layout example from w3resource.com.">   <link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">  </head>  <body>  <form class="well form-inline">    <input type="text" class="input-small" placeholder="Email">    <input type="password" class="input-small" placeholder="Password">    <label class="checkbox">      <input type="checkbox"> Remember me    </label>    <button type="submit" class="btn">Sign in</button>  </form>  </body>  </html>

这里在form中添加了一个form-inline的class说明它是内联form，这里的input依旧是inline-level的元素。

horizontal form（略）

先到这里吧，像我这样的初学者，简单应用Bootstrap中css部分，暂时也就停留在对每种特殊样式所对应的class值了解到，而真正掌握恐怕也不能仅仅停留在看教程，多练多用才是最重要的吧。

教程：http://www.w3resource.com/twitter-bootstrap/forms-tutorial.php