Jump Start Bootstrap 第3章
Jump Start Bootstrap 第3章
在这一章，我们将开始使用Bootstrap的一些非常有用的HTML组件。诸如按钮、标题(headers)、导航菜单和评论系统的组件经常被用在网站上。通过组件，Bootstrap可以简单和快速的帮我们在网站上添加这些功能。
页面组件
页面组件构成了网页的基础结构。页面组件的示例包括页面标题、显示重要信息的突出面板、嵌套的注释部分、图像缩略图和链接列表。这些都是很受欢迎的组件，但从头开发需要很长一段时间。在本节中，我们将重点讨论如何使用Bootstrap推荐创建可重用的HTML组件标记和类。让我们从页眉开始。
页眉
给页面加一个页眉或标题很简单，任何人都能使用<h1>标签在一个页面上显示一个页面；然而，但是，要巧妙地显示一个不采用浏览器默认样式的标题，它被适当的间距围绕，旁边有小的副标题。。。这可能会耗费大量的时间。
幸运的是，Bootstrap创造了一个页眉组件来负责全部的附加任务。在开始讨论页眉标签之前，先让我们新建一个贯穿本章的新项目。
现在，让我们添加页眉标签
<div class="page-header">
<h1>Chapter 3</h1>
</div>当你使用<h1>做标题的时候，你必须把它包含在一个使用了page-header类的<div>标签内才有效。
结果如图所示
如你所见，页眉组件仅仅在底部添加了一条很浅的灰线。我们稍后会看到，这只是我们添加副标题的开始。
容器内页眉
这里有一个小问题，我们看见页眉卡在了浏览器的左边，这是因为我们没有定义一个容器去包裹我们页面上的所有的内容。
现在，我们把页眉标签放入一个包含“container”的<div>标签。
<div class="container">
<div class="page-header">
<h1>Chapter 3</h1>
</div>
</div>结果如图所示
副标题
如果你想加一个副标题在这个页面，你可以把副标题用<small></small>标签包裹起来，放在<h1>标签内，像这样子：
<div class="container">
<div class="page-header">
<h1>Chapter 3<small>Exploring Bootstrap Components</small></h1>
</div>
</div>结果如图所示
面板
面板用来显示被边框包裹的文字或图片。下面是创建面板的代码
<div class="container">
<div class="page-header">
<h1>Chapter 3<small>Exploring Bootstrap Components</small></h1>
</div>
<div class="panel panel-default">
<div class="panel-heading">
ATTENTION
</div>
<div class="panel-body">
Lorem ipsum dolor sit ametnim ...
</div>
<div class="panel-footer">
<a href="#" class="btn btn-danger btn-sm">Agree</a>
<a href="#" class="btn btn-default btn-sm">Decline</a>
</div>
</div>
</div>结果如图所示
如你看见的一样，面板<div>被分为三部分：头部(“panel-heading“)、躯干(“panel-body“)、底部(“panel-footer“),每一个部分都是可选的。
面板有各种颜色选项，在上面的代码中，我们使用的是类“panel-default”拥有的默认的颜色，你可以选择其他类的不同颜色：
- panel-primary 暗蓝
- panel-success 绿
- panel-info 天蓝
- panel-warning 黄
- panel-danger 红
媒体对象
媒体对象是用来生成组件来包裹需要和文字对齐的媒体（图片、视频、声音）。它最适合用来实现诸如评论部分、显示微博、展示包含图像的产品详情等功能。
为你的网站设计一个评论区是一个棘手的任务。你需要小心的设计一些可重用的HTML标签来支持嵌套评论。Bootstrap的媒体对象用在这里很方便，使用它可以很容易的创建很多层嵌套。
创建媒体对象的代码如下：
<div class="container">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="images/touxiang.jpg" alt="touxiang">
</a>
<div class="media-body">
<h4 class="media-heading">Introduce oneself</h4>
<p>As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
</div>
</div>
</div>生成一个媒体对象，你需要创建一个包含media类的<div>标签；然后你需要放入两个必要的部件：媒体本身（这里是一张图片）和media-body。
如程序片段所示，媒体需要包含一个media-object，并且本体被<a></a>标签包裹。然后，您可以通过在一个元素上添加一个 pull-left或pull-right的类来将媒体对齐到任何元素。【注：即<a></a>标签包裹的媒体对象和<div class="media-body">的前后位置可以用pull-left或pull-right类来改变;pull-left或pull-right必须添加在<a>标签内，如果不添加，两者是上下排列的，且添加在<div class="media-body">内不会显示media-body的内容】
接下来，<div class="media-body">将包含两个功能组件：标题和文字内容。标题使用<h4>标签，并包含一个”media-heading”类,文本内容使用<p>表示。【注：包含更多的文字组件也是可以显示的】
就是这样!在浏览器中查看它;它应该类似于下图
嵌套的组件
去产生一个可嵌套的组件设计，我们可以在之前的
标签之内放置更多的媒体对象,代码如下：
<div class="container">
<div class="media">
<a class="pull-left" href="#">
<img src="images/touxiang.jpg" class="media-object" alt="touxiang">
</a>
<div class="media-body">
<h4 class="media-heading">Introduce oneself</h4>
<p>As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
<div class="media">
<a class="pull-left" href="#">
<img src="images/touxiang.jpg" class="media-object" alt="touxiang">
</a>
<div class="media-body">
<h4 class="media-heading">Introduce oneself</h4>
<p>As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
</div>
</div>
</div>
</div>
</div>下图展示了嵌套媒体对象：
如果你愿意，你可以使用很多层的嵌套。
缩略图
使用Bootstrap的缩略图组件，可以快速的完成显示图片或视频缩略图的功能。它用一个有边框环绕的可点击组件来显示图像和视频的缩略图。
下面是产生缩略图的代码：
<div class="container">
<a href="#" class="thumbnail">
<img src="images/touxiang.jpg">
</a>
</div>让我们使用Bootstrap网格创建一个4列的设计；我们在每一列中加一张图片，并用缩略图功能装饰。【注：缩略图组件本身并不设定缩略图的尺寸，只是填充它所在的整个容器，可以用设定col-xs-*的办法来限定宽度】
<div class="container">
<div class="row">
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="images/1.jpg">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="images/2.jpg">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="images/1.jpg">
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="images/2.jpg">
</a>
</div>
</div>
</div>这将产生如下图所示的结果： 尝试把鼠标在这些图片上移入移出，你将看见漂亮的高光效果。
您还可以使用<div>标记代替<a>来代表一个缩略图。【注：<div>标签包裹的缩略图，没有触摸效果】
让我们给每个缩略图加一个标题，我们只需要在<img>标签后面添加一个<div class="caption">，我们的缩略图的代码片段如下：
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="images/1.jpg">
<div class="caption">
<h3>test1</h3>
</div>
</a>
</div>如果对页面上的每个缩略图应用一个标题，就会产生类似下图的结果。
你可以给每个缩略图加一些说明和一个“Read More”的按钮。为此，我们需要首先用div元素替换类缩略图的链接元素。然后我们在<div class="caption">中做下列操作：添加了一个<p></p>包裹的文字；添加一个内容为“Read More”的链接<a>,并用class=”btn btn-primary”装饰它。
<div class="thumbnail">
<img src="images/1.jpg">
<div class="caption">
<h3>test1</h3>
<p>As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
<p><a href="#" class="btn btn-primary">Read More</a></p>
</div>
</div>做了这些变更之后,缩略图的最终效果如图
List Group(列表组件)
列表组件是一个创建列表的容器，例如创建有用资源的列表或者一份最近的活动清单。您还可以使用它来获得大量文本内容的复杂列表。 创建列表组的标记如下所示：
<div class="container">
<h2>My MailBox</h2>
<ul class="list-group">
<li class="list-group-item">Inbox</li>
<li class="list-group-item">Sent</li>
<li class="list-group-item">Drafts</li>
<li class="list-group-item">Deleted</li>
<li class="list-group-item">Spam</li>
</ul>
</div>结果如图所示
你需要给<ul>或者<div>标签添加一个”list-group“类，这样会使它的子元素表现的像一个列表。根据列表的类型，列表的子元素可以是<li>或者<a>；子元素需要包含类”list-groupitem”。
链接的列表 当你想用列表显示链接的时候，列表的子元素应该用
<a>,而不是用<li>，同样列表的元素应该是<div>而不是<ul>
徽章组件
我们也能在每个列表项旁边使用徽章组件来显示数字（例如那些用来指示等待通知的文件）。在这章稍后，我们将学习更多关于徽章的信息，但现在你可以在列表的每一行中加入下面的代码来显示数字。
<div class="container">
<h2>My MailBox</h2>
<ul class="list-group">
<li class="list-group-item">Inbox<span class="badge">14</span></li>
<li class="list-group-item">Sent</li>
<li class="list-group-item">Drafts<span class="badge">6</span></li>
<li class="list-group-item">Deleted</li>
<li class="list-group-item">Spam</li>
</ul>
</div>我们更新列表看起来如图所示
如你所见，数字漂亮地排列在每个列表项的右边。
我们也可以在每个列表项上的”list-group-item”类后面添加”list-group-item-*”类来指定列表项的各种颜色：
- list-group-item-success 绿色
- list-group-item-info 天蓝
- list-group-item-warning 淡黄
- list-group-item-danger 亮红
例如，在列表项中添加”list-group-item-success”，这一项将显示淡绿色的背景。
<li class="list-group-item list-group-item-success">Inbox<span class="badge">14</span></li>我们更新列表看起来如图所示
但是，我们可以使用列表组做更多的事情，而不仅仅是构建简单的列表。 如果您想创建一个列表，其中每个列表项包含一些文本内容和一个标题，您可以使用以下标记:
<a href="#" class="list-group-item">
<h4 class="list-group-item-heading">Item heading</h4>
<p class="list-group-item-text">As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
</a>我们现在将一组<h4>和<p>元素放在每个列表项中来代替单纯的文本。我们使用包含类”list-group-item-heading”的<h4>作为列表项的表头，使用包含”list-group-item-text”的<p>显示内容。
结果如图所示
你也可以使用”active”类来高亮显示列表中的任何元素。
导航组件
导航栏和面包屑组件是许多网站的重要部分。Bootstrap附带了许多用于帮助构建这些特性的组件。让我们开始创建第一个导航组件：
Navs
Navs是一组排成一行用来导航的链接；我们把这组链接呈现成标签或者按钮，在Bootstrap中,它们被称为pills。我们先来创建标签类型的链接，然后创建按钮类型的。
我们像这样创建标签类型的导航链接：
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Liked Pages</a></li>
</ul>
</div>结果如图所示
类”nav”是标签或按钮类型的导航链接共用类，我们添加”nav-tabs”类，让导航条看起来像一组标签。
如下面的代码所示，我们创建按钮样式的导航链接
<div class="container">
<ul class="nav nav-pills">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Liked Pages</a></li>
</ul>
</div>结果如图所示
这里，我们将”nav-tabs”替换成”nav-pills”,这让相同的链接看起来像按钮。
我们也可以添加类”nav-stacked”,这样按钮风格的导航链接将竖着排列。
<div class="container">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#">About</a></li>
<li><a href="#">Activity</a></li>
<li><a href="#">Liked Pages</a></li>
</ul>
</div>结果如图展示了竖向排列的按钮风格导航栏
Navbar（导航条）
Navbar是最有趣的Bootstrap组件；但对于新手，不容易掌握；它带来了很多挑战，比如将头部和其余部分保持一致；正确地对齐链接、搜索栏和导航栏中的下拉菜单会使工作变得更加困难。
Bootstrap创建导航条非常简单，它提供了各种选项，可以构建响应性的所有类型的导航栏，当屏幕大小较小时自动折叠。
我们将循序渐进的用Bootstrap创建一个导航条。
首先，我们建立一个<div>,并包含两个类”navbar”和”navbar-default”;这些类对于Bootstrap非常重要，因为它们确定了在哪里应用导航条和特效：
<div class="navbar navbar-default">
</div>结果如图所示
接下来，我们将在导航条元素中包含一个<div class="container-fluid"></div>；它将产生一个全屏宽度的容器，并包含导航条的全部内容。
<div class="navbar navbar-default">
<div class="container-fluid"></div>
</div>现在，让我们开始在导航条中插入一些其他的元素。首先，我们将放置一个<div class="navbar-header">;这将用于网站品牌推广，如显示网站的名称或其标志。我们还将在”navbar-header”元素中放置一个隐藏的按钮，只在导航栏折叠的小屏幕中可见。这个隐藏的按钮将会被用来扩展小屏幕上的折叠菜单:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SitePoint</a>
</div>
</div>
</div>如图所示（正常）
尝试将浏览器窗口缩小的一个较小的尺寸，你将看见这个导航条显示了隐藏按钮，如图所示。
在这代码中，我们放置了一个包含”navbar-toggle”的按钮，它被Bootstrap用来激活导航条的功能切换;它应该包含两个data-*类型的属性：data-toggle和data-target；data-toggle告诉代码点击按钮时做什么，而data-target表明在单击时哪个部分要切换。这里，data-target属性持有我们尚未定义的部分的id。当单击按钮时，该部分将被切换。按钮中的span元素用来显示图标【注：图标中的横线】。
我们还定义了一个具有类”navbar-brand”的元素，该元素拥有我们网站的名称(SitePoint)。
接下来，我们将创建另一个div，它将和之前的<div class="navbar-header">是同一级的。我们将给这个元素提供两个类:“collapse”和”navbar-collapse”。由于这个div将包含所有的导航栏内容，我们将给它提供id:”mynavbar-content”，这是在隐藏按钮的data-toggle属性中关联的id。代码现在应该是这样的:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SitePoint</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar-content"></div>
</div>
</div>现在，让我们开始在<div class="collapse navbar-collapse">元素内填充一些我们希望放在导航条中的链接。我们将使用包含类”nav”和”navbar-nav”的<ul>标签。这些类用于将链接正确地与导航条对齐:
<div class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">SitePoint</a>
</div>
<div class="collapse navbar-collapse" id="mynavbar-content">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>
</div>
</div>我们最终的带链接的navbar将如图所示：
您还可以尝试调整浏览器的大小，并使用隐藏的按钮来显示屏幕较小的菜单。您应该有类似图的内容。
惊讶吗？您不需要编写一行CSS或JavaScript代码，已经创建了一个可响应的导航栏。
下拉菜单
导航条而言，下拉菜单是另一个重要的组成部分。您可以如下这样，轻松地将导航导航列表中的
- 元素转换为下拉菜单:【注：尝试在下拉菜单中包含下拉菜单失败】 <div class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynavbar-content"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">SitePoint</a> </div> <div class="collapse navbar-collapse" id="mynavbar-content"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="#">Board of Members</a> </li> <li><a href="#">Developers Team</a> </li> <li><a href="#">Designing Team</a></li> <li class="divider"></li> <li><a href="#">Investors</a> </li> <li><a href="#">Share holders</a></li> </ul> </li> <li><a href="#">Pricing</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Feedback</a></li> </ul> </div> </div> </div>
在<li>中添加一个下拉菜单。然后插入一个包含” dropdown-menu”的<ul>列表来表示下拉菜单的子链接。结果如图
Breadcrumb（面包屑组件）
面包屑用于显示当前页面在站点层次结构中的位置。Bootstrap的面包屑组件有一个非常简单的标记，可以放在你的网站的任何地方:
<div class="container">
<ol class="breadcrumb">
<li><a href="#">Home</a> </li>
<li><a href="#">About</a> </li>
<li class="active">Author</li>
</ol>
</div>结果如图所示
其他组件
有时我们需要设计一些组件，当与其他HTML元素一起使用时，立即吸引访问者的注意力。他们可能是标签、通知图标、或者像“现在买”、“抓住它”之类的大按钮。Bootstrap提供了许多这样开箱即用的组件；让我们来看看其中一些重要的。
Label
标签(Label)是在其他组件旁边显示短文本的最佳方式。有时我们可能需要显示文本，如“新”或“现在下载”，例如，在其他一些HTML元素旁边。在这样的地方，标签可以派上用场。
要显示一个标签，您需要将一个label类添加到诸如<span>和<i>这样的内联HTML元素中。在这里，我们将使用一个<span>来显示h3元素旁边的标签:
<div class="container">
<h3>Jump Start Bootstrap <span class="label label-default">New</span> </h3>
</div>结果如图所示
这里有一个附加类”label-default”，它用来告诉Bootstrap我们想要使用的标签的变体。【注：不可省略，否则不会显示】
可使用的标签变体是:
- label-default 灰色
- label-primary 暗蓝
- label-success 绿色
- label-info 浅蓝
- label-warning 橙色
- label-danger 红色
Button
在Bootstrap中你可以轻松的创建一个按钮。在Bootstrap中，你只要给元素<a>、<button>或<input>添加类”btn”和”btn-*”，就会把他们转变成花哨的粗体按钮。
<div class="container">
<a href="#" class="btn btn-primary">Click Here</a>
</div>结果如图所示
颜色
按钮有不同的颜色选项:【注：必须包含，元素才能显示成按钮】
- btn-default 白色
- btn-primary 暗蓝
- btn-success 绿
- btn-info 浅蓝
- btn-warning 橙色
- btn-danger for 红
尺寸
按钮有几种尺寸：
- btn-lg 大按钮
- btn-sm 小按钮
- btn-xs 超小按钮
下面是一些如何使用它们的例子:
<div class="container">
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-success">Default button</button>
<button type="button" class="btn btn-info btn-sm">Small button</button>
<button type="button" class="btn btn-warning btn-xs">Extra smail button</button>
</div>结果如图所示
这里有一些按钮可以用的帮助类：
- btn-block： 按钮跨域整行所有的网格
- active：按钮显示成被点击的状态
- disabled：按钮不可用，并显示成褪色状态；你要小心使用这个类，因为它将防止在输入和按钮元素上单击动作，但不会禁用对元素的单击操作。【注：需要js代码屏蔽触发事件】
Glyphicons(字符图标)
Glyphicons用来显示小图标，它们是轻量级的字体图标，而不是图像。使用符号代替小图像有很多优点，包括：
- 为小图像或精灵保存多个请求；
- 由于它们是字体图标，它们的颜色和大小可以在使用CSS属性的过程中变化；
- 在所有的展示中，他们看起来都很干脆利落。
要使用Glyphicons符号，您需要使用这样的标记:
<span class="glyphicon glyphicon-heart"></span>这段代码显示了一个心图标，图标中的每个图标都有一个独特的类，您可以使用要显示的图标类的名称来替换“glyphicon-heart”。在Bootstrap网站上可以找到一份符号图标及其类的列表。
Well(井)
Well是一个有用的组件，它将内容包装在一个带灰色背景的圆角盒子里，产生一种插图效果。它们可以用来突出显示长文本，例如，或者一个作者在博客上的简历:【注：图文混排效果不如Media Object和Ul】
<div class="container">
<div class="well">
<p>As a motto goes "attitude is everything". If I get this job, I will put all my heart in it and try my best to do it well.</p>
</div>
</div>结果如图所示
你可能对内容周围的间距不满意。幸运的是,Bootstrap对此也有一个解决方案wells有三种变体:
- 默认: 只使用 well 类；
- 大间距: 同时使用 well 和 well-lg 类；
- 小间距: 同时使用 well 和 well-sm 类；
Badges(徽章)
徽章和我们已经讨论过的标签相似，但有一个主要区别:标签是长方形的，而徽章是圆形的。徽章主要用于显示诸如未读项、通知等数字，而不是文本。
徽章是自崩溃的组件，即当标签未包含内容时，徽章在页面上是不可见的。
徽章组件的代码看起来是这样的：
<div class="container">
<a href="#" class="btn btn-info btn-lg">Inbox<span class="badge">23</span> </a>
</div>结果如图所示
在此，我们结束对Bootstrap组件的讨论。虽然这些组件并不是创建伟大的响应性网站的必要条件，但它们确实为你的访客提供额外的价值。 现在让我们来看看创建表单如何变得更加容易。
表单功能
表单是我们网站非常重要的一部分。它们被用于注册、登录页面，联系人，反馈页面，搜索框，还有很多其他地方。
Bootstrap允许您在几分钟内创建各种类型的表单。您还可以使用许多HTML5的表单验证属性，这些属性都是由Bootstrap支持的。我们先建立一个基础的表单。
基础表单
要构造一个表单，我们需要一个添加表单类的表单元素：
<div class="container">
<form class="form">
</form>
</div>对于每个标签和输入字段，我们需要一个包含类”form-group”的<div>元素。让我们创建一个输入字段，它将询问访问者的姓名:
<div class="container">
<form class="form">
<div class="form-group">
<label for="nameField">Name</label>
<input type="text" class="form-control" id="nameField" placeholder="Your Name">
</div>
</form>
</div>将类”form-control”添加到<input>元素上，将使它变成全屏宽度的元素
结果如图所示
让我们给表单添加电子邮件、电话号码和文本块、提交按钮。
<div class="container">
<form class="form">
<div class="form-group">
<label for="nameField">Name</label>
<input type="text" class="form-control" id="nameField" placeholder="Your Name" />
</div>
<div class="form-group">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Your Email" />
</div>
<div class="form-group">
<label for="phoneField">Phone</label>
<input type="text" class="form-control" id="phoneField" placeholder="Your Phone Number" />
</div>
<div class="form-group">
<label for="descField">Description</label>
<textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
</div>结果如图所示
水平表单
在之前的表单中，我们在顶部和输入字段中显示了一个标签。假设我们要将标签显示在输入字段的一侧。然后，我们可以在表单元素内使用Bootstrap的网格系统，比如:
<div class="container">
<form class="form-horizontal">
<div class="form-group">
<label for="nameField" class="col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="nameField" placeholder="Your Name" />
</div>
</div>
<div class="form-group">
<label for="emailField" class="col-xs-2">Email</label>
<div class="col-xs-10">
<input type="email" class="form-control" id="emailField" placeholder="Your Email" />
</div>
</div>
<div class="form-group">
<label for="phoneField" class="col-xs-2">Phone</label>
<div class="col-xs-10">
<input type="text" class="form-control" id="phoneField" placeholder="Your Phone Number" />
</div>
</div>
<div class="form-group">
<label for="descField" class="col-xs-2">Description</label>
<div class="col-xs-10">
<textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>
</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
<button type="reset" class="btn btn-default">Reset</button>
</form>
</div>结果如图所示
在代码中，我们已经根据Bootstrap的规则，将表单的类从”form”替换为”form-horizontal”。然后我们在<label>元素中添加了一个类”col-xs-2”,因此它跨越两个网格。接下来，我们把<input>封装在一个<div>中，它在类”col-xs-10”的帮助下跨越10个网格。
内联表单
我们也可以创建所有元素排成一行的表单。一个例子是在顶部导航栏中包含一个登录表单，用户名和密码并排。
内联表单的代码如下：
<div class="container">
<div class="well well-sm">
<form class="form-inline">
<div class="form-group">
<input type="email" class="form-control" id="emailField" placeholder="Enter email"/>
</div>
<div class="form-group">
<input type="password" class="form-control" id="passwordField" placeholder="Password" />
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Sign in</button>
</form>
</div>
</div>结果如图所示
内嵌表单和前一个表单之间唯一的主要区别是类的名称。我们已经用表单内联来替换类表单，以使表单元素内联。在前面的代码中，我们还将整个表单内容包装在一个well组件内，使它看起来更好。
如果您仔细查看上面的代码，您会看到我没有使用表单组来显示复选框元素。为了复选框和它旁边的文本的正确对齐，您应该将它们都封装在一个用于复选框的div中；在这种情况下，您还应该将输入元素放入标签元素中，这样就可以正确地映射到相应的输入元素。
如果你需要一个单选按钮而不是一个复选框，那就用”radio”代替这个类复选框。
表单帮助类
Bootstrap有一些帮助类可以帮助显示正确的表单。
如果你在<input>元素上使用过”disabled”属性，Bootstrap为它定义了一个样式。例如下面的代码：
<div class="container">
<input class="form-control" type="text" placeholder="Disabled input here..." disabled />
</div>结果如图所示
Bootstrap给<input>元素定义了三种状态：
- has-success
- has-error
- has-warning
这里有一个验证状态如何使用的例子:
<div class="container">
<div class="form-group has-success">
<label class="control-label" for="inputField">Input with success</label>
<input type="text" class="form-control" id="inputField" />
</div>
</div>结果如图所示
应用has-success将使标签文本和边界字段颜色为绿色；类似的，has-warning会使用暗棕色，而has-danger将使用暗红色。这些has-*类型的类只会将颜色应用到表单控件、controllabel和helpblock类元素。如果用户在输入字段中输入无效值时，想要显示一些自定义文本，请使用带有类帮助块的<span>元素。当输入无效值时，帮助块将出现在对应的输入字段之下。
control sizing(控制尺寸)
您可以使用Bootstrap的control sizing类来改变输入元素的高度：
- input-lg：比默认尺寸大的输入元素
- input-sm：比默认尺寸小的输入元素
这里是使用它们的一些例子：
<div class="container">
<form class="form">
<div class="form-group">
<input class="form-control input-lg" type="text" placeholder="Larger Input Field" />
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Default Input Field" />
</div>
<div class="form-group">
<input class="form-control input-sm" type="text" placeholder="Smaller Input Field" />
</div>
</form>
</div>结果如图所示
小结
在本章中，我们看到了一组可重用的Bootstrap组件，它们已经准备好被使用了。正如您所看到的，在Bootstrap中有大量不同的组件，最初，您可能会发现很难记住这么多不同类型的类;然而，当你遇到麻烦时，可以参考一下文档。