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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.