bootstrap页面左侧导航栏右侧网页

浅浅的花香味﹌ 2022-06-03 03:53 242阅读 0赞

我们在浏览网页的时候，左侧导航栏，右侧网页的页面很常见，那么你有好奇过那些炫酷好看的页面是怎么做的吗？
       下面小编带你了解一下这种页面是怎么做的。
       首先介绍一下用的框架：Asp.net mvc+EF+BootStrap

#### **第一步** ####

把asp.net mvc的框架搭建起来，具体的步骤在此就不过多的介绍了（网上有很多的教程）。

#### **第二步** ####

把数据库用EF映射到程序中，具体步骤在此也不过多介绍了。

#### **第三步** ####

web层中添加bootstrap文件，具体如下图。然后把bootstrap文件引入到页面中。可以从官网上下载，也可以直接用国内的链接

#### **小例子** ####

引用的css和js

自定义的CSS样式

#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: center; }
    
            .navbar-static-top { background-color: #212121; margin-bottom: 5px; }
    
            .navbar-brand { background: url('') no-repeat 10px 8px; display: inline-block; vertical-align: middle; padding-left: 50px; color: #fff; }

HTML代码

<div class="navbar navbar-duomi navbar-static-top" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
    <a class="navbar-brand" href="/Admin/index.html" id="logo">配置管理系统（流量包月）
    </a>
    </div>
    </div>
    </div>
    <div class="container-fluid">
    <div class="row">
    <div class="col-md-2">
    <ul id="main-nav" class="nav nav-tabs nav-stacked" style="">
    <li class="active">
    <a href="#">
    <i class="glyphicon glyphicon-th-large"></i>
    首页 
    </a>
    </li>
    <li>
    <a href="#systemSetting" class="nav-header collapsed" data-toggle="collapse">
    <i class="glyphicon glyphicon-cog"></i>
    系统管理
    <span class="pull-right glyphicon glyphicon-chevron-down"></span>
    </a>
    <ul id="systemSetting" class="nav nav-list collapse secondmenu" style="height: 0px;">
    <li><a href="#"><i class="glyphicon glyphicon-user"></i>用户管理</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-th-list"></i>菜单管理</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-asterisk"></i>角色管理</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-edit"></i>修改密码</a></li>
    <li><a href="#"><i class="glyphicon glyphicon-eye-open"></i>日志查看</a></li>
    </ul>
    </li>
    <li>
    <a href="./plans.html">
    <i class="glyphicon glyphicon-credit-card"></i>
    物料管理 
    </a>
    </li>
    <li>
    <a href="./grid.html">
    <i class="glyphicon glyphicon-globe"></i>
    分发配置
    <span class="label label-warning pull-right">5</span>
    </a>
    </li>
    <li>
    <a href="./charts.html">
    <i class="glyphicon glyphicon-calendar"></i>
    图表统计
    </a>
    </li>
    <li>
    <a href="#">
    <i class="glyphicon glyphicon-fire"></i>
    关于系统
    </a>
    </li>
    </ul>
    </div>
    <div class="col-md-10">
    主窗口
    </div>
    </div>
    </div>