Jump Start Bootstrap 第3章

Bootstrap 官网地址 原文出处

在这一章,我们将开始使用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”拥有的默认的颜色,你可以选择其他类的不同颜色:

  1. panel-primary 暗蓝
  2. panel-success 绿
  3. panel-info 天蓝
  4. panel-warning 黄
  5. 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-*”类来指定列表项的各种颜色:

  1. list-group-item-success 绿色
  2. list-group-item-info 天蓝
  3. list-group-item-warning 淡黄
  4. 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-targetdata-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我们想要使用的标签的变体。【注:不可省略,否则不会显示】

可使用的标签变体是:

  1. label-default 灰色
  2. label-primary 暗蓝
  3. label-success 绿色
  4. label-info 浅蓝
  5. label-warning 橙色
  6. label-danger 红色

Button

在Bootstrap中你可以轻松的创建一个按钮。在Bootstrap中,你只要给元素<a><button><input>添加类”btn”和”btn-*”,就会把他们转变成花哨的粗体按钮。

<div class="container">
    <a href="#" class="btn btn-primary">Click Here</a>
</div>

结果如图所示

颜色

按钮有不同的颜色选项:【注:必须包含,元素才能显示成按钮】

  1. btn-default 白色
  2. btn-primary 暗蓝
  3. btn-success 绿
  4. btn-info 浅蓝
  5. btn-warning 橙色
  6. btn-danger for 红

尺寸

按钮有几种尺寸:

  1. btn-lg 大按钮
  2. btn-sm 小按钮
  3. 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>

结果如图所示

这里有一些按钮可以用的帮助类:

  1. btn-block: 按钮跨域整行所有的网格
  2. active:按钮显示成被点击的状态
  3. disabled:按钮不可用,并显示成褪色状态;你要小心使用这个类,因为它将防止在输入和按钮元素上单击动作,但不会禁用对元素的单击操作。【注:需要js代码屏蔽触发事件】

Glyphicons(字符图标)

Glyphicons用来显示小图标,它们是轻量级的字体图标,而不是图像。使用符号代替小图像有很多优点,包括:

  1. 为小图像或精灵保存多个请求;
  2. 由于它们是字体图标,它们的颜色和大小可以在使用CSS属性的过程中变化;
  3. 在所有的展示中,他们看起来都很干脆利落。

要使用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有三种变体:

  1. 默认: 只使用 well 类;
  2. 大间距: 同时使用 well 和 well-lg 类;
  3. 小间距: 同时使用 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>元素定义了三种状态:

  1. has-success
  2. has-error
  3. 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类来改变输入元素的高度:

  1. input-lg:比默认尺寸大的输入元素
  2. 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中有大量不同的组件,最初,您可能会发现很难记住这么多不同类型的类;然而,当你遇到麻烦时,可以参考一下文档。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏GIS讲堂

CSS+JS实现tab标签切换

循环将所有的内容标签隐藏,并将tab标题栏的active样式清除,完了之后设置选中标签的内容显示,并给tab标题栏添加active样式。

5803
来自专栏技术墨客

React——Fragments特性 转

在我们使用React开发组件的时候,每个React组件都必须返回一个根元素。例如下面这样:

951
来自专栏一“技”之长

Bootstrap响应式前端框架笔记一——强大的栅格布局

    Bootstrap是一款HTML,Css和JavaScript开发框架,其也支持开发者进行自定义构建,开发者也可以只打包自己需要的功能模块使用。Boot...

3651
来自专栏三十课

【基础】CSS实现多重边框的5种方式

目前最优雅地实现多重边框的方案是利用CSS3 的 box-shadow属性,但如果要兼容老的浏览器,则需要选择其它的方案。本文简要地列举了几种多重边框的实现方案...

4755
来自专栏前端儿

layer弹出层中H5播放器全屏出错解决 & 属性poster底图占满video的方法

所以,目前的解决办法是在layer层创建之后,移除这个class即可(注意在success回调中置于下一轮事件循环)

5061
来自专栏Thinks

【译】W3C WAI-ARIA最佳实践 -- 表单

三态复选框的一种常见使用场景是在软件安装时,一个单独的三态复选框用来代表和控制整个安装选项组的状态。并且,该组中的每个选项都可以单独使用双态复选框开启或关闭。

4443
来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

5213
来自专栏图像识别与深度学习

《HTML5实战》Lesson08

Week09    2016/11/09上午1-4节 一、完成文件编辑器浏览视图,代码3-1到3-3,效果如下图: ? 知识点如下: 1、display:bl...

3084
来自专栏mySoul

多媒体编程

由于要实现图片翻转,需要较高的响应度,此时需要进行缓存,new一个Image对象创建一个HTMLImageElement对象实例

1421
来自专栏Nian糕的私人厨房

HTML 基础

超文本标记语言 (HTML, HyperText Markup Language) ,是构成网页的最基础的内容,用来创建并以可视化方式来呈现网页,它确定了一个网...

8413

扫码关注云+社区

领取腾讯云代金券