Bootstrap 面包屑导航

最新推荐文章于 2023-08-18 09:47:02 发布
最新推荐文章于 2023-08-18 09:47:02 发布
阅读量275 收藏
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43240792/article/details/90899817
版权 

<html>
    <head>
        <title>Bootstrap 实例 - 面包屑导航</title>
        <link     href="https://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
        <script src="https://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js">            </script>
    </head>
    <body>
        <ol class="breadcrumb">
            <li><a href="#">Home</a></li>
            <li><a href="#">2013</a></li>
            <li class="active">十一月</li>
        </ol>
    </body>
</html>

小例子效果如下：

jsp页面

<head>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <script src="/scripts/jquery.min.js"></script>
    <script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<div class="col-xs-10">
    <section class="panel panel-default panel-201905302052">
        <header class="panel-heading">
           <div class="input-group pull-right input-group-201905310851" id="search">
                <input type="text" placeholder="请输入关键字..." id="searchNameAccept">
                <span class="input-group-btn">
                      <button class="btn" type="button"id="search_data_all">查询</button>
                 </span>
                 <span class="input-group-btn">
                      <button class="btn" type="button" id="reset_data">重置</button>
                 </span>
           </div>
           <ul class="nav nav-pills pull-left nav-pills-201905302053" id="xuanze">
               <li class="active">
                    <a href="#ts-1" data-toggle="pill">待审核的资源申请</a>
               </li>
               <li class>
                   <a href="#ts-2" data-toggle="pill">已处理的资源申请</a>
                </li>
           </ul>
       </header>
       <div class="panel-body">
           <div class="tab-content">
               <div class="tab-pane fade in active" id="ts-1">
                   <table class="table table-201905310828" id="table-list">
                      <thead>
                          <tr class="active">
                                <th class="text-center">资源名称</th>
                                <th class="text-center">资源提供方</th>
                                <th class="text-center">资源类型</th>
                                <th class="text-center">资源使用方</th>
                                <th class="text-center">应用系统</th>
                                <th class="text-center">申请时间</th>
                                <th class="text-center">操作</th>
                           </tr>
                       </thead>
                       <tbody>
                       </tbody>
                    </table>
                     
                <div class="tab-pane fade " id="ts-2">
                   <table class="table table-201905310828" id="table-list-resource">
                        <thead>
                            <tr class="active">
                                <th class="text-center">资源名称</th>
                                <th class="text-center">资源提供方</th>
                                <th class="text-center">资源类型</th>
                                <th class="text-center">资源使用方</th>
                                <th class="text-center">应用系统</th>
                                <th class="text-center">申请时间</th>
                                <th class="text-center">操作</th>
                            </tr>
                         </thead>
                         <tbody>
                         </tbody>
                     </table>
                </div>
             </div>
          </div>
        </section>
    </div>

js：

$(function(){
    serviceApplyInit();
    $("body").on("click",".panel-heading .nav-pills-201905302053>li",function() {
        var count = $(this).index();
      if(count==0){//待审核
            $("#searchNameAccept").val("");
            serviceApplyInit();
        }else if(count==1) {//已处理
          $("#searchNameAccept").val("");
          resAppliedInit();
      }
   });
})

function  serviceApplyInit(){}

function   resAppliedInit(){}

$(function(){
    serviceApplyInit();
    $("body").on("click",".panel-heading .nav-pills-201905302053>li",function() {
        var count = $(this).index();
      if(count==0){//待审核
            $("#searchNameAccept").val("");
            serviceApplyInit();
        }else if(count==1) {//已处理
          $("#searchNameAccept").val("");
          resAppliedInit();
      }
   });
})

function serviceApplyInit() {
    $("#table-list").dataTable().fnDestroy();
    var grid = new Datatable();
    grid.init({
        src: $("#table-list"),
        onSuccess: function(grid) {},
        onError: function(grid) {},
        dataTable: {
            "retrieve": true,
            "columns": [
                {
                    "data": "resource_name",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "org_name",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "type",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "dept",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "system_type",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "create_time",
                    "bSortable": false,
                    //"sWidth":"150px",
                    "sClass":"text-center"
                },
                {
                    "data": "resource_id",
                    "bSortable": false,
                    "sClass":"text-center",
                }
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "render": function(data, type, full) {
                        var text = "<span>"+data+"</span>";
                        if(full.alert_id&&full.alert_id!=''){
                            text = "<i class='fa fa-bell-o' style='color:red;'></i>"+data;
                        }
                        if(full.type == 'service') {
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }else if(full.type == 'table'){
                            return "<a target=\"_blank\" href='#' >"+text+"</a>";
                        }else if(full.type == 'file'){
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }else if(full.type == 'folder'){
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }
                        return data;
                    }
                },
                {
                    "targets": [1],
                    "render": function(data, type, full) {
                        if(data) {
                            return "<span title='"+data+"'>"+data+"</span>";
                        } else {
                            return "--";
                        }
                    }
                },
                {
                    "targets": [2],
                    "render": function(data, type, full) {
                        var text = "";
                        if(data=="table"){
                            text = "库表";
                        }else if(data=="file"){
                            text = "文件";
                        }else if(data=="folder"){
                            text = "文件夹";
                        }else if(data=="service"){
                            text = "服务接口";
                        }else{
                            text = "--";
                        }
                        return text;
                    }
                },
                {
                    "targets": [3],
                    "render": function(data, type, full) {
                        if(data){
                            return "<span title='"+data+"'>"+data+"</span>";
                        }
                        else{
                            return "<span title='"+full.apply_org_name+"'>"+full.apply_org_name+"</span>";
                        }
                    }
                },
                {
                    "targets": [4],
                    "render": function(data, type, full) {
                        if(data == 1){
                            if(typeof(full.system_name) == "undefined"){
                                return "";
                            }
                            else{
                                return "<span title='"+full.system_name+"'>"+full.system_name+"</span>";
                            }
                        }else if(data == 2){
                            return "<span title='测试'>测试</span>";
                        }else if(data == 3){
                            return "<span title='人工校验'>人工校验</span>";
                        }else{
                            return "";
                        }
                    }
                },
                {
                    "targets": [5],
                    "render": function(data, type, full) {
                        return formatTimes(data,'yyyy-MM-dd');
                    }
                },
                {
                    "targets": [6],
                    "render": function(data, type, full) {
                        if(full.status == '6')
                        {
                            if(full.has_condition == '1' )
                            {
                                return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">受理</a>';
                            }
                            else if(full.has_condition == '0' )
                            {
                                return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">受理并审核</a>';
                            }
                        }
                        else
                        {
                            return '<a href="javascript:;" class="js-approval" data-status="' + full.status + '" data-applyid="' + full.id + '" data-type="' + full.type + '">审核</a>';
                        }
                    }
                }
            ],
            "pageLength": 10,
            "bProcessing":true,
            "ajax": {
                "url": getRootPath() + "/usercenter/ResourceApply.do?method=GetResApplyEGov",
                'data' : function (d) {
                    d.searchName=$("#searchNameAccept").val();
                },
                type:"post"
            },
            scrollX:true,
            scrollCollapse:true,
            fixedColumns:{
                leftColumns:0,
                rightColumns:1
            }
        }
    });
    $("#search_data_all").click(function() {
        grid.submitFilter();
    });
    $('#searchNameAll').keydown(function(event){
        if(event.keyCode==13){
            grid.submitFilter();
        }
    });

    //增加重置按钮
    $("#reset_data").click(function(){
        $("#searchNameAccept").val('');
        $("#table-list").DataTable().ajax.reload();
    });

};


var appliedGrid = new Datatable();
function resAppliedInit() {
    $("#table-list-resource").dataTable().fnDestroy();
    appliedGrid.init({
        src: $("#table-list-resource"),
        onSuccess: function(appliedGrid) {},
        onError: function(appliedGrid) {},
        dataTable: {
            "retrieve": true,
            "columns": [
                {
                    "data": "resource_name",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "org_name",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "type",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "dept",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "system_type",
                    "bSortable": false,
                    "sClass":"text-center"
                },
                {
                    "data": "create_time",
                    "bSortable": false,
                    "sClass":"text-center"
                    //"sWidth":"80px"
                },
                {
                    "data": "id",
                    "bSortable": false,
                    "sClass":"text-center",
                  //  "sWidth":"11%"
                }
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "render": function(data, type, full) {
                        var text = "<span>"+data+"</span>";
                        if(full.type == 'service') {
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }else if(full.type == 'table'){
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }else if(full.type == 'file'){
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }else if(full.type == 'folder'){
                            return "<a target=\"_blank\" href='#'>"+text+"</a>";
                        }
                        return data;
                    }
                },
                {
                    "targets": [1],
                    "render": function(data, type, full) {
                        if(data) {
                            return "<span title='"+data+"'>"+data+"</span>";
                        } else {
                            return "--";
                        }
                    }
                },
                {
                    "targets": [2],
                    "render": function(data, type, full) {
                        var text = "";
                        if(data=="table"){
                            text = "库表";
                        }else if(data=="file"){
                            text = "文件";
                        }else if(data=="folder"){
                            text = "文件夹";
                        }else if(data=="service"){
                            text = "服务接口";
                        }else{
                            text = "--";
                        }
                        return text;
                    }
                },
                {
                    "targets": [3],
                    "render": function(data, type, full) {
                        if(data){
                            return "<span title='"+data+"'>"+data+"</span>";
                        }
                        else{
                            return "<span title='"+full.apply_org_name+"'>"+full.apply_org_name+"</span>";
                        }
                    }
                },
                {
                    "targets": [4],
                    "render": function(data, type, full) {
                        if(data == 1){
                            if(typeof(full.system_name) == "undefined"){
                                return "";
                            }
                            else{
                                return "<span title='"+full.system_name+"'>"+full.system_name+"</span>";
                            }
                        }else if(data == 2){
                            return "<span title='测试'>测试</span>";
                        }else if(data == 3){
                            return "<span title='人工校验'>人工校验</span>";
                        }else{
                            return "";
                        }
                    }
                },
                {
                    "targets": [5],
                    "render": function(data, type, full) {
                        return formatTimes(data,"yyyy-MM-dd");
                    }
                },
                {
                    "targets": [6],
                    "render": function(data, type, full) {
                        var content = "";
                        content = '<a href="javascript:void(0);" data-applyid="'+full.id+'" class="show-opinion" title="资源申请信息">查看详情</a>';
                        // if(full.status == '9')
                        // {
                        // 	content += "<a href='#' class='cancel-apply'  data-status='" + full.status + "' data-applyid='" + full.id + "' data-type='" + full.type + "'>收回授权</a>";
                        // }
                        return content;
                    }
                }
            ],
            "pageLength": 10,
            "bProcessing":true,
            "ajax": {
                "url": getRootPath() + "/usercenter/ResourceApply.do?method=GetHandledServiceList",
                'data' : function (d) {
                    d.title=$('#searchNameAccept').val();
                },
                type:"post"
            },
            scrollX:true,
            scrollCollapse:true,
            fixedColumns:{
                leftColumns:0,
                rightColumns:1
            }
        }
    });

    $("#search_data_all").click(function() {
        appliedGrid.submitFilter();
    });
    //增加重置按钮
    $("#reset_data").click(function(){
        $("#searchNameAccept").val('');
        $("#table-list-resource").DataTable().ajax.reload();
    });

/*    //加载优化滚动条
    $('#table-resApplied_wrapper .dataTables_scrollBody').niceScroll({
        cursorwidth: 10,
        cursoropacitymin:0.2,
        cursorcolor:'#ccc',
        cursorborder:'none',
        cursorborderradius: 10
    });
    $(window).resize(function () {
        $('#table-resApplied_wrapper .dataTables_scrollBody').getNiceScroll().resize();
    });*/
}

 

梦里梦见梦不见的
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap 面包屑导航（Breadcrumbs）
shengyin714959的博客
08-14 266
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有class 的无序列表。
Bootstrap <基础十八>面包屑导航（Breadcrumbs）
04-20 220
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有.breadcrumbclass 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加： ...
Bootstrap系列之面包屑导航（Breadcrumb）
老__L的博客
05-28 3027
面包屑导航（Breadcrumb）
bootstrap 面包屑导航
Emily的博客
01-07 683
面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS（bootstrap.min.css）中下面所示的 class 自动被添加： .bre
BootStrap面包屑导航
qq_39529315的博客
05-31 350
  面包屑导航：  我个人的理解是显示出你所在网页的什么位置，如何返回。例如：主页》栏目》XX文章。  使用的是BootStrap的Breadcrumbs属性，源码如下//基础样式.breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radi...
20.Bootstrap面包屑导航和分页导航.rar
08-02
在"20.Bootstrap面包屑导航和分页导航.rar"这个压缩包中，包含了一个视频教程"20.Bootstrap面包屑导航和分页导航.mp4"以及一个可能的演示文稿"PPT演示文稿.ppt"。这些资源旨在教你如何在C#开发的网站中有效地使用...
Bootstrap CSS组件之面包屑导航(breadcrumb)
08-31
以下是对Bootstrap面包屑导航组件的详细解释： 1. **基础样式**： Bootstrap为`.breadcrumb`类提供了预定义的样式，包括内边距、外边距、背景颜色和圆角。这些样式使得面包屑导航在页面中具有良好的视觉效果。 `...
bootstrap+spring boot实现面包屑导航功能(前端代码)
10-16
2. 动态方法：结合服务器端技术如Spring Boot与前端框架如Bootstrap来动态生成面包屑导航，适用于需要动态数据展示的场景。 ### 知识点三：结合Bootstrap和Spring Boot实现面包屑导航 结合Bootstrap和Spring Boot...
BootStrap学习笔记之nav导航栏和面包屑导航
08-31
在本篇学习笔记中，我们将深入探讨Bootstrap中的两个重要导航元素：nav导航栏和面包屑导航。 首先，我们来看nav导航栏。Nav导航栏是网页顶部或侧边的主要导航结构，通常包含网站的主要链接或分类。在Bootstrap中，...
Bootstrap实现面包屑导航。
weixin_46409887的博客
11-20 799
示例： //class会被自动添加 .breadcrumb > li + li:before { color: #CCCCCC; content: "/ "; padding: 0 5px; } 展示效果图: 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 面包屑导航</title>.
Bootstrap4 面包屑导航（Breadcrumb）
最新发布
shengyin714959的博客
08-18 387
面包屑导航是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置，是在用户界面中的一种导航辅助。Bootstrap 中的面包屑导航是一个简单的带有class 的无序列表。
3.8 Bootstrap 面包屑导航(Breadcrumbs)
梁辰兴的博客
07-18 873
Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。
bootstrap之 breadcrumb----面包屑导航
weixin_45846303的博客
05-10 630
Bootstrap 面包屑导航（Breadcrumbs） 面包屑导航（Breadcrumbs）是一种基于网站层次信息的显示方式。以博客为例，面包屑导航可以显示发布日期、类别或标签。它们表示当前页面在导航层次结构内的位置。 Bootstrap 中的面包屑导航（Breadcrumbs）是一个简单的带有 .breadcrumb class 的无序列表。 官网的面包屑navbar导航都是左右两边都是靠边的，下面展示改进之后导航居中，大屏幕是.container效果，移动端是.container-fluid效果： 这
WEB前端网页设计-Bootstrap4 面包屑导航（Breadcrumb）
君逍遥o
04-12 528
面包屑导航是一种基于网站层次信息的显示方式。
bootstrap面包屑导航栏
06-13
Bootstrap 的面包屑导航栏可以帮助用户了解他们在网站或应用程序中的位置。你可以使用以下代码实现一个简单的面包屑导航栏： ``` <nav aria-label="breadcrumb"> <ol class="breadcrumb"> <li class="breadcrumb-item"><a href="#">首页</a></li> <li class="breadcrumb-item"><a href="#">分类</a></li> <li class="breadcrumb-item active" aria-current="page">当前页面</li> </ol> </nav> ``` 这里的 `aria-label` 属性提供了屏幕阅读器的可访问性支持，`breadcrumb` 类指定了一个面包屑导航栏，`breadcrumb-item` 类指定了每一个面包屑导航栏中的一个条目。 `active` 类用于指定当前页面的条目，并使用 `aria-current="page"` 属性来提供更好的可访问性支持。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值