第二篇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 函数式编程的原理
Oct 16 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
原生js中ajax访问的实例详解
Sep 19 Javascript
关于Vue背景图打包之后访问路径错误问题的解决
Nov 03 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
Vue路由模块化配置的完整步骤
Aug 14 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
javascript实现简易计算器功能
Sep 23 Javascript
html中两种获取标签内的值的方法
Jun 16 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技术开发技巧分享
2010/03/23 PHP
PHP PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP函数实现分页含文本分页和数字分页
2014/10/23 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
PHP实现数组向任意位置插入,删除,替换数据操作示例
2019/04/05 PHP
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
2012/03/01 Javascript
jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
2013/09/29 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
javascript制作的简单注册模块表单验证
2015/04/13 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
使用vue实现点击按钮滑出面板的实现代码
2017/01/10 Javascript
Vue数组更新及过滤排序功能
2017/08/10 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
vue中的 $slot 获取插槽的节点实例
2019/11/12 Javascript
微信小程序自定义modal弹窗组件的方法详解
2020/12/20 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
[01:16:13]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第一场 2月22日
2021/03/11 DOTA
基于Python log 的正确打开方式
2018/04/28 Python
Pyqt清空某一个QTreeewidgetItem下的所有分支方法
2019/06/17 Python
Python pygame绘制文字制作滚动文字过程解析
2019/12/12 Python
tensorflow多维张量计算实例
2020/02/11 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
关于tf.matmul() 和tf.multiply() 的区别说明
2020/06/18 Python
python 装饰器的使用示例
2020/10/10 Python
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
瑞典廉价机票预订网站:Seat24
2018/06/19 全球购物
匡威俄罗斯官网:Converse俄罗斯
2020/05/09 全球购物
优秀村官事迹材料
2014/01/10 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
工作鉴定评语
2014/05/04 职场文书
JavaScript嵌入百度地图API的最详细方法
2021/04/16 Javascript
vue中利用mqtt服务端实现即时通讯的步骤记录
2021/07/01 Vue.js