媒体查询，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。

相关文章

MySQL存储过程之循环遍历查询的结果集详解

MySQL存储过程之循环遍历查询的结果集详解

《MySQL存储过程之循环遍历查询的结果集详解》：本文主要介绍MySQL存储过程之循环遍历查询的结果集,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言1. 表结构2. 存储过程3. 关于存储过程的SQL补充总结前言近来碰到这样一个问题：在生产上导入的数据发现
阅读更多...
MySQL JSON 查询中的对象与数组技巧及查询示例

MySQL JSON 查询中的对象与数组技巧及查询示例

《MySQLJSON查询中的对象与数组技巧及查询示例》MySQL中JSON对象和JSON数组查询的详细介绍及带有WHERE条件的查询示例,本文给大家介绍的非常详细,mysqljson查询示例相关知... 目录jsON 对象查询1. JSON_CONTAINS2. JSON_EXTRACT3. JSON_TA
阅读更多...
MYSQL查询结果实现发送给客户端

MYSQL查询结果实现发送给客户端

《MYSQL查询结果实现发送给客户端》：本文主要介绍MYSQL查询结果实现发送给客户端方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录mysql取数据和发数据的流程（边读边发）Sending to clientSending DataLRU(Least Rec
阅读更多...
MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)

《MySQL复杂SQL之多表联查/子查询详细介绍(最新整理)》掌握多表联查(INNERJOIN,LEFTJOIN,RIGHTJOIN,FULLJOIN)和子查询（标量、列、行、表子查询、相关/非相关、... 目录第一部分：多表联查 (JOIN Operations)1. 连接的类型 (JOIN Types)
阅读更多...
python编写朋克风格的天气查询程序

python编写朋克风格的天气查询程序

《python编写朋克风格的天气查询程序》这篇文章主要为大家详细介绍了一个基于Python的桌面应用程序,使用了tkinter库来创建图形用户界面并通过requests库调用Open-MeteoAPI... 目录工具介绍工具使用说明python脚本内容如何运行脚本工具介绍这个天气查询工具是一个基于 Pyt
阅读更多...
MyBatis编写嵌套子查询的动态SQL实践详解

MyBatis编写嵌套子查询的动态SQL实践详解

《MyBatis编写嵌套子查询的动态SQL实践详解》在Java生态中,MyBatis作为一款优秀的ORM框架,广泛应用于数据库操作,本文将深入探讨如何在MyBatis中编写嵌套子查询的动态SQL,并结... 目录一、Myhttp://www.chinasem.cnBATis动态SQL的核心优势1. 灵活性与可
阅读更多...
Mybatis嵌套子查询动态SQL编写实践

Mybatis嵌套子查询动态SQL编写实践

《Mybatis嵌套子查询动态SQL编写实践》：本文主要介绍Mybatis嵌套子查询动态SQL编写方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录前言一、实体类1、主类2、子类二、Mapper三、XML四、详解总结前言MyBATis的xml文件编写动态SQL
阅读更多...
在Java中基于Geotools对PostGIS数据库的空间查询实践教程

在Java中基于Geotools对PostGIS数据库的空间查询实践教程

《在Java中基于Geotools对PostGIS数据库的空间查询实践教程》本文将深入探讨这一实践,从连接配置到复杂空间查询操作,包括点查询、区域范围查询以及空间关系判断等,全方位展示如何在Java环... 目录前言一、相关技术背景介绍1、评价对象AOI2、数据处理流程二、对AOI空间范围查询实践1、空间查
阅读更多...
MySQL基本查询示例总结

MySQL基本查询示例总结

《MySQL基本查询示例总结》：本文主要介绍MySQL基本查询示例总结,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录Create插入替换Retrieve(读取)select（确定列）where条件（确定行）null查询order by语句li
阅读更多...
MySQL中like模糊查询的优化方案

MySQL中like模糊查询的优化方案

《MySQL中like模糊查询的优化方案》在MySQL中,like模糊查询是一种常用的查询方式,但在某些情况下可能会导致性能问题,本文将介绍八种优化MySQL中like模糊查询的方法,需要的朋友可以参... 目录1. 避免以通配符开头的查询2. 使用全文索引（Full-text Index）3. 使用前缀索
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2