bootstrap实现 — 个人简介

最新推荐文章于 2022-11-14 12:03:39 发布

Z2Min_

最新推荐文章于 2022-11-14 12:03:39 发布

阅读量8.4k

点赞数 15

分类专栏： Web

本文链接：https://blog.youkuaiyun.com/queen00000/article/details/101708322

版权

本文介绍了如何利用Bootstrap框架来构建一个吸引人的个人简介页面。通过提供的效果图和源码，读者可以了解到具体实现步骤和Bootstrap组件的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现：bootstrap

效果图：

源码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>个人简介</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <style>
        #bg {
            background-image: url("images/head.jpg");
            background-size: cover;
        }

        #end {
            font-size: 18px;
            text-align: center;

            background-color: darkgray;
        }
    </style>
</head>

<body>
    <div id="bg" class="jumbotron jumbotron-fluid">
        <div class="container">
            <h1>Hello！欢迎进入无敌敏的个人信息界面</h1>
        </div>
    </div>

    <div class="container">
        <h2 class="text-primary">图片展示</h2>
        <hr>
        <div class="row">
            <div class="col-md-4">
                <img src="images/3.jpg" class="rounded img-fluid">
            </div>
            &

最低0.47元/天解锁文章