Bootstrap create a system template with a left-folded menu (a) _javascript tips

1. Foreword

Recently need to do a background management system, I intend to use bootstrap to get a nice background template. Many templates on the web I feel the CSS and JS a bit heavy.

So I intend to rely entirely on bootstrap to build a template of their own.

Start with the collapse menu on the left. Look at the picture.

2. CSS Code

The following is a custom CSS code, because the system is internal use, so the priority is to consider the chrome,firefox ie.

#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 Bott
OM, 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.activ E > 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 {Co
Lor: #FFF; #main-nav.nav-tabs.nav-stacked > Li {margin-bottom:4px}/* Define level Two menu style/. secondmenu a {font-size:10px; color: #4A5
15B; 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; }

3. HTML Code

The HTML code is relatively simple. Data-toggle http://v3.bootcss.com/components/here is an introduction.

<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" > Configuration management System (traffic monthly) </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> home </a> </li> <li> <a href=" # Systemsetting "class=" Nav-header collapsed "data-toggle=" collapse "> <i class=" Glyphicon glyphicon-cog ">< /i> System Management <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> User management </a></li> &Lt;li><a href= "#" ><i class= "Glyphicon glyphicon-th-list" ></i> Menu Management </a></li> <li ><a href= "#" ><i class= "Glyphicon glyphicon-asterisk" ></i> role management </a></li> <li> <a href= "#" ><i class= "Glyphicon glyphicon-edit" ></i> Modify password </a></li> <li><a href= "#" ><i class= "Glyphicon glyphicon-eye-open" ></i> log view </a></li> </ul> </li > <li> <a href= "./plans.html" > <i class= "Glyphicon glyphicon-credit-card" ></i> Material management </a&
Gt </li> <li> <a href= "./grid.html" > <i class= "Glyphicon glyphicon-globe" ></i> distribution Configuration < Span class= "label label-warning pull-right" >5</span> </a> </li> <li> <a href=. Charts.html "> <i class=" Glyphicon glyphicon-calendar "></i> chart statistics </a> </li> <li> <a href= "#" > <i class= "Glyphicon glyphicon-fire" ></i> about system </a>  </li> </ul> </div> <div class= "col-md-10" > main window </div> </div> </div>

4. References to CSS and JS

<link href= "Http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel= "stylesheet" >
<script Src= "Http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" ></script>
<script src= "http:// Cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js "></script>

Recommended bootstrap related topics in cloud-dwelling communities:

Bootstrap component Operation tips

Bootstrap Related Knowledge Summary

The above is a small set to introduce the bootstrap to create a left-side folding menu system template (a) of the relevant knowledge, the next article will be to repair some of the bug specific details you can refer to bootstrap to build a left-side folding menu system Template (ii) This chapter introduces, If you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!