boostrap栅格

最新推荐文章于 2022-12-24 17:01:59 发布
最新推荐文章于 2022-12-24 17:01:59 发布
阅读量119 收藏 1
点赞数
分类专栏： 笔记 文章标签： bootstrap php
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_59975955/article/details/123629733
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

</head>
<body>
    <!-- 导航栏 -->
    <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="#">Blog博客</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="#">PS</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>


      
      <div class="container-fluid ">
          <div class="row">
                <!-- 左侧栏 -->
                <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>

                <!-- 中间部分 -->
                <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>LXT &nbsp; 发布时间：2022年3月16日</div>
                            <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 18 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>1</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>LXT  &nbsp;  发布时间：2022年3月16日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 18 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>1</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>LXT  &nbsp;  发布时间：2022年3月16日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 18 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>1</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月16日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 18 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>1</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月16日</div>
                             <div class="col-md-4"><span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> 18 <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>1</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><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li class="disabled"><a href="#">4</a></li>
                            <li class="disabled"><a href="#">5</a></li>
                            <li>
                              <!-- 往后一页 -->
                              <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                              </a>
                            </li>
                          </ul>
                        </nav>


                      </div>
                    </div>
                </div>
              
                <!-- 右侧栏 -->
                <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"> LXT&nbsp;|&nbsp;luxiaotong</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"> 987654321</span>
                                              </li>
                                              <li class="list-group-item  item_value">
                                                  <span class="item_label"> 微信：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> LXT123456</span>
                                              </li>
                                              <li class="list-group-item  item_value">
                                                  <span class="item_label"> 邮箱：</span>&nbsp;&nbsp;&nbsp;<span class="label_value"> LXT123@128.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>

          </div>
      </div>

     
          <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://fastly.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/5007f2f6d5f442958a502bc471d300cc.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNTk5NzU5NTU=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
m0_59975955
关注
专栏目录
html5,bootstrap实现博客系统前端页面
01-11
html5实现的博客主页面index.html，article.html,tags.html,list_xwzj.html,index_lyb.html,index_awy.html等等，包括css,amages,js等，是静态页面，拿来就可以直接用
响应式框架Bootstrap栅格系统的实例
08-28
Bootstrap栅格系统实例详解 Bootstrap栅格系统是Bootstrap框架中的一种响应式布局系统，它可以根据不同的屏幕尺寸和设备类型来调整页面的布局和样式。下面我们来详解Bootstrap栅格系统的实例。 一、Bootstrap栅格...
(学习笔记)Bootstrap写一个简单的博客首页
qq_56508310的博客
03-16 984
Blog网站首页 一、效果图 二、代码部分 整体代码结构 1.导航栏代码 <nav class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header">
一套不错的基于Bootstrap的博客系统静态页面
weixin_34198797的博客
02-27 925
2019独角兽企业重金招聘Python工程师标准>>> ...
bootstrap博客页面
weixin_30746117的博客
05-06 252
部分效果图： 　　 代码部分： 　　 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <link rel="stylesheet" href="http://cdn.static.runoob.com...
基于bootstrap_博客页面
weixin_30393907的博客
03-04 195
<!DOCTYPE html> <!-- saved from url=(0036)http://v3.bootcss.com/examples/blog/ --> <html lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; c...
Bootstrap栅格系统使用方法及页面调整变形的解决方法
08-31
Bootstrap栅格系统使用方法及页面调整变形的解决方法 Bootstrap栅格系统是Bootstrap框架中的一个非常重要的组件，它可以帮助开发者快速地创建响应式页面布局。栅格系统的出现使得Bootstrap的跨设备布局显示变得...
Bootstrap栅格系统的使用和理解2
08-31
Bootstrap栅格系统是一种流行的网页布局工具，用于创建响应式的网页设计。这个系统基于12列的网格模型，允许开发者在不同设备和屏幕尺寸上灵活地安排内容。在Bootstrap框架中，栅格系统的设计目的是使页面内容能够...
Bootstrap栅格系统简单实现代码
12-11
Bootstrap栅格系统的简单介绍，供大家参考，具体内容如下 栅格系统：总共分为12个，超过12个会自动换行，可嵌套，嵌套也不可超过12个，且不会超过父栏 代码： <html> <head> <meta charset="utf-8"&...
Bootstrap栅格系统.pptx
03-10
Bootstrap栅格系统
经典的Bootstrap个人主页博客模板
10-18
一个经典的Bootstrap个人主页模板，含登录页面、图表，界面简洁大气。
bootstrap个人博客网站模板
04-02
bootstrap个人博客网站模板
Bootstrap程序员个人博客模板 响应式HTML模板 整套模板
01-03
Bootstrap程序员个人技术博客响应式模板基于Bootstrap3.3.5制作，界面简洁，自适应分辨率，兼容PC端和移动端，全套模板，包括首页、前端技术、后端程序、标签云、读者墙、友情链接、404错误页等网站模板页面。
Bootstrap 博客模板
11-15
Bootstrap 博客模板，模板由模板世界提供，扁平化，大气
Bootstrap博客类网站模板
06-05
Bootstrap红色风格，博客类响应式网站模板
用bootstrap开发一个漂亮的博客模板
weixin_42602726的博客
12-24 471
可以使用 Bootstrap 来开发一个漂亮的博客模板，下面是一些建议： 首先，您可以使用 Bootstrap 的响应式布局来让您的博客在各种设备上都能很好地显示。 其次，您可以使用 Bootstrap 的栅格系统来布局您的博客页面。例如，您可以使用 col 类来将内容划分为不同的列，并使用 row 类来将列组合在一起。 您还可以使用 Bootstrap 的组件来为您的博客增添一些交互性。例...
从0到1搭建个人博客-Django(六)
阳寜的博客
10-16 1313
编写模板，生成简单的页面。
【3.1】使用Bootstrap实现静态博客页面
weixin_30782331的博客
09-02 667
1.页面布局设计 　　博客首页 　　文章详情页 2.Bootstrap以及Bootstrap的栅格系统 　　来自美国的Twitter的前端框架 　　提供非常多的控件并附带源码 　　栅格系统把页面均分为十二等份 　　 　　 3.实现静态页面 　　在应用中新建文件templates，然后创建html静态网页 转载于:https://www.cnblogs.c...
用bootstrap十分钟搭建你的博客首页
weixin_30466421的博客
12-14 648
第零章 效果图 第一章 引入文件 引入bootstrap的css文件、js文件和jQuery文件 <!-- 这里我是将bootstrap的css,fonts,js文件都放在目录下，且jQuery更名为jq后放在js的目录下 --> <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css"&gt...
bootstrap栅格
最新发布
08-29
Bootstrap栅格是Bootstrap框架中的一种布局系统，用于创建响应式的网页设计。栅格系统将页面的水平空间划分为12个等宽的列，可以根据不同设备的屏幕大小自动调整列的宽度。通过使用Bootstrap的栅格系统，可以轻松地...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值