2018千锋HTML5视频教程全集学习知识点精选:Bootstrap框架技术

、概述

首先我们来说说 Bootstrap 是什么。

进入 Bootstrap 的官方网站(http://getbootstrap.com/),我们可以看到这样一句话:Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 这句话的意思是:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的Web项目。大家也可进入 Bootstrap 中文网(http://www.bootcss.com/)学习 Bootstrap 的框架内容。

、优势

Bootstrap是由 Twitter 发布并开源的前端框架,使用非常火爆。据我们调查,目前在各大中小型公司和企业中,前端项目非常多的都在全面推行使用 Bootstrap。当然如此火爆自然有它的道理,下面为大家简单的分析一下:

首先,Bootstrap 出自 Twitter。由大公司发布,并且完全开源,自然久经考验,减少了测试的工作量。这也就是我们经常说到的站在巨人的肩膀上,不重复造轮子。

其次,Bootstrap 的代码有着非常良好的代码规范。在使用 Bootstrap 时也有助于我们去养成良好的编码习惯,在 Bootstrap 的基础之上创建项目,日后代码的维护也变得异常简单清晰。

第三,Bootstrap 是基于 Less 打造的,并且也有 Sass版本。Less/Sass是CSS的预处理技术,正因如此,它一经推出就包含了一个非常实用 Mixin 库供我们调用,使得我们在开发过程中对CSS的处理更加简单。

第四,响应式开发。Bootstrap响应式的栅格系统(Grid System)非常先进,它已经帮你搭建好了实现响应式设计的基础框架,并且非常容易修改,如果你是一个新手,Bootstrap 可以帮助你在非常短的时间内上手响应式布局的设计。

第五,丰富的组件与插件。Bootstrap 的 HTML组件和 JS组件非常丰富,并且代码简洁,非常易于修改,如果你觉得它设计的样子不是你所想要的,你完全可以在其基础之上修改成自己想要的任何样子。由于 Bootstrap 的火爆,又出现了不少围绕 Bootstrap 而开发的JS插件,这就使得开发的工作效率得到极大提升。

以上这些都是使用 Bootstrap 所带来的优势。当然 Bootstrap 并不能帮你完成所有事情,它只是一个的框架,在这个框架上面你依旧可以任意的发挥,并且发挥得更好,但是前提是你要驾驭得了它。 

三、体验

我们来看两个使用 Bootstrap 布局的页面。

第一个页面:http://home.baidu.com/。

我们仅看页首导航部分,在PC端浏览器查看时效果如下:

2018千锋HTML5视频教程全集学习知识点精选:Bootstrap框架技术_第1张图片

打开开发者工具,模拟移动设备端在宽度 768 像素下的查看效果:

我们发现,页首导航条现在不见了,在首行居中部分显示了 LOGO 图片,最前边显示了一个可折叠/展开的菜单,将菜单展开:

原来被隐藏的页首导航栏被折叠到了菜单中。

这是非常典型的一个响应式的使用,因为如果保持导航布局结构,在低分辨率显示情况下,导航布局宽度可能会超出水平显示的宽度,那么浏览器中就会出现水平滚动条,在移动设备端,这是不友好的体现。如果折叠到菜单中,当需要使用时再展开,通过上下滑动来选择菜单导航,这样既使得页面布局更简洁,又提升了用户体验,所以这是经常使用到的响应式布局结构。

第二个页面:https://www.fairchildsemi.com/。

PC端浏览器中(水平1280像素分辨率)打开页面,显示效果如下:

切换到移动设备端在水平方向 768 像素下查看显示效果:

大家仔细比较这两张图,在顶部通栏显示的效果、LOGO行显示效果及导航栏显示效果都发生了变化,在低分辨率下查看时,页面会变得更加简洁,这也体现的是响应式布局的优势。

该页面导航栏下方是通栏的大图轮播效果,切换不同显示分辨率的情况下,该轮播效果都能自动适应各不同分辨率,这是通过 Bootstrap 中的JS插件来完成的。如果是原生的JS写法,这个轮播图可能就要写两个小时,使用 Bootstrap 的情况,即使使用不熟练,也能够在10分钟以内完成该轮播图效果了。

四、示例

好,体会了一下 Bootstrap 在开发时带来的好处后,下面我们来自己动手,编写一个使用 Bootstrap 布局的登录页面。

俗话说,工欲善其事,必先利其器。要使用 Bootstrap 就需要先下载 Bootstrap 用于生产环境的资源。大家可以从 https://github.com/twbs/bootstrap/releases/download/v3.3.7/bootstrap-3.3.7-dist.zip 下载用于生产环境的 Bootstrap。

下载的资源目录结构:

2018千锋HTML5视频教程全集学习知识点精选:Bootstrap框架技术_第2张图片

css 目录中放置的是使用 Bootstrap 时所需要使用到的全局的CSS样式表文件,包括编译好的 css 文件、压缩过的 css 文件,还提供了 css 的源码映射表 .map文件;fonts 目录中放置的是字体图标的文件js 目录中放置的是用于开发环境的 js 插件。需要注意的是,Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以jQuery必须在 Bootstrap 之前引入。

将下载好的资源放到自己项目目录下:

新建登录的 html 页面,为了确保适当的绘制和触屏缩放,需要在  之中添加 viewport 元数据标签,再使用  引入外部 css 样式表文件。源码如下:


对于登录表单的布局,我们使用 Bootstrap 的栅格系统(Grid System)来实现。

栅格系统会随着屏幕或视口(viewport)尺寸的变化,自动分为最多12列,我们可以直接使用 Bootstrap 中预定义的类来实现布局。

栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,待布局的内容就可以放入这些创建好的布局中。

“行(row)”必须包含在布局容器 .container (固定宽度)或 .container-fluid (100% 宽度)中,通过行可以在水平方向创建一组“列(column)”,待布局的内容就放置于“列”中。“行”可以使用预定义类 .row 来创建“列”也有类似的预定义类,规则如下表所示:

使用“列”的类前缀,后跟布局所占据列宽1~12)即可。那么我们可以设计如下布局:

登录表单在中等屏幕时布局占用6列的宽度,在小屏幕时占用8列宽度。如下所示:

 但通常我们会将登录表单在水平方向居中位置显示出来,当然方式也有多种,可以使用栅格系统中列的偏移来完成。使用 .col-md-offset-* 类可以将列向右侧偏移,通过使用 * 选择器为当前元素增加了左侧的边距(margin),.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列(column)的宽度。那么上述布局可以更新为:

从以上示例来看,Bootstrap 已为开发者预定义了非常多的有用的类,开发者只需要在使用过程中熟记这些类名即可,当然也可以在已经定义样式的基础上再来实现定制,这就需要十分熟练的使用了。

Bootstrap 中除了这些预定义好的类之外,还有非常多的其它组件与JS插件可以使用,大家可以继续通过 Bootstrap 文档进行查阅。













你可能感兴趣的:(前端,编程,html5)