第二篇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 Base64编码和解码,实现URL参数传递。
Sep 18 Javascript
JavaScript中的Location地址对象
Jan 16 Javascript
javascript 写类方式之四
Jul 05 Javascript
Javascript学习笔记1 数据类型
Jan 11 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
Jan 27 Javascript
Json字符串转换为JS对象的高效方法实例
May 01 Javascript
jquery动态添加删除(tr/td)
Feb 09 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
vue语法之拼接字符串的示例代码
Oct 25 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 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
抓取YAHOO股票报价的类
2009/05/15 PHP
linux下使用crontab实现定时PHP计划任务失败的原因分析
2014/07/05 PHP
PHP处理Json字符串解码返回NULL的解决方法
2014/09/01 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
在线引用最新jquery文件的实现方法
2016/08/26 Javascript
通过bootstrap全面学习less
2016/11/09 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
vue router 组件的高级应用实例代码
2019/04/08 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
[41:41]TFT vs Secret Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python访问纯真IP数据库的代码
2011/05/19 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
简单实现python画圆功能
2018/01/25 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
Python shelve模块实现解析
2019/08/28 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
HTML5通用接口详解
2016/06/12 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
详解canvas.toDataURL()报错的解决方案全都在这了
2020/03/31 HTML / CSS
介绍一下Make? 为什么使用make
2016/07/31 面试题
WSDL的操作类型主要有几种
2013/07/19 面试题
电焊工岗位职责
2014/03/06 职场文书
物理学专业求职信
2014/07/04 职场文书
后备干部推荐材料
2014/12/24 职场文书
汽车销售员岗位职责
2015/04/11 职场文书