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

Source: Internet
Author: User

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!

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.