<!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>
图片预览：
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
