作者：赵丙秀 张松慧
出版社：人民邮电出版社
格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT
Bootstrap基础教程试读：
前言
FOREWORDBootstrap来自Twitter，由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是目前很受欢迎的前端开发框架。Bootstrap基于HTML、CSS、JavaScript，使用简洁灵活，让Web开发变得更加快捷。Bootstrap提供了HTML和CSS规范，由动态CSS语言Less编写而成。Bootstrap一经推出就颇受欢迎，一直是GitHub上的热门开源项目，NASA（美国航空航天局）和MSNBC （微软全国广播公司）的Breaking News都使用了该项目。国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
Bootstrap是2011年8月在GitHub上发布的开源产品。目前使用较广的是版本2和版本3，其中Bootstrap 2的最新版本是2.3.2，Bootstrap 3的最新版本是3.3.7。2015年8月下旬， Bootstrap四周岁之际，Bootstrap团队发布了Bootstrap 4 alpha版；2017年8月10日发布了Bootstrap 4 beta版。本书以Bootstrap 3.3.7为基础进行讲解。
本书作者在总结多年前端开发经验和多年讲授HTML、Bootstrap课程的经验与体会的基础上，参考大量国内外相关文献和网站，完成了本书的编写工作。
全书内容简明易懂，循序渐进，实例丰富实用，每个知识点都结合具体实例来展示其效果。每章最后还配有综合案例。全书共8章。
第1章介绍Bootstrap的下载、文件结构以及如何使用模板等内容。
第2章介绍Bootstrap框架中响应式布局系统——栅格。
第3章介绍Bootstrap中的排版标签元素。
第4章介绍Bootstrap中比较重要的CSS组件——表单。
第5章讲解Bootstrap中的其他CSS组件，如导航条、面板、下拉菜单、列表组等。
第6章讲解Bootstrap框架中各JavaScript插件的使用，包括触发、属性、方法、事件。
第7章介绍常用的第三方扩展组件，包括Buttons插件、FontAwesome字体图标、日期时间选择器DateTimePicker、Flat UI组件包。
第8章以一个综合案例详细讲解如何从零开始搭建一个具体的Bootstrap网站。
附录A介绍Less和Sass的基本使用，附录B介绍所有的CSS选择器的含义。
本书由武汉软件工程职业学院的赵丙秀、张松慧担任主编，江平、孙琳担任副主编，董宁担任主审。参与本书编写工作的还有武汉软件工程职业学院的李唯、陈丹、吴海天、李文蕙、汪晓青、程永恒等长期教授前端设计课程、具有丰富教学经验的一线教师。全书由赵丙秀、董宁审校。
本书除了可用作高等院校计算机专业的教材和参考书外，还兼顾一般读者，可作为计算机从业人员的参考书，适合前端框架设计爱好者。本书适合从未接触过Bootstrap技术的读者。如果具有一定的HTML、CSS、JavaScript基础知识和开发经验，那么更容易掌握本书内容。
在本书的编写过程中，参考和引用了许多专家、学者的著作和论文，在文中未能一一注明。在此谨向相关参考文献的作者表示衷心的谢意。限于编者的水平，本书难免存在不足和不当之处，恳请读者批评指正。作者E-mail：sonyxiu@163.com。第1章Bootstrap是什么Chapter1本章导读
Bootstrap是最受欢迎的HTML、CSS和JavaScript框架，用于开发响应式布局、移动设备优先的 Web 项目。Bootstrap 框架提供非常棒的视觉效果，可以确保整个 Web 应用程序的风格完全一致、用户体验一致、操作习惯一致；它还可以对不同级别的提醒使用不同的颜色加以区分。通过测试可知，市面上的主流浏览器都支持Bootstrap这一完整的框架解决方案，开发人员可以直接使用它而无需重新制作。而且Bootstrap框架专为 Web 应用程序而设计，所有元素都可以非常完美地在一起工作，非常适合快速开发。1.1 Bootstrap简述
Bootstrap是一个用于快速开发Web应用程序和网站的前端框架，来自Twitter，是目前最受欢迎的前端框架。Bootstrap基于HTML、CSS、JavaScript，使用简洁灵活，让Web开发变得更加快捷。
Bootstrap是由Twitter的Mark Otto和Jacob Thornton开发的，是一款2011年8月在GitHub上发布的开源产品。目前使用较广的是版本 2 和 3，其中 Bootstrap 2 的最新版本是 2.3.2， Bootstrap 3的最新版本是3.3.7。2015年8月下旬，Bootstrap四周岁之际，Bootstrap团队发布了Bootstrap 4 alpha版，2017年8月10日发布了Bootstrap 4 beta版。
在学习Bootstrap前必须具备HTML、CSS和JavaScript（简称JS）的基础知识。简单来说Bootstrap是一个快速搭建网站前台页面的开源项目（基于jQuery）。我们只需要了解相关的class、标签名称等所代表的含义，在构建页面的时候，导入Bootstrap的JS、CSS等，就会将相应的效果表现出来。
比如HTML说明：缩略语，当鼠标悬停在缩写和缩写词上时就会显示完整内容。Bootstrap实现了对 HTML 元素的增强样式。缩略语元素具有 title 属性，外观表现为带有较浅的虚线框，鼠标移至上面时会变成带有“问号”的指针。当你需要段落文字中某个单词或者词语具有上面那种效果，就可以按照这种格式书写，附加的class="initialism"是让字号更小一点，也可以不要。反过来说，如果不使用Bootstrap的功能或者其他类似的框架，就得自己写代码来实现这种效果，开发时间长。
在现代Web开发中，有几个几乎所有的Web项目中都需要用到的组件。Bootstrap提供了所有这些组件的模块：Grid、Typography、Tables、Forms、Buttons和Responsiveness。
此外，还有大量其他有用的前端组件，比如Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等。有了这些，我们就可以搭建一个Web项目，并让它运行得更快速、更轻松。1.2 为什么使用Bootstrap
Bootstrap包括几十个组件，每个组件都自然地结合了设计与开发，具有完整的实例文档。无论处在何种技术水平、处在哪个工作流程的开发者，都可以使用Bootstrap快速、方便地构建自己喜欢的应用程序。
Bootstrap 引入了 12 列栅格结构的布局理念，使设计质量高、风格统一的网页变得十分容易。它包含了HTML、CSS和JavaScript三大主要部分，各部分简单说明如下。（1）Bootstrap的HTML基于HTML5的最新前沿技术。它不同于古老陈旧的其他网页标准，灵活高效、简洁流畅；它摒弃了那些复杂而毫无意义的标签，引入了全新的
Bootstrap框架的特性如下。
• 移动设备优先：自Bootstrap 3起，框架包含了贯穿整个库的移动设备优先的样式。
• 浏览器支持：IE、Firefox、Google等所有的主流浏览器都支持Bootstrap。
• 容易上手：只需要具备HTML和CSS的基础知识即可。
• 响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。
• 为开发人员创建接口提供了一个简洁统一的解决方案。
• 包含了功能强大的内置组件，易于定制。
• 提供了基于Web的定制。
• 是开源的。1.3 如何使用Bootstrap
Bootstrap提供了几种快速开发的方式，每种方式针对具有不同基础的开发者和不同的使用场景。
• 用户生产环境的Bootstrap：下载包为编译并且压缩后的CSS、JavaScript和字体文件，不包含文档和源代码。
• Bootstrap 源码：包含 Less、JavaScript 和字体文件的源码，并且带有文档。需要 Less编译器和一些设置工作。
• Sass：这是Bootstrap从Less到Sass的源码移植项目，用于快速地在Rails、Compass或只针对Sass的项目中引入。
推荐参考网址如下。
Bootstrap中文网：http://www.bootcss.com/。
Bootstrap官网：http://www.bootStrap.com。/
Bootstrap官网菜鸟教材：http://www.runoob.com/。
Bootstrap中文网在国内使用得较多。在开发环境中如果不需要对Bootstrap进行修改，可以直接下载用于生产环境的文件包；也可以下载源码包进行修改以满足自己的开发需求。1.4 下载Bootstrap
Bootstrap的安装是比较容易的，可以从http://getbootstrap.com/上下载Bootstrap的最新版本，也可以去中文网http://v3.bootcss.com进行下载，如图1-1所示。目前最新版本是4 beta版，本教材实例使用的是3.3.7版。
单击“下载Bootstrap”即可跳转到下载页面，有三个选项供我们选择。由于现在处于初级使用阶段，或者说直接用在生产环境下，我们下载第一个就好，如图1-2所示。图1-1 官网下载Bootstrap图1-2 下载用于生产环境的Bootstrap
下载成功后可以得到一个.zip文件，解压后可以得到一个包含css、fonts和js的文件夹。
Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到一些目录和文件，文件按照类别放到了不同的目录内，并且提供了压缩与未压缩两种版本。
如果使用未编译的源代码，我们需要编译Less文件来生成可重用的CSS文件。对于Less文件的编译，Bootstrap官方只支持Recess，这是Twitter的基于less.js的CSS提示。
为了更好地了解和更方便地使用Bootstrap，我们将在本书中使用Bootstrap的预编译版本。1．预编译版
如果下载了Bootstrap的已编译版本，解压缩zip文件，将看到下面的文件/目录结构。
bootstrap/
├──css/
│ ├──bootstrap.css
│ ├──bootstrap.css.map
│ ├──bootstrap.min.css
│ ├──bootstrap.min.css.map
│ ├──bootstrap-theme.css
│ ├──bootstrap-theme.css.map
│ ├──bootstrap-theme.min.css
│ └──bootstrap-theme.min.css.map
├──js/
│ ├──bootstrap.js
│ └──bootstrap.min.js
└──fonts/├──glyphicons-halflings-regular.eot├──glyphicons-halflings-regular.svg├──glyphicons-halflings-regular.ttf├──glyphicons-halflings-regular.woff└──glyphicons-halflings-regular.woff2
上面展示的就是Bootstrap的基本文件结构：预编译文件可以直接使用到任何Web项目中。其中提供了编译好的CSS和JS（bootstrap.*）文件，经过压缩的CSS和JS （bootstrap.min.*）文件，还提供了 CSS 源码映射表（bootstrap.*.map），可以在某些浏览器的开发工具中使用，同时还包含了来自Glyphicons的图标字体，在附带的Bootstrap主题中将使用这些图标。2．Bootstrap源代码
如果下载了Bootstrap源代码，那么文件结构如下所示。
bootstrap/
├──less/
├──js/
├──fonts/
├──dist/
│ ├──css/
│ ├──js/
│ └──fonts/
└──docs/└──examples/
less/、js/和fonts/目录分别包含了CSS、JS和字体图标的源码。dist/目录包含了上面所说的预编译 Bootstrap 包内的所有文件。docs/包含了所有文档的源码文件，examples/目录是Bootstrap官方提供的实例工程。除了这些，其他文件还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等。
因为本书使用的是预编译版，不需要重新进行编译，故对编译工具Grunt不做介绍。如果读者需要使用Bootstrap源代码版，可以修改less 文件，然后使用Grunt工具重新编译生成新的Bootstrap.css文件，可以参考Bootstrap中文网中的介绍。1.5 简单模板
在使用Bootstrap时，需要在页面中引用Bootstrap.css样式。Bootstrap的所有JavaScript插件都依赖于jQuery，因此jQuery必须在Bootstrap之前引入，即jQuery.js必须在Bootstrap.js文件之前引入。一个使用了Bootstrap的基本HTML模板如下所示。
你好，世界！
以上代码中，语句用于实现对不同手机屏幕分辨率的支持。
同时，可以看到以上语句中包含了bootstrap.min.css文件，它用于让一个常规的HTML页面变为使用了Bootstrap框架的页面。
如果需要使用Bootstrap框架中的JS插件，则需要包含jquery.js或jquery.min.js文件，以及bootstrap.js或者bootstrap.min.js文件。一定要注意的是，因为Bootstrap是基于jQuery的，一定要在bootstrap.js或者bootstrap.min.js文件之前包含jquery.js或jquery.min.js文件，否则JS插件将没有效果。
如果是IE9及以前版本，要支持Boostrap框架必须引入Respond.js文件和html5shiv.min.js文件。
另外，可以使用BootCDN提供的免费CDN加速服务（同时支持http和https协议）。Bootstrap中文网联合企业级云服务商又拍云共同为Bootstrap专门构建了免费的CDN加速服务，访问速度更快、加速效果更明显，没有速度和带宽限制、永久免费。具体引用如下：
1.6 案例：第一个Bootstrap实例
本书使用的编辑器为HBuilder，浏览器为Chrome。
在HBuilder中新建一个Web项目，将下载的Bootstrap框架中的bootstrap.min.css文件复制到css目录下。
一个Bootstrap实例
Bootstrap包含了HTML, CSS和JavaScript三大主要部分！
第一列
Bootstrap的HTML是基于HTML5的最新前沿技术！
灵活高效，简洁流畅！
第二列
Bootstrap的CSS是使用Less创建的CSS，是新一代的动态CSS！
对用户来说，阅读更轻松！
第三列
Bootstrap的JavaScript是使用jQuery的CSS，是优秀的JavaScript！
是用一个代码库，将常用的函数放进去，按需取用！
在Chrome浏览器上的运行效果如图1-3所示。图1-3 运行效果图（使用Bootstrap）
如果没有正确引入bootstrap.min.css文件，则运行的效果如图1-4所示。图1-4 运行效果图（未使用Bootstrap）
在上述例子中，没有使用 Bootstrap 框架中的 JS 插件的内容，即没有包含 jquery.js 或jquery.min.js文件，以及bootstrap.js或者bootstrap.min.js文件。1.7 Bootstrap 4
Bootstrap 4有太多重大的更新，这里不能面面俱到都介绍到，只介绍其中一些颇受关注的亮点。
• 从Less迁移到Sass：Bootstrap已加入Sass的大家庭中。得益于Libsass，Bootstrap的编译速度比以前更快。
• 改进栅格系统：新增一个栅格层适配移动设备，并整顿语义混合。
• 支持选择弹性盒（flexbox）模型：这是一项划时代的功能——只要修改一个 Boolean 变量，就可以利用弹性盒的优势快速布局。
• 废弃well、thumbnail和panel，使用cards代替：cards是一个全新概念，但使用起来与well、thumbnail及panel很像，而且更方便。
• 将所有 HTML 重置样式表整合到 Reboot 中：在不能用 Normalize.css 的地方可以用Reboot了，它提供了更多选项。例如box-sizing: border-box、margin tweaks等都存放在一个单独的Sass文件中。
• 新的自定义选项：Bootstrap 4将渐变、淡入淡出、阴影等效果分别放在单独的样式表中，而是将所有选项都移到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果？很简单，只要更新变量值，然后重新编译就可以了。
• 不再支持IE8，使用rem和em单位：放弃对IE8的支持意味着开发者可以放心地利用CSS的优点，不必研究css hack技巧或回退机制了。使用rem和em代替px单位，更适合做响应式布局和控制组件大小。如果要支持IE8，只能继续使用Bootstrap 3。
• 重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap 4用ECMAScript6重写了所有插件。现在提供UMD支持、泛型拆解方法、选项类型检查等特性。
• 改进工具提示和弹出框自动定位：这部分要感谢Tether工具的帮助。
• 改进文档：所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来会更方便，搜索的优化工作也在进行中。
• 更多变化：支持自定义窗体控件、空白和填充类，此外还包括新的实用程序类等。本章小结
本章主要讲解了Bootstrap的历史由来、如何在项目中使用Bootstrap，以及Bootstrap框架中包含的内容。练习与实训
1．浏览http://www.bootcss.com/并下载Bootstrap，查看Bootstrap中文网中的实例精选。
2．编写一个使用Bootstrap框架的页面。第2章栅格系统Chapter2本章导读
本章将介绍Bootstrap中响应式、移动设备优先的栅格系统，以及栅格系统的原理、布局、偏移等内容，最后通过一个具体实例来展示栅格系统的应用。2.1 实现原理
Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
栅格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份，再调整内外边距，最后结合媒体查询，即制作出强大的响应式的栅格系统。Bootstrap 默认的栅格系统平分为 12份，在使用的时候也可以根据具体情况通过重新编译Less源码来修改这个数值。
栅格系统把网页的总宽度平分为12份，可以按份自由组合。栅格系统使用的总宽度可以不固定，Bootstrap会按百分比进行平分（保留15位小数点精度）。12栅格系统是整个Bootstrap的核心功能，也是响应式设计核心理念的一个实现形式。2.2 工作原理
栅格系统通过一系列的行（row）与列（column）的组合来创建页面布局，页面内容就可以放入这些创建好的布局中。下面介绍一下Bootstrap栅格系统的工作原理。
• 一行数据（row）必须包含在 .container（固定宽度）或 .container-fluid（100%宽度）中，以便为其赋予合适的对齐方式和内边距。
• 通过“行（row）”在水平方向创建一组“列（column）”。页面内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 类似.row（行）和 .col-xs-4（占4列宽度）这样的样式，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。
• 通过为column设置padding属性，可以创建列与列之间的间隔。通过为 .row元素设置负值margin来抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
• 栅格系统中的列通过指定1～12的值来表示其跨越的范围。例如，3个等宽的列可以使用3个.col-xs-4来创建。
• 如果一“行（row）”中包含的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。实例2-1：
在Chrome浏览器中的运行效果如图2-1所示。图2-1 浏览器中的显示
说明：（1）本例一共有四行，.row位于.container内，可以看到页面内容没有紧靠浏览器边缘。
在栅格系统中，.container支持响应式设计，其在媒体查询样式进行了定义。针对不同的设备，container的宽度不同，如表2-1所示。
• 当屏幕<768px时，.container使用最大宽度，效果和.container-full一样。
• 当768px≤屏幕<992px时，.container的宽度为750px。
• 当992px≤屏幕<1200px时，.container的宽度为970px。
• 当屏幕≥1200px时，.container的宽度为1170px。
拖动浏览器改变浏览器的宽度，可以看到不同的效果。当屏幕<992px后，所有的列变成从上到下依次排列。（2）.col-md-*为列，表示占了*号列的宽度，例如：col-md-4表示该列占了12列中四列的宽度。col-md-为中等屏幕列的前缀。依次类推，还有col-xs-为超小屏幕（手机）列的前缀， col-sm-为小屏幕（平板电脑）列的前缀，col-lg-为大屏幕（大桌面显示器）列的前缀。具体如表2-1所示。表2-1 栅格系统表（3）栅格系统中各个样式类：
• .container左右各有15px的内边距。
• .row是column的容器，最多只能放12个column。行左右各有-15px的外边距，可以抵消.container的15px的内边距。
• column 左右各有 15px 的内容边距，可以保证内容不挨着浏览器的边缘。两个相邻的column的内容之间则有30px的间距。
这样定义后，column里面可以很方便地嵌套row。如果要在column中嵌套row，则此时的column具有和container相同的特性（左右各有15px的内边距），就相当于container。2.3 使用方法2.3.1 基本用法
栅格系统的基本使用方法见实例2-1。容器container包含行row，行row包含列col-*-*。每行包含12个栅格，如果定义的列超过12，则自动换行。
为了让演示效果更清晰，我们在实例 2-1 的 head 部分添加如下代码。注意代码需要写在“”之后。这里定义行row的底部外边距为15px，所有的列col-*-*均设置了上下内边距、背景颜色和边框。
在Chrome浏览器下的运行效果如图2-2所示。图2-2 添加了行和列的样式2.3.2 列偏移
有时候，不想让两个相邻的列挨在一起，可以使用栅格系统中的列偏移功能来实现，而不必设置margin属性。类分别为：.col-xs-offset-*、.col-sm-offset-*、.col-md-offset-*、.col-lg-offset-*，其中，*为数字，表示向右偏移的列数，不能大于12。同时，也需要注意偏移列和显示列的总和不能超过12，如果超过12，则换到下一行。实例2-2：
在Chrome浏览器下的运行效果如图2-3所示。图2-3 列的偏移2.3.3 列排序
列排序就是改变列的方向，即改变左右浮动，并设置浮动的距离。在栅格系统中，可以通过.col-X-push-*和.col-X-pull-*来实现这一目的。其中，col-X-push-*是向右浮动，col-X-pull-*是向左浮动，X 代表 xs、sm、md、lg，对应不同的屏幕大小，*代表浮动的列等份（1～12的数字）。实例2-3：
pull-9
在Chrome浏览器上的运行效果如图2-4所示。图2-4 列排序2.3.4 列嵌套
栅格系统支持列的嵌套，即在一个列里再声明一个或多个行（row）。注意，内部所嵌套的row的宽度为100%，就是当前外部列的宽度。在实例2-4中，第2列里面就嵌套了一行。实例2-4：
Level 1: .col-md-9
Level 2:.col-md-6
Level 2:.col-md-6
在Chrome浏览器中的运行效果如图2-5所示。图2-5 列嵌套2.3.5 响应式栅格
在前面的示例和源码中，都是使用col-md-*来进行定义的，但如果是在小屏和超小屏上则不会生效，而且都没有默认值。例如，我们在浏览前面的例子时，将浏览器窗口拖小到小屏的尺寸，可以看到所有的col-md-*的div都变成从上到下依次排列，如图2-6所示。图2-6 小一点屏幕上的显示效果
为了解决这个问题，可以在同一个元素上应用不同类型的样式，以适配不同尺寸的屏幕。实例2-5：
5 .col-lg-6
实例演示了以跨设备组合的方式实现栅格系统，第一行中有两列，在中屏上显示两个6列，在小屏上显示两个5列，其中第二个5列的div会向右偏移2列。第二行中有两列，它们分别在小屏、中屏、大屏上有不同的显示效果，如图2-7（a）～图2-7（d）所示。
可以看到第一行定义了小屏、中屏，没有定义超小屏，在超小屏上div从上到下依次排列，在大屏上面的显示效果与中屏一致。图2-7 响应式栅格系统图2-7 响应式栅格系统（续）
第二行定义了小屏、中屏、大屏，没有定义超小屏，在超小屏上div从上到下依次排列。
由此可以知道，栅格系统是向大兼容的。下面来看一下Bootstrap的媒体查询的源码。
@media (min-width: 768px) {
.container {width: 750px;
}
}
@media (min-width: 992px) {.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {width: 1170px;
}
}
通过源码可以看出，每个样式中都含有min-width属性，该属性设置的就是向大兼容，宽度不同对应的屏幕大小不同。但没有定义大一级的屏幕时，在大屏幕上的样式不会改变。
由此可见，如果希望元素在所有屏幕上都能正常浏览，可以在div上分别应用xs、sm、md、lg类型的样式。然而许多时候，理想是美好的，但现实却是残酷的。请看下面的例子。
以上代码设置的4个div在超小屏下是6个栅格，在小屏下是3个栅格。因此在小屏、中屏、大屏上显示为一行4列，每列3个栅格。当为超小屏时，应该是两行，每行12个栅格。在浏览时将浏览器大小调至超小屏尺寸，显示效果如图2-8所示。图2-8 拖小浏览器后的效果
显示效果却出人意料。为什么会这样呢？所有的 col-样式都是左浮动，很明显，这是因为没有清除浮动导致的。当div3开始换行的时候，div1的内容高度过高，所以div3就紧挨着右边显示了。同理div4也是如此。
要解决这个问题，需要使用Bootstrap提供的.clearfix样式。更新后的代码如下所示：
因为只需要针对超小屏清除浮动，所以需要添加visible-xs样式。显示效果如图2-9所示。图2-9 清除浮动后的效果2.4 案例：招商银行首页
本案例实现的招商银行首页效果如图2-10所示。图2-10 招商银行首页
操作步骤：（1）创建HTML5页面，在页面中引入meta。
（2）引入bootstrap.min.css文件。
（3）在body中添加容器div。
（4）在container div中，先完成Logo部分，此处可以作为一行。
试读结束[说明：试读内容隐藏了图片]