我家自动化

这个屌丝很懒，什么也没留下！

热门标签

媒体查询，Bootstrap5(1)_bootstrap 媒体查询

作者：我家自动化 | 2024-05-12 13:50:01

踩

bootstrap 媒体查询

媒体查询

定义：根据视口的宽度从而呈现出不同的样式

根据宽度给端口分类
超小屏：0-575.9px
小屏：576-767.9px
中屏：768-991.9px
大屏：992-1199.9px
超大屏：1200-1399.9px
特大屏：1400px及以上
不同的端口配不同的样式：媒体查询

        @media (min-width: 0) {
            p{
                color: red;
            }
        }

        @media (min-width: 576px) {
            p{
                color: orange;
            }
        }
        @media (min-width: 768px) {
            p{
                color: yellow;
            }
        }
        @media (min-width: 992px) {
            p{
                color: #00cc4c;
            }
        }
        @media (min-width: 1200px) {
            p{
                color: aqua;
            }
        }
        @media (min-width: 1400px) {
            p{
                color: tomato;
            }
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Bootstrap5

1.Bootstrap概述

Bootstrap是有Twitter公司的两名工程师，基于html、css、js开发的简洁的，开源、强大、优雅的ui框架。至今经历了5个大版本，现在学习的第五个版本是最新的版本。
Bootstrap内置了大量的css类，供元素使用，相当于一个预先设置好的类库，供需要标签直接用，直接就会被渲染。
学习UI框架的终极意义，学会如何查文档，运用文档。
市面上的UI框架很多很多，企业会用哪个不一定。工作中百分之八十用框架。

2.Bootstrap文档

学习UI框架的终极意义，学会如何查文档，运用文档。如何查阅文档，如何运用文档的案例。
Bootstrap5文档查阅：https://v5.bootcss.com/docs/5.3/getting-started/introduction/
其他版本的文档查阅：https://v5.bootcss.com/docs/versions/

3.下载生产文件

下载css的样式文件库，和js的功能文件库，图标文件库（单独下载）

4.各个版本的区别

任何的框架都会升级，框架升级后会有一些改动。可能对内容进行增删改，所以一定要查看对应版本的手册。
工作中，一定要先看公司使用的项目中的框架版本，会在开发手册中体现。
版本5的改动比较大，原来js依赖jQuery，现在不依赖了，也不再兼容IE。
对很多类名也有改动，最大的改动就是左、右，如：float-left到5版本float-start，所有的左都变成了start所有的右都变成了end

5.学习时使用的模版

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <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></style>
</head>
<body>
 <div class="container"></div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Bootstrap5的响应式

https://v5.bootcss.com/docs/layout/breakpoints/

1.断点

Bootstrap5中，为我们设计了5+1个断点，写好了媒体查询，使用类中缀可以直接对应某个响应式范围，用于响应式构建。
想在源码中查看代码，先打开源码，按ctrl+f 搜索关键词，关键类名，找到好多，旁边有上下键，按上下查

/*没写类中缀的就是手机端小于576px*/
/*屏幕宽度在576px以上含576px*/
@media (min-width: 576px) {/*类中缀sm 小号，pad*/}
/*屏幕宽度在768px以上含768px*/
@media (min-width: 768px) {/*类中缀md 中号 平板*/}
/*屏幕宽度在992px以上含992px*/
@media (min-width: 992px) {/*类中缀lg 普通 小屏幕的pc*/}
/*屏幕宽度在1200px以上含1200px*/
@media (min-width: 1200px) {/*类中缀xl 大号 大屏显示器*/}
/*屏幕宽度在1400px以上含1400px*/
@media (min-width: 1400px) {/*类中缀xxl 超大号 超大屏幕*/}
1
2
3
4
5
6
7
8
9
10
11

2.天沟

“天沟”是一个翻译过来的词汇，指容器中左右两侧的内间距。让内容不至于紧贴元素的两侧，默认时共1.5em（24px）间距宽，左右0.75em。

3.容器

https://v5.bootcss.com/docs/layout/containers/
容器container类名，容器就是一个响应式的“版心”。这个版心会根据页面宽度的变化而变化，就是个自动版心。会根据页面宽度放大缩小，改变版心的宽度。

sm：页面宽度576-768之间，版心宽度540px
md：页面宽度768-992之间，版心宽度720px
lg：页面宽度992-1200之间，版心宽度960px
xl：页面宽度1200-1400之间，版心宽度1140px
xxl：页面宽度1400以上，版心宽度1320px

@media (min-width: 576px) {
 .container-sm, .container {
   max-width: 540px;
}
}
@media (min-width: 768px) {
 .container-md, .container-sm, .container {
   max-width: 720px;
}
}
@media (min-width: 992px) {
 .container-lg, .container-md, .container-sm, .container {
   max-width: 960px;
}
}
@media (min-width: 1200px) {
 .container-xl, .container-lg, .container-md, .container-sm, .container {
   max-width: 1140px;
}
}
@media (min-width: 1400px) {
 .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
   max-width: 1320px;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

在bootstrap中的两种容器：

==.container ==,它会自动适配断点，叫做定宽容器。会按照响应式中的最大宽度体现，并且居中，左右的天沟
.container-fluid全宽适配，变宽容器。撑满整个展示的全部宽度，也具有左右两侧的天沟
在写布局的时候，容器类是一定要写的，否则无法限定响应式的部分。UI框架本来就是响应式框架。

基础内容

1. 颜色

颜色	背景颜色	字体颜色	链接(有hover效果)
蓝色	bg-primary	text-primary	link-primary
灰色	bg-secondary	text-secondary	link-secondary
绿色	bg-success	text-success	link-success
红色	bg-danger	text-danger	link-danger
黄色	bg-warning	text-warning	link-warning
蓝绿色	bg-info	text-info	link-info
亮色	bg-light	text-light	link-light
深色	bg-dark	text-dark	link-dark
白色	bg-white	text-white	link-white
透明	bg-transparent	—	—
50度黑	—	text-black-50	—
50度白	—	text-white-50	—

2.排版文字大小

https://v5.bootcss.com/docs/content/typography/

使用.h1 ~ .h6类可以同标签h1~h6大小样式一致

<h1>大标题</h1>
<div class="h1">我也想大标题</div>
1
2

使用一种更大的标题样式.display-1~.display-6没有加粗效果，比标题更大，从1～6逐步变小，1号最大。

<div class="display-1">更大号的字体1</div>
<div class="display-2">更大号的字体2</div>
1
2

3.列表

列表一般情况下更多使用ul和ol，默认有标识符。去掉列表的标识符.list-unstyled。

   <!-- 去掉列表的标识符 -->
   <ul class="list-unstyled">
     <li>aaaa</li>
     <li>bbbb</li>
   </ul>
1
2
3
4
5

表格和表单

1.表格

https://v5.bootcss.com/docs/content/tables/
不是说框架里所有的内容要精通，用什么，查什么，查完了，加上。
如果不知道加哪，复制文档中的案例，改案例
如果自定义样式过多，直接手写样式，就不要使用ui框架中的类了

.table基础类，写给<table>标签必须写，有了基础类其他的辅助类才生效。
.table-{color}表格颜色，表格颜色的类除了可以加到<table>标签也可以加到 <tr> 和 <td>
.table-striped条形纹，加到<table>标签上，使得<tbody>里的行，隔行变色
.table-hover鼠标悬停行变色效果，加到<table>标签上，使得<tbody>里的行，发生悬停变色
.table-bordered给table加边框，有了这个属性再可以改边框的颜色.border-{color}
表头主题有两个table-dark深色主题，table-light亮色主题，这两个类写给<thead>修改表头的主题样式

2.表单

https://v5.bootcss.com/docs/forms/overview/

（1）文本输入框和表述文字

.form-control加给input标签的，让input标签有样式上的变化
.form-label加在label标签上的，有间距，非必要
.form-text对表单进行描述，并且是块元素，字体大小和间距的变化，非必要

 <div>
     <label class="form-label" for="user">用户名</label>
     <input type="text" id="user" class="form-control">
     <div class="form-text">用户名可以为数字+字母，也可以为汉字</div>
   </div>
1
2
3
4
5

（2）下拉菜单

.form-select下拉菜单必写的类，基础类，写给select标签
.form-select-lg下拉菜单的文字大一点，.form-select-sm下拉菜单的文字小一点

 <select class="form-select form-select-lg">
     <option>请选择城市</option>
     <option value="0">北京</option>
     <option value="1">郑州</option>
     <option value="2">深圳</option>
     <option value="3">重庆</option>
     <option value="4">南京</option>
   </select>
1
2
3
4
5
6
7
8

（3）单选复选框

.form-check单选框和复选框外层包裹元素，有些边距的样式
.form-check-input单选和复选框的样式，会根据属性type改变样式
.form-check-label是单选和复选的说明文字

  <div>
     <div class="form-check">
       <input type="radio" value="0" class="form-check-input" name="sex">
       <label class="form-check-label">男</label>
     </div>
     <div class="form-check">
       <input type="radio" value="1" class="form-check-input" name="sex">
       <label class="form-check-label">女</label>
     </div>
   </div>
1
2
3
4
5
6
7
8
9
10

（4）表单组

.input-group表单组的外层包裹元素
.input-group-text表单标签前面的文字提示，使用内联元素
.form-control输入框就用表单控件

 <div class="input-group">
     <span class="input-group-text bg-primary text-white">北京</span>
     <input type="text" class="form-control">
   </div>
1
2
3
4

工具类

1.尺寸

（1）宽度和高度

https://v5.bootcss.com/docs/utilities/sizing/
宽度和高度，boot中提供宽度和高度的类是百分比的类。

宽度 .w-{number}支持25、50、75、100、auto，分别代表百分比
高度 .h-{number}支持25、50、75、100、auto，分别代表百分比。注意高度是父级元素的百分比，前提是父元素要有高度才行

（2）相对视口的尺寸

相对视口的宽度vw-100支持100，全屏宽度
相对视口的高度vh-100支持100，全屏高度

  <div class="bg-warning">
     <div class="zdy-h w-25 bg-danger">父级宽度的25%</div>
     <div class="zdy-h w-50 bg-primary">父级宽度的50%</div>
     <div class="vh-100 w-75 bg-success"></div>
   </div>
1
2
3
4
5

2.边框

https://v5.bootcss.com/docs/utilities/borders/

（1）边框样式

border四个方向一像素边框
oborder-bottom下边框
oborder-top上边框
oborder-start左边框
oborder-end右边框
边框的宽度border-{number}0-5数字，0是去掉边框，1-5是1px-5px
边框的颜色border-{color}颜色使用boot提供的颜色

（2）圆角

.rounded圆角的基础类，默认四个方向圆角
.rounded-{number}圆角的弧度0-3
.rounded-circle圆形
.rounded-pill胶囊型

3.间距

间距包括内间距和外间距，内间距使用·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
响应式的内外间距需要加类中缀，响应式写法会随着.container的变化而变化
- .p-{类中缀}-{number} 响应式写法的内间距
- .m-{类中缀}-{number} 响应式写法的内间距

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家自动化/article/detail/559221