第二篇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中的getAttribute方法使用示例
Aug 01 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
微信js-sdk上传与下载图片接口用法示例
Oct 12 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
原生js实现日期计算器功能
Feb 17 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
解读ES6中class关键字
Nov 20 Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 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 stristr() 函数(不区分大小写的字符串查找)
2010/06/03 PHP
应用开发中涉及到的css和php笔记分享
2011/08/02 PHP
PHP 第三节 变量介绍
2012/04/28 PHP
destoon官方标签大全
2014/06/20 PHP
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
2010/03/24 Javascript
基于jquery实现的鼠标拖拽元素复制并写入效果
2011/08/23 Javascript
浅析document.ready和window.onload的区别讲解
2013/12/18 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
js密码强度实时检测代码
2016/03/02 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
利用Webpack实现小程序多项目管理的方法
2019/02/25 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
Vue父子传递实例讲解
2020/02/14 Javascript
Vue路由的模块自动化与统一加载实现
2020/06/05 Javascript
详解Vue3 Teleport 的实践及原理
2020/12/02 Vue.js
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
python base64 decode incorrect padding错误解决方法
2015/01/08 Python
Python中实现参数类型检查的简单方法
2015/04/21 Python
python实现微信自动回复功能
2018/04/11 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
Python import与from import使用及区别介绍
2018/09/06 Python
python实现年会抽奖程序
2019/01/22 Python
python制作图片缩略图
2019/04/30 Python
django认证系统 Authentication使用详解
2019/07/22 Python
详谈tensorflow gfile文件的用法
2020/02/05 Python
Python基于百度AI实现OCR文字识别
2020/04/02 Python
英国HYPE双肩包官网:英国本土时尚潮牌
2018/09/26 全球购物
应用电子技术专业个人求职信
2013/09/21 职场文书
2015年毕业生个人自荐书
2015/03/24 职场文书
导游词之海南天涯海角
2019/12/05 职场文书
在Python中如何使用yield
2021/06/07 Python