31.3 Bootstrap组件：导航条、分页条

最新推荐文章于 2022-05-07 11:46:20 发布
最新推荐文章于 2022-05-07 11:46:20 发布
阅读量921 收藏
点赞数
分类专栏： 02 javaee
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Birdmotianlun/article/details/109407269
版权

目录

组件：导航条

组件：分页条

JavaScript插件：轮播图

组件：导航条

<body>
<nav class="navbar navbar-default">
    <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="#">Brand（首页）</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="#">Link（类型1） <span class="sr-only">(current)</span></a></li>
                <li><a href="#">Link（类型2）</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">One more separated link</a></li>
                    </ul>
                </li>
            </ul>
            <form class="navbar-form navbar-left" role="search">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="Search">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">Link</a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Action</a></li>
                        <li><a href="#">Another action</a></li>
                        <li><a href="#">Something else here</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">Separated link</a></li>
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
</body>

 

 

组件：分页条

<nav>
    <ul class="pagination">
        <li>
            <a href="#" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
            </a>
        </li>
        <li class="disabled"><a href="#">1</a></li>
        <li class="active"><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>
</body>

 

birdlun
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap-导航条-栅格系统-Carousel(轮播效果)-标签页
01-21
bootstrap 导航条 栅格系统 Carousel(轮播效果) 标签页 简单好用有注释效果图在 http://blog.csdn.net/dingsai88/article/details/42970767
JS组件Bootstrap导航条使用方法详解
10-22
主要为大家详细介绍了JS组件Bootstrap 导航条的使用方法，感兴趣的小伙伴们可以参考一下
bootstrap的常用组件和栅格式布局
weixin_30312557的博客
05-01 103
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 因为Bootstrap需要jquery的支持，所以在使用Bootstrap之前要先把jquery插件导入，并且要把bootstrap.js文件放在jquery.js之后改动方可生效。 Bootstrap中有许多好用的组件，只要以规定的class等命名就可以轻松使用这...
bootstrap-分页导航（翻页分页导航）
weixin_34289454的博客
05-25 197
1.运行效果如图所示2.实现代码如下<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <title>分页导航（翻页分页...
bootstrap-路径导航 分页 进度条
qq_39396275的博客
08-05 415
路径导航 &lt;ol class="breadcrumb"&gt; &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;Library&lt;/a&gt;&lt;/li&gt; &
BootStrap响应式导航条实例介绍
09-02
响应式导航条就是可以在不同的设备下查看不同的效果。这篇文章主要介绍了BootStrap响应式导航条实例介绍的相关资料，小编认为本文介绍的非常的不错，特此分享给大家，供大家参考
基于bootstrap实现收缩导航条
08-31
主要介绍了基于bootstrap实现收缩导航条的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
BootStrap 导航条实例代码
08-30
本文通过实例代码给大家介绍了bootstrap导航条效果，代码简单易懂，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
Bootstrap黑色主题分页导航样式
12-13
这是一款黑色主题的Bootstrap分页导航样式。该分页导航样式通过简单的CSS代码，将原始的bootstrap分页美化为好看的黑色主题导航样式。
Bootstrap每天必学之响应式导航、轮播图
09-02
Bootstrap每天必学之响应式导航、轮播图,本文的主要内容是在导航条的下方做一张轮播图，自动播放最新的重要动态，感兴趣的小伙伴们可以参考一下
带有导航条和轮播图效果的网站设计.zip
08-05
使用DW工具，带有轮播图效果和导航条的网站设计工程实训，有十余个静态网页组成，制作较为精美，可以评论进行了解查看
6_bootstrap之导航条|轮播图|排版|表单元素|分页
weixin_30385925的博客
12-06 217
8、导航条 BootStrap已经提供了完整的导航条实例，通常情况下，我们仅需进行简单修改即可使用。 帮助手册位置：组件-------导航条 9、轮播图 BootStrap已经提供了完整的轮播图实例，通常情况下，我们仅需进行简单修改即可使用。 帮助手册位置：JavaScript插件---Carousel 轮播图DIV的定时换图属性： data-interval...
用Bootstrap网站主页(轮播图、导航栏、栅格系统)
weixin_622464的博客
11-11 3273
效果如图： 主要代码： index.html <!DOCTYPE html> <html lang="zh-CN"> <!--指定为中文-中国--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
Bootstrap 导航与轮播
qq_40263927的博客
08-04 438
学习bootstrap 框架不仅要知道里面的组件如何使用，更重要的是如何改变它组件的样式。以下是bootstarp的导航与轮播组件的使用。 1.html部分： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta ht...
Bootstrap02(导航栏，轮播图及增加界面的制作)
weixin_65474399的博客
05-07 1833
前言： 上篇给大家介绍了省市联动的制作和一些bootstrap的基本使用，今天来继续给大家介绍一下如何用bootstrap来排出比上篇更好看的界面。 目录 前言： 一，主界面的制作 1.效果图： 主界面： 增加界面： 2.代码详情： index.jsp：（主界面） insert.jsp:（增加界面） biz包 IGoodsBiz.java： IRegionBiz.java： dao包 IGoodsDao.java： IRegionDao.java： filter包 En.
BootStrap学习(三)——重写首页之导航栏和轮播图
anjiukonghe77852的博客
08-29 467
1、按钮 1）帮助文档：http://v3.bootcss.com/css/#buttons 2）.btn-lg、.btn-sm、.btn-xs可以设置按钮的不同尺寸 3）.active类设置按钮的激活状态，其表现为被按压下去（底色更深、边框颜色更深、向内投射阴影）。 2、导航栏帮助文档：http://v3.bootcss.com/components/#navbar 　 ...
Bootstrap——分页，翻页，标签，缩略图
kuuhakuna的博客
12-05 1523
默认分页.pagination<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">»</a><
bootstrap 背景_bootstrap基础快速入门-14 分页pagination组件
weixin_39682511的博客
11-21 90
大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。 bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。 Title .row { margin-bottom: 15px; border-bottom: #f8f8f8 1px solid; }.pager l...
Bootstrap 的分页组件实现分页
最新发布
05-26
Bootstrap 的分页组件非常易于使用，可以方便地实现分页功能。以下是实现分页的简单步骤： 1. 在 HTML 中添加分页组件的基本结构： ```html <span aria-hidden="true">« ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值