Mr.J--Bootstrap使用

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实战》

Mr.J--Bootstrap使用相关推荐

Mr.J -- yield关键字生成器产生值
yield是什么 yield是ES6的新关键字,使生成器函数执行暂停,yield关键字后面的表达式的值返回给生成器的调用者.它可以被认为是一个基于生成器的版本的return关键字. yield关键字实 ...
Hello，Mr.J——唠唠叨叨年终总结
有想写什么的想法的时候,圣诞的阳光还在还能通过对面的大楼反射回来,等真正的有时间动手开始写,已经能听到外面路人在商量跨年的声音了,倒不是没有心思写,只是总习惯安静的找出大段的时间专注于一件事情.在 ...
Mr.J-- 简单生日页面制作
由于本次页面使用的图片涉及个人隐私,已经打码处理. 信息量不小,大家慢慢食用(滑稽.png) <!-- 制作人:Mr.J联系方式:2538808265(QQ)blog: https://blog ...
Vue实践--v-model实现简易计算器
最终效果: 暂时写这样,9键键盘输入数字正在编辑中..... 话不多说,直接上demo: 页面渲染: <!DOCTYPE html> <html lang="en" ...
Paper：《CatBoost: unbiased boosting with categorical features》的翻译与解读
Paper:<CatBoost: unbiased boosting with categorical features>的翻译与解读目录 <CatBoost: unbiased ...
ZOJ 2913 Bus Pass (近期的最远BFS HDU2377)
题意在全部城市中找一个中心满足这个中心到全部公交网站距离的最大值最小输出最小距离和满足最小距离编号最小的中心最基础的BFS 对每一个公交网站BFS dis[i]表示编号为i的点到全部公交网 ...
2050 Programming Competition (CCPC)
Pro&Sol 链接: https://pan.baidu.com/s/17Tt3EPKEQivP2-3OHkYD2A 提取码: wbnu 复制这段内容后打开百度网盘手机App,操作更方便哦 ...
ES6学习--Javascript中的那三个点（...）
看这篇文章之前建议先看:ES6--解构前言扩展运算符(Spread Operator)和剩余参数(Rest Parameter)的写法相同,都是在变量或字面量之前加三个点(...),并且只能用于包 ...
ES6学习（箭头函数详解）
箭头函数(Arrow Function) 箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或 new.target.这些函数表达式更适用于那些本来需要匿名 ...
ES6学习（var,let,const区别）
本人写这个专题的博客是为了总结一下自己学习,使用还有刷题时学到的ES6知识点,并做以归纳. var,let,const 三个属性都可以声明变量. 作用域 var 重新赋值,重新定义变量,可以重复声明 ...

Mr.J--Bootstrap使用

Mr.J--Bootstrap使用相关推荐

最新文章

热门文章