第二篇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针对DOM的应用分析(四)
Apr 15 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 Javascript
jQuery中first()方法用法实例
Jan 06 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
vue子父组件通信的实现代码
Jul 09 Javascript
详解vuex的简单使用
Mar 12 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
Node.js的Koa实现JWT用户认证方法
May 05 Javascript
通过webpack引入第三方库的方法
Jul 20 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 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中计算字符串相似度的函数代码
2012/12/29 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
PHP生成二维码与识别二维码的方法详解【附源码下载】
2019/03/07 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
拖动一个HTML元素
2006/12/22 Javascript
javascript 获取网页参数系统
2008/07/19 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
关于jQuery object and DOM element
2013/04/15 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
JS版的date函数(和PHP的date函数一样)
2014/05/12 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
详解如何优雅地在React项目中使用Redux
2017/12/28 Javascript
Vue.js 利用v-for中的index值实现隔行变色
2018/08/01 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
关于小程序优化的一些建议(小结)
2020/12/10 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
Python中字符串的处理技巧分享
2016/09/17 Python
简单谈谈Python中的闭包
2016/11/30 Python
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python如何把嵌套列表转变成普通列表
2018/03/20 Python
浅谈Python中re.match()和re.search()的使用及区别
2020/04/14 Python
python数据类型强制转换实例详解
2020/06/22 Python
Pytorch实现将模型的所有参数的梯度清0
2020/06/24 Python
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
Visual-Click葡萄牙:欧洲领先的在线眼镜商
2020/02/17 全球购物
经理秘书岗位职责
2013/11/14 职场文书
自立自强的名人事例
2014/02/10 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
教师考核评语
2014/04/28 职场文书
三严三实心得体会范文
2014/10/13 职场文书
创业计划书之便利店
2019/09/05 职场文书
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android
python 离散点图画法的实现
2022/04/01 Python
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python