boostrap和js写个人博客（附源码）

最新推荐文章于 2024-07-24 14:22:29 发布
最新推荐文章于 2024-07-24 14:22:29 发布
阅读量885 收藏 10
点赞数 3
文章标签： html5 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_50898676/article/details/120711254
版权

  国庆上来两天在赶老师布置的个人博客的作业，经过上两次的经验，这次顺利完成了作业，分享大家参考。

    主界面查考csdn的个人界面编写，运用了HTML、css、js、boostrap的内容，使用导航条、轮播图、面板、缩略图等组件。

效果如下：

  源代码：

<!DOCTYPE html>
<!--文档类型声明，需要为HTML的类型-->
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--视口说明，让它兼容移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Document</title>
    <!--引入boostrap前端框架样式-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <style type="text/css">
        h2 {
            text-align: center;
            font-size: 12px;
            color: blue;
        }
        
        h3 {
            text-align: center;
            font-size: 15px;
        }

        h3 {
            text-align: center;
        }
    </style>

    


</head>

<body>
    <!--导航条-->
    <!--代码对齐快捷键 alt+shift+f-->
    <!--流模式：container-fluid；居中对齐：container-->
    <nav class="navbar navbar-default" style="margin-bottom: 0;">
        <div class="container">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">CSDN</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">博客 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">专栏课程</a></li>
                    <li><a href="#">下载</a></li>
                    <li><a href="#">问答</a></li>
                    <li><a href="#">社区</a></li>
                    <li><a href="#">插件</a></li>
                    <li><a href="#">认证</a></li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">查找</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">会员中心</a></li>
                    <li><a href="#">动态</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                            aria-expanded="false">其它 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#" data-toggle="modal" data-target="#myModal2">登入</a></li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal">注册</a></li>
                            <li><a href="#" data-toggle="modal" data-target="#myModal3">修改密码</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>

    <!-- Button trigger modal -->

   

    <!--轮播图-->
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active">
                <img src="./imag/test2.png" alt="...">
                <div class="carousel-caption">
                    <h1>欢迎来看我</h1>
                    <p>你好呀，我是程序员ABC</p>
                </div>
            </div>
            <div class="item">
                <img src="./imag/m6.png" alt="...">
                <div class="carousel-caption">
                    <p>多情自古伤离别，更那堪，零落清秋节</p>
                </div>
            </div>
            <div class="item">
                <img src="./imag/view6.png" alt="...">
                <div class="carousel-caption">
                    <p>世界这么大，我们应该多去看看</p>
                </div>
            </div>
            ...
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>

    <!--头像-->
    <div id="adFailDes">
        <table width="100%" height="100%">
            <tr>
                <td align="center">
                    <img src="./imag/yyqx.jpg" alt="..." align="center" width="70" height="70" class="img-circle" />
                </td>
            </tr>
        </table>
    </div>
    <h2>于北斋（码龄1年）</h2>
    <h3><b>大三秃头狗</b></h3>

    <!--内容区域-->
    <div>

    </div class="container">
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-8">
            <div class="col-md-2">
                <h3>83</h3>
            </div>
            <div class="col-md-2">
                <h3>2</h3>
            </div>
            <div class="col-md-2">
                <h3>184130</h3>
            </div>
            <div class="col-md-2">
                <h3>0</h3>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-8">
            <div class="col-md-2">
                <h3>被访问量</h3>
            </div>
            <div class="col-md-2">
                <h3>原创文章</h3>
            </div>
            <div class="col-md-2">
                <h3>作者排名</h3>
            </div>
            <div class="col-md-2">
                <h3>粉丝数量</h3>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
    </div>

    <!--面板-->
    <div class="row">
        <div class="col-md-3">
            <div class="panel panel-default">
                <div class="panel-heading">详细介绍：</div>
                <div class="panel-body"><br>
                    毕业院校：XX大学<br>
                    于2020-09-17 加入CSDN<br>
                    <h5>

                        爱好：看电影、睡觉、呼吸<br>
                        特点：爱睡觉<br>
                        技能：睡觉<br><br>

                        人生理想：睁眼睡觉
                    </h5>

                </div>
            </div>


        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <nav class="navbar navbar-default" style="margin-bottom: 0;">
                        <div class="container">
                            <!-- Brand and toggle get grouped for better mobile display -->


                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="active"><a href="#">博客 <span class="sr-only">(current)</span></a></li>
                                    <li><a href="#">最近</a></li>
                                    <li><a href="#">文章·2</a></li>
                                    <li><a href="#">问答·0</a></li>
                                    <li><a href="#">课程·0</a></li>
                                    <li><a href="#">收藏</a></li>                                    
                                    <li><a href="#">关注/订阅</a></li>
                                </ul>
                                <form class="navbar-form navbar-left">
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="搜Ta的内容">
                                    </div>
                                    <button type="submit" class="btn btn-default">查找</button>
                                </form>

                            </div><!-- /.navbar-collapse -->
                        </div><!-- /.container-fluid -->
                    </nav>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-2">
                            <img src="./imag/fa.jpg" alt="..." align="center" width="120" height="100" />
                        </div>
                        <div class="col-md-10">
                            <h4>html简绍</h4>
                            <p>称为超文本标记语言，是一种标识性的语言。
                                它包括一系列标签．通过这些标签可以将网络上的文档格式统一，
                                使分散的Internet资源连接为一个逻辑整体。</p>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-2">
                            <img src="./imag/cy.jpg" alt="..." align="center" width="120" height="100" />
                        </div>
                        <div class="col-md-10">
                            <h4>css简绍</h4>
                            <p>CSS是Cascading Style Sheets的缩写，一般翻译为层叠样式表，是用来表现HTML(标准通用标记语言的一个应用）
                                或XML(标准通用标记语言的一个子集）等文件样式的计算机语言。</p>
                        </div>
                    </div>
                    <br>
                    <div class="row">
                        <div class="col-md-2">
                            <img src="./imag/nh.jpg" alt="..." align="center" width="120" height="100" />
                        </div>
                        <div class="col-md-10">
                            <h4>js简绍</h4>
                            <p>JSP是简化Servlet编写页面技术，它将java代码和HTML语句混合在同一个文件中编写，页面动态资源使用java代码，静态资源使用html标签v</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <br>
    <!--底部-->
    <div id="footer">
        <h3>版权所有*CopyRright:<a href="https://blog.csdn.net/qq_50898676?spm=1000.2115.3001.5343&type=blog">http:www.yubeizai.com</a>
            All rights reserved<br />泸ICP备05030066号</h3>
    </div>


</body>

</html>

 后续会有其它自己学到知识的分享提供查考!

想要源码及里面引用的图片等资料可以评论

 

于北斋
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
springboot+bootstrap博客系统源码
12-10
【标题】"springboot+bootstrap博客系统源码"所涉及的知识点主要集中在两个核心部分：Spring Boot和Bootstrap，以及它们如何构建一个博客系统。 【Spring Boot】是Spring框架的一个模块，设计目标是简化Spring应用...
bootstrap个人博客网站模板
04-02
这个“bootstrap个人博客网站模板”是基于Bootstrap框架设计的，适用于创建具有个性化风格的博客站点。 Bootstrap框架的核心特性包括： 1. **网格系统**：Bootstrap的网格系统允许开发者通过简单的类名控制页面...
一款超级简洁的个人博客系统搭建教程（附源码）
m0_48096446的博客
05-14 1826
3.在 “Clone Repository” 窗口中，将 Gitee 上个人简介博客项目的 URL https://gitee.com/little-dark-tony/blog.git 复制到 “Git Repository URL” 输入框中。9.打开 “src/main/java/com/tony/blog/BlogApplication.java” 文件，右键点击该文件，选择 “Run BlogApplication.main()”，启动项目。5.点击 “Clone” 按钮，开始克隆项目。
02 | Bootstrap源码分析（二）
qiushily2030的博客
01-12 1184
netty客户端的启动和服务端启动复用性比较高，特别是NioEventLoopGroup|NioEventLoop等逻辑思想都是一致的，唯一的区别就在于服务端是DoBind、客户端是doResolveAndConnect，客户端这里有一个三次握手的实现，可以结合TCP的三次握手协议对照看看。如果有条件，后期还会补充对应jdk nio、linux epoll等处理逻辑，待续。
Bootstrap 实战之响应式个人博客 （一）
qq_40329976的博客
05-03 6683
一、示例 1、主页 2、博客详情页 3、在线地址 在线地址：入口 Addition：这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github提供了github-page让用户可以免费部署自己的静态站点。更多参考：github-page 在本项目的静态站点部署时与其他的代码...
JAVA计算机毕业设计基于Bootstrap的智能家居网站（附源码+springboot+开题+论文）
杰简程序毕设
04-21 864
其次，通过典型案例的展示和资讯的发布，能够推动智能家居技术的普及和应用，促进智能家居行业的发展。同时，我们将注重网站的安全性和稳定性，采取必要的安全措施和优化手段，确保网站的数据安全和运行稳定。同时，我们将注重数据的安全性和完整性，采取必要的数据加密和备份措施，确保网站数据的安全可靠。我们将根据智能家居产品的特点和市场需求，设置合理的商品分类，并详细展示每个商品的信息，包括产品名称、图片、价格、功能介绍等，方便用户浏览和选择。我们将不断迭代和完善网站的功能和界面，以满足用户的不断变化的需求。
基于JavaEE开发博客系统项目开发与设计(附源码)
03-10 1084
这是一个基于JavaEE开发的一个博客系统。实现了博客的基本功能，前台页面可以进行文章浏览，关键词搜索，登录注册；登陆后支持对文章进行感谢、评论；然后还可以对评论进行评论和点赞。后台可以对文章进行增删改查(支持`MarkDown`文本编辑与发布)，分类分页查找，标签管理等。
html和css样式表格源码,BootStrap CSS全局样式和表格样式源码解析
weixin_39869733的博客
08-03 473
CSS全局样式1、布局容器类样式：.container 和 .container-fluid.container固定宽度并且具有响应式。.container-fluid 自由宽度(100%宽度)。这2个class是直接在body标签下建立一个div标签，class等于这2个中的一个。然后其他内容全部写在这个div标签中即可！例如:BootStrap基础入门标题H1正文正文正文正文正文正文正文正文正...
java毕业设计基于Bootstrap的读书网站设计与实现（附源码、数据库）
bishe98的博客
11-12 312
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。2. 前端：vue+css+javascript+jQuery+easyUI+highcharts。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；
bootstrap--栅格系统详解（源码分析）
weixin_47942860的博客
03-17 2118
对bootstrap源码进行了简单的分析，通过递归可以实现响应式布局，以及介绍了栅格系统的精妙之处。1.bootstrap是什么？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。
java毕业设计基于Bootstrap的家具商城系统设计（附源码、数据库）
bishe98的博客
11-12 253
Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。Springboot + mybatis + Maven + Vue 等等组成，B/S模式 + Maven管理等等。2. 前端：vue+css+javascript+jQuery+easyUI+highcharts。2. 使用IDEA/Eclipse/MyEclipse导入项目，修改配置，运行项目；
基于Django和Bootstrap的博客网站设计源码
04-04
本设计源码提供了一个基于Django和Bootstrap的博客网站。项目包含367个文件，主要使用Python编程语言，并包含了JavaScript、HTML和CSS。文件类型包括133个GZ压缩文件、101个JavaScript脚本文件、32个Python源代码...
基于Bootstrap和Django的博客网站设计源码
04-06
本资源提供了一套基于Bootstrap和Django的博客网站的设计源码，包含367个文件，其中包括133个GZ压缩文件，101个JavaScript脚本文件，以及32个Python源代码文件。此外，还包括27个HTML页面文件，20个SVG矢量文件，...
基于Bootstrap+Django的完整博客平台源码
03-25
项目简介：这是一款基于Bootstrap、Django框架和MySQL数据库开发的完整博客平台源码。项目采用Python为主要编程语言，辅以JavaScript、HTML和CSS等。整个项目包含367个文件，其中主要包括压缩文件133个、JavaScript...
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1710
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 971
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html笔记
weixin_51644244的博客
07-22 2937
/</</</本地访问：file:///D:\Project\html\html01\html01/第一章.htmlhttp://https:// 加密协议网络传输协议 超文本传输协议常见的：** < a >、< strong >、< b >、< em >、< i >、< del >、< s >、< ins >、< u >、< span >、< img />、< input />、< select >、< textarea >、< br />**、等，其中 < span > 标签是最典型的行内元素。
前端开发知识(一)-html
最新发布
modi000的博客
07-24 556
2.前端开发的三剑客：html、css、javascript。Element（饿了么开发的） ：前端组件库。Vue可以简化JavaScpript流程。Ngix：前端服务器。
bootstrap案例源码
03-11
Bootstrap是一个流行的前端开发框架，它提供了一套用于构建响应式、移动设备优先的网站和应用程序的工具和组件。Bootstrap的源码是开源的，你可以在GitHub上找到它的仓库。 Bootstrap的源码包含了HTML、CSS和JavaScript文件，用于定义样式和交互行为。它的源码结构非常清晰，主要分为以下几个部分： 1. 样式文件：Bootstrap的样式文件位于`/scss`目录下，使用Sass语言编写。你可以在这里找到各种样式定义，如按钮、表格、导航栏等。 2. JavaScript文件：Bootstrap的JavaScript文件位于`/js`目录下，包含了一些常用的交互组件和插件，如轮播图、模态框、下拉菜单等。这些文件使用jQuery作为基础库，并通过自定义的插件来实现各种功能。 3. 组件文件：Bootstrap的组件文件位于`/components`目录下，包含了一些可复用的UI组件，如导航栏、卡片、表单等。这些组件可以直接在你的项目中使用，也可以根据需要进行自定义。 4. 示例文件：Bootstrap还提供了一些示例文件，位于`/examples`目录下。这些示例文件展示了如何使用Bootstrap来构建不同类型的网站和应用程序，你可以参考这些示例来学习和使用Bootstrap。 如果你想深入了解Bootstrap的源码，建议你先阅读官方文档，了解其基本用法和组件的使用方法。然后可以通过查看源码文件来学习其实现细节和定制化的方法。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值