Bootstrap框架技术(详解)

时间:2021-10-28 来源:未知网络 作者:996建站网

Bootstrap框架技术

一、概述

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

进入 Bootstrap 的官方网站(getbootstrap.com/),我们可以看到这样一句话:Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Bootstrap框架技术(详解)插图

这句话的意思是:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的Web项目。大家也可进入 Bootstrap 中文网(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 布局的页面。

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

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

Bootstrap框架技术(详解)插图

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

Bootstrap框架技术(详解)插图

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

Bootstrap框架技术(详解)插图

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

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

第二个页面:fairchildsemi.com/

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

Bootstrap框架技术(详解)插图

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

Bootstrap框架技术(详解)插图1

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

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

四、示例

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

俗话说,工欲善其事,必先利其器。要使用 Bootstrap 就需要先下载 Bootstrap 用于生产环境的资源。大家可以从 github.com/twbs/bootstr 下载用于生产环境的 Bootstrap。

下载的资源目录结构:

Bootstrap框架技术(详解)插图1

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

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

Bootstrap框架技术(详解)插图1

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

<!DOCTYPE html>

<html lang="zh-CN">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>用户登录</title>

<link rel="stylesheet" href="lib/bootstrap-3.3.7-dist/css/bootstrap.min.css">

</head>

<body>

</body>

</html>

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

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

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

“行(row)”必须包含在布局容器 .container (固定宽度)或 .container-fluid (100% 宽度)中,通过行可以在水平方向创建一组“列(column)”,待布局的内容就放置于“列”中。

“行”可以使用预定义类 .row 来创建,“列”也有类似的预定义类,规则如下表所示:

Bootstrap框架技术(详解)插图1

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

<div class="container">

<div class="row">

<div class="col-md-6 col-sm-8"></div>

</div>

</div>

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

Bootstrap框架技术(详解)插图1

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

<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2"></div>

如下图所示效果:

Bootstrap框架技术(详解)插图1

使用 h1 标签来描述页面标题,使用预定义类 .text-center 让文本在 h1 块中居中显示:

<h1 class="text-center">用户登录</h1>

Bootstrap框架技术(详解)插图1

接下来开始实现表单内容的布局。我们可以使用 Bootstrap 中定义好的输入框组来布局,如下所示效果:

Bootstrap框架技术(详解)插图1

这时我们需要使用到预定义类 .input-group 来表示输入框组,可以使用 .input-group-addon 在输入框的任意一侧添加额外元素或按钮,如果需要输入框宽度自适应布局容器大小,则可使用 .form-control 类来实现。该布局结构代码如下:

<div class="input-group">

<span class="input-group-addon">@</span>

<input type="text" class="form-control" placeholder="Username">

</div>

可以将输入框前的元素替换为一个图标的表示,这时可以使用 Bootstrap 提供的 Glyphicons 字体图标。在字体图标下方直接提供了预定义的类样式名,如:

Bootstrap框架技术(详解)插图1

则修改布局如下:

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" placeholder="Username">

</div>

显示效果如下:

Bootstrap框架技术(详解)插图1

以同样的方式添加密码框布局,再添加一个是否记住用户名的复选框。效果如下:

Bootstrap框架技术(详解)插图1

最后布局登录按钮。

在 Bootstrap 中也设置了许多预定义好的按钮样式,可以直接拿来使用。Bootstrap 可以使用预定义好的类 .btn将元素变成按钮的样子,这里还是使用表单提交按钮来布局,只是使用Bootstrap的样式:

<input type="submit" class="btn" value="登录">

现在布局好之后的效果:

Bootstrap框架技术(详解)插图1

这样登录按钮显得很别扭,继续使用 .btn-block 可以将按钮变成块级元素,拉伸到父元素的 100% 宽度,同时使用 .btn-success 样式设置按钮成功样式:

Bootstrap框架技术(详解)插图1

最后在布局的列结构上使用 .well 样式,就能加上嵌入的简单效果。完整代码清单如下:

<div class="container">

<div class="row">

<div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2 well">

<h1 class="text-center">用户登录</h1>

<form>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>

<input type="text" class="form-control" placeholder="Username">

</div>

<div class="input-group">

<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>

<input type="password" class="form-control" placeholder="Password">

</div>

<div class="checkbox">

<label>

<input type="checkbox"> 记住用户名

</label>

</div>

<input type="submit" class="btn btn-success btn-block" value="登录">

</form>

</div>

</div>

</div>

效果:

Bootstrap框架技术(详解)插图1

到此,一个简单的使用 Bootstrap 布局的登录表单就完成了。我们回顾一下,实现这个布局时,完全不用自己书写 CSS 样式代码,直接使用 Bootstrap 预定义好的类来完成即可。如果自己定义各样式内容,要达到上述响应式布局效果,可能需要两个小时,但如果使用 Bootstrap 来实现,不用 10 分钟就完成了布局,这就是效率。

五、小结

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

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

Bootstrap框架技术(详解)插图2

微信扫一扫 关注公众号

微信扫一扫 使用小程序

百度扫一扫 使用小程序