<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <nav class="navbar navbar-default navbar-static-top"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle navbar-toggle-sidebar collapsed"> 菜单 </button> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <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="#"> 管理员 </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 navbar-right"> <li><a href="http://www.pingpong-labs.com" target="_blank">访问站点</a></li> <li class="dropdown "> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"> 账户 <span class="caret"></span></a> <ul class="dropdown-menu" role="menu"> <li class="dropdown-header">设置</li> <li class=""><a href="#">链接1</a></li> <li class=""><a href="#">链接2</a></li> <li class=""><a href="#">链接3</a></li> <li class="divider"></li> <li><a href="#">注销</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container-fluid main-container"> <div class="col-md-2 sidebar"> <div class="row"> <!-- uncomment code for absolute positioning tweek see top comment in css --> <div class="absolute-wrapper"> </div> <!-- Menu --> <div class="side-menu"> <nav class="navbar navbar-default" role="navigation"> <!-- Main Menu --> <div class="side-menu-container"> <ul class="nav navbar-nav"> <li class="active"><a href="#"><span class="glyphicon glyphicon-dashboard"></span> 首页</a></li> <li><a href="#"><span class="glyphicon glyphicon-plane"></span> 活动链接</a></li> <li><a href="#"><span class="glyphicon glyphicon-cloud"></span> 静态链接</a></li> <!-- Dropdown--> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#dropdown-lvl1"> <span class="glyphicon glyphicon-user"></span> 子菜单 <span class="caret"></span> </a> <!-- Dropdown level 1 --> <div id="dropdown-lvl1" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接2</a></li> <!-- Dropdown level 2 --> <li class="panel panel-default" id="dropdown"> <a data-toggle="collapse" href="#dropdown-lvl2"> <span class="glyphicon glyphicon-off"></span> 子菜单 <span class="caret"></span> </a> <div id="dropdown-lvl2" class="panel-collapse collapse"> <div class="panel-body"> <ul class="nav navbar-nav"> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> </ul> </div> </div> </li> </ul> </div> </div> </li> <li><a href="#"><span class="glyphicon glyphicon-signal"></span> Link</a></li> </ul> </div><!-- /.navbar-collapse --> </nav> </div> </div> </div> <div class="col-md-10 content"> <div class="panel panel-default"> <div class="panel-heading"> 主页内容 </div> <div class="panel-body"> 静静的过着愉快的日子。老师却不愿意啦。因为班里的味道太冲啦。还有一些家长找到了学校。说老师没有看好他们孩子让她们都尿裤子了，老师于是告诉了我家人。我家人佷和蔼可亲的给我换了开裆裤。说要我以后不要站着撒尿。于是我可怜的屁股和小盆友经常冻的红红的，不过结果女孩子的裤子不再湿啦，但是我的围观率却升高了。每次我去厕所都会跟着好多个小妹妹。大家知道为什么。她们好奇而已，不要以为我说的低俗。其实这是真实的童年.那时候我们都很懵懂，也都很呆萌。四十多个小妹妹就像四十多个小浣熊一样瞪着大眼睛漱着手指用袖子蹭着鼻涕的跟在我后面。后来我明白了这是单一效应。就是像货架上的物品一样。珠宝店里就一颗大钻石所有的物品和物件就会围着它摆。人也一样当生命群中出现了唯一单一不同的时候，那些相同的生命群体就会围着哪个唯一不同的。就像一群母狮子围着一直公狮子一样。也像一群狼围着一只肥羊一样。解释有点多。估计应该明白啦。我当时就是哪个单一。我们在幼儿园里经常被老师描眉画眼。把我和一群小姑娘画的一模一样，有一次我还被家人抱错了。因为没卸妆，，大红脸蛋和大红嘴把大人们给看蒙啦。我们的粉底太后导致没有表情。所以才发生领错的现象。不过后来我还是被很快找到。因为我是唯一穿开裆裤的。我那时经常和静静一起回家，路上爷爷会下车给我和静静一人买个一毛五分钱的烧饼。啊童年的烧饼真好吃。现在再也吃不到爷爷给买的一毛五分的烧饼啦。因为烧饼涨价啦。 </div> </div> </div> <footer class="pull-left footer"> <p class="col-md-12"> <hr class="divider"> Copyright &COPY; 2015 <a href="http://www.pingpong-labs.com">Gravitano</a> </p> </footer> </div>

h1.page-header { margin-top: -5px; } .sidebar { padding-left: 0; } .main-container { background: #FFF; padding-top: 15px; margin-top: -20px; } .footer { width: 100%; } :focus { outline: none; } .side-menu { position: relative; width: 100%; height: 100%; background-color: #f8f8f8; border-right: 1px solid #e7e7e7; } .side-menu .navbar { border: none; } .side-menu .navbar-header { width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav .active a { background-color: transparent; margin-right: -1px; border-right: 5px solid #e7e7e7; } .side-menu .navbar-nav li { display: block; width: 100%; border-bottom: 1px solid #e7e7e7; } .side-menu .navbar-nav li a { padding: 15px; } .side-menu .navbar-nav li a .glyphicon { padding-right: 10px; } .side-menu #dropdown { border: 0; margin-bottom: 0; border-radius: 0; background-color: transparent; box-shadow: none; } .side-menu #dropdown .caret { float: right; margin: 9px 5px 0; } .side-menu #dropdown .indicator { float: right; } .side-menu #dropdown > a { border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body { padding: 0; background-color: #f3f3f3; } .side-menu #dropdown .panel-body .navbar-nav { width: 100%; } .side-menu #dropdown .panel-body .navbar-nav li { padding-left: 15px; border-bottom: 1px solid #e7e7e7; } .side-menu #dropdown .panel-body .navbar-nav li:last-child { border-bottom: none; } .side-menu #dropdown .panel-body .panel > a { margin-left: -20px; padding-left: 35px; } .side-menu #dropdown .panel-body .panel-body { margin-left: -15px; } .side-menu #dropdown .panel-body .panel-body li { padding-left: 30px; } .side-menu #dropdown .panel-body .panel-body li:last-child { border-bottom: 1px solid #e7e7e7; } .side-menu #search-trigger { background-color: #f3f3f3; border: 0; border-radius: 0; position: absolute; top: 0; right: 0; padding: 15px 18px; } .side-menu .brand-name-wrapper { min-height: 50px; } .side-menu .brand-name-wrapper .navbar-brand { display: block; } .side-menu #search { position: relative; z-index: 1000; } .side-menu #search .panel-body { padding: 0; } .side-menu #search .panel-body .navbar-form { padding: 0; padding-right: 50px; width: 100%; margin: 0; position: relative; border-top: 1px solid #e7e7e7; } .side-menu #search .panel-body .navbar-form .form-group { width: 100%; position: relative; } .side-menu #search .panel-body .navbar-form input { border: 0; border-radius: 0; box-shadow: none; width: 100%; height: 50px; } .side-menu #search .panel-body .navbar-form .btn { position: absolute; right: 0; top: 0; border: 0; border-radius: 0; background-color: #f3f3f3; padding: 15px 18px; } /* Main body section */ .side-body { margin-left: 310px; } /* small screen */ @media (max-width: 768px) { .side-menu { position: relative; width: 100%; height: 0; border-right: 0; } .side-menu .navbar { z-index: 999; position: relative; height: 0; min-height: 0; background-color:none !important; border-color: none !important; } .side-menu .brand-name-wrapper .navbar-brand { display: inline-block; } /* Slide in animation */ @-moz-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-webkit-keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @keyframes slidein { 0% { left: -300px; } 100% { left: 10px; } } @-moz-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @-webkit-keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } @keyframes slideout { 0% { left: 0; } 100% { left: -300px; } } /* Slide side menu*/ /* Add .absolute-wrapper.slide-in for scrollable menu -> see top comment */ .side-menu-container > .navbar-nav.slide-in { -moz-animation: slidein 300ms forwards; -o-animation: slidein 300ms forwards; -webkit-animation: slidein 300ms forwards; animation: slidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .side-menu-container > .navbar-nav { /* Add position:absolute for scrollable menu -> see top comment */ position: fixed; left: -300px; width: 300px; top: 43px; height: 100%; border-right: 1px solid #e7e7e7; background-color: #f8f8f8; overflow: auto; -moz-animation: slideout 300ms forwards; -o-animation: slideout 300ms forwards; -webkit-animation: slideout 300ms forwards; animation: slideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } @-moz-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-webkit-keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @keyframes bodyslidein { 0% { left: 0; } 100% { left: 300px; } } @-moz-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @-webkit-keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } @keyframes bodyslideout { 0% { left: 300px; } 100% { left: 0; } } /* Slide side body*/ .side-body { margin-left: 5px; margin-top: 70px; position: relative; -moz-animation: bodyslideout 300ms forwards; -o-animation: bodyslideout 300ms forwards; -webkit-animation: bodyslideout 300ms forwards; animation: bodyslideout 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .body-slide-in { -moz-animation: bodyslidein 300ms forwards; -o-animation: bodyslidein 300ms forwards; -webkit-animation: bodyslidein 300ms forwards; animation: bodyslidein 300ms forwards; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } /* Hamburger */ .navbar-toggle-sidebar { border: 0; float: left; padding: 18px; margin: 0; border-radius: 0; background-color: #f3f3f3; } /* Search */ #search .panel-body .navbar-form { border-bottom: 0; } #search .panel-body .navbar-form .form-group { margin: 0; } .side-menu .navbar-header { /* this is probably redundant */ position: fixed; z-index: 3; background-color: #f8f8f8; } /* Dropdown tweek */ #dropdown .panel-body .navbar-nav { margin: 0; } }

$(function () { $('.navbar-toggle-sidebar').click(function () { $('.navbar-nav').toggleClass('slide-in'); $('.side-body').toggleClass('body-slide-in'); $('#search').removeClass('in').addClass('collapse').slideUp(200); }); $('#search-trigger').click(function () { $('.navbar-nav').removeClass('slide-in'); $('.side-body').removeClass('body-slide-in'); $('.search-input').focus(); }); });