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>