第二篇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入门教程(8) Location地址对象
Jan 31 Javascript
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
window.print打印指定div实例代码
Dec 13 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
简单的jQuery入门指引
Jul 28 Javascript
JavaScript提高性能知识点汇总
Jan 15 Javascript
JavaScript的设计模式经典之建造者模式
Feb 24 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
Jun 10 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
PHP中显示格式化的用户输入
2006/10/09 PHP
利用PHP实现智能文件类型检测的实现代码
2011/08/02 PHP
共享自己写一个框架DreamScript
2007/01/20 Javascript
js判断一个元素是否为另一个元素的子元素的代码
2012/03/21 Javascript
在ASP.NET中使用JavaScript脚本的方法
2013/11/12 Javascript
初始Nodejs
2014/11/08 NodeJs
在线所见即所得HTML编辑器的实现原理浅析
2015/04/25 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
内容滑动切换效果jquery.hwSlide.js插件封装
2016/07/07 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
JS常见算法详解
2017/02/28 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
vue.js源代码core scedule.js学习笔记
2017/07/03 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
elementui实现预览图片组件二次封装
2020/12/29 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
Python中用psycopg2模块操作PostgreSQL方法
2017/11/28 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
行政部工作岗位职责范本
2014/03/05 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
暑假生活随笔
2015/08/15 职场文书
golang日志包logger的用法详解
2021/05/05 Golang
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Vue h函数的使用详解
2022/02/18 Vue.js