第二篇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和注册表脚本实现右键收藏Web页选中文本
Jan 28 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
this,this,再次讨论javascript中的this,超全面(经典)
Jan 05 Javascript
javascript冒泡排序小结
Apr 10 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
ES6新特性之解构、参数、模块和记号用法示例
Apr 01 Javascript
JavaScript实现多重继承的方法分析
Jan 09 Javascript
详解Angular6.0使用路由步骤(共7步)
Jun 29 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
js实现简单的秒表
Jan 16 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
基于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
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
header与缓冲区之间的深层次分析
2016/07/30 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
使用PHP开发留言板功能
2019/11/19 PHP
javascript的渐进增强与平稳退化浅谈
2013/11/12 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JavaScript简介
2015/02/15 Javascript
原生JS实现LOADING效果
2015/03/16 Javascript
javascript html5移动端轻松实现文件上传
2020/03/27 Javascript
浅谈JavaScript 执行环境、作用域及垃圾回收
2016/05/31 Javascript
JS简单获取当前年月日星期的方法示例
2017/02/07 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
python3访问sina首页中文的处理方法
2014/02/24 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
介绍Python中的__future__模块
2015/04/27 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Pyqt QImage 与 np array 转换方法
2019/06/27 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
Python字符串对齐、删除字符串不需要的内容以及格式化打印字符
2021/01/23 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
橄榄树药房:OLIVEDA
2019/09/01 全球购物
实习生自我鉴定范文
2013/12/05 职场文书
加工操作管理制度
2014/01/19 职场文书
党校培训自我鉴定
2014/02/01 职场文书
期中考试后的反思
2014/02/08 职场文书
租房安全协议书
2014/08/20 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
实习生矿工检讨书
2014/10/13 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
CSS 新特性 contain控制页面的重绘与重排问题
2021/04/30 HTML / CSS
MySQL聚簇索引和非聚簇索引的区别详情
2022/06/14 MySQL