前端笔记之bootstrap博客用例

最新推荐文章于 2024-06-05 17:40:05 发布
原创 最新推荐文章于 2024-06-05 17:40:05 发布 · 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博客用例

前端必备！深入解析Bootstrap框架的强大功能
前端视界的博客
04-15 702
本文旨在系统解析Bootstrap框架的架构设计与实现原理，覆盖核心功能模块、响应式机制、定制化开发等关键技术要点。研究范围包括Bootstrap v5.x最新版本特性，重点分析其CSS架构、JavaScript插件系统以及与现代前端工具的集成方案。通过"原理-实现-应用"三层递进结构展开，首先解析技术架构，其次深入源码实现，最后通过企业级案例演示实际应用。特别设置响应式网格系统的数学模型分析章节，揭示其布局计算原理。
java 搭建论坛_GitHub - NieShaoLiang/bbs: 基于spring boot的java论坛系统
weixin_42576410的博客
02-16 608
JavaBBS社区简介1、JavaBBS是一款使用Java编写的简易社区系统。2、采用前后端分离的机制实现。前台项目通过http访问RESTFulAPI获取信息渲染页面。3、项目技术分层明显,模块分离，采用springboot构建模块。4、前台页面来自FlyUI的开源社区模板5、实现了异常/常用数据库/控制器 代码复用6、使用了DTO层封装数据，保证数据形式的一致运行环境JDK 8MavenMyS...
Bootstrap-Blog：一般的Bootstrap博客，以备将来使用
02-14
这是基于Bootstrap的博客的通用模板 Tailor by modifying fields in blog_data.json in ./statc/blog_content 修订（1/31/2021） 该网站现在使用docker在平台之间移植。 从docker的存储库中实现mongo卷。 安装docker。 从Bootstrap-blog目录运行开发人员模式： docker-compose -f docker-compose.yml up --build 运行生产模式在分离模式下使用pm2： docker-compose -f docker-compose.yml -f docker-compose.prod.yml up --build --detach 要停止运行构建： docker-compose down 要清理停顿的作业：
Bootstrap
weixin_53037175的博客
12-13 617
Bootstrap 来自Twitter，是目前很受欢迎的前端框架。 它是基于HTML、CSS、JAVASRIPT的，简洁灵活，使得Web开发更便捷。 它有大量的组件样式，这也是它的优点也是缺点，如果我们有特殊的需求，得专门去定制这样式，这样的话，一个网站有大量的非Bootsatrap样式存在，那我们得做大量的CSS重写，这样就失去了其框架的意义。 Bootstrap有个很重要的特性—响应式设计。它支持不同终端来显示同一套代码。 1、Bootstrap全局css样式之布局容器和栅格系统 栅格系统用于通过一系列
[Bootstrap]Bootstrap实战:制作简单博客
stay hungry stay foolish
05-07 843
目录背景示意图代码代码结构搭建html body框架使用Bootstrap框架填充内容Bootstrap使用心得总结 背景 上一节，我们讲了3分钟入门Bootstrap，这一节实战Bootstrap制作简单博客，当然是个简单的，有头部，轮播图，商品列表，和尾部。 示意图 代码 代码结构 搭建html body框架 <!--菜单栏 --> <div class="h...
前端项目笔记——网易云音乐、通用后台管理
06-15
本文将围绕“前端项目笔记——网易云音乐、通用后台管理”这一主题，深入探讨相关知识点，主要关注Vue.js框架的运用和其他前端技术的整合。 一、Vue.js框架基础 Vue.js是一款轻量级的渐进式JavaScript框架，以其...
苍穹外卖笔记1-项目介绍和环境搭建，借助小乌龟创建gitee仓库，apifox代替YApi，Swagger
最新发布
m0_73678713的博客
06-05 1439
需求分析->设计->编码->测试->上线运维1 需求分析完成需求规格说明书、产品原型编写。需求规格说明书， 一般来说就是使用 Word 文档来描述当前项目的各个组成部分，如：系统定义、应用环境、功能规格、性能需求等，都会在文档中描述。产品原型，一般是通过网页(html)的形式展示当前的页面展示什么样的数据, 页面的布局是什么样子的，点击某个菜单，打开什么页面，点击某个按钮，出现什么效果，都可以通过产品原型看到。2 设计设计的内容包含 UI设计、数据库设计、接口设计。
【整合实践】：个人博客系统的Spring Boot与Spring Security应用笔记
[【整合实践】：个人博客系统的Spring Boot与Spring Security应用笔记](https://www.jiligamefun.com/wp-content/uploads/2023/06/4467f06b9247bc8158031a167235a14a-2.png) # 摘要 本文针对Spring Boot框架提供了...
2022年Web前端开发流程和学习路线（详尽版）
weixin_47367099的博客
06-13 9703
前端侧重于人机交互和用户体验，后端侧重于业务逻辑和大规模数据处理。理论上，面向用户的产品里，所有问题（包括产品、设计、后端、甚至看不见的问题）的表现形式，都会暴露在前端，而只有部分问题（数据问题、计算问题、安全问题等）暴露在后端，这就意味着前端起到了至关重要的承载和连接作用。前端技术的更新日新月异；前端框架的技术选型百家争鸣；视觉审美的潮流不断更替；可视化效果酷炫无比；用户的运营体系逐渐精细化；适老化、无障碍化、青少年人群的诉求浮出水面；智能设备的升级和适配无穷无尽。所有的这一切，对前端领域和前端同学就一个
Bootstrap 实战之响应式个人博客 （一）
qq_40329976的博客
05-03 7398
一、示例 1、主页 2、博客详情页 3、在线地址 在线地址：入口 Addition：这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github提供了github-page让用户可以免费部署自己的静态站点。更多参考：github-page 在本项目的静态站点部署时与其他的代码...
bootstrap个人博客网站模板
04-02
bootstrap个人博客网站模板
基于MVC+Bootstrap的个人博客系统
02-25
基于MVC+Bootstrap的个人博客系统，供大家一起共同分享学习。
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
如何用bootstrap制作一个属于你自己的博客
ffxw0720的博客吖~
04-07 2015
引子 哟大家好啊，我是非凡小王 前段时间我发了个blink，就是说我做了一个网站然后赚到q了，很多人也想知道怎么做 刚好有个人委托我帮他做一做博客 所以大家就跟着我的脚步从0开始做一个博客吧！！！ 方案 因为直接写的话做出来的肯定不好看 所有都自己写的话十分耗时 所以我们就使用一个名叫bootstrap的框架吧 这个框架也是很多人用的一个框架，是十分好看的 并且支持响应式布局 通俗点来说就是手机...
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 703
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
JQ-6 Bootstrap入门到实战；Bootstrap的（优缺点、安装、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；项目实践
qq_54075517的博客
07-25 1511
Bootstrap入门到实战；Bootstrap的（优缺点、安装教程、响应式容器原理、网格系统、响应式工具类、Bootstrap组件）；小项目实践
Bootstrap——Bootstrap学习笔记以及案例分享
Bonsoir777的博客
09-20 1721
本文主要介绍有关bootstrap 的使用方法
java bootstrap bbs_springboot+bootstrap论坛
weixin_39828331的博客
03-04 167
【实例简介】基于Java开发的论坛系统，内置mysql数据库,自动建立索引，里面包含安装教程。【实例截图】【核心代码】beetl-bbs└── beetl-bbs├── README.md├── intall-mysql.sql├── pom.xml├── show.png├── show2.png├── src│ └── main│ ├── java│ │ └──...
基于Backbone和RequireJS的笔记本应用测试与开发指南
这个文件可能包含了用来测试笔记本应用程序各个功能的测试用例，以及一些可能用到的依赖文件或配置文件。 通过以上的分析，我们可以得出这个测试应用程序是一个具备丰富的前端技术栈，并且以模块化和依赖管理为中心...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值