1.什么是Bootstrap?
Bootstrap 是twitter公司推出的，专门用于开发响应式布局、移动设备优先的 WEB 框架。
Bootstrap当前最新的版本的Bootstrap4, 但当下企业使用最多的是Bootstrap3
2.Bootstrap3和4的区别
2.1CSS预处理器不同, Bootstrap3采用Less, Bootstrap4采用SASS
2.2格栅种类不同, Bootstrap3提供4种格栅, Bootstrap4提供5种格栅
2.3使用单位不同, Bootstrap3使用px作为单位, Bootstrap4使用rem作为单位
2.4内部布局方式不同, Bootstrap3使用float布局, Bootstrap4使用flexbox布局
2.5 ... ...
3.Bootstrap兼容性
Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
IE8以上都能完美使用, IE8以下需要通过一些额外的配置来保证其完整性
1.Bootstrap容器
1.1在Bootstrap中容器是响应式布局的基础, Bootstrap推荐将所有内容都定义在容器之中
1.2并且容器是启用Bootstrap栅格系统必不可少的前置条件
2. Bootstrap中提供了两个容器: container/container-fluid
2.1container容器(固定容器):
只要给标签添加了container类名, 这个标签就变成了Bootstrap的container容器
只要这个标签变成了Bootstrap的container容器, 在不同视口大小下就会有不同的固定宽度
2.2container-fluid(自适应宽度容器)
只要给标签添加了container-fluid类名, 这个标签就变成了Bootstrap的container-fluid容器
只要这个标签变成了Bootstrap的container-fluid容器, 那么容器的宽度永远都是100%自适应
3.Bootstrap对视口划分
Bootstrap4将视口划分为了5钟
超小屏幕(xs): <576px
小屏幕(sm): >=576px
中等屏幕(md):>=768
大屏幕(lg): >=992px
超大屏幕(xl): >= 1200px
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>05-Bootstrap容器实现</title>
<style>
*{
margin: 0;
padding: 0;
}
.container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
div{
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>06-Bootstrap栅格系统</title>
<style>
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}
</style>
</head>
<body>
<div class="container">
<span class="row">
<div class="col-6">我是第1列</div>
<div class="col-4">我是第2列</div>
<div class="col-6">我是第3列</div>
</span>
</div>
<!--
1.Bootstrap栅格系统
Bootstrap的栅格系统使用一系列的"行"和"列"来实现复杂的响应式布局
默认情况下栅格系统会将一行的内容等分为12份,
然后我们可以通过绑定类名的方式指定这一行中的每一列占用多少分
2.Bootstrap栅格系统格式
<容器>
<行>
<列>我们的内容</列>
<列>我们的内容</列>
... ...
</行>
</容器>
3.Bootstrap栅格系统特点
3.1默认情况下行的宽度和所在容器一样
3.2默认情况下所有列的宽度是等分所在行的宽度
3.3可以通过col-num方式指定当前列占用12分之几
3.4如果一行中内容的宽度超过了12分, 那么将自动换行
-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>08-Bootstrap栅格系统</title>
<style>
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}
</style>
</head>
<body>
<div class="container">
<span class="row">
<!--<div class="col-6">我是第1列</div>
<div class="col-4">我是第2列</div>
<div class="col-2">我是第3列</div>-->
<!--<div class="col-xl-6">我是第1列</div>
<div class="col-xl-4">我是第2列</div>
<div class="col-xl-2">我是第3列</div>-->
<div class="col-lg-2 col-xl-6">我是第1列</div>
<div class="col-lg-4 col-xl-4">我是第2列</div>
<div class="col-lg-6 col-xl-2">我是第3列</div>
</span>
</div>
<!--
1.栅格系统列的尺寸设置
1.1Bootstrap的固定宽度容器提供了5种响应的尺寸,
同样Bootstrap也给列提供了5种响应的尺寸
col-*: 设置超小屏幕
col-sm-*:设置小屏幕
col-md-*:设置中等屏幕
col-lg-*:设置大屏幕
col-xl-*:设置超大屏幕
2.栅格系统列的尺寸特点
1.如果只设置了小屏幕的大小, 那么大屏幕也会采用小屏幕设置的大小
2.如果值设置了大屏幕的大小, 那么小屏幕默认100%
3.如果大小屏幕都设置了大小, 那么在什么屏幕就显示什么尺寸
-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-3.1.1.js"></script>
<!--在Bootstrap4中很多的提示/弹窗都是通过popper.min.js实现的, 所以需要导入-->
<script src="js/popper.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.js"></script>
</body>
</html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!--为了保证在移动端能够正常的显示-->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- 导入Bootstrap的CSS文件 -->
<link rel="stylesheet" href="css/bootstrap.css">
<title>08-Bootstrap栅格系统</title>
<style>
*{
margin: 0;
padding: 0;
}
body>div{
height: 100px;
background: red;
}
.container>.row{
height: 100%;
background: blue;
}
.row>div{
background: skyblue;
}
.row>div:nth-child(2){
background: deeppink;
}
.row>div:nth-child(3){
background: orangered;
}
</style>
</head>
<body>
<div class="container">
<span class="row">
<!--<div class="col-6">我是第1列</div>
<div class="col-4">我是第2列</div>
<div class="col-2">我是第3列</div>-->
<!--<div class="col-xl-6">我是第1列</div>
<div class="col-xl-4">我是第2列</div>
<div
本文是跟随李南江学习编程的系列教程之一，主要聚焦于Bootstrap前端框架的使用。通过学习，您可以掌握如何构建响应式网页和应用Bootstrap组件。
最低0.47元/天 解锁文章
178
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
