媒体查询，Bootstrap5(1)

2024-03-11 12:52
文章标签 查询 媒体 bootstrap5

本文主要是介绍媒体查询，Bootstrap5(1)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

媒体查询

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

根据宽度给端口分类
超小屏：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;}}

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>

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 超大号 超大屏幕*/}

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;
}
}

在bootstrap中的两种容器：

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

基础内容

1. 颜色

颜色背景颜色字体颜色链接(有hover效果)
蓝色bg-primarytext-primarylink-primary
灰色bg-secondarytext-secondarylink-secondary
绿色bg-successtext-successlink-success
红色bg-dangertext-dangerlink-danger
黄色bg-warningtext-warninglink-warning
蓝绿色bg-infotext-infolink-info
亮色bg-lighttext-lightlink-light
深色bg-darktext-darklink-dark
白色bg-whitetext-whitelink-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>
  • 使用一种更大的标题样式.display-1~.display-6没有加粗效果，比标题更大，从1～6逐步变小，1号最大。
<div class="display-1">更大号的字体1</div>
<div class="display-2">更大号的字体2</div>

3.列表

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

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

表格和表单

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>

（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>

（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>

（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.尺寸

（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>

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} 响应式写法的内间距

这篇关于媒体查询，Bootstrap5(1)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/797857。

相关文章

活用c4d官方开发文档查询代码

活用c4d官方开发文档查询代码

当你问AI助手比如豆包，如何用python禁止掉xpresso标签时候，它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来
阅读更多...
ural 1026. Questions and Answers 查询

ural 1026. Questions and Answers 查询

1026. Questions and Answers Time limit: 2.0 second Memory limit: 64 MB Background The database of the Pentagon contains a top-secret information. We don’t know what the information is — you
阅读更多...
Mybatis中的like查询

Mybatis中的like查询

<if test="templateName != null and templateName != ''">AND template_name LIKE CONCAT('%',#{templateName,jdbcType=VARCHAR},'%')</if>
阅读更多...
京东物流查询｜开发者调用API接口实现

京东物流查询｜开发者调用API接口实现

快递聚合查询的优势 1、高效整合多种快递信息。2、实时动态更新。3、自动化管理流程。 聚合国内外1500家快递公司的物流信息查询服务，使用API接口查询京东物流的便捷步骤，首先选择专业的数据平台的快递API接口：物流快递查询API接口-单号查询API - 探数数据 以下示例是参考的示例代码： import requestsurl = "http://api.tanshuapi.com/a
阅读更多...
DAY16：什么是慢查询，导致的原因，优化方法 | undo log、redo log、binlog的用处 | MySQL有哪些锁

DAY16：什么是慢查询，导致的原因，优化方法 | undo log、redo log、binlog的用处 | MySQL有哪些锁

目录 什么是慢查询，导致的原因，优化方法 undo log、redo log、binlog的用处  MySQL有哪些锁   什么是慢查询，导致的原因，优化方法 数据库查询的执行时间超过指定的超时时间时，就被称为慢查询。 导致的原因： 查询语句比较复杂：查询涉及多个表，包含复杂的连接和子查询，可能导致执行时间较长。查询数据量大：当查询的数据量庞大时，即使查询本身并不复杂，也可能导致
阅读更多...
oracle11.2g递归查询（树形结构查询）

oracle11.2g递归查询（树形结构查询）

转自： 一 二 简单语法介绍 一、树型表结构：节点ID 上级ID 节点名称二、公式： select 节点ID,节点名称,levelfrom 表connect by prior 节点ID=上级节点IDstart with 上级节点ID=节点值 oracle官网解说 开发人员：SQL 递归： 在 Oracle Database 11g 第 2 版中查询层次结构数据的快速
阅读更多...
ElasticSearch的DSL查询⑤（ES数据聚合、DSL语法数据聚合、RestClient数据聚合）

ElasticSearch的DSL查询⑤（ES数据聚合、DSL语法数据聚合、RestClient数据聚合）

目录 一、数据聚合 1.1 DSL实现聚合 1.1.1 Bucket聚合  1.1.2 带条件聚合 1.1.3 Metric聚合 1.1.4 总结 2.1 RestClient实现聚合 2.1.1 Bucket聚合 2.1.2 带条件聚合 2.2.3 Metric聚合 一、数据聚合 聚合（aggregations）可以让我们极其方便的实现对数据的统计、分析、运算。例如：
阅读更多...
MySQL基础（7）- 多表查询

MySQL基础（7）- 多表查询

目录 一、笛卡尔积的错误与正确的多表查询 1.出现笛卡尔积错误 2.正确的多表查询：需要有连接条件 3.查询多个表中都存在的字段 4.SELECT和WHERE中使用表的别名 二、等值连接vs非等值连接、自连接vs非自连接 1.等值连接  vs  非等值连接 2.自连接  vs  非自连接 3.内连接  vs  外连接 4.UNION  和 UNION ALL的使用 5.7种J
阅读更多...
Hbase Filter+Scan 查询效率优化

Hbase Filter+Scan 查询效率优化

Hbase Filter+Scan 查询效率问题 众所周知，Hbase利用filter过滤器查询时候会进行全表扫描，查询效率低下，如果没有二级索引，在项目中很多情况需要利用filter,下面针对这种情况尝试了几种优化的方案，仅供参考，欢迎交流。 根据业务要求，作者需要根据时间范围搜索所需要的数据，所以作者设计的rowKey是以时间戳为起始字符串的。 正确尝试： 1.scan 设置 开始行和结
阅读更多...
Hbase 查询相关用法

Hbase 查询相关用法

Hbase 查询相关用法 public static void main(String[] args) throws IOException {//Scan类常用方法说明//指定需要的family或column ，如果没有调用任何addFamily或Column，会返回所有的columns； // scan.addFamily(); // scan.addColumn();// scan.se
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2