HTML：Boostarp实现个人博客首页

最新推荐文章于 2024-07-23 09:28:19 发布

wangzirui32

最新推荐文章于 2024-07-23 09:28:19 发布

阅读量1k

点赞数 3

分类专栏： Bootstarp HTML 文章标签： html5 css bootstrap

本文链接：https://blog.csdn.net/wangzirui32/article/details/124081877

版权

本文介绍了如何利用HTML5和Bootstrap构建个人博客的首页。通过示例代码和效果图，展示了如何运用Bootstrap框架来设计吸引人的博客起始页面。

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

hello，大家好，我是wangzirui32，今天我们来学习如何使用Boostarp实现个人博客首页，开始学习吧！
HTML代码：

<!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>博客首页</title>
    <!-- 引入Bootstarp3.4.1 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <style>
        .panel-header {
     
            padding-left: 15px;
        }
    </style>
</head>
<body>
	<!-- 首页导航栏 -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
            	<!-- 响应式布局 -->
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="