第一次接触神奇的Bootstrap

时间:2021-05-18

作为Web前端开发框架,Bootstrap为大多数标准的UI设计常见提供了用户友好、扩浏览器的解决方案。

1.下载Bootstrap

打开官方网址http://getbootstrap.com/ 进行下载。

2.准备项目模板文件夹

接下来,我们为第一个项目创建一个文件夹以及一些基本的文件。谓词我们还要用到HTML5样板文件 HTML5 Boilerplate(H5BP),然后把Bootstrap的有用文件复制过去。

2.1 下载H5BP

访问网站链接地址:https://html5boilerplate.com/ ,下载B5BP。

解压后,修改文件夹名为Bootstrap_First,其目录结构如下:

2.2然后删除和更新下必要的样板文件

删除下列至于H5BP相关的文件夹和文件:

□ 因为稍后要使用LESS创建自己的CSS文件,所以先删除css文件夹。

□ doc 文件夹及其中内容

2.3 理解样板中的.htaccess文件

这个文件中的内容不一定全部都用,这取决于主机设置和站点需求。这个文件的一个主要用途是保证站点性能最优。

2.4 更新必要的样板文件

样板中的下列文件提供了项目的标准信息,根据需要可以更新它们、直接使用它们或者就放那不管。

□humans.txt:这个文件记载贡献者,H5BP、Bootstrap的,还有其他贡献者。

□LICENSE.txt:在H5BP许可前面,加上你基于该许可构建的网站的许可信息,在H5BP许可后,加上Bootstrap以及其他站点中用到的重要的库的许可信息。

2.5 更新站点桌面和触摸设备图标

不要忘了用自己项目的图标替换 Boilerplate 默认的图标文件。

3.加入Bootstrap文件

3.1 字体

从Bootstrap的主文件夹中,把fonts文件夹复制粘贴到Bootstrap_First文件夹中。这个文件夹里包含着Bootstrap附带的重要的Glyphicon字体。

保险起见,再在fonts文件夹中放一个跨域友好的.htaccess文件:

复制代码 代码如下:<FilesMatch "\.(ttf|otf|eot|woff)$"><IfModule mod_headers.c>Header set Access-Control-Allow-Origin "*"</IfModule></FilesMatch>

其目的是保证即使站点根目录下没有放H5BP的.htaccess文件,也不会出现字体问题。

3.2 JavaScript

接下来就是加入Bootstrap的JavaScript文件。H5BP的文件夹中已经包含了几个JavaScript文件如下:

在js文件夹里新建文件夹bootsreap,然后把Bootstrap的js文件夹中的脚本都复制过来。下面的截图显示了Bootstrap随带的插件。每个插件一个文件:

把这些插件文件集中保存到新建的js/bootstrap 文件夹,便于优化网站性能,即可以按需选用插件、排除其他文件并缩减文件大小。

在开发期间,保持所有Bootstrap的插件都可用也是一个办法。这样,如果想添加个折叠、提示或者传送带效果,都可以信手拈来。

H5BP采用的方法是把所有插件代码复制到一个 plugins.js模板文件中。这是结束开发之后的最佳做法,因为这样可以减少HTTP请求,加快站点速度。(换句话说,一个80K的文件,比加载4个20K的文件速度更快。)

打开Bootstrap文件夹中包含分发文件的dist文件夹。在这个文件夹中的js文件夹里,包含着 bootstrap.js 和 bootstrap.min.js,它们就是包含 Bootstrap所有插件代码的大文件。

把bootstrap.min.js 的所有代码复制到plugins.js 里。

然后把Bootstrap文件夹里的less文件夹也复制到项目文件夹中。

4.构造HTML模板

打开项目中的 index.html 文件进行编辑。这个示例标记文件来自H5BP,体现了一些最佳实践和建议方案。我们就以这个为基础,把它整合到Bootstrap的工作流中。

浏览一下整个文件,其中有几个有意思的地方,H5BP文档中都有详细说明,目前的5.3.0版本的链接地址为:https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/extend.md 。下面也简单介绍下,按次序来:

□ HTML5 文档类型声明:

复制代码 代码如下:<!doctype html>

□ 接下来是几个meta标签

■ 用于指定字符集的:

复制代码 代码如下:<meta charset="utf-8">

■ 告诉IE使用最新版的渲染引擎

复制代码 代码如下:<meta http-equiv="x-ua-compatible" content="ie=edge">

■ 预留给描述站点用的:

复制代码 代码如下:<meta name="description" content="">

■ 针对移动浏览器的视口标签

复制代码 代码如下: <meta name="viewport" content="width=device-width, initial-scale=1">

□ 接下来是两个样式表的链接

复制代码 代码如下:<link rel="stylesheet" href="css/normalize.css"><link rel="stylesheet" href="css/main.css">

□ 再下面就是加载Modernizr脚本的script标签。这个脚本回味IE8提供HTML5“垫片脚本”,以便它能识别HTML5的分区元素:

复制代码 代码如下:<script src="js/vendor/modernizr-2.8.3.min.js"></script>

□ 接下来是IE条件注释,包含推荐用户把旧版本IE升级到新版本的消息:

<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browse. ...
<![endif]-->

□ 紧接着是一段文本

□ 随后是托管在谷歌服务器上的jQuery链接,以及一个本地jQuery的后备链接:

复制代码 代码如下:<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script>window.jQuery || document.write('<script src="js/vendor/jquery-1.12.0.min.js"><\/script>')</script>

□ 下面就是plugins.js 和main.js的链接,别分保存JavaScript插件代码和我们编写的代码:

复制代码 代码如下:<script src="js/plugins.js"></script><script src="js/main.js"></script>

□ 谷歌的Analytics 脚本:

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --><script> (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]= function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date; e=o.createElement(i);r=o.getElementsByTagName(i)[0]; e.src='https:///(试用免费)。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章