20分钟成功编写bootstrap响应式页面就这么简单_javascript技巧

20分钟成功编写BOOTSTRAP响应式页面就这么简单最近发现一个叫BOOTSTRAP的好东西，BOOTSTRAP是现在最流行的响应式CSS框架，它以移动设备优先，能够快速适应不同设备。使用它编写响应式页面快捷、方便，而且屏蔽了浏览器差异。使用了BOOTSTRAP后，再也无法想象过去使用原始的CSS编写网页的悲惨生活了。经过学习，我发现自己也具备了分分钟开发出一个高大上的页面的能力。本文将会为大家介绍BOOTSTRAP，并且带领大家一起实现一个响应式页面。图1移动优先，适应不同设备一、安装最简单的方式是直接在网页中引用内容分发网络（CDN）提供的BOOTSTRAP，当用户访问网页时，会从就近的服务器上获取资源。清单1从内容分发网络上获取BOOTSTRAP还可以选择下载BOOTSTRAP在本地部署。用户可以下载页面下载完整的BOOTSTRAP，也可以在定制页面根据项目需要，选择项目用到的功能，编译并下载一个简化版的BOOTSTRAP。下载完成后得到一个ZIP文件，解压后的目录结构如下所示清单2BOOTSTRAP目录结构BOOTSTRAP/CSS/BOOTSTRAPCSSBOOTSTRAPCSSMAPBOOTSTRAPMINCSSBOOTSTRAPTHEMECSSBOOTSTRAPTHEMECSSMAPBOOTSTRAPTHEMEMINCSSJS/BOOTSTRAPJSBOOTSTRAPMINJSFONTS/GLYPHICONSHALFLINGSREGULAREOTGLYPHICONSHALFLINGSREGULARSVGGLYPHICONSHALFLINGSREGULARTTFGLYPHICONSHALFLINGSREGULARWOFFGLYPHICONSHALFLINGSREGULARWOFF2这里我们主要关注三个简化后的文件BOOTSTRAPMINCSS是BOOTSTRAP的主要组成部分，包含了大量要用到的CSS类；BOOTSTRAPTHEMEMINCSS包含了可选的BOOTSTRAP主题；BOOTSTRAPMINJS提供了一些JAVASCRIPT方法，需要注意的是BOOTSTRAP依赖于JQUERY，因此使用BOOTSTRAPMINJS前必须引入JQUERY。和使用内容分发网络一样，我们使用相对路径在自己的页面中引入相应的CSS和JAVASCRIPT。在实际开发中，我们常常使用BOOTSTRAP提供的模板作为起点，该模板引入了响应式页面需要的元数据和BOOTSTRAP，开发者可在此基础之上编写自己的响应式页面清单3BOOTSTRAP基础模板BOOTSTRAP101TEMPLATEHELLO,WORLD二、CSSBOOTSTRAP首先是一个CSS框架，它预定义了很多CSS类，开发者只需要为HTML元素添加适当的CSS类，就能得到想要的样式，可以完成页面的布局、排版等功能。BOOTSTRAP提供的CSS功能异常强大，本文将重点放在其提供的网格系统上，对于其他功能，只在应用时顺便提及。您若想了解更多功能，可参考官方文档。容器使用BOOTSTRAP布局时，需要将HTML元素包含在一个容器（CONTAINER）里，BOOTSTRAP提供了两种容器CONTAINER和CONTAINERFLUID。前者将内容固定宽度居中显示，后者让内容横向撑满整个浏览器窗口，如下所示清单4CONTAINER和CONTAINERFLUID“小时候每当我生病，母亲都会为我冲一杯咖啡，她温柔地说“外国人都喝这个的。”幼小的我总害怕咖啡，酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道，直到那天我喝了一杯板蓝根。”“小时候每当我生病，母亲都会为我冲一杯咖啡，她温柔地说“外国人都喝这个的。”幼小的我总害怕咖啡，酸甜苦涩交错。如今我走遍米萝、上岛、星巴克都找不到小时候喝的那个味道，直到那天我喝了一杯板蓝根。”下图是显示在浏览器中的样子图2容器网格系统和我们在编写第一个响应式页面中设计的网格系统一样，BOOTSTRAP也将页面分为行（ROW），每行12列（COLMD）。行必须包含在容器里，根据屏幕大小不同，列又分为COLXS、COLSM、COLMD、COLLG，分别对应手机COLMD3COLMD6COLMD3打开浏览器，可以看到它们各自占据了12列中的3、6、3列，加起来恰好是12列。如果我们缩小浏览器窗口，直到其小于970PX，此时会发现变成了三行，堆在一起显示。除过COLXS，其他CSS类的行为都一样，在屏幕尺寸小于其临界点时，会堆起来显示，只有在屏幕尺寸大于其临界点时，才按列显示，而COLXS在任何情况下都按列显示。对应不同屏幕尺寸的CSS类可以混合使用，比如我想让一个页面在电脑上显示3列，在手机上显示成2列，则可编写代码如下，在手机上，第三列会换行到下一行显示，并且占据行宽的一半清单6在电脑和手机上显示不同数量的列COLMD3COLMD6COLMD3如果希望在所有设备上显示相同的列，只需要定义最小尺寸的COLXS即可，布局会自动扩展到更大尺寸，反之则不成立清单7所有设备上显示同数量的列COLXS6COLXS6还可以给列一定的偏移量，比如第一列占行宽的1/4，我们希望第二列向右偏移6列，占用行末的3列清单8列偏移COLMD3COLMD3列的顺序也可以通过COLMDPUSH和COLMDPULL调整，它们的含义是将某元素向后推或向前拉若干列，开发者可使用该特性，将重要内容在手机显示时，拉到前面清单9推拉列COLMD9COLMDPUSH3COLMD3COLMDPULL9更让人兴奋的是，这种网格系统还可以嵌套，这样就能进行各种各样复杂的布局了清单10嵌套LEVEL1COLSM9LEVEL2COLXS8COLSM6LEVEL2COLXS4COLSM6LEVEL1COLSM3上面的代码总体上分成两列，其中第一列又嵌套了两列。BOOTSTRAP的网格功能为网页布局提供了各种可能性，而且使用起来非常简单，下面我们不妨通过一个案例，看看使用BOOTSTRAP编写一个响应式页面是多么简单。三、实战假设现在要实现一个如下面的图片所示的网页图4网页设计首先，我们先将网页元素划分成相应的行和列，下图是作者的划分图5将网页设计划分成行和列据此，定义我们的HTML结构，并添加适当的BOOTSTRAPCSS类清单11定义HTML结构JANEDOETTEFRONTENDNINJAFEATUREDWORKAPPLIFYHTTPS/GITHUBCOM/UDACITY/APPLIFYSUNFLOWERHTTPS/GITHUBCOM/UDACITY/SUNFLOWERBOKEHHTTPS/GITHUBCOM/UDACITY/BOKEH作者编写上述代码花了不到10分钟，由于没有图片，作者使用了网上提供的占位图片。在浏览器里打开该页面，已经接近设计了，但字体、大小写、排版还与设计不符。接下来就