第二篇Bootstrap起步


Posted in Javascript onJune 21, 2016

在上篇文章给大家介绍了Bootstrap的基础知识,接下来通过本文给大家介绍

我们可以在http://getbootstrap.com下载bootstrap的文件

第二篇Bootstrap起步

点击左边的download bootstrap可以下载bootstrap的css,javascript和字体库的已编译版本。点击中间的download source可以下载bootstrap的源代码。一般情况下我们使用bootstrap点击左边的已编译版本下载就可以了。

如果下载的是已编译版结构是:

第二篇Bootstrap起步

如果下载的是源代码结构是:

第二篇Bootstrap起步

Dist文件夹里的内容和已编译版本内容一样.

如果需要使用bootstrap这个前端框架需要设置一些格式和引入一些文件,下面是使用Bootstrap的一个基本模板。

第二篇Bootstrap起步

Bootstrap 使用了一些 HTML5 元素和 CSS 属性。为了让这些正常工作,需要使用 HTML5 文档类型(Doctype)。 因此,在页面的开头包含了以下代码段:

第二篇Bootstrap起步

bootstrap模板为使IE6、7、8版本(IE9以下版本)浏览器兼容html5新增的标签,引入下面代码文件即可:

<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>

同理为使IE6、7、8版本浏览器兼容css3样式,引入下面代码

<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>

以下代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面

<meta http-equiv="X-UA-Compatible" content="IE=edge">
以下代码可以让浏览器以最合适的大小来显示相应的页面:
<meta name="viewport" content="width=device-width, initial-scale=1">

要使用bootstrap来搭建网页,需要引入bootstrap的css文件,

第二篇Bootstrap起步

<link href="~/bootstrap-3.2.0-dist/css/bootstrap.min.css" rel="stylesheet" />

若要使用bootstrap里的javascript组件还需要引入bootstrap的js插件,因为js插件是基于jquery的所以还要先引入jquery脚本,注意jquery脚本需要放到bootstrap的js插件前面。

第二篇Bootstrap起步

<script src="~/bootstrap-3.2.0-dist/js/jquery.min.js"></script>
 <script src="~/bootstrap-3.2.0-dist/js/bootstrap.min.js"></script>

以上所述是小编给大家介绍的第二篇Bootstrap起步的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 循环读取JSON数据的代码
Jul 17 Javascript
谈谈JavaScript中的函数与闭包
Apr 14 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
在JS方法中返回多个值的方法汇总
May 20 Javascript
简单实现js选项卡切换效果
Feb 09 Javascript
JavaScript实现三级联动菜单效果
Aug 16 Javascript
AngularJS路由删除#符号解决的办法
Sep 28 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
Aug 31 Javascript
VUE v-model表单数据双向绑定完整示例
Jan 21 Javascript
微信小程序实现顶部导航特效
Jan 28 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
基于zepto.js简单实现上传图片
Jun 21 #Javascript
第一篇初识bootstrap
Jun 21 #Javascript
JavaScript实现相册弹窗功能(zepto.js)
Jun 21 #Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 #Javascript
JavaScript实现移动端滑动选择日期功能
Jun 21 #Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 #Javascript
Javascript实现图片加载从模糊到清晰显示的方法
Jun 21 #Javascript
You might like
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php数组索引与键值操作技巧实例分析
2015/06/24 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
PHP编程实现多维数组按照某个键值排序的方法小结【2种方法】
2017/04/27 PHP
Mootools 1.2 手风琴(Accordion)教程
2009/09/15 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
ie下动态加态js文件的方法
2011/09/13 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jquery实现图片翻页效果
2013/12/23 Javascript
JavaScript的21条基本知识点
2014/03/04 Javascript
Angular中ng-repeat与ul li的多层嵌套重复问题
2017/07/24 Javascript
node链接mongodb数据库的方法详解【阿里云服务器环境ubuntu】
2019/03/07 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
微信小程序获取公众号文章列表及显示文章的示例代码
2020/03/10 Javascript
JavaScript前后端JSON使用方法教程
2020/11/23 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
基于python实现微信模板消息
2015/12/21 Python
spyder常用快捷键(分享)
2017/07/19 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python实现的汉诺塔算法示例
2019/10/23 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
HTML5+CSS3网页加载进度条的实现,下载进度条的代码实例
2016/12/30 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
英国最大的百货公司:Harrods
2016/08/18 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
Janie and Jack美国官网:GAP旗下的高档童装品牌
2019/09/09 全球购物
车间班组长的职责
2013/12/13 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
“向国旗敬礼”活动策划方案(4篇)
2014/09/27 职场文书
医务人员医德考评自我评价
2015/03/03 职场文书
2015年教师节活动总结
2015/03/20 职场文书
银行大堂经理培训心得体会
2016/01/09 职场文书