目录:
1.概述
2.bootstrap的优势
3.bootstrap包含的内容
4.b
bootstrap的安装与引入
1.概述
bootstrap是一个由witter开源的基于HTML、CSS、JS的快速开发web网站的前端框架。
2.bootstrap的优势
3.bootstrap包含的内容
4.bootstrap的安装与引入
bootstap的引入方式有4种:
1.直接下载预编译的文件;2.下载带LESS文件的源码自行编译(除非需要自定义,否则没必要); 3.采用CDN引入;
4.通过包管理工具比如NPM Composer Bower等下载Sass、js类型文件
1).直接下载预编译的文件(下载地址:http://getbootstrap.com/getting-started/#download)
ps:还有通过Bower、NPM等包管理工具安装的形式,我就不扩展了。
下载好以后通过下面的代码引入即可:(引入路径即是文件在项目中的路径)
<html lang="en"><head> <meta charset="UTF-8"> <title>Bootstrap引入</title> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="jquery/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="bootstrap/js/bootstrap.min.js"></script> </head>
编译less源码和采用包管理工具下载sass类型文件方式引入我们这里就不进行学习了,不是初识的范畴,我们直接来一个CDN引入的代码:
<!-- 新 Bootstrap 核心 CSS 文件 --><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件(一般不使用) --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"></script> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --><script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
ps:当然还有别的CDN,你可以任意选择。
ps2:
<!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意: 如果通过 file:// 引入 Respond.js 文件,则该文件无法起效果 --> <!--[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]-->
参考总结来自:http://www.runoob.com/bootstrap/bootstrap-intro.html