本文介绍如何使用Bootstrap快速创建不同样式的表单，包括圆角搜索表单、行内表单和横向表单，并提供实现步骤及代码示例。
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 表单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;">
<h3>创建一个圆角的搜索表单</h3>
<p>使用方法：为form添加一个form-search类，再给input添加一个search-query类，即可创建一个行内圆角搜索表单</p>
<form class=" form-search" action="">
<input class=" input-medium search-query" type="text" name="" id="" placeholder="开始搜索">
<button class="btn" type="submit">搜索</button>
</form>
<h3>行内表单</h3>
<p>使用方法：在form后面添加一个form-inline类，即可让所有表单元素即可并排显示</p>
<form action="" class="form-inline">
<input class="input-small" type="text" name="" id="" placeholder="账号">
<input class="input-small" type="password" name="" id="" placeholder="密码">
<label class="checkbox">
<input type="checkbox" name="" id=""> 记住密码
</label>
<button class="btn">登录</button>
</form>
<h3>横向表单</h3>
<ol>
<li>为form添加.form-horizontal类</li>
<li>把成对的标签和控件包装在.control-label类中</li>
<li>为其中每个标签添加.control-label类</li>
<li>再把每一个类包装在一个.controls的div中，以便对齐</li>
</ol>
<form class="form-horizontal" action="">
<div class="control-group">
<label class="control-label" for="input1">账号</label>
<div class="controls">
<input type="text" name="" id="input1" placeholder="账号">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input2">密码</label>
<div class="controls">
<input type="password" name="" id="input2" placeholder="密码">
</div>
</div>
</form>
</body>
<html>
<head>
<title>Bootstrap 表单</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
</head>
<body style="padding:50px;">
<h3>创建一个圆角的搜索表单</h3>
<p>使用方法：为form添加一个form-search类，再给input添加一个search-query类，即可创建一个行内圆角搜索表单</p>
<form class=" form-search" action="">
<input class=" input-medium search-query" type="text" name="" id="" placeholder="开始搜索">
<button class="btn" type="submit">搜索</button>
</form>
<h3>行内表单</h3>
<p>使用方法：在form后面添加一个form-inline类，即可让所有表单元素即可并排显示</p>
<form action="" class="form-inline">
<input class="input-small" type="text" name="" id="" placeholder="账号">
<input class="input-small" type="password" name="" id="" placeholder="密码">
<label class="checkbox">
<input type="checkbox" name="" id=""> 记住密码
</label>
<button class="btn">登录</button>
</form>
<h3>横向表单</h3>
<ol>
<li>为form添加.form-horizontal类</li>
<li>把成对的标签和控件包装在.control-label类中</li>
<li>为其中每个标签添加.control-label类</li>
<li>再把每一个类包装在一个.controls的div中，以便对齐</li>
</ol>
<form class="form-horizontal" action="">
<div class="control-group">
<label class="control-label" for="input1">账号</label>
<div class="controls">
<input type="text" name="" id="input1" placeholder="账号">
</div>
</div>
<div class="control-group">
<label class="control-label" for="input2">密码</label>
<div class="controls">
<input type="password" name="" id="input2" placeholder="密码">
</div>
</div>
</form>
</body>
</html>
图片预览：
扫一扫
7979
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
