一、Bootstrap要点
1、bootstrap全局CSS样式
2、bootstrap CSS组件
3、bootstrap javascript插件
其实就是官网上的这三个。
二、项目引入Bootstrap
1、css目录
bootstrap.css：是供我们学的没有压缩版
bootstrap.min.css：是去除空格和回车，压缩版
2、js目录
bootstrap.js：非压缩的学习版本
bootstrap.min.js：压缩版本
3、引入的配置
<link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"><script src="bs/js/jquery-3.6.1.js"></script><script src="bs/js/bootstrap.js"></script>
js先引入jquery。
三、支持手机等移动设备
1、在<head>中添加
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
作用是让代码可以检测到手机屏幕的宽度。
四、布局容器
1、相当于一个div作为main框架居中。左边和右边间距相等。
2、container
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"><script src="bs/js/jquery-3.6.1.js"></script><script src="bs/js/bootstrap.js"></script><title>bootstrap</title><style>.container {background-color: #ccc;height: 300px;}</style></head><body><div class="container"><h1>aaaaaaaaaaaaaaaaaaaaaaaaaaaa</h1></div></body><script></script></html>
container的宽会自动进行计算。
五、栅格系统
1、bootstrap把屏幕有效的宽度，平均分成12个小格。
.row：一行12列。
2、官方提供了多种列宽的形式
最常用的是col-md-xxx。xxx表示占几列，最大12。
.col-md-3：占3列的宽。
col-xs-xxx不会堆叠，图片和字会越缩越小，不建议使用。
3、例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="bs/css/bootstrap.css"><script src="bs/js/jquery-3.6.1.js"></script><script src="bs/js/bootstrap.js"></script><title>bootstrap</title><style>.container {background-color: #ccc;/*height: 300px;*/}.row {margin-bottom: 15px;}</style></head><body><div class="container"><h1>bootstrap前端框架</h1><div class="row"><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div></div><div class="row"><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div></div><div class="row"><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div></div></div></body><script></script></html>
效果：
4、col-md-offset-3
左边空出三个格子出来。
<body><div class="container"><h1>bootstrap前端框架</h1><div class="row"><div class="col-md-3 col-md-offset-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div><div class="col-md-3"><img src="bs/image/222.jpg" /></div></div></div></body>
效果：
