使用bootstrap和pageHelper做一个底部分页导航栏

本文建立在springboot基础之上,springboot集成pageHelper请参考我的这篇文章:

https://blog.csdn.net/qq_42722619/article/details/104011419

好了,回归正题:

这是效果图:

这是前台界面:

前台界面:

<!-- 分页栏 -->

<nav aria-label="Page navigation pagination">

    <ul class="pagination">

        <li th:if="${not pageInfo.isFirstPage}">

            <a href="#" aria-label="Previous"

               th:href="@{/index?pageNum=}+${pageInfo.pageNum-1==0?1:pageInfo.pageNum-1}">

                <span aria-hidden="true">&laquo;</span>

            </a>

        </li>

        <li th:each="num : ${pageInfo.navigatepageNums}" th:class="${num==pageInfo.pageNum?'active':''}">

            <a href="#" th:href="@{/index?pageNum=}+${num}">[[${num}]]</a>

        </li>

        <li th:if="${not pageInfo.isLastPage}">

            <a href="#" aria-label="Next"

               th:href="@{/index?pageNum=}+${pageInfo.pageNum+1>=pageInfo.pages?pageInfo.pages:pageInfo.pageNum+1}">

                <span aria-hidden="true">&raquo;</span>

            </a>

        </li>

    </ul>

</nav>

 

有用别忘记点赞哦~ 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用Bootstrap框架可以很方便地实现一个旅游网站的导航栏和主体部分的布局。下面是一个简单的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旅游网站</title> <!-- 引入Bootstrap框架 --> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <!-- 导航栏 --> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">旅游网站</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mr-auto"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">目的地</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink1"> <a class="dropdown-item" href="#">国内</a> <a class="dropdown-item" href="#">国外</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">主题</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2"> <a class="dropdown-item" href="#">自然风光</a> <a class="dropdown-item" href="#">人文历史</a> <a class="dropdown-item" href="#">美食之旅</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">交通</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink3"> <a class="dropdown-item" href="#">飞机</a> <a class="dropdown-item" href="#">火车</a> <a class="dropdown-item" href="#">汽车</a> </div> </li> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">出行天数</a> <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink4"> <a class="dropdown-item" href="#">1-3天</a> <a class="dropdown-item" href="#">4-7天</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">热门旅游</a> </li> <li class="nav-item"> <a class="nav-link" href="#">攻略</a> </li> <li class="nav-item"> <a class="nav-link" href="#">关于我们</a> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="search" placeholder="搜索" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button> </form> <a class="nav-link" href="#"><i class="fa fa-shopping-cart"></i></a> <a class="nav-link" href="#"><i class="fa fa-weibo"></i></a> <a class="nav-link" href="#"><i class="fa fa-weixin"></i></a> <a class="nav-link" href="#">注册</a> <a class="nav-link" href="#">登录</a> </div> </nav> <!-- 主体部分 --> <div class="container"> <div class="row"> <div class="col-md-6"> <img src="image1.jpg" class="img-fluid"> <div class="caption"> <h4>旅游推荐1</h4> <p>城市:北京 价格:1000元</p> </div> </div> <div class="col-md-6"> <img src="image2.jpg" class="img-fluid"> <div class="caption"> <h4>旅游推荐2</h4> <p>城市:上海 价格:2000元</p> </div> </div> </div> <div class="row"> <div class="col-md-3"> <img src="image3.jpg" class="img-fluid"> <div class="caption"> <h4>旅游介绍1</h4> <p>城市:广州 价格:500元</p> </div> </div> <div class="col-md-3"> <img src="image4.jpg" class="img-fluid"> <div class="caption"> <h4>旅游介绍2</h4> <p>城市:深圳 价格:800元</p> </div> </div> <div class="col-md-3"> <img src="image5.jpg" class="img-fluid"> <div class="caption"> <h4>旅游介绍3</h4> <p>城市:成都 价格:1200元</p> </div> </div> <div class="col-md-3"> <img src="image6.jpg" class="img-fluid"> <div class="caption"> <h4>旅游介绍4</h4> <p>城市:重庆 价格:1500元</p> </div> </div> </div> </div> </body> </html> ``` 在上面的代码中,我们使用`navbar`类创建了一个响应式导航栏,并在导航栏中添加了下拉列表、搜索框和图标等元素。我们还使用`container`和`row`类创建了一个网格布局,将主体部分分为两行两列,每个单元格中置了一张图片和相关的介绍。这样,我们就实现了一个简单的旅游网站的布局。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值