1.6 Bootstrap框架的常用组件
Bootstrap常用组件包括按钮、导航、菜单和表单等。使用Bootstrap不需要编写复杂的样式代码，只需要使用Bootstrap组件就可以实现复杂的页面架构。下面将对Bootstrap常用组件进行详细讲解。
1.6.1 按钮
Bootstrap提供了多种样式的按钮，每个样式的按钮都有自己的语义用途，并附带了一些额外的功能，以便进行更多的控制。下面通过一个案例演示Bootstrap中按钮的实现方式。在chapter01文件夹中创建名称为bootstrap01的HTML文件，具体代码如文件1-17所示。
文件1-17 bootstrap01.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap01</title> 5 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂> 6 </head> 7 <body> 8 <button type=＂button＂ class=＂btn btn-primary＂>主按钮</button> 9 </body> 10 </html>
在文件1-17中，第5行代码引入bootstrap.min.css核心文件；第8行代码定义按钮结构，设置按钮的type属性值为button，表示按钮；设置按钮的类名为btn和btn-primary，表示在btn类名的基础上添加btn-primary类名，btn-primary主要用于实现主按钮的结构样式。
使用浏览器打开bootstrap01.html文件，运行结果如图1-28所示。
图1-28 文件1-17的运行结果
需要注意的是，除了btn-primary外，Bootstrap还包括btn-secondary、btn-success和btn-danger等类，分别用于实现不同的按钮样式效果。
在定义按钮时，除了提供按钮的基本样式外，Bootstrap框架还提供了一些特定的类，通过类名可以设置按钮的大小、状态等。下面分别介绍按钮状态和按钮大小的设置。
1． 设置按钮状态
在实现按钮时，如果按钮中的文本内容超出了按钮的宽度，在默认情况下按钮中的内容会自动换行排列，如果不希望按钮文本换行，可以在按钮中添加text-nowrap类。下面修改bootstrap01.html代码，设置按钮状态为禁止文本换行。修改后的代码如文件1-18所示。
文件1-18 修改后的bootstrap01.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 button {
6 width: 100px;
7 }
8 </style>
9 <title>bootstrap01</title>
10 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂>
11 </head>
12 <body>
13 <button type=＂button＂ class=＂btn btn-primary text-nowrap＂>
14 主按钮主按钮主按钮
15 </button>
16 </body>
17 </html>
在文件1-18中，第6行代码定义按钮的宽度为100px；第13～15行代码定义按钮内容，并且为按钮添加了text-nowrap类名，表示禁止文本换行。运行结果如图1-29所示。
2． 设置按钮大小
在Bootstrap中，除了可以直接设置按钮状态外，还可以通过类名调节按钮的大小，修改bootstrap01.html代码实现调用不同类名来调节按钮的大小。使用下面代码替换文件1-18中第13～15行代码。
<button type=＂button＂ class=＂btn btn-primary btn-lg＂>主按钮</button> <button type=＂button＂ class=＂btn btn-primary btn-sm＂>主按钮</button>
在上述代码中，分别为按钮添加btn-lg和btn-sm类名，其中btn-lg表示大按钮，btn-sm表示小按钮。修改完成后，刷新浏览器，结果如图1-30所示。
图1-29 文件1-18的运行结果
图1-30 修改文件1-18后的运行结果
1.6.2 导航
为了更加方便地设计导航栏样式，Bootstrap提供了相应的组件。
下面通过一个案例演示导航栏的实现方式。在chapter01文件夹中创建名称为bootstrap02的HTML文件，用于设计一个导航栏，具体代码如文件1-19所示。
文件1-19 bootstrap02.html
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <style>
5 button {
6 width: 100px;
7 }
8 </style>
9 <title>bootstrap02</title>
10 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂>
11 </head>
12 <body>
13 <!-- 导航 -->
14 <ul class=＂nav＂>
15 <li class=＂nav-item＂>
16 <a class=＂nav-link＂ href=＂#＂>首页</a>
17 </li>
18 <li class=＂nav-item＂>
19 <a class=＂nav-link＂ href=＂#＂>简介</a>
20 </li>
21 <li class=＂nav-item＂>
22 <a class=＂nav-link＂ href=＂#＂>详情</a>
23 </li>
24 <li class=＂nav-item＂>
25 <a class=＂nav-link disabled＂ href=＂#＂ tabindex=＂-1＂
26 aria-disabled=＂true＂>联系电话</a>
27 </li>
28 </ul>
29 </body>
30 </html>
在文件1-19中，第10行代码引入bootstrap.min.css文件；第14行代码定义类名为nav的<ul>标签，表示导航栏的最外层盒子；第15～27行代码在nav内部定义类名为 nav-item 的<li>标签，表示导航栏中的导航列表，并在每个nav-item的内部定义类名为nav-link的<a>标签，表示导航标签中的内容。
使用浏览器打开文件1-19，运行结果如图1-31所示。示出当前页在导航层次结构中的位置。为此，Bootstrap提出面包屑导航，通过为导航层次结构自动添加分隔符，展示出当前页在导航层次结构中的位置。
图1-31 文件1-19的运行结果
1.6.3 面包屑导航
1.6.2小节实现了传统导航栏的页面结构，它不能展
下面通过一个案例演示面包屑导航的实现方式。在chapter01文件夹下创建名称为bootstrap03的HTML文件，用于设计一个面包屑导航栏，具体代码如文件1-20所示。
文件1-20 bootstrap03.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap03</title> 5 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂> 6 </head> 7 <body> 8 <!-- 面包屑导航 --> 9 <nav aria-label=＂breadcrumb＂> 10 <ol class=＂breadcrumb＂> 11 <li class=＂breadcrumb-item＂><a href=＂#＂>首页</a></li> 12 <li class=＂breadcrumb-item＂><a href=＂#＂>简介</a></li> 13 </ol> 14 </nav> 15 </body> 16 </html>
在文件1-20中，第5行代码引入bootstrap.min.css文件；第9～14行代码定义<nav>标签，并设置aria-label属性值为breadcrumb，表示面包屑导航。其中，第10行代码在nav标签下定义类名为breadcrumb的<ol>有序列表；第11行代码在<ol>标签下定义类名为breadcrumb-item的<li>标签表示首页链接，第12行代码在<ol>标签下定义了类名为 breadcrumb-item 的<li>标签表示简介链接。文件1-20的运行结果如图1-32所示。
图1-32 文件1-20的运行结果
1.6.4 分页
在前端页面开发的过程中，经常会使用到分页器，分页器的功能是帮助用户快速跳转到指定页码的页面。
下面通过一个案例演示分页的实现方式。在chapter01文件夹下创建名称为bootstrap04的HTML文件，用于实现分页效果，具体代码如文件1-21所示。
文件1-21 bootstrap04.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap04</title> 5 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂> 6 </head> 7 <body> 8 <nav aria-label=＂Page navigation example＂> 9 <ul class=＂pagination＂> 10 <li class=＂page-item＂> 11 <a class=＂page-link＂ href=＂#＂ aria-label=＂Previous＂> 12 <span aria-hidden=＂true＂>«</span> 13 </a> 14 </li> 15 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>1</a></li> 16 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>2</a></li> 17 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>3</a></li> 18 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>4</a></li> 19 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>5</a></li> 20 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>6</a></li> 21 <li class=＂page-item＂><a class=＂page-link＂ href=＂#＂>7</a></li> 22 <li class=＂page-item＂> 23 <a class=＂page-link＂ href=＂#＂ aria-label=＂Next＂> 24 <span aria-hidden=＂true＂>»</span> 25 </a> 26 </li> 27 </ul> 28 </nav> 29 </body> 30 </html>
在文件1-21中，第5行代码引入bootstrap.min.css文件；第8行代码设置<nav>标签的aria-label属性值为Page navigation example，表示分页器模块；第9行代码定义类名为pagination的<ul>标签，表示分页器模块的最外层盒子；第10～26行代码在pagination内部定义多个类名为page-item的<li>标签，表示分页器列表，并且在每一列中定义类名为page-link的<a>标签，表示页码标签，在<a>标签中添加数字内容，表示页码。其中，第一个<a>标签定义aria-label的属性值为Previous，表示上一页，并且添加“<<”符号，即«，用于折叠页码；在最后一个<a>标签中定义 aria-label 的属性值为 Next，表示下一页，并且添加“>>”符号，即»，用于折叠页码。
使用浏览器打开文件1-21，运行结果如图1-33所示。
图1-33 文件1-21的运行结果
1.6.5 列表
在没有使用Bootstrap之前，为了实现列表页面结构，需要编写列表结构，然后根据列表结构的样式需求编写烦琐的CSS代码。为了提高开发效率，Bootstrap提供了列表组件，可以直接通过列表组件实现列表页面结构。
下面通过案例演示列表的实现方式。在chapter01文件夹下创建名称为bootstrap05的HTML文件，用于实现列表页面结构，具体代码如文件1-22所示。
文件1-22 bootstrap05.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap05</title> 5 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂> 6 </head> 7 <body> 8 <!-- 列表组 --> 9 <ul class=＂list-group＂> 10 <li class=＂list-group-item active＂>列表1</li> 11 <li class=＂list-group-item＂>列表2</li> 12 <li class=＂list-group-item＂>列表3</li> 13 <li class=＂list-group-item＂>列表4</li> 14 <li class=＂list-group-item＂>列表5</li> 15 </ul> 16 </body> 17 </html>
在文件1-22中，第5行代码引入bootstrap.min.css文件；第9行代码通过<ul>标签实现无序列表结构，并且为<ul>标签定义list-group类名，表示列表组；第10～14行代码在list-group中定义<li>标签，为每一个<li>标签添加list-group-item类名，表示列表中的每一项，并且为第一个<li>标签设置active类名，表示第一个列表处于选中状态。
使用浏览器打开文件1-22，运行结果如图1-34所示。
图1-34 文件1-22的运行结果
1.6.6 表单
在前端页面开发的过程中，除了导航、列表和按钮等页面结构外，表单也是页面结构中重要的组成部分。表单主要包括form、button和input等元素，通过在<form>标签中定义<input>和<button>等标签来实现表单页面。Bootstrap框架提供了实现表单的组件，可以很方便地设计表单样式。
下面通过一个案例演示表单页面结构的实现方式。在chapter01文件夹下创建名称为bootstrap06的HTML文件，用于实现表单，具体代码如文件1-23所示。
文件1-23 bootstrap06.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>bootstrap06</title> 5 <link rel=＂stylesheet＂ href=＂bootstrap.min.css＂> 6 </head> 7 <body> 8 <!-- 表单 --> 9 <form action=＂#＂> 10 <div class=＂form-group＂> 11 <label for=＂User＂>用户名</label> 12 <input type=＂text＂ class=＂form-control＂ id=＂User＂> 13 <label for=＂Password＂>密码</label> 14 <input type=＂password＂ class=＂form-control＂ id=＂Password＂> 15 <label for=＂Email1＂>邮箱地址</label> 16 <input type=＂email＂ class=＂form-control＂ id=＂Email1＂> 17 </div> 18 <button type=＂submit＂ class=＂btn btn-primary＂>提交</button> 19 </form> 20 </body> 21 </html>
在文件1-23中，第5行代码引入bootstrap.min.css文件；第9行代码定义form表单结构；第10行代码在<form>标签中定义类名为form-group的<div>标签，表示表单组合元素；第11～16行代码在form-group中定义类名为form-control的3个<input>标签，分别代表用户名、密码和邮箱地址的输入框，在<input>标签中，设置form-control类名，form-control是一个样式类，用于统一格式，在编写代码时，可以用form-control优化样式，包括常规外观、focus选（点）中状态和尺寸大小等。此外，定义<input>标签的id值为User，并且与for属性值为User的<label>标签进行绑定。
使用浏览器打开文件1-23，运行结果如图1-35所示。
图1-35 文件1-23的运行结果
任务：蛋糕商城注册页面
【任务目标】
根据本章中所学的网页知识，实现蛋糕商城注册页面的代码编写，页面展示效果如图1-36所示。
图1-36 蛋糕商城注册页面
在图1-36中，页面主要分为3个部分，第一部分为导航内容，包括首页、商品分类、热销、新品、注册、登录、搜索和购物车；第二部分为注册内容，包括标题、注册表单、提交按钮等；第三部分为友情链接与作者署名。
【实现步骤】
1． 创建资源文件
创建文件夹chapter01，在chapter01中创建一个名称为css的文件夹，该文件夹用于存放蛋糕商城项目中的样式；再创建一个名称为fonts的文件夹，该文件夹用于存放蛋糕商城项目中的字体。
2． 创建header.html页面
在文件夹chapter01中创建名称为header的HTML文件，在该文件中编写实现代码，完成页面中制作导航栏的任务，此处只展示主要代码，如文件1-24所示。
文件1-24 header.html
1 <!--header 顶部导航栏--> 2 <div class=＂header＂> 3 <div class=＂container＂> 4 <nav class=＂navbar navbar-default＂ role=＂navigation＂> 5 <!--navbar-header--> 6 <div class=＂collapse navbar-collapse＂ 7 id=＂bs-example-navbar-collapse-1＂> 8 <ul class=＂nav navbar-nav＂> 9 <li><a href=＂#＂ >首页</a></li> 10 <li class=＂dropdown＂> 11 <a href=＂#＂ class=＂dropdown-toggle＂ 12 data-toggle=＂dropdown＂> 13 商品分类<b class=＂caret＂></b></a> 14 <ul class=＂dropdown-menu multi-column columns-2＂> 15 <li> 16 <div class=＂row＂> 17 <div class=＂col-sm-12＂> 18 <h4>商品分类</h4> 19 </div> 20 </div> 21 </li> 22 </ul> 23 </li> 24 <li><a href=＂#＂ >热销</a></li> 25 <li><a href=＂#＂ >新品</a></li> 26 <li><a href=＂#＂ class=＂active＂>注册</a></li> 27 <li><a href=＂#＂ >登录</a></li> 28 </ul> 29 <!--/.navbar-collapse--> 30 </div> 31 <!--//navbar-header--> 32 </nav> 33 <div class=＂header-info＂> 34 <div class=＂header-right search-box＂> 35 <a href=＂javascript:;＂><span class=＂glyphicon 36 glyphicon-search＂ aria-hidden=＂true＂></span></a> 37 <div class=＂search＂> 38 <form class=＂navbar-form＂ action=＂/goods_search＂> 39 <input type=＂text＂ class=＂form-control＂ 40 name=＂keyword＂> 41 <button type=＂submit＂ class=＂btn btn-default＂ 42 aria-label=＂Left Align＂>搜索</button> 43 </form> 44 </div> 45 </div> 46 <div class=＂header-right cart＂> 47 <a href=＂goods_cart.jsp＂> 48 <span class=＂glyphicon glyphicon-shopping-cart＂ 49 aria-hidden=＂true＂> 50 <span class=＂card_num＂></span> 51 </span> 52 </a> 53 </div> 54 <div class=＂clearfix＂> </div> 55 </div> 56 <div class=＂clearfix＂> </div> 57 </div> 58 </div> 59 <!--//header-->
文件1-24主要用于描述蛋糕商城的顶部导航栏，包括首页、商品分类、热销、新品、注册、登录、搜索和购物车，当用户单击“注册”时，页面将跳转到新用户注册页面。
3． 创建footer.html页面
在文件夹chapter01中创建名称为footer的HTML文件，在该文件中编写实现代码，完成页面中制作友情链接与作者署名的任务，此处只展示主要代码，如文件1-25所示。
文件1-25 footer.html
1 <!--footer 友情链接与作者署名--> 2 <div class=＂footer＂> 3 <div class=＂container＂> 4 <div class=＂text-center＂> 5 <p>heima www.itcast.cn © All rights Reseverd</p> 6 </div> 7 </div> 8 </div> 9 <!--//footer-->
文件1-25主要用于描述友情链接与作者署名内容，一般放置在页面的底部。
4． 创建user register.html页面
在文件夹chapter01中创建名称为user_register的HTML文件，在该文件中编写实现代码，完成页面中制作注册表单的任务，此处只展示主要代码，如文件1-26所示。
文件1-26 user_register.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>用户注册</title> 5 <meta name=＂viewport＂ content=＂width=device-width, initial-scale=1＂> 6 <meta http-equiv=＂Content-Type＂ content=＂text/html; charset=utf-8＂> 7 <link type=＂text/css＂ rel=＂stylesheet＂ href=＂css/bootstrap.css＂> 8 <link type=＂text/css＂ rel=＂stylesheet＂ href=＂css/style.css＂> 9 </head> 10 <body> 11 <!--header--> 12 <!--复制粘贴header.html中的内容--> 13 <!--//header--> 14 <!--account 注册表单--> 15 <div class=＂account＂> 16 <div class=＂container＂> 17 <div class=＂register＂> 18 <form action=＂/user_rigister＂ method=＂post＂> 19 <div class=＂register-top-grid＂> 20 <h3>注册新用户</h3> 21 <div class=＂input＂> 22 <span>用户名 <label 23 style=＂color:red;＂>＊</label></span> 24 <input type=＂text＂ name=＂username＂ 25 placeholder=＂请输入用户名＂ required=＂required＂> 26 </div> 27 <div class=＂input＂> 28 <span>邮箱 <label 29 style=＂color:red;＂>＊</label></span> 30 <input type=＂text＂ name=＂email＂ 31 placeholder=＂请输入邮箱＂ required=＂required＂> 32 </div> 33 <div class=＂input＂> 34 <span>密码 <label 35 style=＂color:red;＂>＊</label></span> 36 <input type=＂password＂ name=＂password＂ 37 placeholder=＂请输入密码＂ required=＂required＂> 38 </div> 39 <div class=＂input＂> 40 <span>收货人<label></label></span> 41 <input type=＂text＂ name=＂name＂ 42 placeholder=＂请输入收货人＂> 43 </div> 44 <div class=＂input＂> 45 <span>收货电话<label></label></span> 46 <input type=＂text＂ name=＂phone＂ 47 placeholder=＂请输入收货电话＂> 48 </div> 49 <div class=＂input＂> 50 <span>收货地址<label></label></span> 51 <input type=＂text＂ name=＂address＂ 52 placeholder=＂请输入收货地址＂> 53 </div> 54 <div class=＂clearfix＂> </div> 55 </div> 56 <div class=＂register-but text-center＂> 57 <input type=＂submit＂ value=＂提交＂> 58 <div class=＂clearfix＂> </div> 59 </div> 60 </form> 61 <div class=＂clearfix＂> </div> 62 </div> 63 </div> 64 </div> 65 <!--//account--> 66 <!--footer--> 67 <!--复制粘贴footer.html中代码--> 68 <!--//footer--> 69 </body> 70 </html>
在文件1-26中，首先在<head>标签之间导入了bootstrap.css和style.css文件，分别用于设计导航栏样式、控制页面的样式。主体body部分由3个大的<div>标签将页面分为3个部分，第一部分用于描述蛋糕商城的顶部导航栏，复制header.html中的代码到文件中的指定位置，当用户单击“注册”时，页面将跳转到新用户注册页面；第2部分是第14～65行代码，用于描述注册信息的form表单，用户填写注册信息，单击“提交”按钮就可以完成注册；第3部分用于描述友情链接与作者署名内容，复制footer.html中的代码到文件中的指定位置。
在文件1-26中的<head>标签之间导入的bootstrap.css和style.css文件，这两个文件中的内容读者能依照所学知识看懂即可，不要求读者自己写出。详细代码请参见项目配套的源代码。
至此，蛋糕商城注册页面的代码已经编写完成。使用浏览器打开文件1-26，效果如图1-36所示，表示任务运行成功。
需要注意的是，在实际项目开发过程中，网页中大部分的CSS文件都是由网页设计人员依照需求创建好的，通常这些定义好的样式不需要软件开发人员再去改动，开发者只需将后台的相应数据展示在页面中即可。只有定义好的样式不能满足需求时，才会做相应变动。由于篇幅有限，不在此做过多描述，有兴趣的读者可以深入学习CSS的相关知识。