用bootstrap框架做的一个博客首页

最新推荐文章于 2022-04-05 20:19:56 发布
最新推荐文章于 2022-04-05 20:19:56 发布
阅读量4.1k 收藏 28
点赞数 8
文章标签： bootstrap jquery 博客首页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/88417754
版权

@TOC整个博客首页一览
分为head body foot三个部分，其中head分上下两块，body分左右两块，foot分上下两块。

index.html

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>arts</title>
    <script src="../js/jquery.min.js"></script>
    <script src="../bootstrap4/js/bootstrap.js"></script>
    <link rel="stylesheet" href="../bootstrap4/css/bootstrap.css">
    <link rel="stylesheet" href="../bootstrap4/css/bootstrap-reboot.css">
    <link rel="stylesheet" href="../bootstrap4/css/bootstrap-grid.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<body>
    <div class="container-fluid">
        <!--head-->
        <div class="row">
            <div class="col-md-12">
                <!--red-->
                <div class="row bg-red font-color ">
                    <div class="col-md-12">
                        <div class="row">
                            <!--title-->
                            <div id="head-title" class="col-md-12 text-center">
                                <h1>为 WEB 艺术家创造的 PHP 框架。</h1>
                            </div>
                            <!--buttons-->
                            <div class="col-md-12 text-center">
                                <div id="head-button-div">
                                    <button class="btn btn-light red-button font-color">5.1文档</button>
                                    <button class="btn btn-light red-button font-color">5.2文档</button>
                                    <button class="btn btn-light red-button font-color">5.3文档</button>
                                    <button class="btn btn-light red-button font-color">5.4文档</button>
                                    <button class="btn btn-light red-button font-color">5.5文档</button>
                                    <button class="btn btn-light red-button font-color">5.6文档</button>
                                    <button class="btn btn-light red-button font-color">5.7文档</button>
                                    <button class="btn btn-light red-button font-color">5.8文档</button>
                                    <button class="btn btn-light red-button font-color">6.1文档</button>
                                    <button class="btn btn-light red-button font-color">6.2文档</button>
                                    <button class="btn btn-light red-button font-color">6.3文档</button>
                                    <button class="btn btn-light red-button font-color">6.4文档</button>
                                </div>
                            </div>
                        </div>
                        <!--nav-->
                        <div class="row" id="nav-row">
                            <div class="col-md-12">
                                <nav class="navbar navbar-default">
                                    <div class="container">
                                        <ul>
                                            <li><a href="#">首页</a></li>
                                            <li><a href="#">Laravel中文文档</a></li>
                                            <li><a href="#">Packagist中国镜像</a></li>
                                            <li><a href="#">Composer中文文档</a></li>
                                            <li><a href="#">PHP中文手册</a></li>
                                            <li><a href="#">PHP编程之道</a></li>
                                            <li><a href="#">问答社区</a></li>

                                        </ul>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>
    <!--content-->
    <div class="row" id="wapper">
        <div class="col-md-7">
            <!--each block-->
            <div class="content-block">
                <h3 class="text-center">Laravel 5.6 版本正式发布</h3>
                <div class="second-div text-center">
                    作者：&nbsp;<span class="author-name">王赛</span>&nbsp;&nbsp;2019年3月8日
                </div>
                <div class="img-div">
                    <img src="../img/laravel.jpg" alt="">
                </div>
                <p>
                    Laravel 5.6 是继5.5之后Laravel官方发布的最新版本，此版本包含众多新特性，接下来我们说一说几个重要特性，如需查看发布的需求日志，请<span
                        class="light">点击这里</span>。
                </p>
                <button class="btn btn-light red-button font-color">阅读全文</button>
                <hr />
            </div>
            <div class="content-block">
                <h3 class="text-center">Laravel 5.6 版本正式发布</h3>
                <div class="second-div text-center">
                    作者：&nbsp;<span class="author-name">王赛</span>&nbsp;&nbsp;2019年3月8日
                </div>
                <div class="img-div">
                    <img src="../img/laravel.jpg" alt="">
                </div>
                <p>
                    Laravel 5.6 是继5.5之后Laravel官方发布的最新版本，此版本包含众多新特性，接下来我们说一说几个重要特性，如需查看发布的需求日志，请<span
                        class="light">点击这里</span>。
                </p>
                <button class="btn btn-light red-button font-color">阅读全文</button>
                <hr />

            </div>
            <div class="content-block">
                <h3 class="text-center">Laravel 5.6 版本正式发布</h3>
                <div class="second-div text-center">
                    作者：&nbsp;<span class="author-name">王赛</span>&nbsp;&nbsp;2019年3月8日
                </div>
                <div class="img-div">
                    <img src="../img/laravel.jpg" alt="">
                </div>
                <p>
                    Laravel 5.6 是继5.5之后Laravel官方发布的最新版本，此版本包含众多新特性，接下来我们说一说几个重要特性，如需查看发布的需求日志，请<span
                        class="light">点击这里</span>。
                </p>
                <button class="btn btn-light red-button font-color">阅读全文</button>
                <hr />
            </div>
        </div>
        <div class="col-md-5">
            <div id="social" class="content-right col-md-12">
                <h5>社区</h5>
                <hr />
                <p>qq群：4626694081</p>
                <p>问答社区</p>
            </div>

            <div id="download" class="content-right col-md-12">
                <h5>下载</h5>
                <hr />
                <p>
                    <button class="btn btn-light red-button font-color">Laravel&Lumen一键安装包下载</button>
                </p>
            </div>
            <div id="document" class="content-right col-md-12">
                <h5>文档</h5>
                <hr />
                <p>
                    <button class="btn btn-light red-button font-color">5.6文档</button>
                </p>
                <p>
                    <button class="btn btn-light red-button font-color">5.7文档</button>
                </p>
                <p>
                    <button class="btn btn-light red-button font-color">5.8文档</button>
                </p>
                <p>
                    <button class="btn btn-light red-button font-color">5.9文档</button>
                </p>
                <p>
                    <button class="btn btn-light red-button font-color">6.1文档</button>
                    <p>
                        <button class="btn btn-light red-button font-color">6.2文档</button>
                    </p>
                    <p>
                        <button class="btn btn-light red-button font-color">6.3文档</button>
                    </p>
                    <p>
                        <button class="btn btn-light red-button font-color">6.4文档</button>
                    </p>
                </p>
            </div>
        </div>
    </div>
    <!--foot-->
    <div class="row" id="foot-div">
        <!--grey-->
        <div id="other-info-div" class="col-md-12 ">
            <div class="row ">
                <div class="col-md-4  text-center ">
                    <h3 >最新文章</h3>
                    <hr/>
                    <div class="other-info-block-div">
                        <p class="other-info-title">Laravel5.6版本正式发布</p>
                        <p class="other-info-time">2018年02月08日</p>
                    </div>
                    <hr/>
                    <div class="other-info-block-div">
                            <p class="other-info-title">Laravel5.6版本正式发布</p>
                            <p class="other-info-time">2018年02月08日</p>
                     </div>
                     <hr/>
                     <div class="other-info-block-div">
                            <p class="other-info-title">Laravel5.6版本正式发布</p>
                            <p class="other-info-time">2018年02月08日</p>
                    </div>
                    <hr/>
                </div>
                <div class="col-md-4 text-center">
                        <h3>标签云</h3>
                        <hr/>
                        <button class="btn btn-light red-button font-color">...</button>
                </div>
                <div class="col-md-4 text-center">
                        <h3>友链</h3>
                        <hr/>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        <button class="btn btn-light red-button font-color">bootstrap中文网</button>
                        
                </div>
            </div>

        </div>
        <!--black-->
        <div id="company-info-div" class="col-md-12 text-center">
            <p>广播电视节目制作经营许可证：（沪）字第1248号 | 网络文化经营许可证：沪网文 [2016]2296-134号 | 信息网络传播视听节目许可证</p>

        </div>

    </div>
    </div>
</body>

</html>

main.css

body{
    background-color: rgb(230,230,230);
}
.bg-red{
    background-color: rgb(238,90,98);
}
.font-color{
    color: #ffffff;
}
.red-button{
    background-color: rgb(238,90,98);
    border: 1px solid rgb(233, 30,39);
}
#head-title{
    margin: 60px auto;
}
#head-button-div{
    margin-bottom: 50px;
}
.navbar .container ul{
    list-style-type: none;
    height: 40px;
    margin: 0px auto;
}
.navbar .container ul li{
    float: left;
    margin-left: 20px;
    margin-right: 20px;
}
.navbar .container ul li a{
   color: rgb(43,43,43);
   background-color: #ffffff;
   height: 40px;
   display: block;
   line-height: 40px;
}
.navbar .container ul li a:hover{
    display: block;
    color:rgb(238,90,90);
   text-decoration: none;
}
#nav-row{
    background-color: #ffffff;
}
/* **********content-block********** */
#wapper{
    margin-top: 20px;
}
.content-block{
    background-color: #ffffff;
    margin-bottom: 20px;
    padding: 10px 0;
}
.content-block .second-div{
    color: rgb(131, 131, 131);
    font-size: 14px;
}
.content-block .author-name{
    color: rgb(238,90,90);
}
.content-block .img-div{
    margin:10px auto;
    width: 680px;
}
.content-block img{
    width: 680px;
    height: auto;
    
}
.content-block p{
    font-size: 18px;
    width: 670px;
    margin:10px auto;
}
.content-block button{
    margin: 0 0 10px 10px;
}
.light{
    color: rgb(238,90,90);
}
.content-right{
    background-color: #ffffff;
    padding: 10px 10px;
    margin-bottom: 20px;
}
#social p{
    font-size: 14px;
    height: 38px;
    line-height: 38px;
    margin: 0px;
    text-align: left;
}
.content-right p{
    text-align: center;
}
/**************foot***********************/
#foot-div{
    background-color: rgb(24,24,24);
    color: #ffffff;
}
#foot-div .other-info-block-div{
    margin-bottom: 30px;
}
#foot-div #other-info-div h3{
    font-size: 22px;
}
#foot-div .other-info-title{
    color: rgb(131,131, 131);
    font-size: 15px;
    height: 20px;
    line-height: 20px;
    margin: 0px;
}
#foot-div .other-info-time{
    color: rgb(122,122, 122);
    font-size: 11px;
    height: 11px;
    line-height: 11px;
    margin: 0px;
}
#other-info-div{
    margin-top: 10px;
}
#other-info-div button.red-button{
    margin: 5px;
    background-color: rgb(23,23, 23);
    border: 1px solid rgb(123,123, 123);
    font-size: 14px;
}
#other-info-div button.red-button:hover{
    background-color: rgb(238,90,90);
    border: 1px solid rgb(233, 30,39);
}
#company-info-div{
    background-color: #000000;
    padding: 20px;
    font-size: 14px;
}

其他Jquery、bootstrap需要去官网下载，放入项目即可
这个我直接复制的网页上的，搜这个文件名，查看源代码就可以拿到了。我在bootstrap上下载的4版本

wj_秦桑低绿枝
关注
  • 8
    点赞
  • 踩
  • 28
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
后台管理模板 bootstrap框架
06-07
基于bootstrap开发 css+div+javascript 纯纯的前端框架，前端大佬可以路过，基础值得下载研究一番。后台有手就能安排漂亮的前端UI，安心做后台。自适应手机平板电脑
大学生个人网页设计 HTML个人网页制作 web个人网站模板 简单静态HTML个人网页作品
热门推荐
HTML网页设计
07-31 5万+
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
WEB前端简历模板
皮皮的博客
10-15 3万+
WEB前端简历模板 详细资料 姓名：XXX 出生年月：XXXX年X月 名 族：X族 政治面貌：XXXX ...
[前端]基于Bootstrap搭建登录页面，保姆级讲解，面面俱到~~~
qq_41604569的博客
04-05 2万+
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。在前端页面设计占有一定份额，今天手把手带你整除登录界面，最后的结果图如下： 页面要求 主要： 用户名 密码 同意单选框 登录按钮 修饰： 边框 阴影 开撸 1.新建一个login_demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LoginDe
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 630
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
博客 bootstrap
04-09
利用bootstrap实现的个人博客模板，可兼容各种设备，设计新颖
bootstrap博客页面
weixin_30746117的博客
05-06 246
部分效果图： 　　 代码部分： 　　 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="http://cdn.static.runoob.com...
[Bootstrap]Bootstrap实战:制作简单博客
stay hungry stay foolish
05-07 746
目录背景示意图代码代码结构搭建html body框架使用Bootstrap框架填充内容Bootstrap使用心得总结 背景 上一节，我们讲了3分钟入门Bootstrap，这一节实战Bootstrap制作简单博客，当然是个简单的，有头部，轮播图，商品列表，和尾部。 示意图 代码 代码结构 搭建html body框架 <!--菜单栏 --> <div class="h...
用bootstrap框架做一个简单粗糙的博客
OrdnAry的博客
08-11 249
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="css/boot
(学习笔记)Bootstrap写一个简单的博客首页
qq_56508310的博客
03-16 896
Blog网站首页 一、效果图 二、代码部分 整体代码结构 1.导航栏代码 <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header">
html5,bootstrap实现博客系统前端页面
01-11
html5实现的博客主页面index.html，article.html,tags.html,list_xwzj.html,index_lyb.html,index_awy.html等等，包括css,amages,js等，是静态页面，拿来就可以直接用
超漂亮的bootstrap网站首页模板
05-03
一款非常好看的基于bootstrap的首页模板
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个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
Bootstrap程序员个人博客模板 响应式HTML模板 整套模板
01-03
Bootstrap程序员个人技术博客响应式模板基于Bootstrap3.3.5制作，界面简洁，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、前端技术、后端程序、标签云、读者墙、友情链接、404错误页等网站模板页面。
blog:Node + bootstrap的一个简易博客系统
04-02
前台采用div + css布局，使用jQuery，使用bootstrap框架进行样式优化。使用说明clone到本地后，修改数据库文件（config / production.json），参照config / development.json文件中的格式，添加自己本地的数据库信息...
bootstrap的前端页面框架
02-04
用bootstrap做的前端页面框架，适合用作门户、网购、官网、博客等网站
基于Bootstrap+Django的完整博客平台源码
最新发布
03-25
项目简介：这是一款基于Bootstrap、Django框架和MySQL数据库开发的完整博客平台源码。项目采用Python为主要编程语言，辅以JavaScript、HTML和CSS等。整个项目包含367个文件，其中主要包括压缩文件133个、JavaScript...
ThinkPhp5+bootstrap搭建个人博客网站
12-31
使用ThinkPhp5框架，实现了注册登录，发布修改文章，文章标签等功能，前端使用bootstrap，带数据库结构文件，需要使用apache或nginx代理，可直接使用，作为课设或者参考。
bootstrap博客模板
05-15
如果您想使用Bootstrap来创建一个博客模板，可以考虑以下步骤： 1. 下载Bootstrap的最新版本，并在您的HTML文档中引入相关的CSS和JavaScript文件。 2. 设计并实现您的博客页面布局，包括页面的导航、侧边栏、博客...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值