第二篇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 相关文章推荐
JS 动态加载脚本的4种方法
May 05 Javascript
input+select(multiple) 实现下拉框输入值
May 21 Javascript
javascript 动态加载 css 方法总结
Jul 11 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
Mar 30 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
AngularJS动态绑定HTML的方法分析
Nov 07 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
Vue.js实现的购物车功能详解
Jan 27 Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 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 Google的translate API代码
2008/12/10 PHP
PHP中防止SQL注入攻击和XSS攻击的两个简单方法
2010/04/15 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP Switch 语句之学习笔记
2013/09/21 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
php利用curl抓取新浪微博内容示例
2014/04/27 PHP
php 生成加密公钥加密私钥实例详解
2017/06/16 PHP
实现php删除链表中重复的结点
2018/09/27 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
JS通过相同的name进行表格求和代码
2013/08/18 Javascript
js调用css属性写法
2013/09/21 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
jq.ajax+php+mysql实现关键字模糊查询(示例讲解)
2018/01/02 Javascript
js数组方法reduce经典用法代码分享
2018/01/07 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
详解webpack运行Babel教程
2018/06/13 Javascript
基于Vue2-Calendar改进的日历组件(含中文使用说明)
2019/04/14 Javascript
Openlayers绘制地图标注
2020/09/28 Javascript
Python打印“菱形”星号代码方法
2018/02/05 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
简单了解django索引的相关知识
2019/07/17 Python
Python使用Beautiful Soup爬取豆瓣音乐排行榜过程解析
2019/08/15 Python
python实现ip地址查询经纬度定位详解
2019/08/30 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
navabi英国:设计师大码女装
2019/06/25 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
几个常见的软件测试问题
2016/09/07 面试题
工作态度检讨书
2014/02/11 职场文书
初中升旗仪式演讲稿
2014/05/08 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL
element tree树形组件回显数据问题解决
2022/08/14 Javascript