1、Bootstrap介绍
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
2、下面对于官网上给出的最简单的一个bootstrap页面进行详细介绍
<!DOCTYPE html>---------html5声明 <html lang="zh-CN">-------------指定了语言 <head> <meta charset="utf-8"> -----------指定编码格式 <meta http-equiv="X-UA-Compatible" content="IE=edge">----bootstrap不支持Ie古老的兼容模式,为了让ie浏览器运行最新的渲染模式,加入了这行 <meta name="viewport" content="width=device-width, initial-scale=1">-----响应式布局:获取当前设备的物理宽度;根据设备宽度来设计网页宽度;缩放比是1:1 <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet">------引入了bootstrap的css样式表 <!-- HTML5 shim and Respond.js for 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="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>---bootstrap不支持ie9以下的浏览器,这一行是为了让浏览器支持html5的标签 <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>---承上,这一行是为了让它支持媒体查询,也就是响应式 <![endif]--> </head> <body> <h1>你好,世界!</h1> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>---引入jquery文件 <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script>-----引入bootstrap文件,bootstrap是依赖于jquery的,所以要先引入jquery </body> </html>
3、应用
在工程中,需要把bootstrap.min.css,bootstrap.min.js, jquery-x.x.x.min.js拷贝到目录中才能使用bootrap提供的样式;或者直接使用CDN加速服务,如下。
<!-- 新 Bootstrap 核心 CSS 文件 -->str <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件(一般不用引入) --> <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>