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 相关文章推荐
从面试题学习Javascript 面向对象(创建对象)
Mar 30 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
js获取html的span标签的值方法(超简单)
Jul 26 Javascript
js中遍历Map对象的简单实例
Aug 08 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
Jun 15 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
用PHP编写PDF文档生成器
2006/10/09 PHP
PHP+MYSQL的文章管理系统(二)
2006/10/09 PHP
PHP 抽象方法与抽象类abstract关键字介绍及应用
2014/10/16 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
php导出中文内容excel文件类实例
2015/07/06 PHP
PHP 读取大文件并显示的简单实例(推荐)
2016/08/12 PHP
setinterval()与clearInterval()JS函数的调用方法
2015/01/21 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
微信小程序用户信息encryptedData详解
2018/08/24 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
JavaScript数据结构与算法之基本排序算法定义与效率比较【冒泡、选择、插入排序】
2019/02/21 Javascript
解决Vue动态加载本地图片问题
2019/10/09 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
OpenLayers3实现对地图的基本操作
2020/09/28 Javascript
python 实现红包随机生成算法的简单实例
2017/01/04 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python如何将函数值赋给变量
2020/04/28 Python
pytorch快速搭建神经网络_Sequential操作
2020/06/17 Python
Python代码需要缩进吗
2020/07/01 Python
python中time、datetime模块的使用
2020/12/14 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
《可爱的动物》教学反思
2014/02/22 职场文书
《奇妙的国际互联网》 教学反思
2014/02/25 职场文书
成绩单公证书
2014/04/10 职场文书
药剂专业自荐信范文
2014/04/16 职场文书
活动总结报告格式
2014/05/09 职场文书
中国梦读书活动总结
2014/07/10 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
升职自荐信范文
2015/03/27 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
「魔导具师妲莉亚永不妥协~从今天开始的自由职人生活~」1、2卷发售宣传CM公开
2022/03/21 日漫