bootstrap文字，图片

伯思

于 2022-08-19 18:40:20 发布

阅读量1.4k

点赞数

文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/hbl020305/article/details/126430174

版权

CSS选择器也支持以 .h1 — .h6 方式引用，这样可以使字体样式呈现出标题效果，不同是引
用 .h1 — .h6 的文本段不会视作HTML的标题元素（往往SEO、读屏器和机器识别时对此很敏感-
译者注）

<p class="h1">h1. Bootstrap heading</p>
 <p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<p class="h4">h4. Bootstrap heading</p>
<p class="h5">h5. Bootstrap heading</p>
<p class="h6">h6. Bootstrap heading</p>

bootstrap可以传统的标题元素设计得更漂亮，以迎合你的网页内容。如果你想要一个标题醒目，考虑
使用显示标题——一种更大型、鲜明的标题样式

<h1 class="display-1">Display 1</h1>
 <h1 class="display-2">Display 2</h1>
<h1 class="display-3">Display 3</h1>
<h1 class="display-4">Display 4</h1>

如果需要居中对齐或右对齐，使用 .text-center 、 .text-right 方法配合即可

<blockquote class="blockquote text-center">
<p class="mb-0">爱上一个地方，就应该背上包去旅行，走得更远。</p>
<footer class="blockquote-footer">出自商务印书馆的 <cite title="Source
Title">《新华字典》</cite></footer>
</blockquote>

响应式图片

在Bootstrap中，给图片添加 .img-fluid 样式，或定义 max-width:
100% 、 height:auto; 样式，即可赋得响应式特性，图片大小会随着父元素大小同步缩放

<img src="..." class="img-fluid" alt="Responsive image">

可以使用 .img-thumbnail 属性来使图片自动被加上一个带圆角且1px边界的外框缩略图样式（你
也可以使用系统提供的边隙间距方法，如 .p-1 再加上边框颜色定义达成）

<img src="..." alt="..." class="img-thumbnail">

对于 .block 属性的块状图片，我们也可以使用浮动定义规范或文字对齐规范，来实现对图像的
对齐、浮动控制，带 .block 块属性的图片，可以自动获得 .mx-auto 的位置对齐属性.

<img src="..." class="rounded float-left" alt="...">
 <img src="..." class="rounded float-right" alt="...">




<img src="..." class="rounded mx-auto d-block" alt="...">





<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>

小案例：

<!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">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <script src="js/jquery-3.6.0.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <style>
        .mt-6 {
            margin-top: 66px !important;
        }
        
        .clcdjq h2,
        .clcdfg h2,
        .clcdxwzq h2 {
            color: #ef05f2;
        }
        
        .clcdjq h2+p,
        .clcdfg h2+p,
        .clcdxwzq h2+p {
            font-size: 30px;
        }
        
        .clcdfg {
            background-color: #f8f9fb;
        }
        
        footer {
            height: 200px;
            background-color: #353a40;
        }
    </style>
</head>

<body>
    <!-- 导航 -->
    <header>
        <nav class="navbar navbar-expand-lg navbar-light bg-dark fixed-top">
            <a class="navbar-brand" href="#">
                <img src="images/logo.png" alt="" width="40" height="40">