#Bootsrtap学习之一:如何使用Bootstrap @(Bootstrap)[网页] ##导言 笔者自学了html和css,正在学习javascript中,一直想要开发一个个人网站,了解到前端有很多框架可以帮助快速开发网页,从网上各种前端框架中选择了Bootstrap,目前将一步步学习此框架,并编写Bootstrap教程,帮助更多的人学习bootstrap.
Bootstrap,来自 Twitter,是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。 它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范,它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎,一直是GitHub上的热门开源项目,包括NASA的MSNBC(微软全国广播公司)的Breaking News都使用了该项目。 国内一些移动开发者较为熟悉的框架,如WeX5前端开源框架等,也是基于Bootstrap源码进行性能优化而来。 --摘自百度百科
[TOC]
##1.Bootstrap框架的下载 只涉及Windows平台的安装使用 网页打开bootstrap中文网,选择用于生产环境的Bootstrap,下载bootstrap框架。 注意:在解压得到文件夹中写html文件,与css,font,js,位于同一目录下
2.框架的使用
然后开始编写html文件,这里给出整个测试源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>text</title>
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
</head>
<body>
<h1>Hello,World!</h1>
</body>
<script src="js/jquery.js"></script>
<script stc="js/bootstrap.min.js"></script>
</html>
1.我们将bootstrap的样式文件引入网页
<link rel="stylesheet" href="css/bootstrap.min.css" media="screen">
2.将js文件引入网页,由于js一般依赖于JQuery库,所以我们要引入JQuery库
<script src="js/jquery.js"></script>
<script stc="js/bootstrap.min.js"></script>
3.viewport的标签可以修改大部分移动设备上面的显示,为确保适当绘制和触屏缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0">
4.使用html5新的标签,在IE9以下浏览器并不支持这些标签,修复这个问题引用如下
<!--[if lt IE 9]>
<script src="http://labfile.oss.aliyuncs.com/html5shiv/3.7.0/html5shiv.js"></script>
<script src="http://labfile.oss.aliyuncs.com/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
意思就是说如果用户 IE 浏览器的版本小于 IE9,那么就会加载这两个 js 文件库,现在就可以使用这些新的标签,并且可以在这些标签上添加样式了。
参考实验楼Bootstrap3.0入门学习