第二篇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编程起步(第一课)
Jan 10 Javascript
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
Aug 21 Javascript
javascript 出生日期和身份证判断大全
Nov 13 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
JS声明变量背后的编译原理剖析
Dec 28 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
使用jquery实现仿百度自动补全特效
Jul 23 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
Nov 07 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
简单谈谈vue的过渡动画(推荐)
Oct 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
天津市收音机工业发展史
2021/03/04 无线电
第十四节 命名空间 [14]
2006/10/09 PHP
PHP number_format() 函数定义和用法
2012/06/01 PHP
PHP使用CURL获取302跳转后的地址实例
2014/05/04 PHP
php实现的简单日志写入函数
2015/03/31 PHP
PHP中类的继承和用法实例分析
2016/05/24 PHP
jQuery拖动图片删除示例
2013/05/10 Javascript
js图片预加载示例
2014/04/30 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
微信小程序wx.request实现后台数据交互功能分析
2017/11/25 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Vue 中使用 typescript的方法详解
2020/02/17 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
JavaScript位置参数实现原理及过程解析
2020/09/14 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
python实现自动登录人人网并访问最近来访者实例
2014/09/26 Python
python万年历实现代码 含运行结果
2017/05/20 Python
win10系统下Anaconda3安装配置方法图文教程
2018/09/19 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
通过python调用adb命令对App进行性能测试方式
2020/04/23 Python
Python字典fromkeys()方法使用代码实例
2020/07/20 Python
大学生专科毕业生自我评价
2013/11/17 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
试用期员工考核制度
2014/01/22 职场文书
暑期社会实践方案
2014/02/05 职场文书
党支部书记岗位责任制
2014/02/11 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
合作协议书怎么写
2014/04/18 职场文书
美丽家庭事迹材料
2014/05/03 职场文书
2014县政府领导班子对照检查材料思想汇报
2014/09/25 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js
python热力图实现的完整实例
2022/06/25 Python