第二篇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 相关文章推荐
扩展String功能方法
Sep 22 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
JQuery防止退格键网页后退的实现代码
Mar 23 Javascript
JavaScript实现查找字符串中第一个不重复的字符
Dec 29 Javascript
Javascript实现检测客户端类型代码封包
Dec 03 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
微信小程序实现两个页面传值的方法分析
Dec 11 Javascript
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
Nov 20 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
安健A254立体声随身听的分析与打磨
2021/03/02 无线电
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
C#中TrimStart,TrimEnd,Trim在javascript上的实现
2011/01/17 Javascript
javascript高级学习笔记整理
2011/08/14 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
js 模仿锚点定位的实现方法
2016/11/19 Javascript
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
Vee-Validate的使用方法详解
2017/09/22 Javascript
详解如何去除vue项目中的#——History模式
2017/10/13 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
在Python中实现函数重载的示例代码
2019/12/12 Python
Django import export实现数据库导入导出方式
2020/04/03 Python
Python基于gevent实现高并发代码实例
2020/05/15 Python
django 模型字段设置默认值代码
2020/07/15 Python
利用python 下载bilibili视频
2020/11/13 Python
表单button的outline在firefox浏览器下的问题
2012/12/24 HTML / CSS
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
有趣、实用和鼓舞人心的产品:Inspire Uplift
2019/11/05 全球购物
四议两公开实施方案
2014/03/28 职场文书
幼儿园迎国庆65周年活动策划方案
2014/09/16 职场文书
新员工试用期自我评价
2015/03/10 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
表扬信格式模板
2015/05/05 职场文书
2015年大学教师工作总结
2015/05/20 职场文书
离婚被告代理词
2015/05/23 职场文书
职工趣味运动会开幕词
2016/03/04 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python