- 下载：http://v3.bootcss.com/getting-started/
- 下载完成后
拷贝 dist/css 中的 bootstrap.min.css 到项目 css 中
拷贝 dist/js 中的 bootstrap.min.js 到项目的 js 中 - 下载 jquery.js
http://jquery.com/ - 在 html 中模板为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--使用X-UA-Compatible来设置IE浏览器兼容模式 最新的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--
viewport表示用户是否可以缩放页面；
width指定视区的逻辑宽度；
device-width指示视区宽度应为设备的屏幕宽度；
initial-scale指令用于设置Web页面的初始缩放比例
initial-scale=1则将显示未经缩放的Web文档
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap的HTML标准模板</title>
<!-- 载入Bootstrap 的css -->
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1>Hello, world!</h1>
<!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
<script src="js/jquery-3.4.1.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
pc端不需要写这个模板，手机端开发用的多。注意：先要引入jQuery再引入bootstrap.min.js.
2.布局容器
布局容器有两种
- .container 类用于固定宽度并支持响应式布局的容器。两边会有留白
<div class="container">
...
</div>
2…container-fluid类用于100% 宽度，占据全部视口（viewport）的容器。两边没有留白
<div class="container-fluid">
...
</div>
使用：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
</head>
<!-- 固定宽度，两边有留白 -->
<div class="container" style="height: 150px; background-color: #1B6D85;">
、.container 类用于固定宽度并支持响应式布局的容器。
</div>
<!-- 百分百宽度 -->
<div class="container-fluid" style="height: 150px; background-color: #1B6D85;">
、.container 类用于固定宽度并支持响应式布局的容器。
</div>
</body>
</html>
3943
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
