(学习笔记)Bootstrap写一个简单的博客首页

最新推荐文章于 2024-04-04 09:50:58 发布
最新推荐文章于 2024-04-04 09:50:58 发布
阅读量955 收藏 8
点赞数
文章标签： 学习 bootstrap 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_56508310/article/details/123528636
版权

Blog网站首页

一、效果图

在这里插入图片描述

在这里插入图片描述

二、代码部分

整体代码结构

在这里插入图片描述

1.导航栏代码

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <!-- 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="#">博客</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 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="#">前端</a></li>
                  <li><a href="#">后端</a></li>
                  <li><a href="#">软件测试</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">UI设计</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">其他分类</a></li>
                </ul>
              </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="#">开源文件</a></li>
                  <li><a href="#">GitHub</a></li>
                  <li><a href="#">反馈</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">联系我们</a></li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

2.左侧导航栏

<div class="col-md-2 ">
                    <div class="panel panel-default">
                        
                            <div class="list-group">
                                
                                <a href="#" class="list-group-item">热门下载</a>
                                <a href="#" class="list-group-item">今日热点</a>
                                <a href="#" class="list-group-item">博客模板</a>
                                
                              </div>
                        
                      </div>
                </div>

3.中间博客内容

 <div class="col-md-7 ">
                  <div class="panel panel-default">
                      <div class="panel-body">

                        <div class="media">
                          <div class="media-left ">
                            <a href="#">
                              <img class="media-object" src="./img/header.jpg" alt="...">
                            </a>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">
                              <a href="#">
                                Python爬虫
                              </a>
                            </h4>
                            <p>Python 爬虫架构主要由五个部分组成，分别是调度器、URL管理器、网页下载器、网页解析器、应用程序（爬取的有价值数据）。
                              调度器：相当于一台电脑的CPU，主要负责调度URL管理器、下载器、解析器之间的协调工作。
                              URL管理器：包括待爬取的URL地址和已爬取的URL地址，防止重复抓取URL和循环抓取URL，实现URL管理器主要用三种方式，通过内存、数据库、缓存数据库来实现。 
                            </p>
                            <!-- glyphicon 的引用 1.不用和其他组件一起用,可以嵌套一个span给分开   2.内容必须为空 -->
                            <div style="margin: 0;padding: 0;" class="col-md-8" ><span class="glyphicon glyphicon-user" aria-hidden="true"></span>CN-Alick &nbsp; 发布时间：2022年3月15日</div>
                            <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 5 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>0</div>
                          </div>
                        </div>



                        <div class="media">
                          <div class="media-left ">
                            <a href="#">
                              <img class="media-object" src="./img/header.jpg" alt="...">
                            </a>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">
                              <a href="#">
                                Python爬虫
                              </a>
                            </h4>
                            <p>Python 爬虫架构主要由五个部分组成，分别是调度器、URL管理器、网页下载器、网页解析器、应用程序（爬取的有价值数据）。
                              调度器：相当于一台电脑的CPU，主要负责调度URL管理器、下载器、解析器之间的协调工作。
                              URL管理器：包括待爬取的URL地址和已爬取的URL地址，防止重复抓取URL和循环抓取URL，实现URL管理器主要用三种方式，通过内存、数据库、缓存数据库来实现。
                             </p>
                             <div style="margin: 0;padding: 0;"  class="col-md-8"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>CN-Alick  &nbsp;  发布时间：2022年3月15日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 5 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>0</div>
                          </div>
                          
                        </div>
                        <div class="media">
                          <div class="media-left ">
                            <a href="#">
                              <img class="media-object" src="./img/header.jpg" alt="...">
                            </a>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">
                              <a href="#">
                                Python爬虫
                              </a>
                            </h4>
                            <p>Python 爬虫架构主要由五个部分组成，分别是调度器、URL管理器、网页下载器、网页解析器、应用程序（爬取的有价值数据）。
                              调度器：相当于一台电脑的CPU，主要负责调度URL管理器、下载器、解析器之间的协调工作。
                              URL管理器：包括待爬取的URL地址和已爬取的URL地址，防止重复抓取URL和循环抓取URL，实现URL管理器主要用三种方式，通过内存、数据库、缓存数据库来实现。
                             </p>
                             <div style="margin: 0;padding: 0;"  class="col-md-8"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>CN-Alick  &nbsp;  发布时间：2022年3月15日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 5 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>0</div>
                          </div>
                        </div>

                        <div class="media">
                          <div class="media-left ">
                            <a href="#">
                              <img class="media-object" src="./img/header.jpg" alt="...">
                            </a>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">
                              <a href="#">
                                Python爬虫
                              </a>
                            </h4>
                            <p>Python 爬虫架构主要由五个部分组成，分别是调度器、URL管理器、网页下载器、网页解析器、应用程序（爬取的有价值数据）。
                              调度器：相当于一台电脑的CPU，主要负责调度URL管理器、下载器、解析器之间的协调工作。
                              URL管理器：包括待爬取的URL地址和已爬取的URL地址，防止重复抓取URL和循环抓取URL，实现URL管理器主要用三种方式，通过内存、数据库、缓存数据库来实现。
                             </p>
                             <div style="margin: 0;padding: 0;"  class="col-md-8"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>CN-Alick  &nbsp;  发布时间：2022年3月15日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 5 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>0</div>
                          </div>
                        </div>

                        <div class="media">
                          <div class="media-left ">
                            <a href="#">
                              <img class="media-object" src="./img/header.jpg" alt="...">
                            </a>
                          </div>
                          <div class="media-body">
                            <h4 class="media-heading">
                              <a href="#">
                                Python爬虫
                              </a>
                            </h4>
                            <p>Python 爬虫架构主要由五个部分组成，分别是调度器、URL管理器、网页下载器、网页解析器、应用程序（爬取的有价值数据）。
                              调度器：相当于一台电脑的CPU，主要负责调度URL管理器、下载器、解析器之间的协调工作。
                              URL管理器：包括待爬取的URL地址和已爬取的URL地址，防止重复抓取URL和循环抓取URL，实现URL管理器主要用三种方式，通过内存、数据库、缓存数据库来实现。
                             </p>
                             <div style="margin: 0;padding: 0;"  class="col-md-8"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>CN-Alick  &nbsp;  发布时间：2022年3月15日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 5 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>0</div>
                          </div>
                        </div>

                        
                        <!-- 分页栏 -->
                        <p></p>
                        <nav aria-label="Page navigation">
                          <ul class="pagination">
                            <li>
                              <!-- 往前一页 -->
                              <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                              </a>
                            </li>
                            <li class="active"><a href="#">1</a></li>
                            <li class="disabled"><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="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                          </ul>
                        </nav>


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

4.右侧导航栏

<div class="col-md-3 ">

                  <!-- 公告 面板 -->
                  <div class="panel panel-default">
                    <div class="panel-heading">公告</div>
                    <div class="panel-body">
                      <a href="#">
                        已开通技术之路的小红圈,欢迎大家进圈咨询
                      </a>
                    </div>
                  </div>
                  <!-- 开发者名片 面板 -->
                  <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title">开发者名片</h3>
                    </div>
                      <ul class="list-group">
                        <li class="list-group-item item_value">
                                                 <span class="item_label"> 名称：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> CN-Alick&nbsp;|&nbsp;MTT</span>
                                              </li>
                                  <li class="list-group-item item_value">
                                                 <span class="item_label"> 职业：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> 前端程序员</span>
                                              </li>
                                  
                                              <li class="list-group-item  item_value">
                                                  <span class="item_label"> QQ：</span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="label_value"> 923923923</span>
                                              </li>
                                              <li class="list-group-item  item_value">
                                                  <span class="item_label"> 微信：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> Mtt0923</span>
                                              </li>
                                              <li class="list-group-item  item_value">
                                                  <span class="item_label"> 邮箱：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> Mtt0923@china.cn</span>
                                              </li>
                      </ul>
                  </div>
                  <!-- 链接 面板 -->
                  <div class="panel panel-default">
                    <div class="panel-heading">友情链接</div>
                    <ul class="list-group">
                      <li class="list-group-item itme_value">
                        <span class="item_label"><a href="#">程序员之家 </a> </span>
                      </li>
                    </ul>

                    <ul class="list-group">
                      <li class="list-group-item itme_value">
                        <span class="item_label"><a href="#">博客园地</a> </span>
                      </li>
                    </ul>

                  </div>

                </div>
cat and cats
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Bootstrap程序员个人技术博客响应式模板.zip
12-22
Bootstrap程序员个人技术博客响应式模板.zip
用bootstrap开发一个漂亮的博客模板
weixin_42602726的博客
12-24 447
可以使用 Bootstrap 来开发一个漂亮的博客模板，下面是一些建议： 首先，您可以使用 Bootstrap 的响应式布局来让您的博客在各种设备上都能很好地显示。 其次，您可以使用 Bootstrap 的栅格系统来布局您的博客页面。例如，您可以使用 col 类来将内容划分为不同的列，并使用 row 类来将列组合在一起。 您还可以使用 Bootstrap 的组件来为您的博客增添一些交互性。例...
探索Halo主题：简单Bootstrap构建的博客模板
gitblog_00050的博客
04-04 428
探索Halo主题：简单Bootstrap构建的博客模板 项目地址:https://gitcode.com/CodeLunatic/halo-theme-simple-bootstrap Halo Theme Simple Bootstrap 是一个基于流行的前端框架Bootstrap精心设计的开源博客模板。它以简洁、优雅和响应式的设计为特色，旨在提供一种快速启动个人博客或网站的方式，无论你是开发者...
bootstrap个人博客网站模板
04-02
bootstrap个人博客网站模板
bootstrap搭建一个简单的官网案例附代码
.
01-10 1201
bootstrap搭建一个简单的官网案例附代码
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 638
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
自己动手搭网站（四）：用bootstrap写几个简单的页面
热门推荐
Tao_Shimmer的博客
03-27 1万+
目录前言一、bootstrap简介二、bootstrap环境准备2.1 下载bootstrap2.2 下载jQuery2.3 补充三、bootstrap搭建页面3.1 bootstrap引入项目bootstrap搭建简单页面 前言 这是博主自己动手搭建网站尝试过程的一些记录，上篇electerm远程连接云服务器，部署环境并发布第一个静态页面 自己动手搭建网站系列总目录 上篇写了连接云服务器，并发布一个静态页面，至此，所谓的“网站”总算有了点东西，然而，那确实就是一点东西…接下来的目标是把网站搭建得好看点并实
Bootstrap 实战之响应式个人博客 （一）
qq_40329976的博客
05-03 6673
一、示例 1、主页 2、博客详情页 3、在线地址 在线地址：入口 Addition：这里使用github-page将自己的静态项目免费部署到线上。 如果你只是做一些简单的静态项目做展示，付出这么大的时间和经济成本去专门购买一台云服务器显然是得不偿失的。github提供了github-page让用户可以免费部署自己的静态站点。更多参考：github-page 在本项目的静态站点部署时与其他的代码...
Bootstrap Metronic完全响应式管理模板学习笔记
09-02
对于希望深入学习Bootstrap Metronic的开发者，可以从作者的博客或其他在线资源中找到更多教程和实战案例，例如Bootstrap学习教程和Bootstrap实战教程，这些都可以作为进一步提升技能的参考资料。 总的来说，...
Bootstrap基本组件学习笔记之分页(12)
09-01
在本篇笔记中，我们将专注于Bootstrap中的一个关键组件——分页，这在处理大量数据分页展示时尤其有用。 0x01 默认的分页 Bootstrap的分页组件`.pagination`通过简单的HTML结构即可实现。下面是一个基础的分页示例...
Bootstrap程序员个人博客模板 响应式HTML模板 整套模板
01-03
Bootstrap程序员个人技术博客响应式模板基于Bootstrap3.3.5制作，界面简洁，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、前端技术、后端程序、标签云、读者墙、友情链接、404错误页等网站模板页面。
Bootstrap个人技术博客响应式模板.zip
05-27
Bootstrap个人技术博客响应式模板基于Bootstrap3.3.5制作，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、关于、网页配色、内容页、友情链接、读者墙、标签云、点赞等网站模板页面。
基于Java的网课学习笔记设计源码
最新发布
05-31
本项目名为"基于Java的网课学习笔记设计源码"，是一个使用Java语言开发的高效学习笔记管理系统。这个系统的设计目标是为用户创造一个便捷、高效的在线学习环境，帮助他们更好地整理、记录和管理自己的学习笔记。以下...
Bootstrap学习笔记之Nestable可拖拽树结构
04-23
在本篇学习笔记中，我们将聚焦于Nestable，这是一个基于Bootstrap的可拖拽树结构插件，非常适合用于展示层级关系的数据，如组织结构、菜单或文件系统。 Nestable的基本概念是通过拖放操作来创建和调整嵌套列表的...
课程设计基于Django+Bootstrap的个人博客源码+项目说明.zip
10-11
之前笔记写在本地，目前陆续迁移中 大致分为这几类 Leetcode PythonTip 地质统计学 数据结构 计算机网络 数据库 pytorch 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心...
使用BootStrap制作网页页面
m0_65725031的博客
05-05 9065
今天主要是大家使用BootStrap制作网页页面，在上一篇文章中我们的网页制作就使BootStrap，但是由于涉及的不是很多，也没有和大家讲解，今天主要是教大家BootStrap 5,该版本是最新的相对4来说更加简单，方便我们使用。 BootStrap的基本使用 在百度上面搜索BootStrap的官网，去到官网，官网上有各种我们需要在页面上使用的代码。 我们只需要将代码复制，放置到页面上使用，大家根据需求去对代码进行更改。 BootStrap上手是非常简单的。 BootStrap实操 将我...
JavaScript—使用bootstrap框架做一个网页
weixin_46848251的博客
08-02 7073
本人是通过黑马程序员的教程进行学习的。以下是做一个网页的流程。 目录 第一步分析：分析网页——将网页分成若干部分​ 第二步实现： 1—头部 2—导航条 3—注册页面 4—网站底部1 5—网站底部2 6—网站底部3 第三步功能—表单校验 功能描述： 功能实现 总结 第一步分析：分析网页——将网页分成若干部分 这里将网页置于一个布局容器中，然后将整个网页分成6个大部分，分别实现。 <div class="container"> <!-- 将六个部分代码置于..
用python，Bootstrap5 ,html,css,js做一个漂亮的个人网页的源代码
weixin_42576410的博客
12-23 394
<p>好的，为了使用 Python、Bootstrap5、HTML、CSS 和 JS 创建一个漂亮的个人网页，您可以按照以下步骤操作：</p> <ol> <li>准备工作：</li> </ol> <ul> <li>安装 Python。如果您的计算机上没有安装 Python，请到 Python 官网下载并...
使用bootstrap模仿bootstrap网站首页
xiongzhouxiong的博客
04-08 2649
代码如下：使用的包有bootstrap.min.cssjquery.min.jsbootstrap.min.js&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content=&
用bootstrap写一个博客页面
04-11
当你想使用 Bootstrap 来写一个博客页面时，首先你需要在你的 HTML 文件中引入 Bootstrap 的 CSS 文件。你可以在你的 HTML 文件的 head 标签内通过以下方式引入 Bootstrap 的 CSS 文件： ``` ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值