Bootstrap可以说是CSS框架,后来加入了js插件。
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架,用于开发响应式布局、移动设备优先的 WEB 项目。
网址:Bootstrap中文网
bootstrap安装
<link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
<script src="../../JQuery/jquery-1.12.4.js"></script>
<script src="../../bootstrap3/js/bootstrap.js"></script>
bootstrap全局CSS样式
(1) HTML5文档类型
<!DOCTYPE html>
<html lang="zh-CN">
...
</html>
(2) 移动设备优先
<meta name="viewport" content="width=device-width, initial-scale=1">
备注:vscode中自动生成代码时有这一行
(3) 布局容器
以下两种容器类不能互相嵌套
.container 类用于固定宽度并支持响应式布局的容器
<div class="container">
...
</div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器
<div class="container-fluid">
...
</div>
(4) 栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。
栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../../bootstrap3/css/bootstrap.css">
<script src="../../JQuery/jquery-1.12.4.js"></script>
<script src="../../bootstrap3/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="col-md-3">
<img src="../../Images/1.jpg" width="100%" alt="">
</div>
<div class="col-md-3">
<img src="../../Images/1.jpg" width="100%" alt="">
</div>
<div class="col-md-3">
<img src="../../Images/1.jpg" width="100%" alt="">
</div>
<div class="col-md-3">
<img src="../../Images/1.jpg" width="100%" alt="">
</div>
</div>
</body>
</html>