Day-6 bootstrap 图像形状、巨幕、信息提示框

最新推荐文章于 2024-07-14 14:30:45 发布
最新推荐文章于 2024-07-14 14:30:45 发布
阅读量381 收藏 2
点赞数
分类专栏： BootStrap4 文章标签： html5 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43756494/article/details/109058647
版权

Day-6 图像形状、巨幕、信息提示框

图像形状、巨幕、信息提示框

1. 圆角图片( .rounded )

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg" class="rounded" alt="girl" width="300" height="280">
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 椭圆图片( .rounded-circle )

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg" class="rounded-circle" alt="girl"  width="300" height="280">
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

3. 缩略图–图片有边框( .img-thumbnail )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg" class="img-thumbnail" alt="girl" width="300" height="280">
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

4. 图片对齐方式( .float-left 左对齐 .float-right 右对齐)

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<img src="img/1.jpg" class="float-left" width="300" height="280">
			<img src="img/2.jpg" class="float-right" width="400" height="280">
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

5. 响应式图片 ( .img-fluid )

  图像有各种各样的尺寸，我们需要根据屏幕的大小自动适应。我们可以通过在 < img > 标签中添加 .img-fluid 类来设置响应式图片。.img-fluid 类设置了 max-width: 100%; height: auto;

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<img src="img/2.jpg" class="img-fluid">
		</div>
	</body>
</html>

运行结果：

浏览器最大化时，显示效果：
在这里插入图片描述
屏幕宽度为528px时，显示效果：
在这里插入图片描述
屏幕宽度为351px时，显示效果：
在这里插入图片描述

巨幕

1. Jumbotron（超大屏幕）

  Jumbotron会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。提示： Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="jumbotron">
				<h1>北京志愿者之家</h1>
				<p>垃圾分类--我先行</p>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 全屏幕的 Jumbotron

  创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现

代码如下：
  

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="jumbotron jumbotron-fluid">
			<div class="container">
				<h1>北京志愿者之家</h1>
				<p>垃圾分类--我先行</p>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述
注：在 .jumbotron-fluid 类外面的 div添加 .container-fluid 类实现不了 Jumbotron全屏幕，有默认的外边距。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container-fluid">
			<div class="jumbotron jumbotron-fluid">
				<h1>北京志愿者之家</h1>
				<p>垃圾分类--我先行</p>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

信息提示框

1. 提示框颜色( .alert-颜色 )

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success">
				<strong>成功!</strong> 指定操作成功提示信息。
			</div>
			<div class="alert alert-info">
				<strong>信息!</strong> 请注意这个信息。
			</div>
			<div class="alert alert-warning">
				<strong>警告!</strong> 设置警告信息。
			</div>
			<div class="alert alert-danger">
				<strong>错误!</strong> 失败的操作
			</div>
			<div class="alert alert-primary">
				  <strong>首选!</strong> 这是一个重要的操作信息。
			</div>
			<div class="alert alert-secondary">
				  <strong>次要的!</strong> 显示一些不重要的信息。
			</div>
			<div class="alert alert-dark">
				  <strong>深灰色!</strong> 深灰色提示框。
			</div>
			<div class="alert alert-light">
				  <strong>浅灰色!</strong>浅灰色提示框。
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 提添加链接的提示框( .alert-link )

  提示框中在链接的标签上添加 alert-link 类来设置匹配提示框颜色的链接

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success">
			    <strong>成功!</strong> 你应该认真阅读 <a href="#" class="alert-link">这条信息</a>。
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

2. 关闭提示框( .alert-dismissible )

  在提示框中的 div 中添加 .alert-dismissible 类，然后在关闭按钮的链接上添加 class=“close” 和 data-dismiss=“alert” 类来设置提示框的关闭操作。

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success alert-dismissible">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>成功！</strong>
			</div>
		</div>
	</body>
</html>

运行结果：
在这里插入图片描述

3. 提示框动画( .fade 淡入 .show 淡出 )

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/jquery.slim.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/popper.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="container">
			<div class="alert alert-success alert-dismissible fade show">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				<strong>成功！</strong>
			</div>
		</div>
	</body>
</html>

运行结果：点击关闭按钮，提示框颜色由深变浅直到消失。
在这里插入图片描述
在这里插入图片描述

May21☀️
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-10-4Bootstrap
kesin_lee的博客
10-04 969
基础模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>
bootstrap-growl 简单提示框
09-19
关于压缩包中的"bookStrap 提示框"，这可能包含了一些示例代码或者教程文件，用于帮助理解如何在实际项目中集成和使用Bootstrap-growl。通过查看这些文件，你可以学习到如何将Bootstrap-growl与其他Bootstrap组件...
Bootstrap4(八)
shi199434的博客
12-17 342
Bootstrap4 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。 提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。 我们可以通过在  元素 中添加 .jumbotron 类来创建 jumbotron: 实例 div class="j
Bootstrap4--Jumbotron(超大屏幕）、信息提示框、按钮及分页相关知识点汇总
m0_63341919的博客
11-20 1718
一、Jumbotron(超大屏幕） 1、在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron 2、创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现。例如： <div class="jumbotron jumbotron-fluid"> <div class="container"> .container和.container-fl
Bootstrap Jumbotron（超大屏幕）
书香水墨
07-24 2611
一、Bootstrap Jumbotron（超大屏幕） 1.1 基本的超大屏幕 我们可以通过在 <div> 元素 中添加 .jumbotron 类来创建 jumbotron: <div class="container"> <div class="jumbotron"> <h1>测试超大屏幕</h1> <p...
Bootstrap4 Jumbotron
12-14
Bootstrap4 Jumbotron Jumbotron（超大屏幕）会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。 提示: Jumbotron 里头可以放一些 HTML标签，也可以是 Bootstrap 的元素。 我们可以通过在 元素 中添加 .jumbotron 类来创建 jumbotron: 实例 软件开发网 学的不仅是技术，更是梦想！！！ 全屏幕的 Jumbotron 如果你想创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .container 或 .container-fluid 类来实现: 实例 软
2020-09-20
qq_49177645的博客
09-20 197
一、Bootstrap Jumbotron（超大屏幕） 1.1 基本的超大屏幕可以通过在 元素 中添加 .jumbotron 类来创建 jumbotron:<divclass=“container”> <divclass=“jumbotron”> 测试超大屏幕 学的不仅是技术，更是梦想！！！ 这是一些文本。 这是一些文本。 1.2 全屏幕的 Jumbotron 如果创建一个没有圆角的全屏幕，可以在 .jumbotron-fluid 类里头的 div添加 .
前端路线--bootstrap（day03）
Yan9_9的博客
04-09 753
day03-01-面包屑导航 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
python bootstrap 中位数_Python Day60-63 Bootstrap 的介绍和使用
weixin_39601511的博客
12-10 84
strongHTML5 文档类型： html lang="zh-CN"移动设备优先:确保适当的绘制和触屏缩放，需要在 head 之中添加 viewport 元数据标签。 meta name="viewport" content="width=device-width, initial-scale=1"IE 兼容模式Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行最新的渲染...
Bootstrap实现提示框和弹出框效果
08-31
提示框（Tooltip）是Bootstrap提供的一种轻量级的交互元素，用于在鼠标悬停在某个元素上时显示额外的信息。在Bootstrap中，创建提示框非常简单，只需要添加特定的数据属性到HTML元素即可。例如，我们可以使用`data-...
Bootstrap提示框效果的实例代码
08-30
Bootstrap 提示框效果的实例代码 Bootstrap 提示框是一种常见的功能，它可以在鼠标移动到特定元素上时，显示相关的提示语。 Bootstrap 提示框的基本用法是使用按钮或链接来制作，而不是使用 JavaScript 代码。 ...
bootstrap提示标签、提示框实现代码
08-31
在本篇文章中，我们将详细讨论如何在Bootstrap中实现提示标签（Tooltip）和提示框（Popover）。 首先，让我们来看看如何实现Bootstrap提示标签。提示标签是一种轻量级的UI组件，用于在鼠标悬停时显示额外的信息。在...
Java bootstrap-3.4.1-dist 前端框架
03-18
这个"Java bootstrap-3.4.1-dist"压缩包包含的是Bootstrap框架的3.4.1版本，它是专门为Java开发者设计的一个前端资源集合。 在Bootstrap 3.4.1中，主要知识点包括： 1. **栅格系统**：Bootstrap的核心特性之一是其...
Windows图形编程(版本3):创建一个全屏窗口
10-24 1243
1 Win.h #pragma once class KWindow { protected: virtual void OnDraw(HDC hDC) { } virtual void OnKeyDown(WPARAM wParam, LPARAM lParam) { } virtual LRESULT WndProc(HWND hWn
HTML5 Input 验证身份证
最新发布
cuisidong1997的博客
07-14 107
对于验证身份证号码，我们可以使用"type"属性为"text"的input元素，并通过"pattern"属性来指定验证的正则表达式。在许多网站或应用程序中，我们常常需要验证用户输入的身份证号码的有效性。本文将介绍如何使用HTML5的input元素来验证身份证号码，并提供相应的代码示例。通过使用HTML5的input元素和正则表达式，我们可以方便地验证用户输入的身份证号码的有效性。在本文中，我们介绍了身份证号码的正则表达式，并提供了相应的代码示例。身份证号码的格式包括18位和15位两种。
html5——表单
jiuyuexixi的博客
07-10 1094
html5——表单
从0到场均50万GMV，鞋服品牌的视频号直播打法3. 直播场次报表.xlsx
07-13
从0到场均50万GMV，鞋服品牌的视频号直播打法3. 直播场次报表.xlsx
Java语言基础入门教程 Java开发编程基础课程 第6章 字符串 共30页.pptx
07-13
【课程大纲】 第1、2、3章 Java简介 共15页.pptx 第4章 流程控制 共14页.pptx 第5章 数组 共8页.pptx 第6章 字符串 共30页.pptx 第7章 定义类 共10页.pptx 第8章 内部类和异常处理 共18页.pptx 第8章 生成对象 共18页.pptx 第9章 类的高级特性 共12页.pptx 第9章 深度了解变量和方法 共13页.pptx 第10章 理解包 共18页.pptx 第11章 继承、多态和接口 共21页.pptx 第12章 内部类和异常处理 共18页.pptx 第13章 图形用户界面 共31页.pptx 第14章 线程 共22页.pptx
sudo keystone-manage bootstrap --bootstrap-password cqu2022\ --bootstrap-admin-url http://localhost:5000/v3/ \ --bootstrap-internal-url http://localhost:5000/v3/ \ --bootstrap-public-url http://localhost:5000/v3/ \ --bootstrap-region-id RegionOne
06-12
- `--bootstrap-admin-url`：用于设置管理员API终端的URL。 - `--bootstrap-internal-url`：用于设置内部API终端的URL。 - `--bootstrap-public-url`：用于设置公共API终端的URL。 - `--bootstrap-region-id`：用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值