第二篇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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
js实现上传图片预览的方法
Feb 09 Javascript
JS与jQuery遍历Table所有单元格内容的方法
Dec 07 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
jquery自定义插件——window的实现【示例代码】
May 06 Javascript
JavaScript职责链模式概述
Sep 17 Javascript
15个非常实用的JavaScript代码片段
Dec 18 Javascript
vue2.0自定义指令示例代码详解
Apr 25 Javascript
在vue中实现禁止回退上一步,路由不存历史记录
Jul 22 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 cURL初始化和执行方法入门级代码
2015/05/28 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
2015/10/02 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
2015/10/15 Javascript
EasyUi combotree 实现动态加载树节点
2016/04/01 Javascript
Asp.Net之JS生成分页条的方法
2016/11/23 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
Python的加密模块md5、sha、crypt使用实例
2014/09/28 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python获取命令行输入参数列表的实例代码
2018/06/23 Python
python使用PyQt5的简单方法
2019/02/27 Python
python实现简单学生信息管理系统
2020/04/09 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
Python如何使用ElementTree解析xml
2020/10/12 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
保加利亚服装和鞋类购物网站:Bibloo.bg
2020/11/08 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
建筑工程专业学生的自我评价
2013/12/25 职场文书
学校万圣节活动方案
2014/02/13 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
四风查摆剖析材料
2014/10/10 职场文书
优秀党务工作者先进事迹材料
2014/12/25 职场文书
期末个人总结范文
2015/02/13 职场文书
2015年人事科工作总结
2015/04/28 职场文书
通用员工手册范本
2015/05/14 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
导游词之任弼时故居
2020/01/07 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python