场景快速搭建
搭建一个这样的结构
- 不想写样式，我引入 bootstrap ,到
title标签下使用 BootCDN 提供的免费 CDN 加速服务。
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>场景搭建</title>
<!-- jQuery.js务必在bootstrap.min.js之前引入-->
<script src="jquery.min.js"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>let`s have fun</h1>
<button id="btn1" class="btn btn-primary">按钮1</button>
<button id="btn2" class="btn btn-success">按钮2</button>
<button id="btn3" class="btn btn-info">按钮3</button>
<button id="btn4" class="btn btn-warning">按钮4</button>
</div>
<div class="row">
<div class="col-xs-3">
<div id="panel1" class="panel panel-primary">
<div class="panel-heading">#panel1</div>
<div class="panel-body">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel2" class="panel panel-success">
<div class="panel-heading">#panel2</div>
<div class="panel-body">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel3" class="panel panel-info">
<div class="panel-heading">#panel3</div>
<div class="panel-body">content</div>
</div>
</div>
<div class="col-xs-3">
<div id="panel4" class="panel panel-warning">
<div class="panel-heading">#panel4</div>
<div class="panel-body">content</div>
</div>
</div>
</div>
</div>
</body>
</html>