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

Source: Internet
Author: User

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

In the previous article, we introduced Bootstrap to create a system template for the left-side folding menu (1). For details, click here.

1. bugs in the previous article

In the previous article, several friends raised questions and bugs.

1>. Is IE supported?

All I wrote was to test Firefox Google browsing. You can add code under IE8 + to achieve compatibility.

<!--[if lt IE 9]><script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script><script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script><![endif]--> 

If you want to be compatible with IE6 super browser, see: http://www.bootcss.com/p/bsie/

2>. Use badge. Thank you for your prompt about dixing.

It depends on your usage habits.

3>. The font sizes under the level-2 menu of the sample code are inconsistent between Firefox and google.Thank you for pointing out dixing.

Chrome does not support fonts smaller than 12px by default because it is debugged on Google browsing.

2. left-side folding menu Full Edition

Interested friends can click to view the effect of demo: http://static.demo.ruyo.net/Bootstrap_left_menu.html2.html

1>. The Arrow varies with the expanded menu.

<A href = "# systemSetting" class = "nav-header collapsed" data-toggle = "collapse"> <I class = "glyphicon-cog"> </I> System manage <span class = "pull-right glyphicon-chevron-toggle"> </span> </a> <ul id = "systemSetting" class = "nav-list collapse secondmenu "style =" height: 0px; "> <li class =" active "> <a href =" # "> <I class =" glyphicon-user "> </I> user management </a> </li> <a href = "#"> <I class = "glyphicon-th-list"> </I> menu management </a> </li> <li> <a href = "#"> <I class = "glyphicon-asterisk"> </I> role management </a> </li> <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>/* control menu arrow */. nav-header.collapsed> span. glyphicon-chevron-toggle: before {content: "\ e114 ";}. nav-header> span. glyphicon-chevron-toggle: before {content: "\ e113 ";}

2>. Select the secondary menu style

.secondmenu a {font-size: 12px;color: #4A515B;text-align: center;}.secondmenu li.active {background-color: #eee;border-color: #428bca;}

Bootstrap related topics are recommended for the help house:

BootStrap component Operation Skills

BootStrap knowledge Summary

The above is the introduction of Bootstrap to create a left-side folding menu system template (II). I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!

Related Article

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.