bootstrap 后台管理页面_bootstrap后台管理页面-优快云博客

本文链接：https://blog.youkuaiyun.com/shenyingkui/article/details/46314505

这篇博客介绍了一个后台管理页面的实现，利用bootstrap和jQuery UI Bootstrap创建功能，包括点击左侧菜单在右侧生成可关闭的tabs并加载数据。文章提到了对bootgrid.js的修改以隐藏某些按钮，并提供了相关插件的链接和使用资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

声明：左侧菜单借鉴了网上的二级菜单的样式。希望作者不要追究我的法律责任。

功能说明：点击左侧菜单，右侧生成tabs，加载数据。tabs 可关闭。默认选中。

插件说明：使用bootstrapgrid 和jquery ui bootstrap。数据显示使用bootstrapgrid， tabs 生成和删除，使用jquery ui bootstrap。

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="jquery-bootgrid-master/demo/css/bootstrap.css" rel="stylesheet" />
</head>

<style>
#main-nav {
          margin-left: 1px;
      }


       #main-nav.nav-tabs.nav-stacked > li > a {
           padding: 10px 8px;
           font-size: 12px;
           font-weight: 600;
           color: #4A515B;
           background: #E9E9E9;
           background: -moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
           background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
           background: -webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
           background: -o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
           background: -ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
           background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
           border: 1px solid #D5D5D5;
           border-radius: 4px;
       }


        #main-nav.nav-tabs.nav-stacked > li > a > span {
            color: #4A515B;
        }


        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover {
            color: #FFF;
            background: #3C4049;
            background: -moz-linear-gradient(top, #4A515B 0%, #3C4049 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4A515B), color-stop(100%,#3C4049));
            background: -webkit-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -o-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: -ms-linear-gradient(top, #4A515B 0%,#3C4049 100%);
            background: linear-gradient(top, #4A515B 0%,#3C4049 100%);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049');
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#4A515B', endColorstr='#3C4049')";
            border-color: #2B2E33;
        }
 
        #main-nav.nav-tabs.nav-stacked > li.active > a, #main-nav.nav-tabs.nav-stacked > li > a:hover > span {
            color: #FFF;
        }


        #main-nav.nav-tabs.nav-stacked > li {
            margin-bottom: 4px;
        }


        /*定义二级菜单样式*/
        .secondmenu a {
            font-size: 10px;
            color: #4A515B;
            text-align: left;
        }
 
        .navbar-static-top {
           
            margin-bottom: 5px;
        }
 
        .navbar-brand {
            background: url('') no-repeat 10px 8px;
            display: inline-block;
            vertical-align: middle;
            padding-left: 50px;
            color: #fff;
        }
        
       
</style>
<body>
<header id="header" class="navbar navbar-default  navbar-static-top">
            <div class="container-fluid">
                <div class="navbar-header">
                    
                    <a class="navbar-brand" data-i18n="title" href="#" id="logo">配置管理系统
               </a>
               
              <a class="navbar-brand"  class="btn btn-default" onclick="divhide()">
  <span class="glyphicon glyphicon-align-justify"></span> 
</a>