引入bootstrap(v3)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- 引用bootstrap必须设置可视窗 -->
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<!-- 引入css样式 -->
</head>
<body>
<button type="button" class="btn btn-default" aria-label="Left Align">
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
</button>
<button type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> Star
</button>
<!-- 可以用上面这部分代码测试bootstrap是否引入成功(引入成功浏览器页面会显示两个图标) -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- 引入js'文件 注意必须先引用jquer.min.js然后在引用bootstrap.min.js(因为bootstrap依赖于jquery) -->
</body>
</html>
引入bootstrap(v4)
v4版本的bootstrap 相比v3版本 需要多引入一个popper.min.js 且需要的jQuery版本为3.5.1
<script src="js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<!-- 没找到Popper包资源,引用了官方提供的CDN -->
<script src="js/bootstrap.min.js"></script>
可视窗设置语句:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
相关网站:
bootstrap v3css全局样式
bootstrap中文网
bootstrap v3版本下载和入门参考
jQuery下载
布局容器
.container 类用于固定宽度并支持响应式布局的容器。(宽度大于等于768时两侧会有空余,不能占据宽度的百分之百)
<div class="container" style="background-color: #002752;color: white;">
123
</div>
.container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
<div class="container-fluid" style="background-color: red;color: white;">
456
</div>
效果图: