第二篇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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
jquery的ajax()函数传值中文乱码解决方法介绍
Nov 08 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
javascript代码运行不出来执行错误的可能情况整理
Oct 18 Javascript
js封装可使用的构造函数继承用法分析
Jan 28 Javascript
JQuery zClip插件实现复制页面内容到剪贴板
Nov 02 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
vue.js与后台数据交互的实例讲解
Aug 08 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
Aug 10 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 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 $_SERVER[&quot;REQUEST_URI&quot;]获取值的通用解决方法
2010/06/21 PHP
php操作xml入门之xml基本介绍及xml标签元素
2015/01/23 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
删除PHP数组中头部、尾部、任意元素的实现代码
2017/04/10 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
php+js实现的拖动滑块验证码验证表单操作示例【附源码下载】
2020/05/27 PHP
来自qq的javascript面试题
2010/07/24 Javascript
潜说js对象和数组
2011/05/25 Javascript
基于jQuery的投票系统显示结果插件
2011/08/12 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
B/S模式项目中常用的javascript汇总
2013/12/17 Javascript
jQuery控制TR显示隐藏的三种常用方法
2014/08/21 Javascript
jQuery学习笔记之2个小技巧
2015/01/19 Javascript
浅谈Sublime Text 3运行JavaScript控制台
2016/06/06 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
2016/08/16 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
jQuery层级选择器实例代码
2017/02/06 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
微信小程序实现弹框效果
2020/05/26 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
使用python分析git log日志示例
2014/02/27 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
整理Python中的赋值运算符
2015/05/13 Python
Python中字符串的常见操作技巧总结
2016/07/28 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
定义一结构体变量,用其表示点坐标,并输入两点坐标,求两点之间的距离
2015/08/17 面试题
金融专业个人求职信范文
2013/11/28 职场文书
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
班级聚会策划书
2014/01/16 职场文书
校园绿化美化方案
2014/06/08 职场文书
慰问信(范文3篇)
2019/10/23 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis
Vue router配置与使用分析讲解
2022/12/24 Vue.js