bootstrap 标题居中加颜色_Bootstrap的图文区样式

最新推荐文章于 2022-08-18 11:25:24 发布

尾崎秀実

最新推荐文章于 2022-08-18 11:25:24 发布

阅读量682

点赞数

文章标签： bootstrap 标题居中加颜色

本文链接：https://blog.csdn.net/weixin_30676505/article/details/113581930

版权

本文介绍了如何在Bootstrap中实现标题居中并添加颜色，同时讲解了如何处理图片的响应式布局，建议使用.img-fluid类确保图片在不同设备上的适应性。标题的对齐方式可以通过.text-right、.text-left和.text-center类来设置。

摘要由CSDN通过智能技术生成

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。

Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结合。

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
		integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
	<title></title>
</head>

<body>
	<div class="container">
		<div class="row">
			<figure class="figure">
				<img src="images/1140.jpg" class="img-fluid rounded figure-img" alt="">
				<figcaption class="figure-caption text-center">一叶知秋</figcaption>
			</figure>
		</div>
	</div>
</body>

</html>

标题对齐可以使用：右对齐.text-right、左对齐 .text-left、居中对齐 .text-center。

尾崎秀実

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
bootstrap 标题居中加颜色_Bootstrap的图文区样式

如果你需要显示的内容区包括了一个图片和一个可选的标题，可使用.figure样式定义。Bootstrap的.figure以及.figure-caption类，为HTML5的<figure>以及<figcaption>元素提供了一个基准样式处理。默念认的图片系统不会定义明确的大小，因此请务必将该.img-fluid类添加到您的<img>标签中才能实现与响应式的完美结...
复制链接

扫一扫