《Bootstrap响应式网站开发》课件-第二章Bootstrap概述

bootstrap响应式网站开发第二章Bootstrap概述Bootstrap简介1《Bootstrap响应式网站开发》

Bootstrap是一个用于快速开发Web应用程序和网站开发的前端框架，来自Twitter公司，是目前最受欢迎的前端框架。Bootstrap是由

Twitter

公司的

MarkOtto

和

JacobThornton

开发的。它是一个基于HTML、CSS、JavaScript的技术框架，符合HTML、CSS规范，且代码简洁、视觉优美。该框架设计时尚、直观、强大，可用于快速、简单地构建网页或网站。

在Bootstrap之前，每位网页设计师对于版面的布局都有不同的排版方式，布局的命名也有所不同。除了版面布局之外，还有版面上的各种元素，如表格、列表、窗体、表单等元素的排版，都会使CSS的样式变得非常庞大且复杂，这样很容易导致不一致，增加维护的负担。Bootstrap概述--Bootstrap简介初识BootstrapBootstrap中文网网址：/《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介目前常用的版本是BootStrap3，最新版本是BootStrap4，在此介绍一些颇受关注的亮点。改进栅格系统：新增一个栅格层适配移动设备，并整顿语义混合。支持选择弹性盒（flexbox）模型：这是一项划时代的功能，只要修改一个Boolean变量，就可以利用弹性盒的优势快速布局。将所有HTML重置样式表整合到Reboot中：在不能用Normalize.css的地方可以用Reboot了，它提供了更多的选项。例如：box-sizing、border-box、margin等都存放在一个单独的Sass文件中。新的自定义选项:Bootstrap4将渐变、淡入淡出、阴影等效果分别放在单独的样式表中，而是将所有选项都移动到一个Sass变量中。想要给全局或考虑不到的角落定义一个默认效果将会更简单，只要更新变量值，然后重新编译就可以了。不再支持IE8，使用rem和em单位：放弃对IE8的支持意味着开发者可以放心地利用CSS的优点，不必研究CSShack技巧或回退机制了。使用rem和em代替px单位，更适合做响应式布局和控制组件大小。如果要支持IE8，只能继续使用Bootstrap3。重写所有JavaScript插件：为了利用JavaScript的新特性，Bootstrap4用ECMAScript6重写了所有插件.现在提供UMD支持、泛型拆解方法、选项类型检查等特性。改进工具提示和弹出框自动定位。改进文档：所有文档以Markdown格式重写，添加了一些方便的插件组织示例和代码片段，文档使用起来更方便，搜索的优化工作也在进行中。更多的变化：支持自定义窗体控件、空白和填充类，此外还包括新的实用程序类等。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介使用Bootstrap的优势Bootstrap包括十几个组件，包括用于创建图像、下拉菜单、导航、警告框、弹出框等等，每个组件都很自然地结合了设计与开发，具有完整的实例文档。无论在何种技术水平、处在哪个工作流程的开发者，都可以使用Bootstrap快速、方便地构建自己喜欢的应用程序。Bootstrap引入了12个列栅格结构的布局理念，使设计质量高、风格统一的网页变得十分容易。它包含了

HTML、CSS和

JavaScript三大部分HTMLCSSJavaScriptLess中文网网址：/《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介使用Bootstrap的优势Bootstrap的HTML基于HTML5的最新前言技术。它不同于古老陈旧的其它网页标准，灵活高效、简洁流畅；它抛弃了那些复杂而毫无意义的标签，引入了全新的<canvas>、<audio>、<video>、<source>、<header>、<footer>、<nav>、<aside>、<article>等标签，使网页的语义性大大增加，从而使得网页不再是提供机器阅读的枯燥代码，而是可供人类欣赏的优美的作品。Bootstrap的CSS是使用Less(LeanerStyleSheets)创建的，它是新一代的动态CSS。对设计人员来说，代码写得少；对浏览器来说，解析更容易；对用户来说，阅读更轻松。Less,新一代的动态CSS《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介使用Bootstrap的优势Bootstrap的JavaScript是在使用jQuery框架基础上的。它是优秀的JavaScript，它不会使每个用户为了相似的功能，在每个网站上都下载一份相同的代码，而是用一个代码库，将常用的函数封装起来，按需取用，用户的浏览器只需下载一份代码，便可在各个网站上使用。Bootstrap框架的特性如下。移动设备优先：自Bootstrap3起，框架包含了贯穿整个库的移动设备优先的样式。浏览器支持：IE、Firefox、Google等主流的浏览器都支持Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机等设备。为开发人员创建接口提供了一个简洁统一的解决方案。包含了功能强大的内置组件，易于定制。提供了基于Web的定制。免费、开源。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介使用Bootstrap的优势移动设备优先是Bootstrap3的最显著的变化。在之前的Bootstrap版本中（直到2.x），用户需要手动引用另一个CSS，才能让整个项目友好的支持移动设备。现在不一样了，Bootstrap3默认的CSS本身就对移动设备友好支持。Bootstrap3的设计目标是移动设备优先，然后才是桌面设备。这实际上是一个非常及时的转变，因为现在越来越多的用户使用移动设备。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介使用Bootstrap的优势

为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签，如下所示：<metaname="viewport"content="width=device-width,initial-scale=1.0">width

属性控制设备的宽度。假设网站将被带有不同屏幕分辨率的设备浏览，那么将它设置为device-width可以确保它能正确呈现在不同设备上。initial-scale=1.0确保网页加载时，以1:1的比例呈现，不会有任何的缩放。在移动设备浏览器上，通过为viewportmeta标签添加

user-scalable=no可以禁用其缩放（zooming）功能。通常情况下，maximum-scale=1.0与user-scalable=no

一起使用。这样禁用缩放功能后，用户只能滚动屏幕，就能让网站看上去更像原生应用的感觉。

注意，这种方式并不推荐所有网站使用，还是要看开发者自身的情况而定。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap浏览器与设备支持说到浏览器兼容性，就不得不提国内的浏览器占有率现状，这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSSHack，使用Bootstrap仍然无法完全避免这些额外的编码。自从推出了Bootstrap3以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以如果项目开发牵涉到IE8、IE7，那么就可以好好考虑是否还要执着于Bootstrap3了。IE浏览器360浏览器腾讯浏览器谷歌浏览器百度浏览器UC浏览器猎豹浏览器国内常见浏览器《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap浏览器与设备支持

不过如果想跟随时代潮流的前端工程师，而且恰巧客户也推崇更为先进的前端技术，那么Bootstrap3或4肯定是首选方案。Bootstrap可以在最新的桌面系统和移动端浏览器中很好的工作。旧的浏览器可能无法很好的支持。Bootstrap支持InternetExplorer8及更高版本的IE浏览器。Bootstrap支持最新版本的浏览器和平台如表2-1所示。平台ChromeFirefoxIEOperaSafariAndroidYESYES不适用不适用不适用iOSYES不适用不适用不适用YESMacOSXYESYES不适用YESYESWindowsYESYESYESYES不适用表2-1Bootstrap支持最新版本的浏览器和平台《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap环境搭建Bootstrap的安装是比较容易的，可以从/上下载Bootstrap的最新版本，目前最新版本是BootStrap4版本。如果使用V3版本可以到中文网进行下载，如图2-1所示，本书使用的版为v3.3.7版。如果使用V4版本可以到中文网进行下载。

不管使用BootStrapV3还是V4版本，使用的方法都是类似。1.用于生产环境的Bootstrap下载图2-1官网下载Bootstrap《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap环境搭建点击“下载Bootstrap”超链接即可跳转到下载页面，如图2-2所示，有三个选项可选择。初级使用阶段，或直接用在生产环境下，初学者可以直接点击“用于生产环境的Bootstrap”下方的“下载Bootstrap”超级链接进行下载。下载成功后可以得到一个“.zip”文件，解压后可以得到一个包含css、fonts和js的文件夹。图2-2下载用于生产环境的Bootstrapbootstrap-3.3.7-dist.zip《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap环境搭建Bootstrap提供了两种形式的压缩包，在下载下来的压缩包内可以看到一些目录和文件，文件按照类别放在不同的目录内，并提供了压缩与未压缩两种版本。如果使用未编译的源代码，需要编译Less文件来生成可重用的CSS文件。对于Less文件的编译，Bootstrap官方只支持Recess，这是Twitter的基于less.js的CSS提示。Bootstrap中文网为Bootstrap专门构建了免费的CDN（ContentDeliveryNetwork，内容分发网络）加速服务，访问速度更快、加速效果更明显、没有速度和带宽限制、永久免费。BootCDN还对大量的前端开源工具库提供了CDN加速服务，进入BootCDN主页（/）查看更多可用的工具库。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介

为了更好地了解和更方便地使用Bootstrap，将在本书中使用Bootstrap的预编译版本。下载Bootstrap的已编译版本，解压缩zip文件，将看到如右侧的目录结构。bootstrap/├──css/│├──bootstrap.css//预先定义的css文件，各种控件/组件的所有样式│├──bootstrap.css.map//css与less源码对应文件│├──bootstrap.min.css//压缩版本的css文件│├──bootstrap.min.css.map//压缩版本的css与less源码对应文件│├──bootstrap-theme.css//定义了按钮、下拉菜单、导航栏、进度条等样式│├──bootstrap-theme.css.map//css与less源码对应文件│├──bootstrap-theme.min.css//压缩版本的css│└──bootstrap-theme.min.css.map//压缩版本的css与less源码对应文件├──js/│├──bootstrap.js//javascirpt文件│└──bootstrap.min.js└──fonts/├──glyphicons-halflings-regular.eot//字体文件├──glyphicons-halflings-regular.svg├──glyphicons-halflings-regular.ttf├──glyphicons-halflings-regular.woff└──glyphicons-halflings-regular.woff2Bootstrap的基本文件结构

右侧展示的就是Bootstrap的基本文件结构：预编译文件可以直接使用到任何web项目中。同时提供了编译好的CSS和JS文件，还有经过压缩的CSS和JS文件。同时还提供了CSS

源码对应表，可以在某些浏览器的开发工具中使用。同时还包含了来自Glyphicons的图标字体，在附带的Bootstrap主题中使用到了这些图标。2.预编译版本介绍Bootstrap环境搭建《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介Bootstrap源码包含了预先编译的CSS、JavaScript和图标字体文件，并且还有LESS、JavaScript和文档的源码。具体来说，主要文件组织结构如右侧所示：bootstrap/├──less/├──js/├──fonts/├──dist/│├──css/│├──js/│└──fonts/└──docs/└──examples/主要文件组织结构3.Bootstrap源码Bootstrap环境搭建

less/、js/和fonts/目录分别包含了CSS、JS和字体图标的源码。dist/目录包含了上面所说的预编译Bootstrap包内的所有文件。docs/包含了所有文档的源码文件，examples/目录是Bootstrap官方提供的实例工程。除了这些，其他文件还包含Bootstrap安装包的定义文件、许可证文件和编译脚本等。

《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>BootstrapCDN实例</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"><scriptsrc="/jquery/2.1.1/jquery.min.js"></script><scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><h1>Hello,world!</h1></body></html>实例HelloWorld【实例2-1】使用CDN加载Bootstrap的样例代码《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap简介实例HelloWorld代码运行后的效果如图2-3中a图所示，如果删除三行CDN的Bootstrap代码调用，运行结果如图2-3中的b图所示。（a）使用CDNBootstrap调用的效果（b）未使用CDNBootstrap调用的效果图2-3BootstrapCDN调用对比Bootstrap使用基础2《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap使用基础基本的Bootstrap使用模板在使用Bootstrap时，需要在页面中引用Bootstrap.css样式。Bootstrap的所有JavaScript插件都依赖于JQuery，因此jquery必须在Bootstrap之前引用，即jquery.js必须在Bootstrap.js文件之前引入。【实例2-2】一个使用Bootstrap的基本HTML模板如下所示<!DOCTYPEhtml><html><head><title>Bootstrap模板</title><metacharset="utf-8"><!--此属性为文档兼容（Compatible）模式声明，表示使用IE-edge浏览器的最新渲染模式--><metahttp-equiv="X-UA-Compatible"content="IE=edge"><!--根据设置设置视口宽度--><metaname="viewport"content="width=device-width,initial-scale=1"><!--上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！--><!--引入Bootstrap--><linkhref="css/bootstrap.min.css"rel="stylesheet"><!--HTML5shiv和Respond.js是为了让IE8支持HTML5元素和媒体查询功能--><!--[ifltIE9]><scriptsrc="html5shiv/html5shiv.min.js"></script><scriptsrc="respond/respond.min.js"></script><![endif]--><!--jQuery(Bootstrap的所有JavaScript插件都依赖jQuery，所以必须放在前边)--><scriptsrc="js/jquery-3.3.1.min.js"></script><!--加载Bootstrap的所有JavaScript插件。也可以根据需要只加载单个插件。--><scriptsrc="js/bootstrap.min.js"></script></head><body><!--加载一个按钮使用bootstrop的“btn”和“btn-primary”类--><buttontype="button"class="btnbtn-primary">欢迎大家适应Bootstrap</button></body></html>如果想在一个HTML文件中使用Bootstrap，首先需要引入bootstrap.min.css文件，其次引入jquery.min.js和bootstrap.min.js两个JavaScript功能文件；其中jquery.min.js文件主要解决Bootstrap中所有的互动效果，jQuery的下载网址（/download/）进行下载。代码中还设置了三个meat标签，主要分别设置了字符集、文档兼容模式和视口。“html5shiv.min.js”用于使低于IE9版本的浏览器支持HTML5的元素，“respond.min.js”用于使IE8支持媒体查询。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap使用基础设置文档类型Bootstrap使用了一些HTML5元素和CSS属性。为了让这些正常工作，需要使用HTML5文档类型（Doctype）。因此，请在使用Bootstrap项目的开头包含下面的代码段。<!DOCTYPEhtml><html></html>

如果在Bootstrap创建的网页开头不使用HTML5的文档类型（Doctype），可能会面临一些浏览器显示不一致的问题，甚至可能面临一些特定情境下的不一致，以致于代码不能通过W3C标准的验证。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap使用基础响应式图像<body><!--响应式图像使用--><imgsrc="images/bootstrop.png"class="img-rounded"><imgsrc="images/bootstrop.png"class="img-circle"><imgsrc="images/bootstrop.png"class="img-thumbnail"></body>【实例2-3】响应式图像使用，三种基本的图像呈现方式图2-4响应式图像使用效果Bootstrap提供了三个可对图片应用简单样式的class：.img-rounded：添加border-radius:6px来获得图片圆角。.img-circle：添加border-radius:50%来让整个图片变成圆形。.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap使用基础响应式图像<body><divclass="container"><!--响应式图像使用--><imgsrc="images/bootstrop.png"class="img-responsive"></div></body>【实例2-4】响应式图像使用，尝试手机端的浏览效果响应式图片，通过在<img>标签添加.img-responsive类来让图片支持响应式设计。图片将很好地扩展到父元素。.img-responsive类可以设置“max-width:100%;”和“height:auto;”样式应用在图片上。

运行代码结果如下图所示，a图是分辨率在320*400上的测试结果，b图为分辨率在414*500的测试结果。（a）分辨率在320*400上的测试结果

（b）分辨率在414*500的测试结果《Bootstrap响应式网站开发》Bootstrap概述--Bootstrap使用基础响应式图像针对<img>元素的类，可用于任何图片中，img类的相关内容与描述如表2-2所示。类描述.img-rounded为图片添加圆角(IE8不支持).img-circle将图片变为圆形(IE8不支持).img-thumbnail缩略图功能.img-responsive图片响应式(将很好地扩展到父元素)表2-2img类的相关内容与描述案例：尝试Bootstrap布局企业导航区3《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例展示

淮安蒸丞文化传媒有限公司是一家做文化活动策划、会议策划、新媒体的设计与设备租赁的新公司。该公司的网站结构导航设置为：首页、公司简介、业务范围、产品介绍、经典案例、优势展示、联系我们等栏目。现根据业务需要初步设计网站首页的头部与banner区域，效果如图2-6所示。（a）宽屏状态下的页面效果（b）iphone6上的页面效果图2-6网站响应式页面效果《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例分析该页面主要有顶部的导航nav部分和主体的banner区域组成。所以，本案例基于基本的Bootstrap模板来完成，具体分为三步：第一步：基于Bootstrap模板创建网页基本页面。第二步：依据页面效果创建HTML元素，本初次尝试使用Bootstrap的框架样式。第三步：根据需要添加页面所需的样式。《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例实现第一步：基于Bootstrap模板创建网页基本页面

依据基于Bootstrap模板创建网页，删除部分注释页面，代码如右所示：<!DOCTYPEhtml><html><head><title>淮安蒸丞文化传媒有限公司</title><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1"><linkhref="css/bootstrap.min.css"rel="stylesheet"><scriptsrc="js/jquery-3.3.1.min.js"></script><scriptsrc="js/bootstrap.min.js"></script><!--[ifltIE9]><scriptsrc="html5shiv/html5shiv.min.js"></script><scriptsrc="respond/respond.min.js"></script><![endif]--></head><body></body></html>《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例实现第二步：创建HTML元素，使用Bootstrap的样式根据页面所需效果创建HTML元素，代码如右所示：<body><nav><div><div><imgsrc="images/logo.png"width="310"/></div><div><ul><li><ahref="#">网站首页</a></li><li><ahref="#">公司简介</a></li><li><ahref="#">业务范围</a></li><li><ahref="#">产品介绍</a></li><li><ahref="#">经典案例</a></li><li><ahref="#">关于我们</a></li></ul></div></div></nav><div><div><imgsrc="images/banner.jpg"width="1350"/></div></div> </body>《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例实现第二步：创建HTML元素，使用Bootstrap的样式根据页面所需效果创建HTML元素，代码如右所示：<body><nav><div><div><imgsrc="images/logo.png"width="310"/></div><div><ul><li><ahref="#">网站首页</a></li><li><ahref="#">公司简介</a></li><li><ahref="#">业务范围</a></li><li><ahref="#">产品介绍</a></li><li><ahref="#">经典案例</a></li><li><ahref="#">关于我们</a></li></ul></div></div></nav><div><div><imgsrc="images/banner.jpg"width="1350"/></div></div> </body>运行代码，页面代码如下图2-7所示。图2-7HTML页面运行效果《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例实现

依据HTML元素，调用Bootstrap的页面CSS样式代码，边尝试边调试页面效果，调整后的页面代码如右：<body><navclass="navbarnavbar-defaultnavbar-fixed-top"><divclass="container"><divclass="navbar-header"><imgsrc="images/logo.png"width="310"/></div><ulclass="navnavbar-nav"><liclass="active"><ahref="#">网站首页</a></li><li><ahref="#">公司简介</a></li><li><ahref="#">业务范围</a></li><li><ahref="#">产品介绍</a></li><li><ahref="#">经典案例</a></li><li><ahref="#">关于我们</a></li></ul></div></nav><divclass="container"><divclass="maincontent"><imgsrc="images/banner.jpg"class="img-responsive"width="1350"/></div></div></body>图2-8HTML页面结合Bootstrap的CSS样式效果运行代码，页面代码如下图2-8所示。《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例实现

参考图2-6的页面效果，可以看到页面的内容被覆盖住了，调整一下CSS的样式。运行代码，页面效果如图2-6所示。第三步：根据需要添加页面所需的样式.maincontent{margin-top:55px;text-align:center;}

如果想将navbar的样式改成黑色就行了，只需要将navbar-default变成navbar-inverse，页面效果如图2-11所示。图2-11页面的黑色导航条效果此外，大家还可以尝试“navbar-brand”“navbar-collapse”等其他样式。此外，图片的“img-responsive”类实现了图片的响应式展示。《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例拓展在此之上，还可以将导航设置为响应式的导航栏，页面效果如图2-12所示。（a）宽屏状态下的页面效果

（b）iphone6上的页面效果图2-12网站响应式页面效果《Bootstrap响应式网站开发》Bootstrap概述--案例：尝试Bootstrap布局企业导航区案例拓展

为实现导航栏添加响应式，要折叠的内容必须包裹在带有.collapse、.navbar-collapse

类的<div>中。折叠