1.1简介:
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源码进行性能优化而来。
1.2特点:
(1)跨设备、浏览器
甚至兼容IE7、8,一般不考虑IE9以下的浏览器
(2)响应式布局
不仅可以支持PC端的各种分辨率的显示,还可以支持移动端屏幕响应式切换显示。
(3)提供全面的组件
提供大量实用的组件,包括:导航、标签、工具条、按钮等一系列组件
(4)内置jQuery插件
内置很多实用的jQuery插件
(5)支持HTML5 、CSS3
HTML5语义化标签和CSS3属性都得到很好的支持。
(6)支持LESS动态样式
LESS实用变量、嵌套,操作混合编码,编写更快、更灵活的CSS,能和Bootstrap很好的配合开发。
1.3Bootstrap结构:
BootStrap下载地址:http://v3.bootcss.com/ (选择生产环境,最新版) 如下图:
下载完解压后主要有三个文件夹,分别是css(样式) 、fonts(字体)、js(脚本),结构如下:
1.3.1 css目录下有四个css后缀的文件,min是压缩包,一般使用这个;其他属于没有压缩的。map后缀的文件是css源码映射表,在一些特定的浏览器工具中使用。
1.3.2 js目录包含两个文件,分别为压缩和未压缩的js文件。
1.3.3 fonts目录下包含不同后缀的字体文件。
1.4创建第一个页面
我使用的编辑器是sublime text。大家也可以网上搜索这个编辑器,感觉还是很强大的,当然你也可以使用其他的编辑器。好的,不废话进入主题。
1.首先新建一个文件夹,然后把刚刚下载解压得到额三个文件夹放进文件夹内,利用编辑器新建一个index.html文件。
2.引入样式
在head里引入
<link rel="stylesheet" href="css/bootstrap.min.css">
3.下载jQuery脚本库
浏览器打开http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js
右键另存为jquery.min.js保存到js文件夹下
4.引入脚本库
在body底部引入,这样网页打开时先不加载js库,能提高页面加载速度。
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
第一个页面代码:页面显示一个按钮
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>第一个Bootstrap页面</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<button class="btn btn-info">按钮</button>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
效果图如下: