day13
目录
前言
day13学习开始，进入bootstrap的学习
一、 响应式
1.响应式的概念
- 随着多种移动端的兴起，再加上多种设备的大量需求，出现了多种终端
我们需要在不同的设备上通过”媒体查询”改变不同的布局 文本 图片 达到合适的效果
2.设备的宽度
- 需要使用到meta标签
<!-- 1.添加meta标签 meta:vp补全代码即可--> <!-- 2.vscode会自动生成 --> <meta name="viewport" content="width=device-width, initial-scale=1.0">
- width=device-width 视口宽度=设备宽度
initial-scale=1.0 初始化视口不缩放
3.媒体查询的规则
@media (min-width:992px){
.box {width: 250px;height: 250px;}
body {background-color: lightyellow;}
}
@media (min-width:1200px){
.box {width: 300px;height: 300px;}
body {background-color: plum;}
}4.响应式断点
- 我们需要考虑多种设备具有多种尺寸，我们需要确定在什么尺寸下匹配怎样的样式
- 手机：小于等于480px
- 手机和平板：小于等于768px
- 低端显示器: 大于等于980px
- 普通显示器：大于等于1200px
- 高清显示器: 大于等于1400px
5.相对于视口的尺寸
- vw（viewport width）视口宽度
- vh (viewport height) 视口高度
- 1vw=视口(浏览器可视区域)宽度的1%
- 1vh=视口(浏览器可视区域)高度的1%
- 100vw就相当于浏览器可视区域的宽度
- 100vh就相当于浏览器可视区域的高度
二、 Bootstrap
1.Bootstrap概述
- 是由推特公司的两名工程师，基于html css js开发的简洁 开源 强大 优雅的UI框架
- 至今经历了5个大版本，我们现在学习的就是最新的Boot5
- Bootstrap内置了大量的css类供我们使用，直接给我们的元素使用预设好的类或者功能即可
2.学习UI框架的终极意义
- 学习UI框架要学会如何查文档，运用文档
市面上的UI框架很多，企业会用哪一个不一定，但工作中一定会遇到框架
3.Bootstrap5的文档查询
文档地址：https://v5.bootcss.com/docs/5.1/getting-started/introduction/
4.各个版本的区别
- 任何的框架都会升级，框架升级后会有一些改动，可能会对内容进行增删改，所以一个要查对应版本的手册
- 注意：工作中，一定要先看公司的项目中的框架版本，会在公司的开发手册中体现
- 版本5的改动比较大，原来JS依赖JQuery，现在不依赖了，也不再兼容IE
- 对于很多类名也有改动，最大的改动就是左 右，如，以前是float-left 现在是float-start
也就是所有的左变成了start 所有的右变成了end
5.练习时使用的模板代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模板文件</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/bootstrap.css"/>
<!-- 参看文档，生产文件需要单独下载或者直接引用-->
<link rel="stylesheet" href="../css/bootstrap-icons.css"/>
<script src="../js/bootstrap.bundle.js"></script>
</head>
<body>
</body>
</html>三、Bootstrap5的响应式
文档地址：https://v5.bootcss.com/docs/layout/breakpoints/
1.断点breakpoint
- Boot5中，我们设置了5+1个断点，已经写好了媒体查询，使用类中缀可以直接对应某个响应式的范围，用于响应式的快速构建
- TIPS:想在源码中查找内容，可以按Ctrl+F(Find)搜索关键词，推荐使用关键的类名查询，可能会匹配到多个，旁边有上下键，可以查询
- 这个是bootstrap.css中的源码，搜.container可得
- 5+1个断点，所以没有写类中缀的就是小于576px，一般是手机或者更小的设备
@media (min-width: 576px) { 类中缀sm 平板 } @media (min-width: 768px) { 类中缀md 窄屏电脑 } @media (min-width: 992px) { 类中缀lg 普通电脑 } @media (min-width: 1200px) { 类中缀xl 宽屏电脑 } @media (min-width: 1400px) { 类中缀xxl 高清设备或者广告投放设备 }
2.容器container
文档地址：https://getbootstrap.com/docs/5.1/layout/containers/
- sm: 页面宽度在576px~768px之间，版心宽度：540px
- md: 页面宽度在768px~992px之间，版心宽度：720px
- lg: 页面宽度在992px~1200px之间，版心宽度960px
- xl: 页面宽度在1200px~1400px之间，版心宽度：1140px
- xxl: 页面宽度在1400px以上，版心宽度：1320px
- 如果使用的是变宽容器的话，版心宽度永远都是100%
- 在boot中容器有3种写法：
.container 它会自动适配断点，叫做定宽容器，会按照响应式中的最大宽度体现，并且居中，左右有天沟(左右各有12px的内间距)
.container-fluid 全宽适配，变宽容器。会撑满整个视口的全部宽度，左右有天沟(左右各有12px的内间距)
.container-{*} 直接指定断点的类，用的很少
3.天沟gutter
- 天沟这个词是翻译得来的，指的是容器中左右两侧的内间距
- 让容器中的内容不至于紧贴容器两侧。
- 默认左右两侧各0.75rem，共1.5rem(24px)
四、Bootstrap的基础内容
1.颜色color
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试颜色</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> <style> .zdy-h { height: 100px; } </style> </head> <body> <div class="zdy-h bg-primary">蓝色</div> <div class="zdy-h bg-secondary">灰色</div> <div class="zdy-h bg-success">绿色</div> <div class="zdy-h bg-transparent">透明色</div> <div class="zdy-h bg-danger">红色</div> <div class="zdy-h bg-warning">黄色</div> <div class="zdy-h bg-info">蓝绿色</div> <div class="zdy-h bg-light">亮色</div> <div class="zdy-h bg-dark">暗色</div> <a href="#" class="link-danger">链接色</a> <a href="#" class="link-success">链接色</a> </body> </html>
2.标题title
- 文档地址：Typography · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 一般使用.h1~.h6等价于使用标签h1~h6,代表标题
- 如果内容不是标题，不具有标题的含义，但是想变为更大的字体，可以使用.display-{1~6}
1号字体最大，6号字体最小
3.列表
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试标题字</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> </head> <body> <!-- 具有标题语义 --> <div class="h1 text-danger bg-warning">我是标题(红色字text，黄色背景，变成大标题)</div> <!-- 不是标题，但是想有标题格式 --> <div class="display-5">我不是标题，但我想变大</div> <div class="display-1">我不是标题，但我想变的更大</div> <!-- 去掉列表项前标识符 --> <ul class="list-unstyled"> <li>列表项1</li> <li>列表项2</li> </ul> </body> </html>
4.表格table
- 文档地址：Tables · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- .table 基类，必须写，有了基类其他的辅助类才会生效，加给<table>
- .table-striped 条形纹，让表格隔行变色
- .table-hover 鼠标悬停变色效果，悬停到对应的行会变色
- .table-bordered 给表格添加边框
- .border-{primary} 设置边框的颜色
- .table-{dark} 表格的颜色，还可以加在tr td th上面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表格练习table</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> </head> <body> <div class="container"> <table class="table table-striped table-hover table-bordered border-primary"> <thead class="table-dark"> <tr> <th>#</th> <th>品牌</th> <th>商品名</th> <th>价格</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> <tr> <td>1</td> <td>戴尔</td> <td>MS116鼠标有线</td> <td>￥ 19.90</td> <td> <button>编辑</button> <button>删除</button> </td> </tr> </tbody> </table> </div> </body> </html>
5.表单
- 文档地址：Forms · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 文本输入框与关联文字：.form-control 加给input标签的class值
- 下拉菜单：. form-select 下拉菜单必写的类，写给select标签
- 单选复选框：.form-check 单选复选框都用此类，具体是单选还是多选取决于type=”checkbox/radio”
输入组：.inputgroup 里面可以包含多个输入的控件，可以灵活选择
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>表单练习</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> </head> <body> <div class="container"> <form> <div class="mb-3"> <label for="uname" class="form-label">用户名</label> <input class="form-control" id="uname"> </div> <div class="mb-3"> <label for="upwd" class="form-label">密码</label> <input type="password" class="form-control" id="upwd"> </div> <div class="mb-3 form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">请同意此协议</label> </div> <select class="form-select"> <option selected>请选择喜欢的食物</option> <option value="1">火锅</option> <option value="2">大盘鸡</option> <option value="3">羊肉串</option> <option value="4">大闸蟹</option> </select> <p class="h4 my-3">请选择你的爱好</p> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="b1" value="option1"> <label class="form-check-label" for="b1">游泳</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id=b2" value="option2"> <label class="form-check-label" for="b2">蹦迪</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="b3" value="option3" disabled> <label class="form-check-label" for="b3">打游戏(disabled)</label> </div> <div class="my-3"> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="r1" value="1"> <label class="form-check-label" for="r1">男</label> </div> <div class="form-check form-check-inline"> <input class="form-check-input" type="radio" name="gender" id="r2" value="0"> <label class="form-check-label" for="r2">女</label> </div> </div> <div class="w-50"> <div class="input-group mb-3"> <input type="text" class="form-control"> <span class="input-group-text bg-primary text-white">刘冉北京</span> </div> </div> <button type="submit" class="btn btn-primary">登录</button> </form> </div> </body> </html>
五、工具类
1.尺寸Sizing
- 文档地址：尺寸（Sizing） · Bootstrap v5 中文文档 v5.1 | Bootstrap 中文网
- 宽度和高度
- 在boot中提供的宽度和高度的类是百分比形式存在的
宽度 .w-{number} 支持25 50 75 100 auto
高度 .h-{number} 支持25 50 75 100 auto
注意：高度是父级元素的百分比，所以父级要有高度才能参照，否则设置无效
- 相对于视口的尺寸
vw-100 相对于视口的宽度，表示全屏宽度
vh-100 相对于视口的高度，表示全屏高度
注意:没有25 50 75这些值，源码中未定义！
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>尺寸练习</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> <style> .zdy-h { height: 100px; } </style> </head> <body> <div class="container"><!-- 定宽容器 --> <div class="bg-warning"><!-- 宽度随着版心的变化而变化，颜色为黄色 --> <div class="w-25 zdy-h bg-danger">占父级宽度的25%，高度是自定义高度100px,颜色为红色</div> <div class="w-50 zdy-h bg-danger">占父级宽度的50%，高度是自定义高度100px,颜色为红色</div> <div class="w-75 zdy-h bg-danger">占父级宽度的75%，高度是自定义高度100px,颜色为红色</div> <div class="w-100 zdy-h bg-danger">占父级宽度的100%，高度是自定义高度100px,颜色为红色</div> </div> <div class="zdy-h bg-primary"> <div class="h-50 bg-success">高度为父级高度的50% 绿色</div> </div> <div> <div class="h-50 bg-info">思考：父级没高度，这里的高度是什么？</div> </div> </div> <!-- 需求:写一个撑满全屏宽度 高度的div 颜色为灰色 --> <div class="container-fluid"> <div class="bg-secondary vw-100 vh-100"></div> </div> </body> </html>
2.间距
- 间距包括内间距和外间距,内间距使用p-* 外间距使用m-*
- 间距的宽度(距离)
- m-{number} 0~5 外间距,1是0.25rem,四个方向共同使用一个距离的外间距
p-{number} 0~5 内间距,1是0.25rem,四个方向共同使用一个距离的内间距
间距的方向
上内、外间距 pt-{number} 和 mt-{number}
下内、外间距 pb-{number} 和 mb-{number}
左内、外间距 ps-{number} 和 ms-{number}
右内、外间距 pe-{number} 和 me-{number}
垂直方向的内、外间距 py-{number} 和 my-{number}
水平方向的内、外间距 px-{number} 和 mx-{number}
特殊值: 外间距的auto值,mx-auto水平方向的自动居中
响应式的内外间距需要加类中缀
p-{类中缀}-{number} 响应式写法的内间距
m-{类中缀}-{number} 响应式写法的外间距
响应式写法会随着.container的变化而变化
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>work1</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../css/bootstrap.css"/> <link rel="stylesheet" href="../css/bootstrap-icons.css"/> <script src="../js/bootstrap.bundle.js"></script> </head> <body> <!-- 间距也可以做成响应式，随着设备的变大而变大 需求：py设置垂直方向的内间距,要求： sm的情况下，使用8px md的情况下，使用16px lg的情况下，使用24px 其他剩余情况间距都为4px,也就是py-1 --> <div class="bg-success py-1 py-sm-2 py-md-3 py-lg-4 py-xl-5 ">内容</div> </body> </html>
总结
Web前端105天-day13,boot第一天学习结束
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
