第二篇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 相关文章推荐
鼠标移入移出事件改变图片的分辨率的两种方法
Dec 17 Javascript
jquery移动点击的项目到列表最顶端的方法
Jun 24 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
详解jQuery中的DOM操作
Dec 23 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
bootstrap响应式工具使用详解
Nov 29 Javascript
vue.js轮播图组件使用方法详解
Jul 03 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
element中的$confirm的使用
Apr 26 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 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
2013/04/23 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
JS实现可点击展开与关闭的左侧广告代码
2015/09/02 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
详解vue事件对象、冒泡、阻止默认行为
2017/03/20 Javascript
Vue 2.0 服务端渲染入门介绍
2017/03/29 Javascript
vue实现底部菜单功能
2018/07/24 Javascript
小程序调用微信支付的方法
2019/09/26 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python多继承顺序实例分析
2018/05/26 Python
python读取Excel实例详解
2018/08/17 Python
python3 pygame实现接小球游戏
2019/05/14 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python raise的基本使用
2020/09/10 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
美国波道夫·古德曼百货官网:Bergdorf Goodman
2017/11/07 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
精细化工应届生求职信
2013/11/17 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
邓小平理论心得体会
2014/09/09 职场文书
营销学习心得体会
2014/09/12 职场文书
承诺函范文
2015/01/21 职场文书
幼儿园教师节感谢信
2015/01/23 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL
python turtle绘图命令及案例
2021/11/23 Python
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL