第二篇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 相关文章推荐
基于jquery的jqDnR拖拽溢出的修改
Feb 12 Javascript
同时使用n个window onload加载实例介绍
Apr 25 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
jquery图片不完全按比例自动缩小的简单代码
Jul 29 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
推荐一款jQuery插件模板
Jan 09 Javascript
浅析JavaScript中命名空间namespace模式
Jun 22 Javascript
javascript html5轻松实现拖动功能
Mar 01 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
JavaScript进制转换实现方法解析
Jan 18 Javascript
vue 调用 RESTful风格接口操作
Aug 11 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 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JS保存、读取、换行、转Json报错处理方法
2013/06/14 Javascript
让新消息在网页标题闪烁提示的jQuery代码
2013/11/04 Javascript
Bootstrap多级导航栏(级联导航)的实现代码
2016/03/08 Javascript
node.js实现爬虫教程
2020/08/25 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
使用Vue父子组件通信实现todolist的功能示例代码
2019/04/11 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
Windows下Anaconda的安装和简单使用方法
2018/01/04 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
pytorch构建网络模型的4种方法
2018/04/13 Python
django2+uwsgi+nginx上线部署到服务器Ubuntu16.04
2018/06/26 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
python之array赋值技巧分享
2019/11/28 Python
PyCharm中配置PySide2的图文教程
2020/06/18 Python
Python如何对XML 解析
2020/06/28 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
CSS3 选择器 属性选择器介绍
2012/01/21 HTML / CSS
Expedia英国:全球最大的在线旅游公司
2017/09/07 全球购物
保险专业大专生求职信
2013/10/26 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
售后服务承诺函格式
2015/01/21 职场文书
Python机器学习算法之决策树算法的实现与优缺点
2021/05/13 Python
关于使用Redisson订阅数问题
2022/01/18 Redis