在 Twitter Bootstrap 中,各种形式

分享于 

44分钟阅读

Web开发

  繁體

介绍

是一个非常好的框架,用来创建设计和运行基于CSS的应用程序。 通过 Twitter Bootstrap,你可以轻松创建交互式设计。 我认为 Twitter Bootstrap 是为那些不知道核心CSS的开发者创建的。 Twitter Bootstrap 设计了三种形式的表单,如基本。水平。

在本文中,我创建了一些 Bootstrap 表单示例,它们不在 Bootstrap 文档中。 我已经创建了六种形式的表单,它们有定义和示例。

我展示了六种形式:

  • 基础和水平的
  • 基本和内联的
  • 水平和基本的
  • 水平和内联的
  • inline 和基本的混合了
  • inline 和水平的

说明

首先,你必须从可靠的来源下载jquery和 Twitter Bootstrap css和jquery库。 我已经使用了最新版本的jquey ( 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 library库,从这里下载 Bootstrap 库,从这里下载库

工作流程:

在开始前创建你的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>



向header添加 Jquery插件库,在我添加了注释( 在这里添加Jquery和 Bootstrap 库'的标题部分中添加 Twitter Bootstrap 插件库。 因此,在添加两个库之后,你的header 部分将如下所示。

如果你使用的是


<!--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,但是你使用或者其他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 ) ) 并编写自己的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>



这个收费的文件也可以添加到 中。

所有应用程序都有页眉,页脚和主要部分,这就是我创建页眉,页脚和主节的原因,使用 Bootstrap。 默认的Bootstrap 风格对所有人都不好,所以我通过编写自己的css来定制 bootstarp。 为了创建 header。页脚和主要部分,我使用了以下的html和 css。 在 body 部分添加 html,并将css添加到你自己的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。页脚和主要部分html和 css,你将看到以下输出。 我认为这种设计将有助于创建大规模应用。 要创建大规模应用程序,你必须了解sass或者 LESS。 你可以在这里看到我的小费,你可以在这里看到我的小费

窗体设计

如果你想混合基本和水平非 inline 表单,那么你必须将以下css代码添加到你自己的css文件'styles.css

**For 水平和基本形式 design**


/*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;


 }


}



嵌入式表单不是通用表单设计,很多设计器都使用这里表单仅用于有限元素,因此这不重要,我认为的默认设计将覆盖所有问题。 在这里,我尝试使用css代码来混合 inline 表单。 你只需将以下代码添加到你自己的css文件'styles.css

**For inline 表单 design**





/*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.inline 和Basic混合

这是基本和水平形式的设计,创造了我所用的一些技巧。 下面是这里示例的示例。

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.混合 inline 和水平:-

这是基本和水平形式的设计,创造了我所用的一些技巧。 下面是这里示例的示例。

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学习者都有帮助。 感谢你阅读。


for  BOO  form  引导  Bootstrap  Twitter  
相关文章