Bootstrap每天必学之简单入门


Posted in Javascript onNovember 19, 2015

在上一篇文章中主要是简单的介绍了一下Bootstrap,这篇文章进一步了解相关内容,为之后的学习打下基础。

Bootstrap每天必学之简单入门

从Visual Studio 2013前不久的更新中看,微软是将Bootstrap3的新版本加入到了VS当中,所以学习Bootstrap3也没什么顾虑了。
一、下载BootStrap
官网的文件很详细简单,对于下载来说也有多种方式。对于我们开发者来说,估计最简单的方式就是直接下载编译和压缩后的CSS、JavaScript文件,另外还包含字体文件,但是不包含文档和源码文件。打开解压包之后可以发现包含三个文件夹 css、fonts、js。
可以来查看三个文件夹中的文件

Bootstrap每天必学之简单入门

这是最基本的Bootstrap组织形式:未压缩版的文件可以在任意web项目中直接使用。我们提供了压缩(bootstrap.min.*)与未压缩 (bootstrap.*)的CSS和JS文件。字体图标文件来自于Glyphicons。
 bower.json中列出了Bootstrap所支持的jQuery版本。

 Bootstrap每天必学之简单入门

可以看到依赖的jQuery库的版本>=1.9.0即可。
下面通过访问http://jquery.com/

Bootstrap每天必学之简单入门

我来下载最新的版本2.03
可以通过IE直接访问http://code.jquery.com/jquery-2.0.3.min.js

Bootstrap每天必学之简单入门

另存到与Bootstrap文件夹下的js文件夹里面。
注意:所有Bootstrap插件都依赖jQuery。而且在正式的项目当中我们推荐使用压缩之后的版本,因为它的体积很小(里面取出了注释的文字和空白)。
二、在网页中使用Bootstrap
 我们创建了一个最简单的基本模版

<!DOCTYPE html> 

<html> 

<head> 

<title>Bootstrap</title>

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery-2.0.3.min.js"></script> 

<script src="js/bootstrap.min.js">

</script>

 </body> 

</html>

1.首先我们可以将Bootstrap的样式文件引用当网页中

<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

2.如果你需要使用Bootstrap架构提供JavaScript插件的话,那么需要将架构的js文件链接引用到网页中,上面也有提到过JavaScript插件都是依赖与jQuery库的,所以我们当然也需要链接引用jquery的库文件
<script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js"></script>

3.viewport的<meta>标签,这个标签可以修改在大部分的移动设备上面的显示,为了确保适当的绘制和触屏缩放。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
4.我们使用的html5的一些新的标签,那么在IE9以下的浏览器并不支持这些标签,也不能为这些标签进行添加样式。那么修复这个问题我们需要链接引用的文件如下
<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
 <![endif]-->

意思就是说如果用户IE浏览器的版本小于IE9,那么就会加载这两个js文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。
就这样我们最简单的Hello World!页面呈现在了大家面前。

Bootstrap每天必学之简单入门

三、总结
 在上面我们也启用了响应式的布局。当然有些网站可能并不需要进行响应式的布局,我们就需要进行手动的禁用这个布局,这个文档当中也有详细的说明。

Bootstrap每天必学之简单入门

是不是感觉有点枯燥乏味,但是千万不要放弃对Bootstrap的喜爱,因为当下最流行的前端开发框架就是Bootstrap,精彩的内容还在后面呐,大家一定不要错过。

如果大家还想深入学习,可以点击这里进行学习,再为大家附两个精彩的专题:Bootstrap学习教程 Bootstrap实战教程

Javascript 相关文章推荐
jQuery页面图片伴随滚动条逐渐显示的小例子
Mar 21 Javascript
JavaScript中的style.display属性操作
Mar 27 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
JS实现OCX控件的事件响应示例
Sep 17 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
JS轮播图中缓动函数的封装
Nov 25 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
原生JS实现前端本地文件上传
Sep 08 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
vue keep-alive 动态删除组件缓存的例子
Nov 04 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
Sep 18 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 #Javascript
Jquery 全选反选实例代码
Nov 19 #Javascript
Bootstrap每天必学之前端开发框架
Nov 19 #Javascript
Node.js中使用socket创建私聊和公聊聊天室
Nov 19 #Javascript
Jquery实现仿京东商城省市联动菜单
Nov 19 #Javascript
javascript实现二级级联菜单的简单制作
Nov 19 #Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
Nov 19 #Javascript
You might like
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
Yii实现自动加载类地图的方法
2015/04/01 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
phpmyadmin下载、安装、配置教程
2017/05/16 PHP
你需要知道的JavsScript可以做什么?
2007/06/29 Javascript
javascript oop开发滑动(slide)菜单控件
2010/08/25 Javascript
5分钟理解JavaScript中this用法分享
2013/11/09 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
jquery 表单验证之通过 class验证表单不为空
2015/11/02 Javascript
JQuery异步提交表单与文件上传功能示例
2017/01/12 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
webstorm中配置Eslint的两种方式及差异比较详解
2018/10/19 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
express启用https使用小记
2019/05/21 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
Python 迭代器工具包【推荐】
2016/05/06 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
Python实现爬取马云的微博功能示例
2019/02/16 Python
解决python3 安装不了PIL的问题
2019/08/16 Python
python GUI库图形界面开发之PyQt5访问系统剪切板QClipboard类详细使用方法与实例
2020/02/27 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
英国名牌男装店:Standout
2021/02/17 全球购物
财务主管自我鉴定
2014/01/17 职场文书
《童趣》教学反思
2014/02/19 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
企业党员一句话承诺
2014/05/30 职场文书
语文教研活动总结
2014/07/02 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
失恋33天观后感
2015/06/11 职场文书
教师师德工作总结2015
2015/07/22 职场文书
商务信函英语问候语
2015/11/10 职场文书
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技