bootstrap 后台管理页面

这篇博客介绍了一个后台管理页面的实现,利用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>
         
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值