前端笔记之bootstrap博客用例

原创 于 2019-12-27 15:45:20 发布 · 223 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3 #html5 #前端

本文详细介绍了使用HTML、CSS和JavaScript构建的一个响应式博客布局，包括导航栏、轮播图、文章列表和分页功能。通过Bootstrap框架简化了前端开发过程，实现了良好的用户体验。

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

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>博客</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <style>
        .panel-container {
            margin: 20px auto;
            padding: 20px 0;
            overflow: hidden;
            border-top: 1px solid #e5e5e5;
            border-bottom: 1px solid #e5e5e5;
        }
        .panel-container > div:first-child {
            float: left;
            width: 70%;
        }
        .panel-container > div:last-child {
            float: right;
        }

        .info {
            width: 26%;
        }

        .info a {
            width: 50%;
            height: 50%;
            margin: 0 auto;
        }
        .info p {
            margin: 20px auto;
        }

        .info > div:first-child {
            background-color: #F5F5F5;
            width: 100%;
            min-height: 200px;
            margin-bottom: 20px;
            border-radius: 5px;
            padding: 30px 0;
        }

        #title {
            margin: 10px 0;
        }
        #content {
            margin: 20px 0;
            resize: none;
        }

        .content-list {
            overflow: hidden;
        }
        .navbar-collapse {
            padding-right: 0;
        }
    </style>
</head>
<body>
    <div class="navbar navbar-inverse">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#link-nav">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="#" class="navbar-brand">MyBlog</a>
            </div>
            <div class="collapse navbar-collapse" id="link-nav">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">全部分类</a></li>
                    <li><a href="#">JAVA语言</a></li>
                    <li><a href="#">Mysql数据库</a></li>
                    <li><a href="#">BootStrap</a></li>
                    <li><a href="#">操作系统</a></li>
                    <li><a href="#">算法设计</a></li>
                    <li><a href="#">项目实战</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">登录</a></li>
                    <li><a href="#">注册</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="carousel slide" id="link-carousel" data-ride="carousel" data-interval="5000">
            <div class="carousel-inner">
                <div class="item active">
                    <img src="img/2.webp" alt="">
                    <div class="carousel-caption">轮播图一</div>
                </div>
                <div class="item">
                    <img src="img/1.webp" alt="">
                    <div class="carousel-caption">轮播图二</div>
                </div>
                <div class="item">
                    <img src="img/3.webp" alt="">
                    <div class="carousel-caption">轮播图三</div>
                </div>
                <div class="item">
                    <img src="img/4.webp" alt="">
                    <div class="carousel-caption">轮播图四</div>
                </div>
            </div>
            <a href="#link-carousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#link-carousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>
            <ul class="carousel-indicators">
                <li data-target="#link-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#link-carousel" data-slide-to="1"></li>
                <li data-target="#link-carousel" data-slide-to="2"></li>
                <li data-target="#link-carousel" data-slide-to="3"></li>
            </ul>
        </div>
    </div>
    <div class="container">
        <div class="panel-container">
            <!--文章 -->
            <div>
                <!-- 面板列表 -->
                <div class="panel panel-primary">
                    <div class="panel-heading"><h3 class="panel-title">摘要列表</h3></div>
                    <ul class="list-group content-list">
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-9">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <div class="list-group-item-heading"><strong>双十二购物节</strong></div>
                                            <div class="list-group-item-text">一年等待迎来....</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/2.webp" alt="">
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-9">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <div class="list-group-item-heading"><strong>水果特惠专场</strong></div>
                                            <div class="list-group-item-text">品味世界各地的水果...</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/1.webp" alt="">
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-9">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <div class="list-group-item-heading"><strong>女生专场</strong></div>
                                            <div class="list-group-item-text">赶时髦、购时尚....</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/3.webp" alt="">
                                    </a>
                                </div>
                            </div>
                        </li>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-sm-9">
                                    <div class="list-group">
                                        <div class="list-group-item">
                                            <div class="list-group-item-heading"><strong>男士专场</strong></div>
                                            <div class="list-group-item-text">够酷、够帅、你还在等待...</div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-3">
                                    <a href="#" class="thumbnail">
                                        <img src="img/4.webp" alt="">
                                    </a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <!-- 分页 -->
                <nav class="text-center">
                    <ul class="pagination">
                        <li><a href="#"><span>&laquo;</span></a></li>
                        <li><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#"><span>&raquo;</span></a></li>
                    </ul>
                </nav>
            </div>
            <!-- 个人信息和发表信息 -->
            <div class="info text-center">
                <!-- 个人信息 -->
                <div>
                    <a class="thumbnail" href="#"><img src="img/tx.jpg" alt="" class="img-circle img-responsive"></a>
                    <p>XIYE</p>
                    <p id="dateTime"></p>
                </div>
                <!-- 发表信息 -->
                <div>
                    <h5>记录美好的心情</h5>
                    <form>
                        <input type="text" class="form-control" id="title" placeholder="标题：美好的一天...">
                        <textarea class="form-control" rows="3" id="content" placeholder="今天学会了用Bootstrap写一个博客！^_^"></textarea>
                        <button type="submit" class="btn btn-primary">发表</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    /**
     * 当前日期时间格式
     * @returns {string} 格式化日期时间
     */
    function getNowDataTime() {
        var date = new Date();
        return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日" +
                date.getHours() + "时" + date.getMinutes() + "分" + date.getSeconds() + "秒";
    }

    /**
     * 获取目标位置并设置内容
     */
    function dataTime() {
        document.querySelector("#dateTime").innerHTML = getNowDataTime();
    }

    /**
     * 加载事件
     */
    window.addEventListener('load', function (ev) {
        dataTime();
        setInterval(dataTime, 1000);
    });
</script>
</html>

效果
bootstrap博客用例

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值