第二篇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 相关文章推荐
Extjs中使用extend(js继承) 的代码
Mar 15 Javascript
Extjs4 GridPanel 的几种样式使用介绍
Apr 18 Javascript
jQuery 仿百度输入标签插件附效果图
Jul 04 Javascript
PHP中使用微秒计算脚本执行时间例子
Nov 19 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
动态加载jQuery的方法
Jun 16 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
Dec 23 Javascript
AngularJS遍历获取数组元素的方法示例
Nov 11 Javascript
Angular17之Angular自定义指令详解
Jan 21 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
Jan 23 Javascript
three.js显示中文字体与tween应用详析
Jan 04 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
通过ODBC连接的SQL SERVER实例
2006/10/09 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
PHP代码优化之成员变量获取速度对比
2014/02/28 PHP
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
Javascript实现的类似Google的Div拖动效果代码
2011/08/09 Javascript
完美解决AJAX跨域问题
2013/11/01 Javascript
jquery获取元素值的方法(常见的表单元素)
2013/11/15 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
jQuery正则验证注册页面经典实例
2017/06/10 jQuery
vue与TypeScript集成配置最简教程(推荐)
2017/10/17 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue组件实现进度条效果
2018/06/06 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
Python遍历目录中的所有文件的方法
2016/07/08 Python
基于wxPython的GUI实现输入对话框(1)
2019/02/27 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
python 同时读取多个文件的例子
2019/07/16 Python
python3 tcp的粘包现象和解决办法解析
2019/12/09 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
使用 PyTorch 实现 MLP 并在 MNIST 数据集上验证方式
2020/01/08 Python
python实现音乐播放器 python实现花框音乐盒子
2020/02/25 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
运动会入场词60字
2014/02/15 职场文书
护士实习自荐信
2015/03/06 职场文书
2015个人简历自我评价语
2015/03/11 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
幼师必备:幼儿园期末教师评语50条
2019/11/01 职场文书
关于Nginx中虚拟主机的一些冷门知识小结
2022/03/03 Servers