Bootstrap学习笔记（2）Form

最新推荐文章于 2022-11-02 22:57:28 发布

SOSOSOSOShellon

最新推荐文章于 2022-11-02 22:57:28 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： bootstrap front-end

本文链接：https://blog.youkuaiyun.com/SOSOSOSOShellon/article/details/8476761

front-end 同时被 2 个专栏收录

3 篇文章

订阅专栏

bootstrap

1 篇文章

订阅专栏

本文介绍了Bootstrap 2.0版本中提供的四种表单样式：垂直、搜索、内联和水平，并通过示例代码展示了不同样式的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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的元素。