1. Preface
Recently I need to build a backend management system, and I plan to use bootstrap to create a good-looking backend template. I think the css and js are a bit heavy.
So I plan to rely entirely on bootstrap to build my own template.
Start with the folding menu on the left. Look at the picture.
2. CSS code
The following is the custom CSS code. Since the system is used internally, chrome is preferred and firefox is not considered 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: #E9E9;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%);background: linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);background: linear-gradient(top, #FAFAFA 0%,#E9E9 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%);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;}/*Define secondary 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/ Here is an introduction.
<div role="navigation"><div><div><a href="/Admin/index.html" id="logo">Configuration Management System (Travel Monthly Package)</a></div></div><div><div><ul id="main-nav" style=""><li><a href="#"><i></i>Home</a></li><li><a href="#systemSetting" data-toggle="collapse"><i></i>System Management<span></span></a><ul id="systemSetting" style="height: 0px;"><li><a href="#"><i></i>User Management</a></li><li><a href="#"><i></i>Menu Management</a></li><li><a href="#"><i></i>Role Management</a></li><li><a href="#"><i></i>Modify Password</a></li><li><a href="#"><i></i>Log View</a></li></li><li><a href="./plans.html"><i></i>Material Management</a></li><li><a href="./grid.html"><i></i>Distribution Configuration<span>5</span></a></li><li><a href="./plans.html"><i></i>Distribution Configuration<span>5</span></a></li><li><a href="./charts.html"><i></i>Character Statistics</a></li><li><a href="#"><i></i>About the system</a></li></ul></div><div>Main window</div></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>
Wulin.com recommends bootstrap related topics:
BootStrap component operation skills
Summary of BootStrap related knowledge
The above is the relevant knowledge about Bootstrap creating a system template for the left folding menu (I). In the next article, we will fix some bugs for you. You can refer to Bootstrap creating a system template for the left folding menu (II). This chapter introduces the introduction of Bootstrap creating a system template for the left folding menu (II). If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!