Bootstrap3.0学习培训笔记之新手入门篇

日期:2021-03-20 类型:科技新闻 

关键词:小程序和公众号区别,小程序生成二维码,小程序前端框架,小程序开发商排名,小程序码

做为本学习培训笔记的第1篇,开篇之作,大家還是跟别的系列的文章内容1样,先来点Bootstrap的详细介绍,再由浅入深吧。

序言

在上1节中https://www.jb51.net/web/248352.html关键是简易的详细介绍了1下Bootstrap。从http://www.bootcss.com/汉语网不难发现如今是对于两个版本号开展文本文档表明,来看两个版本号的区别還是蛮大的。

但是从Visual Studio 2013的升级中看,微软是将Bootstrap3的新版本号添加到了VS之中,因此也没甚么好说的了,学习培训Bootstrap3也没甚么顾忌了。

免费下载BootStrap

官方网站的文档很详尽简易,针对免费下载来讲也是有多种多样方法。针对大家开发设计者来讲,估算最简易的方法便是立即免费下载编译程序和缩小后的CSS、JavaScript文档,此外还包括字体样式文档,可是不包括文本文档和源代码文档。开启解压包以后能够发现包括3个文档夹 css、fonts、js。

能够来查询3个文档夹中的文档

这是最基础的Bootstrap机构方式:未缩小版的文档能够在随意web新项目中立即应用。大家出示了缩小(bootstrap.min.*)与未缩小 (bootstrap.*)的CSS和JS文档。字体样式标志文档来自于Glyphicons。

bower.json中列出了Bootstrap所适用的jQuery版本号。

能够看到依靠的jQuery库的版本号>=1.9.0便可。

下面根据浏览http://jquery.com/

我来免费下载全新的版本号2.03

能够根据IE立即浏览http://code.jquery.com/jquery⑵.0.3.min.js

另存到与Bootstrap文档夹下的js文档夹里边。

留意:全部Bootstrap软件都依靠jQuery。并且在宣布的新项目之中大家强烈推荐应用缩小以后的版本号,由于它的体积很小(里边取下了注解的文本和空白)。

在网页页面中应用Bootstrap

大家建立了1个最简易的基础模板


拷贝编码
编码以下:

<!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="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]--> </head> <body> <h1>Hello, world!</h1> <script src="js/jquery⑵.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⑵.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的1些新的标识,那末在IE9下列的访问器其实不适用这些标识,也不可以为这些标识开展加上款式。那末修补这个难题大家必须连接引入的文档以下


拷贝编码
编码以下:

<!--[if lt IE 9]>
<script src="<a href="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script">https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script</a>>
<script src="<a href="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script">https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script</a>>
<![endif]-->

意思便是说假如客户IE访问器的版本号小于IE9,那末就会载入这两个js文档库,如今便可以应用这些新的标识,而且能够在这些标识上加上款式了。

就这样大家最简易的Hello World!网页页面展现在了大伙儿眼前。

总结

在上面大家也开启了回应式的合理布局。自然一些网站将会其实不必须开展回应式的合理布局,大家就必须开展手动式的禁用这个合理布局,这个文本文档之中也是有详尽的表明。

在下1节中准备,关键来学习培训1下Bootstrap的合理布局。

上一篇:有关HTML招聘面试题所有汇总 返回下一篇:没有了