Bootstrap01----容器,网格系统,文字排版,颜色
首先给出bootstrap的模板,里面导入了项目所需要的最大引入资源,包含一个CSS文件,一个bootstrap包,和一个弹窗相关的js文件.其他的内容都填入root容器当中即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是Bootstrap模板</title><script src=""></script><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script></head>
<body><div id="root">这是Bootstrap默认界面</div>
</body>
</html>一.容器
容器主要分为两种:普通容器和全屏容器
普通容器:根据媒体查询写入死值宽度
全屏容器:设置宽度为100%
详情媒体查询参数,参考:Bootstrap5 容器 | 菜鸟教程
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是Bootstrap模板</title><script src=""></script><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script></head><body><div id="root"><div class="container">这是Bootstrap默认界面</div><div class="container-fluid">这是Bootstrap全屏界面</div></div>
</body></html>二.网格系统
网格系统主要用来实现grid布局,使用row + col的格式进行样式编排
其中一行的宽度数量总和必须为12,如果没有明确指明的列,将会均分剩余的宽度
类型包含平板,大屏幕等,详情参考:Bootstrap5 网格系统 | 菜鸟教程
可以根据不同的设备设置不同的规则,而且可以设置偏移!!!
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是Bootstrap模板</title><script src=""></script><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script></head><body><div id="root">网格系统支持嵌套<div class="row border"><div class="col">你好1</div><div class="col">你好2</div><div class="col">你好3</div><div class="col">你好4</div><div class="col">你好5</div><div class="col">你好6</div></div><div class="row border"><div class="col-sm-12">整个就是12</div></div><div class="row border"><div class="col-sm-1">分得1份</div><div class="col-sm-2">分得2份</div><div class="col-sm-3">分得3份</div><div class="col-sm-6">分得6份</div></div><!-- 不要忘记同类向加为12 --><div class="row border"><div class="col-sm-3 col-md-6"><p>这是内容1</p></div><div class="col-sm-9 col-md-6"><p>这是内容2</p></div><div class="aaaa"></div></div><!-- --><div class="row"><div class="col-md-4 p-3 bg-primary text-white">.col-md-4</div><div class="col-md-4 offset-md-4 bg-dark text-white">.col-md-4 .offset-md-4</div></div><div class="row"><div class="col-md-3 offset-md-3 bg-primary text-white">.col-md-3 .offset-md-3</div><div class="col-md-3 offset-md-3 bg-dark text-white">.col-md-3 .offset-md-3</div></div><div class="row"><div class="col-md-6 offset-md-3 bg-primary text-white">.col-md-6 .offset-md-3</div></div></div>
</body></html>三.文字排版
主要有h系列的标签表示的等级,也可以使用h1-h6属性来对p标签设置大小,再通过display-num进行进一步放大
还有 small mark abbr blockquotes dl code kbd pre等语义化标签
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是Bootstrap模板</title><script src=""></script><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script></head><body><div id="root">这是Bootstrap默认界面<div class="container"><!-- h* h1-h6 --><h1>这是h1</h1></div><div class="container"><!-- h* h1-h6 --><p class="h1 display-1">这是h1</p></div><div class="container"><h1 class="display-1">Display 1</h1><h1 class="display-2">Display 2</h1><h1 class="display-3">Display 3</h1><h1 class="display-4">Display 4</h1><h1 class="display-5">Display 5</h1><h1 class="display-6">Display 6</h1></div><!-- small 让文本小一级 --><!-- mark 让文本高亮为黄色背景 --><!-- abbr 底部虚线 --><!-- blockquotes + footer 引用声明 包含一个角注 --><!-- dl + dt dd 貌似是标题容器 包含一个标题 和 标题解释 --><!-- code 将代码高亮出来 --><!-- kbd 显示出终端的样式 --><!-- pre 多行文本 --></div>
</body></html>
四.颜色
可以设置字体颜色和背景颜色与透明度
字体颜色:下面的11个属性
背景颜色:使用bg-xxx 下面的10个属性
透明度:我们在字体后面跟一个数字即可,最大100,例如text-muted-50
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>这是Bootstrap模板</title><script src=""></script><!-- 新 Bootstrap5 核心 CSS 文件 --><link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css"><!-- popper.min.js 用于弹窗、提示、下拉菜单 --><script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script><!-- 最新的 Bootstrap5 核心 JavaScript 文件 --><script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script></head><body><div id="root"><div class="container"><!-- 下面是一些type ,用来设置字体颜色mutedprimary secondaryinfo warnning danger successdark body light white--><p class="text-muted"></p><!-- 可以使用 text-type-number 设置透明度--><p clsss="text-muted-50"></p><!-- 使用a标签 + herf属性指向一个链接 --><!-- 下面是一些bg-type ,用来设置一些背景 primary secondaryinfo warnning danger successdark light --><p class="bg-primary text-white">重要的背景颜色。</p></div></div>
</body></html>