学习Bootstrap 5的第五天

目录

图像

图像形状

实例

对齐图像

实例

居中图像

实例

响应式图像

实例

Jumbotron

实例


图像

图像形状

.rounded 类可以用于为图像或任何具有边框的元素添加圆角。这个类适用于Bootstrap的所有版本,并且在最新版本中得到了进一步的增强。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><img src="img/1.png" class="rounded" width="300px" height="200px" /></div></body>
</html>

在上面的示例中,rounded 类将使图像的四个角变圆。可以通过添加更多的类来进一步定制圆角的大小和形状。例如,.rounded-circle 类将使图像变为完全圆形,而 .rounded-pill 类将使图像的四个角变得非常圆润。 .img-thumbnail 类将图像塑造为缩略图(带边框)。

此外,还可以使用 .border-radius 类来为元素添加自定义的边框半径。例如,border-radius: 10px; 将使元素的边框半径为10像素。

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><h2>.rounded 类为图像添加圆角:</h2><img src="img/1.png" class="rounded" width="200px" height="100px" /><br /><h2>.rounded-circle 类将图像塑造为圆形:</h2><img src="img/1.png" class="rounded-circle" width="200px" height="100px"/><br /><h2>.rounded-pill 类将使图像的四个角变得非常圆润:</h2><img src="img/1.png" class="rounded-pill" width="200px" height="100px"/><br /><h2>.img-thumbnail 类将图像塑造为缩略图(带边框):</h2><img src="img/1.png" class="img-thumbnail" width="200px" height="100px"/><br /></div></body>
</html>

运行结果:

对齐图像

使用 .float-start 类来设置图片左对齐,使用 .float-end 类设置图片右对齐。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><img src="img/1.png" class="float-start" width="200px" height="100px" /><img src="img/1.png" class="float-end" width="200px" height="100px" /></div></body>
</html>

运行结果:

居中图像

使用 .mx-auto 和 .d-block 是 Bootstrap 提供的一种方法,可以用于将图像居中。

.mx-auto 类将图像的左右边距设置为自动,这使得图像水平居中。而 .d-block 类则将图像的显示设置为块级元素,这是必需的,因为只有块级元素才能使用左右边距。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><div class="mx-auto d-block"><img src="img/1.png" class="mx-auto d-block" width="200px" height="100px" /></div></div></body>
</html>

在上面的示例中,通过将 .mx-auto 和 .d-block 类应用于 <div> 和 <img> 元素,图像将水平居中。 

运行结果:

响应式图像

.img-fluid 是 Bootstrap 提供的一个类,可以用于创建响应式图像。这个类会将图像的最大宽度设置为 100%,并将高度自动调整以保持图像的纵横比。这样,无论屏幕的大小如何,图像都会自动缩放以适应。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><p>.img-fluid 类使图像可以很好地缩放到父元素(调整浏览器窗口的大小来查看效果):</p><img src="img/1.png" class="img-fluid"></div></body>
</html>

在上面的示例中,通过将 .img-fluid 类应用于 <img> 元素,图像将自动缩放以适应父元素(在这种情况下是一个 <div> 元素)的宽度。

使用 .img-fluid 类可以确保图像在不同设备和屏幕尺寸上都能以一致和可读的方式呈现。

Jumbotron

在 Bootstrap 3 中引入了 jumbotron,会生成大的填充框,用于引起对某些特殊内容或信息的额外关注。但Bootstrap 5 中不再有专门的 Jumbotron 类,但是可以通过组合一些现有的类来达到类似的效果。

如果想要创建一个类似 Jumbotron 的效果,可以使用 .bg-dark 或 .bg-primary 等背景颜色类,以及 .d-block 和 .d-sm-block 等 display 类。

实例

<!DOCTYPE html>
<html lang="en"><head><title>Bootstrap 实例</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script></head><body><div class="container mt-3"><div class="bg-dark text-white d-block d-sm-block"><h1 class="display-1">Welcome to my Jumbotron</h1><p class="lead">This is a Bootstrap 5 Jumbotron replacement.</p></div></div></body>
</html>

在这个例子中,.bg-dark 提供了深色的背景,.text-white 使文字变为白色,.d-block 和 .d-sm-block 则确保了这个 div 在所有屏幕大小上都可见。.display-1 用于大标题,而 .lead 则用于主要内容。

请注意:可以根据需要调整这些类和样式。例如,可能想要改变背景颜色,或者调整标题和内容的字体大小等。

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

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

相关文章

CS420 课程笔记 P6 - 游戏逆向中的虚拟内存

文章目录 IntroVirtual memoryExample!Static example Intro 在上个视频中&#xff0c;我们知道有些地址在你重进游戏时就会无效&#xff0c;有的有时有效&#xff0c;我们需要了解称为虚拟内存的东西 记住这些信息&#xff1a;当你双击打开 Squally.exe 游戏时&#xff0c;系…

在C语言中,指针和函数指针是两个不同的概念

指针&#xff1a;指针是一个变量&#xff0c;其值为另一个变量的地址&#xff0c;即&#xff0c;内存位置的直接地址。我们可以通过这个指针来访问该地址存储的值 int a 10; int *p; p &a; // p存储了变量a的地址 printf("%d", *p); // 这会打印出10…

C# winform控件和对象双向数据绑定

实现目的&#xff1a; 控件和对象双向数据绑定 实现结果&#xff1a; 1. 对象值 -> 控件值 2. 控件值 -> 对象值 using System; using System.Windows.Forms;namespace ControlDataBind {public partial class MainForm : Form{People people new People();public Mai…

JVM的故事——虚拟机类加载机制

虚拟机类加载机制 文章目录 虚拟机类加载机制一、概述二、类加载的时机三、类加载的过程四、类加载器 一、概述 本章将要讲解class文件如何进入虚拟机以及虚拟机如何处理这些class文件。Java虚拟机把class文件加载到内存&#xff0c;并对数据进行校验、转换解析和初始化&#…

KMP超高效匹配算法

简介&#xff1a; KMP算法是一种改进的字符串匹配算法&#xff0c;其中&#xff0c;KMP算法的运用核心是利用匹配失败后的信息&#xff0c;最大进度的减少模式串与目标串的匹配次数以达到快速匹配的效果。算法与暴力求解的改进在于每当一趟匹配过程中出现的字符比较不相等时&am…

2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆

2023开学礼中国海洋大学《乡村振兴战略下传统村落文化旅游设计》许少辉新海洋图书馆

SOME/IP TTL 在各种Entry 中各是什么意思?有什么限制?

1 服务发现 SOME/IP SD 服务发现主要用于 定位服务实例检测服务实例状态是否在运行发布/订阅行为管理SOME/IP SD 也是 SOME/IP 消息,遵循 SOME/IP 消息格式,有固定的 Message ID、Request ID 以及 Message Type 等。并对 SOME/IP Payload 进行了详细的定义。 SOME/IP SD …

面试中的自我介绍:首印象决定一切

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

【网络安全带你练爬虫-100练】第21练:批量获取文件夹中文件名

目录 一、目标1&#xff1a;使用python爬取指定文件夹中的文件名 二、目标2&#xff1a;在文件夹指定目录打开命令行 一、目标1&#xff1a;使用python爬取指定文件夹中的文件名 方法一&#xff1a;使用os模块 将/path/to/folder替换为实际的文件夹路径。os.listdir()函数用…

D359周赛复盘:贪心解决求最小和问题⭐⭐+较为复杂的双层线性DP⭐⭐

文章目录 2828.判别首字母缩略词完整版 2829.k-avoiding数组的最小总和&#xff08;贪心解法&#xff09;思路完整版 类似题&#xff1a;2834.找出美丽数组的最小和思路完整版 2830.销售利润最大化⭐⭐思路DP数组含义递推公式 完整版 2828.判别首字母缩略词 给你一个字符串数组…

大数据系列教程之 Kafka基础

kafka概述 一、kafka概述 1.1 定义1.2 消息队列 1.2.1 传统消息队列的应用场景1.2.2 消息队列的两种形式1.3 Kafka 基础架构二、kafka安装部署 2.1安装部署 2.1.1.jar包下载2.1.2.解压到指定的文件夹下2.1.3.创建两个文件夹以供后续使用2.1.4. 修改配置文件 &#xff08;1&…

C语言基础之——结构体

前言&#xff1a;小伙伴们又见面啦&#xff0c;那么本篇文章&#xff0c;我们就将对C语言基础知识的最后一个章节——结构体展开讲解。 世上无难事&#xff0c;只要肯攀登&#xff01; 目录 一.什么是结构体 二.结构体讲解 1.结构体的声明和变量的定义 2.结构体成员的类型…

【Linux】多线程2——线程互斥与同步/多线程应用

文章目录 1. 线程互斥1.1 问题引入1.2 线程互斥的相关概念1.3 互斥量mutex1.4 互斥量实现原理1.5 死锁 2. 线程安全和可重入函数3. 线程同步3.1 同步概念3.2 条件变量 4. 生产消费模型4.1 基于阻塞队列的cp模型4.2 基于环形队列的cp模型POSIX信号量 5. 线程池5.1 互斥量RAII版本…

Mybatis中的关系映射

1.一对一的映射关系 一对一关系&#xff08;One-to-One&#xff09;表示两个实体对象之间存在唯一的关联关系。例如&#xff0c;一个学生只能拥有一个身份证。在 MyBatis 中&#xff0c;我们可以使用结果嵌套或一对一映射来处理一对一关系。 1.1 创建模型类和Vo类 package com…

Vue中启动提示polyfill缺少-webpack v5版本导致

安装 npm i node-polyfill-webpack-plugin 因为我们的项目使用webpack v5&#xff0c;其中polyfill Node核心模块被删除。所以&#xff0c;我们安装它是为了在项目中访问这些模块 vue.config.js文件 const { defineConfig } require("vue/cli-service"); const No…

二叉树的介绍

写在前面&#xff1a; 二叉树是数据结构课程中非常重要的内容&#xff0c;我们针对二叉树的概念、性质以及类型展开详细介绍。 一、概念 二叉树&#xff08;Binary Tree&#xff09;是n&#xff08;n>0&#xff09;个结点的有限集合&#xff0c;该集合或者空集&#xff0…

英语之美:用一句话解释句子结构

以下是一个包含主语、谓语、宾语、表语、定语、同位语、补足语和状语的扩展句子&#xff0c;使用 “I love you” 作为基础&#xff1a; “I, the person who truly loves you, consider our love a beautiful gift, and I love you more deeply with each passing day.” 在…

Android开机动画

Android开机动画 1、BootLoader开机图片2、Kernel开机图片3、系统启动时&#xff08;BootAnimation&#xff09;动画3.1 bootanimation.zip位置3.2 bootanimation启动3.3 SurfaceFlinger启动bootanimation3.4 播放开机动画playAnimation3.6 开机动画退出检测3.7 简易时序图 4、…

【微服务部署】三、Jenkins+Maven插件Jib一键打包部署SpringBoot应用Docker镜像步骤详解

前面我们介绍了K8SDockerMaven插件打包部署SpringCloud微服务项目&#xff0c;在实际应用过程中&#xff0c;很多项目没有用到K8S和微服务&#xff0c;但是用到了Docker和SpringBoot&#xff0c;所以&#xff0c;我们这边介绍&#xff0c;如果使用Jenkinsjib-maven-plugin插件打…

基于springboot实现websocket实时通讯启动项目报错

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…