Twitter Bootstrap 中的各种表单
4.66/5 (20投票s)
各种类型的 Bootstrap 表单，如基本、水平、垂直、混合等。
引言
Twitter Bootstrap 是一个非常好的框架，用于创建设计和运行基于 CSS 的应用程序。通过 Twitter Bootstrap，您可以轻松创建交互式设计。我认为 Twitter Bootstrap 是为那些不知道核心 CSS 的开发人员设计的。Twitter Bootstrap 设计了三种类型的表单：基本、水平、内联。
在本文中，我创建了一些 Bootstrap 文档中不存在的 Bootstrap 表单示例。我创建了六种类型的表单，下面将对它们进行定义和举例说明。
我将展示六种类型的表单
- 基本与水平表单混合
- 基本与内联表单混合
- 水平与基本表单混合
- 水平与内联表单混合
- 内联与基本表单混合
- 内联与水平表单混合
描述
首先，您需要从可靠来源下载 jQuery 和 Twitter Bootstrap 的 CSS 和 jQuery 库。我使用的是最新版本的 jQuery（2.1.1）和 Bootstrap（v3.3.1）。您可以在此处下载 jQuery 和 Bootstrap 库。
如果您使用 Visual Studio，只需在 **工具 -> NuGet 包管理器 -> 程序包管理器控制台** 中输入命令行即可。
通过命令行下载 jQuery 库
PM> Install-Package jQuery
通过命令行下载 Bootstrap 库
PM> Install-Package bootstrap
如果您使用 Visual Studio 以外的其他应用程序，可以从这里下载 jQuery 库，并从这里下载 Bootstrap 库。
工作流程
1）。首先，创建您的 HTML 文件，并随意命名。我创建的第一个文件名为“BasicHorizontalForm.html”。当我使用 Visual Studio 创建这个文件时，它是空的，所以写上 header 和 body 标签，并为响应式设计和其他活动编写 Meta 标签。在编写 header 和 body 后，我的页面看起来是这样的：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Basic and Horizontal Form</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="application-name" content="" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="robots" content="noodp" />
<meta name="robots" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta http-equiv="Content-Language" content="English" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<meta name="author" content="ecavo">
<meta name="viewport" content="width=device-width">
<!--Add Jquery and Bootstrap Library here-->
</head>
<body>
<!--Add Header, Main Content and Footer here-->
</body>
</html>
2）。在 header 部分，我添加了注释（“Add Jquery and Bootstrap Library here”）。在这里添加 Jquery 和 Twitter Bootstrap 库。添加这两个库后，您的 header 部分将如下所示。
如果您使用 CDN
<!--Add Jquery and Bootstrap Library here--> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery .js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3 .3.1/js/bootstrap.min.js"></script>
如果您不使用 CDN，而是使用 Visual Studio 或其他 IDE。
<!--Add Jquery and Bootstrap Library here--> <link href="Content/bootstrap.css" rel="stylesheet" /> <script src="Scripts/jquery-2.1.1.js"></script> <script src="Scripts/bootstrap.js"></script>
3）。为了自定义 Bootstrap 并编写自己的 CSS，您需要添加另一个 CSS 文件。我将其命名为“styles.css”。此文件将在 Bootstrap CSS 之后添加，因此整个库部分将如下所示。
<!--Add Jquery and Bootstrap Library here--> <link href="Content/bootstrap.css" rel="stylesheet" /> <link href="styles.css" rel="stylesheet" /> <!--This is your own css file--> <script src="Scripts/jquery-2.1.1.js"></script> <script src="Scripts/bootstrap.js"></script>
styles.css 文件也适用于使用 CDN。
4）。每个应用程序都有 header、footer 和主区域，因此我使用 Bootstrap 创建了 header、footer 和主区域。Bootstrap 的默认样式并不适合所有人，所以我通过编写自己的 CSS 来定制 Bootstrap。为了创建 header、footer 和主区域，我使用了以下 HTML 和 CSS。您只需将 HTML 添加到 body 部分，并将 CSS 添加到您自己的 CSS 文件“styles.css”中。
HTML
<!--Add Header, Main Content and Footer here--> <header> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link</a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> <li class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search" /> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container-fluid --> </nav> </header> <section class="main"> <div class="container"> <div class="row"> <div class="col-xs-6"> <!--put your form into here--> </div> </div> </div> </section> <footer class="navbar navbar-inverse navbar-fixed-bottom"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-calendar"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-comment"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-star"></span></a></li> </ul> </footer>
CSS
/*Fit html and body to the screen height*/
html, body {
height: 100%;
}
/*by setting padding 50px, the menu and footer height has fixed*/
body {
padding: 50px 0;
background-color: #ccc;
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%,
rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.2) 50%,
rgba(255, 255, 255, 0.2) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0));
background-size: 50px 50px;
}
/*The main section scroll bar will show auto if the content of main section is overload*/
.main {
height: 100%;
overflow-y: auto;
}
.main > .container {
background-color: rgb(255, 255, 255);
margin: 0px auto;
padding-left: 10px;
padding-right: 10px;
-moz-box-shadow: 10px 8px 15px gray, -10px 8px 15px gray, 10px 8px 15px gray;
-webkit-box-shadow: 10px 8px 15px gray, -10px 8px 15px gray, 10px 8px 15px gray;
box-shadow: 10px 8px 15px gray, -10px 8px 15px gray, 10px 8px 15px gray;
min-height: 100%;
}
.navbar-inverse {
background: #5f5f5f;
}
footer .navbar-nav {
float: left;
margin: 0;
}
footer .navbar-nav > li {
float: left;
}
footer .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
}
输出
通过添加 header、footer 和主区域的 HTML 和 CSS，您将看到以下输出。我认为这种设计有助于创建大型应用程序。要创建大型应用程序，您需要了解 Sass 或 Less。要学习 Sass，您可以从这里和这里查看我的技巧。
表单设计
如果您想将基本表单和水平表单混合，而不是内联表单，则需要将以下 CSS 代码添加到您自己的 CSS 文件“styles.css”中。
**用于水平和基本表单设计**
/*For horizontal and basic form design*/
form {
padding: 15px;
}
.form-group > .form-group {
padding-left: 0px;
padding-right: 0px;
}
.form-group > .form-group:nth-child(n+1) {
padding-left: 5px;
padding-right: 0px;
}
.form-group > .form-group:first-child {
padding-left: 0px;
}
.form-group > div[class*='col-'] {
padding-left: 0px;
padding-right: 0px;
}
.form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 5px;
padding-right: 0px;
}
.form-group > div[class*='col-']:first-child {
padding-left: 15px;
}
.form-group > div[class*='col-']:last-child {
padding-right: 15px;
}
@media only screen and (max-width: 768px) and (min-width: 120px) {
.form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.form-group > div[class*='col-']:first-child {
padding-right: 15px;
}
.form-group > div[class*='col-']:last-child {
padding-left: 15px;
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 769px) {
.form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.form-group > div[class*='col-']:first-child {
padding-right: 15px;
}
.form-group > div[class*='col-']:last-child {
padding-left: 15px;
padding-bottom: 0px;
}
}
内联表单不是常见的设计，许多设计师只在头部使用它，并且元素有限，所以我认为它不重要，Bootstrap 的默认设计应该能解决所有问题。我在这里尝试使用 CSS 代码混合内联表单。您只需将以下代码添加到您自己的 CSS 文件“styles.css”中。
**用于内联表单设计**
/*For inline form design*/
.form-inline .form-group {
padding-bottom: 10px;
width: 100%;
}
.form-inline .control-label {
padding-left: 0;
}
.form-inline .form-control {
width: 100%;
}
.form-inline .form-group > div[class*='col-'] {
padding-left: 0px;
padding-right: 0px;
}
.form-inline .form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 5px;
padding-right: 0px;
}
.form-inline .form-group > div[class*='col-']:first-child {
padding-left: 15px;
}
.form-inline .form-group > div[class*='col-']:last-child {
padding-right: 0px;
}
@media only screen and (max-width: 768px) and (min-width: 120px) {
.form-inline .form-group {
padding-bottom: 0px;
}
.form-inline .form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.form-inline .form-group > div[class*='col-']:first-child {
padding-right: 15px;
}
.form-inline .form-group > div[class*='col-']:last-child {
padding-left: 15px;
padding-bottom: 0px;
}
}
@media only screen and (max-width: 992px) and (min-width: 769px) {
.form-inline .form-group {
padding-bottom: 0px;
}
.form-inline .form-group > div[class*='col-']:nth-child(n+1) {
padding-left: 15px;
padding-right: 15px;
padding-bottom: 15px;
}
.form-inline .form-group > div[class*='col-']:first-child {
padding-right: 15px;
}
.form-inline .form-group > div[class*='col-']:last-child {
padding-left: 15px;
padding-bottom: 0px;
}
}
1. 基本与水平表单混合
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form>
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group row">
<div class="col-md-4">
<label for="firstName">First Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter first name">
</div>
<div class="col-md-4">
<label for="firstName">Middle Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter middle name">
</div>
<div class="col-md-4">
<label for="firstName">Last Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter last name">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">Age </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter age">
</div>
<div class="col-md-6">
<label for="firstName">Sex </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter sex">
</div>
</div>
<div class="form-group">
<label for="firstName">Address1 </label>
<textarea class="form-control" id="firstName"
placeholder="Please enter address1"></textarea>
</div>
<div class="form-group">
<label for="firstName">Address2 </label>
<textarea class="form-control" id="firstName"
placeholder="Please enter address2"></textarea>
</div>
<div class="form-group">
<label for="firstName">Country </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter country">
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">State </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter state">
</div>
<div class="col-md-6">
<label for="firstName">City </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter city">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Is Active
</label>
</div>
<button type="submit"
class="btn btn-default">Submit</button>
</fieldset>
</form>
输出
演示
2. 基本与内联表单混合
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form>
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group row">
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Email</label>
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Email">
</div>
</div>
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">Age </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter age">
</div>
<div class="col-md-6">
<label for="firstName">Sex </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter sex">
</div>
</div>
<div class="form-group">
<label for="firstName">Address2 </label>
<textarea class="form-control" id="firstName"
placeholder="Please enter address2"></textarea>
</div>
<div class="form-group">
<label for="firstName">Country </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter country">
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">State </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter state">
</div>
<div class="col-md-6">
<label for="firstName">City </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter city">
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox">
Is Active
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</fieldset>
</form>
输出
演示
3. 水平与基本表单混合
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form class="form-horizontal">
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group row">
<div class="col-md-4">
<label for="firstName">First Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter first name">
</div>
<div class="col-md-4">
<label for="firstName">Middle Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter middle name">
</div>
<div class="col-md-4">
<label for="firstName">Last Name </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter last name">
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">Age </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter age">
</div>
<div class="col-md-6">
<label for="firstName">Sex </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter sex">
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Address1 </label>
<div class="col-sm-10">
<textarea class="form-control"
id="firstName" placeholder="Please enter address1"></textarea>
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Address2 </label>
<div class="col-sm-10">
<textarea class="form-control"
id="firstName"
placeholder="Please enter address2"></textarea>
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Country </label>
<div class="col-sm-10">
<input type="text"
class="form-control" id="firstName"
placeholder="Please enter country">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit"
class="btn btn-default">Sign in</button>
</div>
</div>
</fieldset>
</form>
输出
演示
4. 水平与内联表单混合
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form class="form-horizontal">
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group row">
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Email</label>
<div class="input-group">
<div class="input-group-addon">@</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Email">
</div>
</div>
<div class="col-md-4">
<label class="sr-only"
for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control"
id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="firstName">Age </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter age">
</div>
<div class="col-md-6">
<label for="firstName">Sex </label>
<input type="text" class="form-control"
id="firstName" placeholder="Please enter sex">
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Address1 </label>
<div class="col-sm-10">
<textarea class="form-control"
id="firstName"
placeholder="Please enter address1"></textarea>
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Address2 </label>
<div class="col-sm-10">
<textarea class="form-control"
id="firstName"
placeholder="Please enter address2"></textarea>
</div>
</div>
<div class="form-group">
<label for="firstName"
class="col-sm-2 control-label">Country </label>
<div class="col-sm-10">
<input type="text" class="form-control"
id="firstName" placeholder="Please enter country">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit"
class="btn btn-default">Sign in</button>
</div>
</div>
</fieldset>
</form>
输出
演示
5. 内联与基本表单混合
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form class="form-inline">
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group">
<label class="sr-only"
for="exampleInputEmail2">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only"
for="exampleInputPassword2">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group row">
<div class="col-md-6">
<label class="col-sm-12 control-label"
for="firstName">Age </label>
<input type="text"
class="col-sm-12 form-control"
id="firstName" placeholder="Please enter age">
</div>
<div class="col-md-6">
<label class="col-sm-12
control-label" for="firstName">Sex </label>
<input type="text"
class="col-sm-12 form-control"
id="firstName" placeholder="Please enter sex">
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-12 control-label"
for="firstName">Address1 </label>
<textarea class="col-sm-12 form-control"
id="firstName"
placeholder="Please enter address1"></textarea>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-12 control-label"
for="firstName">Address2 </label>
<textarea class="col-sm-12 form-control"
id="firstName"
placeholder="Please enter address2"></textarea>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-12 control-label"
for="firstName">Country </label>
<input type="text"
class="col-sm-12 form-control" id="firstName"
placeholder="Please enter country">
</div>
<div class="clearfix"></div>
<div class="form-group row">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="submit"
class="btn btn-default">Sign in</button>
</div>
</div>
</fieldset>
</form>
输出
演示
6. 内联与水平表单混合：-
这是基本与水平表单的设计，为了创建这个表单，我使用了一些技巧。这是示例。
HTML
<form class="form-inline">
<fieldset>
<legend>Personal Information:</legend>
<div class="form-group">
<label class="sr-only"
for="exampleInputEmail2">Email address</label>
<input type="email"
class="form-control"
id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only"
for="exampleInputPassword2">Password</label>
<input type="password"
class="form-control"
id="exampleInputPassword2" placeholder="Password">
</div>
<div class="form-group row">
<div class="col-md-6">
<label for="inputEmail3"
class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email"
class="form-control"
id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="col-md-6">
<label for="inputEmail3"
class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email"
class="form-control"
id="inputEmail3" placeholder="Email">
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-4 control-label"
for="firstName">Address1 </label>
<div class="col-sm-8">
<textarea class="form-control"
id="firstName"
placeholder="Please enter address1"></textarea>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-4 control-label"
for="firstName">Address1 </label>
<div class="col-sm-8">
<textarea class="form-control"
id="firstName"
placeholder="Please enter address1"></textarea>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
<label class="col-sm-12 control-label"
for="firstName">Country </label>
<input type="text"
class="col-sm-12 form-control"
id="firstName" placeholder="Please enter country">
</div>
<div class="clearfix"></div>
<div class="form-group row">
<div class="col-sm-12">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<button type="submit"
class="btn btn-default">Sign in</button>
</div>
</div>
</fieldset>
</form>
输出
演示
下载
您可以通过以下链接下载该项目。
如果您使用非 Visual Studio 的其他工具
如果您使用 Visual Studio
结论
本文面向初学者。我在网上搜索了很多，但没有找到关于混合 Bootstrap 表单的合适指南。因此，我创建了这篇文章。我认为这对所有 CSS 学习者都会有所帮助。感谢您的阅读。