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

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!