浅谈Bootstrap

浅谈Bootstrap

前面介绍过前端的发展史,现在就来说一下 Bootstrap 框架。

2018-10-12

Bootstrap 概述

前面介绍过前端的发展史,现在就来说一下 Bootstrap 框架。

Bootstrap,相信对于前端工程师来说并不陌生,它来自于 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于    HTMLCSSJAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。其最大的优势是响应式布局,使得开发者可以方便的让网页无论在台式机、平板设备还是在手机上都获得最佳的体验。

Bootstrap 架构

我们要学习 Bootstrap,首先要介绍而是它的整体架构——它到底由什么组成的。它是由六大方面组成:

一、12 栅格系统

每个前端框架都会首先定义好布局系统,12 栅格系统是 Bootstrap 为了更好的布局所定义的。Bootstrap 将屏幕平分 12 份(列)。

二、基础布局组件

基础布局组件就是 Bootstrap 框架内为一些基础布局的标签定义了一些统一的样式。如 Table、按钮、表单等。

三、Jquery

Bootstrap 所有的 JavaScript 插件都依赖于 Jquery 的。如果要使用这些 JS 插件,就必须引用 Jquery 库。这也是为什么我们在除了要引用 BootstrapJS 文件和 CSS 文件外,还需要引用 Jquery 库的原因,两者是依赖关系。

四、CSS 组件

Bootstrap 为我们预实现了很多 CSS 组件。如下拉框、按钮组、导航等。也就是说 Bootstrap 内帮我们定义好了很多CSS 样式,你可以将这些样式直接应用到之前的下拉框等元素里。

五、JavaScript 插件

Bootstrap 也为我们实现了一些 JS 插件,我们可以用其提供的插件要完成一些常用功能,而不需要我们再重新写 JS 代码来实现像提示框,模态窗口这样的效果了。

六、响应式设计

它会根据屏幕尺寸来自动调整页面,使得前端页面在不同尺寸的屏幕上都可以表现很好。

Bootstrap 的使用方法

1.我们首先在官网里下载,用于生产环境的 Bootstrapzip 文件,解压得到一个包含 cssfontsjs 的文件夹。

2.我们把解压到的文件放在 text 文件夹中(文件夹名称可以自行命名)中,并在这个文件夹中创建一个 index.html 文件(根据自己创建项目自行命名)。

3.在官网中,有基础的模板,我们可以使用模板,但是是对这些实例按照自己的需求进行修改,而不要简单的复制、粘贴。

这样我们就使用 Bootstrap 完成了第一个页面设计了。快来试试看吧。

Bootstrap 常用插件

这里我就介绍一个常用的插件 —— Carousel 插件,它是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。比如网页中的轮播广告就是使用这个插件制作的。

轮播可以实现以下几个功能:1.焦点随图片的滚动而变化。2.跳跃点击焦点,会跳转到相应的图片。3.点击左右按钮会相应的触发左右跳转。4.鼠标不点击的时候会进行自动跳转。

下面就是一个简单的轮播图的效果图:

Bootstrap 的使用体验

Bootstrap 给我最深的体验是响应式布局,使得开发者可以让网页在台式机、平板设备、手机上都获得最佳的体验。栅格形式的响应式布局,和各种 class 的定义,让开发者根本不需要敲什么样式的代码,也不用仔细的研究布局和兼容的问题,Bootstrap 可以对所有浏览器兼容(IE8 以下版本除外),开发网页的速度非常快。 其次网上有许多开发者为 Bootstrap 写了开源的组件,甚至于可以说,直接复制进来就能用,不容易碰到问题,比如幻灯片,折叠菜单,或者各种原本处理起来相当复杂的效果。很多时候,制作一个网页需要用到的区块和特效,Bootstrap 都可以很容易找到,而且不需要再次去进行调整,可以直接使用,只要是版本相符。

Bootstrap 作为一套比较流行完整的前端开发框架,深受欢迎。我们在了解 Bootstrap 框架的优缺点后,在项目开发中根据需求使用 Bootstrap 框架,选择合适的开发方案。这么好用 Bootstrap 你还在等什么啊,快来一起使用吧!

XML 地图