媒体查询,Bootstrap5(1)

news/2024/5/26 20:44:08/文章来源:https://blog.csdn.net/Luo3255069063/article/details/136613821

媒体查询

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

根据宽度给端口分类
超小屏: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} 响应式写法的内间距

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_1006619.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Address already in dse_JVM_Bind。端口莫名被占用【占用8080端口!!!】

文章目录 问题描述&#xff1a;Address already in dse:JVM_Bind问题可能的原因解决方案 问题描述&#xff1a;Address already in dse:JVM_Bind 问题可能的原因 当前端口已经有别的程序在占用着 我曾经被QQ占用过8080端口&#xff0c;Oracle启动了OracleHttp服务会占用8080端…

接口自动化框架(Pytest+request+Allure)

前言&#xff1a; 接口自动化是指模拟程序接口层面的自动化&#xff0c;由于接口不易变更&#xff0c;维护成本更小&#xff0c;所以深受各大公司的喜爱。 接口自动化包含2个部分&#xff0c;功能性的接口自动化测试和并发接口自动化测试。 本次文章着重介绍第一种&#xff0c…

InstantID Zero-shot Identity-Preserving Generation in Seconds

InstantID: Zero-shot Identity-Preserving Generation in Seconds TL; DR&#xff1a;InstantID IP-Adapter (Face) ControlNet&#xff0c;实现了具有较高保真度的人脸 ID 生成。 方法 InstantID 想做到的事情是&#xff1a;给定一张参考人脸 ID 图片&#xff0c;生成该…

*地宫取宝c++

题目 输入样例1&#xff1a; 2 2 2 1 2 2 1输出样例1&#xff1a; 2输入样例2&#xff1a; 2 3 2 1 2 3 2 1 5输出样例2&#xff1a; 14 思路 题目说从入口开始&#xff0c;只能向右或向下行走到达右下角&#xff0c;类似“摘花生”这道题的模型。题目又说只有当格子里的宝…

C语言中如何进行内存管理

主页&#xff1a;17_Kevin-CSDN博客 收录专栏&#xff1a;《C语言》 C语言是一种强大而灵活的编程语言&#xff0c;但与其他高级语言不同&#xff0c;它要求程序员自己负责内存的管理。正确的内存管理对于程序的性能和稳定性至关重要。 一、引言 C 语言是一门广泛使用的编程语…

Flink概述

1.什么是Flink 是一个框架和分布式处理引擎&#xff0c;用于对无界和有界数据流进行有状态计算。 官网&#xff1a;Flink 2.Flink的发展历史 Flink起源于一个叫作Stratosphere的项目&#xff0c;它是由3所地处柏林的大学和欧洲其他一些大学在2010~2014年共同进行的研究项目&a…

关于playbook中when条件过滤报The conditional check ‘result|failed‘ failed的问题

问题现象 在使用plabook中的when做过滤脚本如下&#xff1a; --- - hosts: realserversremote_user: roottasks:- name: Check if httpd service is runningcommand: systemctl status httpdregister: resultignore_errors: True- name: Handle failed service checkdebug:ms…

C#调用Halcon出现尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException

一、现象 在C#中调用Halcon&#xff0c;出现异常提示&#xff1a;尝试读取或写入受保护的内存,这通常指示其他内存已损坏。System.AccessViolationException 二、原因 多个线程同时访问Halcon中的某个公共变量&#xff0c;导致程序报错 三、测试 3.1 Halcon代码 其中tsp_width…

sqllab第四关通关笔记

知识点&#xff1a; 判断注入点类型判断原始语句 select 1,2,3 from 表名 where id("输入") limit 0,1; 首先判断注入类型 构造id1/0 正常打印&#xff1b;字符型注入 构造id1 正常回显&#xff1b;说明不是用单引号读取输入内容 构造id1" 发生异常&#x…

Win11系统启动VMware上虚拟机蓝屏解决办法

背景 最近有在做一个项目的过程中需要使用虚拟机&#xff0c;用原来装好的的Vmware14打开虚拟机&#xff0c;直接蓝屏了&#xff0c;尝试了如下几种方法来解决&#xff0c;最好用的就是第二种&#xff0c;直接下载最新版本(在软件管家中直接下载)。 虚拟机 目前常用的虚拟机软…

初步了解序列化和反序列化

01什么是序列化和反序列化 序列化是将对象转化为字符串以便存储的一种方式。而反序列化恰好是序列化的逆过程&#xff0c;反序列化会将字符串转化为对象供程序使用。 常见的php系列化和反系列化方式主要有&#xff1a;serialize&#xff0c;unserialize&#xff1b;json_enco…

Nginx请求转发和Rewrite的URL重写及重定向的功能实现移动端和PC端前端服务转发和重定向配置。

应用场景说明一 应用系统分pc端和微信小程序&#xff0c;移动端和pc端分别申请二级子域名&#xff0c;通过Nginx域名解析匹配&#xff0c;将web访问统一转发至对应的域名请求中。部分配置如下所示&#xff1a; 1、WEB访问统一入口域名解析转发配置&#xff0c;PC端和移动端根域…

【论文阅读】OpsEval

粗糙翻译&#xff0c;如有兴趣请看原文&#xff0c;链接&#xff1a;https://arxiv.org/abs/2310.07637 摘要 信息技术&#xff08;IT&#xff09;运营&#xff08;Ops&#xff09;&#xff0c;特别是用于IT运营的人工智能&#xff08;AlOps&#xff09;&#xff0c;是保持现…

码头船只出行和货柜管理系统的设计与实现

针对于码头船只货柜信息管理方面的不规范&#xff0c;容错率低&#xff0c;管理人员处理数据费工费时&#xff0c;采用新开发的码头船只货柜管理系统可以从根源上规范整个数据处理流程。 码头船只货柜管理系统能够实现货柜管理&#xff0c;路线管理&#xff0c;新闻管理&#…

Java中常见延时队列的实现方案总结

&#x1f3f7;️个人主页&#xff1a;牵着猫散步的鼠鼠 &#x1f3f7;️系列专栏&#xff1a;Java全栈-专栏 &#x1f3f7;️个人学习笔记&#xff0c;若有缺误&#xff0c;欢迎评论区指正 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&…

爬虫与DataFrame对象小小结合

import pandas as pd import requests from lxml import etree #数据请求 url"https://www.maigoo.com/brand/list_1715.html" headers{User-Agent:} #数据响应 resrequests.get(url,headersheaders) tree etree.HTML(res.text) #数据解析 titletree.xpath(.//div[c…

C语言游戏实战(4):人生重开模拟器

前言&#xff1a; 人生重开模拟器是前段时间非常火的一个小游戏&#xff0c;接下来我们将一起学习使用c语言写一个简易版的人生重开模拟器。 网页版游戏&#xff1a; 人生重开模拟器 (ytecn.com) 1.实现一个简化版的人生重开模拟器 &#xff08;1&#xff09; 游戏开始的时…

Express学习(四)

使用Express写接口 创建基本的服务器 创建API路由模块 编写GET接口 编写POST接口 CORS跨域资源共享 什么是CORS CORS由一系列HTTP响应头组成&#xff0c;这些HTTP响应头决定浏览器是否阻止前端JS代码跨域获取资源。浏览器的同源安全策略默认会阻止网页“跨域”获取资源。但如…

系统运维网络知识汇总

一、系统运维中网络方面的规划与思考 系统运维建立在网络的基础之上&#xff0c;如果没有一个相对合理的网络架构&#xff0c;恐怕系统运维做起来也不是那么的顺手。一个公司基本上都会把网络和服务器独立开来&#xff0c;划分不同的区域摆放设备&#xff0c;很多时候都是物理…

使用Java自带的VisualVM监控远程服务器部署在Docker容器中的Java项目并使用Mat在线工具排查服务器内存泄露或内存溢出的原因

事情是这样的&#xff0c;我们项目最近应业主的要求迁移到了新的服务器&#xff0c;起初一切正常&#xff0c;部署、上线、测试都没有问题&#xff0c;项目大概运行了一周的工作日时间都没出现问题&#xff0c;直到周六那天&#xff0c;项目经理打电话过来说服务器崩了&#xf…