Bootstrap creates a system template for the left-side folding menu (1). bootstrap Template

Bootstrap creates a system template for the left-side folding menu (1). bootstrap Template

1. Preface

Recently I need to create a background management system. I plan to use bootstrap to create a nice background template. Many templates on the internet I think css and js are a little heavy.

Therefore, we plan to build a template of our own Based on bootstrap.

Start with the fold menu on the left. See the graph.

2. CSS code

The following is a custom css code. Because the system is used internally, chrome is preferred and IE is not considered in firefox.

# 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%, # 3c4049100%); 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 ;} /* define the level-2 menu style */. 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 ;}

3. HTML code

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

<Div class = "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 (Monthly Traffic package) </a> </div> <div class = "container-fluid"> <div class = "row"> <div class = "col-md-2 "> <ul id =" main-nav "class =" nav-tabs nav-stacked "style =" "> <li class =" active "> <a href =" # "> <I class =" glyphicon-th-large "> </I> homepage </a> </li> <a href =" # systemSetting" class = "nav-header collapsed" data-toggle = "collapse"> <I class = "glyphicon-cog"> </I> system management <span class = "pull- right glyphicon-chevron-down "> </span> </a> <ul id =" systemSetting "class =" nav-list collapse secondmenu "style =" height: 0px; "> <li> <a href =" # "> <I class =" glyphicon-user "> </I> user management </a> </li> <li> <a href = "#"> <I class = "glyphicon-th-list"> </I> menu management </a> </li> <a href = "#"> <I class = "glyphicon-asterisk"> </I> role management </a> </li> <a href =" # "> <I class =" glyphicon-edit "> </I> change the password </a> </li> <a href =" # "> <I class = "glyphicon-eye-open"> </I> View logs </a> </li> </ul> </li> <a href = ". /plans.html "> <I class =" glyphicon-credit-card "> </I> material management </a> </li> <a href = ". /grid.html "> <I class =" glyphicon-globe "> </I> distribution configuration <span class =" label-warning pull-right "> 5 </span> </a> </li> <a href = ". /charts.html "> <I class =" glyphicon-calendar "> </I> chart Statistics </a> </li> <a href =" # "> <I class = "glyphicon-fire"> </I> about systems </a> </li> </ul> </div> <div class = "col-md-10"> Main Window </div>

4. referenced 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>

Bootstrap related topics are recommended for the help house:

BootStrap component Operation Skills

BootStrap knowledge Summary

The above section describes how Bootstrap creates a left-side folding menu system template (I, in the next article, we will fix some bugs. For details, refer to Bootstrap to create a left-side folding menu system template (II, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!