第5 章
前端框架Bootstrap
5.1 Bootstrap简介
Bootstrap是美国Twitter公司推出的基于HTML、CSS、JavaScript开发的前端开发框
架。Bootstrap用于快速开发Web应用程序和网站,是由Twitter的MarkOtto和Jacob
Thornton开发的。Bootstrap使用简洁灵活且完全开源,是目前广受欢迎的前端框架。
5.1.1 安装Bootstrap
1.Bootstrap的下载
可以通过https://v3.bootcss.com/下载本节所使用的Bootstrap 的v3.4.1 版本,
Bootstrap中文文档页面如图5-1所示。注意:VisualStudio2019已经内嵌了Bootstrap
v3.4.1版本,无须再下载安装。
图5-1 Bootstrapv3.4.1中文文档首页
单击“下载Bootstrap”按钮,将会看到如图5-2所示的三种下载方式。
为了更好地理解和更方便地使用,本节中使用Bootstrap的预编译版本,即使用第一种
方式进行Bootstrap环境的安装。
126
基于C#
的管理信息系统开发（第
3
版）
图5-
2
Botstrap的下载方式
2.预编译版
Bootstrap提供了两种形式的压缩包,在下载的压缩包内可以看到以下目录和文件,这
些文件按照类别放到了不同的目录内,并且提供了压缩与未压缩两种版本。
下载压缩包之后,将其解压缩到任意目录即可看到如图5-3所示的目录结构。
图5-
3
解压缩后的目录结构
图5-3展示的是Bootstrap的基本文件结构:可以看到已编译好的CSS和JS
(bootstrap.*)文件,还有经过压缩的CSS和JS(bootstrap.min.*)文件。同时还提供了
CSS源码映射表(bootstrap.*.map),可以在某些浏览器的开发工具中使用。还有来自
Glyphicons的图标字体,在附带的Bootstrap主题中使用到了这些图标。
预编译文件可以直接应用到任何Web项目中。
3.Boottp源码
Bootstrap(s) 源(a) 码包含预先编译的CSS 、JS和图标字体文件,并且还有LESS 、JavaScript
和文档的源码。
les\js\和fonts\目录分别包含CSS 、JS和字体图标的源码。dist\目录包含上面所说的
预编译Bootstrap包内的所有文件。docs\包含所有文档的源码文件,examples\目录是
Bootstrap官方提供的实例工程。除了这些,其他文件还包含Bootstrap安装包的定义文件、
第5 章 前端框架Bootstrap 1 27
许可证文件和编译脚本等。
5.1.2 Bootstrap 的主要特性
1.HTML5文档类型
Bootstrap使用到的某些HTML元素和CSS属性需要将页面设置为HTML5文档类
型。在项目中的每个页面都要参照下面的格式进行设置。
<!doctype html>
<html lang="en">
...
</html>
2.移动设备优先
移动设备优先是Bootstrapv.3.4.1的最显著的变化。在之前的Bootstrap版本中(直到
2.x),需要手动引用另一个CSS,才能让整个项目支持移动设备。而Bootstrapv.3.4.1默认
的CSS本身就对移动设备优先支持,然后才是桌面设备(PC显示器)。
为了让Bootstrap开发的网站对移动设备友好,确保适当的绘制和触屏缩放,需要在
<head>之中添加视口(viewport)元数据标签,代码如下。
<meta name="viewport" content="width=device-width, initial-scale=1">
说明:
(1)width属性控制设备的宽度。假设开发的网站将面向不同屏幕分辨率的设备浏览,
那么将它设置为device-width可以确保它能正确呈现在不同设备上。
(2)initial-scale=1确保网页加载时,以1∶1的比例呈现,不会有任何的缩放。
(3)在移动设备浏览器上,通过为视口设置meta属性为user-scalable=no可以禁用其
缩放(zooming)功能。禁用缩放功能后,用户只能滚动屏幕,使网站看上去更像原生App。
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1, user-scalable=no">
3.排版与链接
Bootstrap的排版链接样式均设置了基本的全局样式,分别描述如下。
(1)为body元素设置背景色为#fff。
(2)使用@font-family-base、@font-size-base和@line-height-base变量作为排版的基
本参数。
(3)为所有链接设置了基本颜色@link-color,并且当链接处于悬停状态时才添加下
画线。这
些样式都能在scaffolding.less文件中找到对应的源码。
4.Normalize.css
为了增强跨浏览器渲染的一致性,Bootstrap使用了Normalize.css,这是由Nicolas
Gallagher和JonathanNeal维护的一个CSS重置样式库,在HTML 元素的默认样式中提
供了更好的跨浏览器一致性。
5.布局容器
Bootstrap需要为页面内容和网格系统包裹一个container容器。Bootstrap提供了两
1 28 基于C# 的管理信息系统开发（第3 版）
个类。
(1)container类用于固定宽度并支持响应式布局的容器。
<div class="container">
...
</div>
(2)container-fluid类用于100% 宽度,占据全部视口的容器。
<div class="container-fluid">
...
</div>
注意,由于padding等属性的原因,这两种容器类不能互相嵌套。
5.1.3 Bootstrap 在Visual Studio 2019 中的应用
Bootstrap可用任何Web开发环境进行编写,本节实例使用VisualStudio2019进行编
写。下面给出第一个例子的实现步骤。
【例5-1】 第一个实例HelloBootStrap。
(1)启动VisualStudio2019,新建一“ASP.NET Web应用程序(.NETFramework)”,
单击“下一步”按钮,如图5-4所示。
图5-4 “创建新项目”窗口
(2)在“配置新项目”对话框中输入项目名称并选择保存位置后单击“创建”按钮,如
图5-5所示。
(3)在“创建新的ASP.NET Web应用程序”对话框中选择项目类型———WebForms
选项,然后单击“创建”按钮,完成项目创建,如图5-6所示。
第
5
章 前端框架Bootstrap
129
图5-
5
“配置新项目”对话框
图5“创建新的ASP.b应用程序”对话框
-
6
NET
We
(4)在“解决方案资源管理器”中可以看到,VS2019 中已添加了Bootstrap核心文件,如
图5-7所示。
(5)右击项目,在弹出的右键菜单中依次选择“添加”→“Web窗体”命令,在弹出的“指
1 30 基于C# 的管理信息系统开发（第3 版）
图5-7 Bootstrap核心文件
定项名称”对话框中输入项名称,如图5-8所示。
图5-8 指定项名称
(6)在文件中增加两个meta标签,代码如下。
<!-- 用以声明当前页面用最新的IE 版本模式来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- 让Bootstrap 开发的网站对移动设备友好,确保适当的绘制和触屏缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
(7)导入Bootstrap主样式,代码如下。
<!-- 导入bootstrap 的主样式-->
<link rel="stylesheet" href="Content/bootstrap.min.css" type="text/css" />
第5 章 前端框架Bootstrap 1 31
注意:如自定义文件夹与本节代码不同,请将路径修改为自己命名的文件夹。
在文件的<body>标签中添加代码如下。
<h1>Hello,Bootstrap!</h1>
即完成第一个例子,如图5-9所示。
图5-9 第一个例子
右击firstBootsPage,可直接在浏览器中查看页面运行效果,如图5-10所示。
图5-10 在浏览器中查看页面
后续例子均可在该项目下新建HTML文件运行。
5.2 Bootstrap样式
本节将讲述Bootstrap底层结构的关键部分,包括网格系统、排版、表格、表单及按
钮等。
5.2.1 网格系统
1.简介
Bootstrap提供了一套响应式、移动设备优先的流式网格系统,随着屏幕或视口尺寸的
增加,系统会自动分为最多12列。它包含易于使用的预定义类,还有强大的mixin用于生
成更具语义的布局。
1 32 基于C# 的管理信息系统开发（第3 版）
2.工作原理
网格(也称栅格)系统用于通过一系列的行(row)与列(column)的组合来创建页面布
局,而网页的内容就可以放入这些创建好的布局中。以下介绍Bootstrap 网格系统的工作
原理。
(1)“行”必须包含在固定宽度的容器(container)或container-fluid(100% 宽度)中,以
便为其赋予合适的对齐(alignment)和内边距(padding)。
(2)通过“行”在水平方向创建一组“列”。内容应当放置于“列”内,并且,只有“列”可以
作为“行”的直接子元素。
(3)类似row和col-xs-4这种预定义的类,可以用来快速创建网格布局。Bootstrap源
码中定义的mixin也可以用来创建语义化的布局。
(4)通过为“列”设置内边距属性,从而创建列与列之间的间隔(gutter)。通过为“行”元
素设置负值边距(margin)从而抵消掉为container元素设置的内边距,也就间接为“行”所包
含的“列”抵消掉了内边距。
(5)负值的边距可以使得页面元素向外突出。在网格列中的内容排成一行。
(6)网格系统中的列是通过指定1~12的值来表示其跨越的范围。例如,三个等宽的
列可以使用三个col-**-4来创建。
(7)如果一“行”中包含的“列”大于12,多余的“列”所在的元素将被作为一个整体另起
一行排列。
(8)网格类适用于屏幕宽度大于或等于分界点大小的设备,并且针对小屏幕设备覆盖
网格类。因此,在元素上应用任何col-md-* 网格类适用于屏幕宽度大于或等于分界点大
小的设备,并且针对小屏幕设备覆盖网格类。
3.媒体类型查询
在网格系统中,使用媒体类型查询来创建关键的分界点阈值,代码如下。
/* 超小屏幕(手机,小于768px) */
/* 没有任何相关的代码,因为这在Bootstrap 中是默认的(Bootstrap 是移动设备优先) */
/* 小屏幕(平板,大于或等于768px) */
@media (min-width: @screen-sm-min) { … }
/* 中等屏幕(桌面显示器,大于或等于992px) */
@media (min-width: @screen-md-min) { … }
/* 大屏幕(大桌面显示器,大于或等于1200px) */
@media (min-width: @screen-lg-min) { … }
我们偶尔也会在媒体类型查询代码中包含max-width 从而将CSS的影响限制在更小
范围的屏幕大小之内,如下。
@media (max-width: @screen-xs-max) { … }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { … }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { … }
@media (min-width: @screen-lg-min) { … }
4.网格参数
Bootstrap的网格系统在多种屏幕设备上工作的方式,如表5-1所示。
第5 章 前端框架Bootstrap 1 33
表5-1 网格系统在各种屏幕上工作的方式
屏幕类型属性网格系统行为.container最大宽度类前缀最大列宽
超小屏幕(手机)(<768px) 总是水平排列None(自动) col-xs- 自动
小屏幕(平板)(≥768px)
中等屏幕(桌面显示器)
(≥992px)
大屏幕(大桌面显示器)
(≥1200px)
开始是堆叠在一起的,
当大于这些阈值时将变
为水平排列
750px col-sm- ~62px
970px col-md- ~81px
1170px col-lg- ~97px
另外,对于各种类型的屏幕,其最大列数均为12,间隔(gutter)宽均为30px,可嵌套、有
偏移且按列排序。
注意:后续文字描述中均以超小屏幕指代手机屏幕,小屏幕指代平板屏幕,中等屏幕指
代桌面显示器,大屏幕指代大桌面显示器。
5.基本的网格结构
基本的网格结构代码如下。
<div class="container">
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">…</div>
</div>
即为每一个列元素指定类。例5-2给出一个基本网格系统的例子。
说明:由于Bootstrap代码量较大,本节例题在正文中均只给出关键代码(省略部分由
“…”开头的斜体文字说明),以读者能理解其结构及作用为主,完整代码请参考配套资料中
的例题。
【例5-2】 网格系统从堆叠到水平排列。
使用单一的一组col-md-*网格类,就可以创建一个基本的网格系统,在超小屏幕和小
屏幕设备上是堆叠在一起的,在中等屏幕设备上就会变成水平排列的。所有列必须放在
行内。
<div class="container">
<div class="row">
<div class="col-md-1">内容1</div>
<div class="col-md-1">内容2</div>
…省略3~11 列部分代码
<div class="col-md-1">内容12</div>
</div>
<div class="row">
<div class="col-md-4">内容1</div>
<div class="col-md-4">内容2</div>
<div class="col-md-4">内容3</div>
</div>
<div class="row">
1 34 基于C# 的管理信息系统开发（第3 版）
<div class="col-md-6">内容1</div>
<div class="col-md-6">内容2</div>
</div>
<div class="row">
<div class="col-md-12">内容1</div>
</div>
</div>
保存代码并运行,在超小屏幕及小屏幕上显示效果如图5-11所示。
图5-11 例5-2超小屏幕及小屏幕显示效果
在中等屏幕上显示效果如图5-12所示。
图5-12 例5-2中等屏幕显示效果
说明:
(1)为了呈现更好的效果方便观看,为网格系统(除例5-8嵌套列)的例子均设置了如
下样式。