Mr.J--Bootstrap使用

版权声明:转载请标明出处 https://blog.csdn.net/Ms_yjk/article/details/83062163

Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、Javascript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。 [1]  Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 [2]  国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。

首先,我们先从http://getbootstrap.com/  下载bootstrap:

可以在右上角选择bootstrap版本,我们就选择最新版本v3.3.7作为示范,点击Download后,找到Download source并点击下载,如下图所示。

我们会下载一个压缩包,解压之后会发现很多文件:

虽然文件很多,但是真正需要的并不多,其中less文件夹中的是非常重要的,会经常使用。如果只需要Bootstrap默认提供的CSS或者JavaScript文件,就在dist文件夹中:

然后在浏览器中打开 https://html5boilerplate.com/ 下载H5BP,下载压缩包,解压之后我们会看见这样的一个文件序列。将这个文件夹重命名为Project 1。

我们需要删除不必要的样板文件,在H5BP中删除css文件夹,doc文件夹以及其中的内容。

现在,将boostrap的文件弄到Project 1 中,将bootstrap中的fonts文件夹复制粘贴到Project 1中,在fonts文件夹中写一个名为.htaccess的文件,其中的内容为:

      <FilesMatch "\.(ttf|otf|eot|woff)$">
            <IfModule mod_headers.c>
            Header set Access-Control-Allow-Origin "*" 
			</IfModule>
		</FilesMatch>

这样就可以保证无论站点使用什么CDN服务都可以使用自己的Web字体。在H5BP的文件夹中有一个js文件,里面有一个vendor文件夹,其中有两个比较重要的文件:

Bootstrap的插件基于Jquery,Modernizr包含的是HTML5(shiv)脚本,可以让IE8支持HTML5的分区(section)元素。在Project 1的子文件夹中js创建一个名为bootstrap 的文件夹,在Bootstrap的js文件夹脚本文件都复制过来:

在H5BP的js文件夹中的plugins.js中添加代码,添加的代码来自于bootstrap中dist中的js子文件夹,把bootstrap.min.js中的所有代码复制粘贴,放在plugins.js中:

放在这一条语句的下面。此时所有的插件都准备好了。

Project 1 文件夹如同所示:

fonts:

js:

Project 1:

借鉴资料:《Bootstrap实战》

猜你喜欢

转载自blog.csdn.net/Ms_yjk/article/details/83062163
MR
今日推荐