bootstrap sidebar menu collapse

The sidebar plays a big role in response design, when the screen is small to the phone's screen, can adapt to the screen size of the sidebar is able to add color to the site, then in the framework of the bootstrap provided the navigation bar and Drop-down menu components, details please go to the official website

, folding effect (collapse)Source file:Mixins/_component-animations.scss:collapse implementation to achieve folding effectJavascripts/bootstrap/collapse.js: Folding Effect implementation 1, $this. Data () Collect all data-*2, Parent Property: Specifies that the current collapse is controlled by that parent, mainly to achieve a more than one control effect, the f

solid #efefef;font-size: 12px;text-align:center;}/*二级菜单鼠标划过样式*/.menu-second li a:hover {text-decoration: none;background-color: #66c3ec;border-top: 1px solid #83ceed;border-bottom: 1px solid #83ceed;border-right: 3px solid #f8881c;border-left: 3px solid #66c3ec;}/*二级菜单选中状态*/.menu-second-selected {background-color: #66c3ec;height:31px;line-height:31px;border-top: 1px solid #83ceed;border-bottom: 1px solid #

= "Second-level accordion-toggle"Data-toggle= "Collapse"data-parent= "#mycollapse"> Iclass= "fa fa-table fa-fw">I>TableIclass= "fa fa-angle-left pull-right">I> a> ulclass= "nav collapse"ID= "Second-level-3"> Li>ahref="#">Database testinga>Li> Li>ahref="#">Database testinga>Li> Li

(options) {// var rand = Math. random (). toString (); // var id = rand. substring (rand. indexOf ('. ') + 1); var url = window. location. protocol + '//' + window. location. host; options. url = url + options. url; id = "tab _" + options. id; $ (". active "). removeClass ("active"); // if the TAB does not exist, create a new TAB if (! $ ("#" + Id) [0]) {// fixed the IFRAME height mainHeight In the TAB = $ (document. body ). height ()-90; // create a new TAB title = ' So when will the Addtabs m

page is really closely related to the left menu, first or look at the tab effect of the JS reference. HTML tags for pages: Bootstrap-tab.js This file encapsulates the Addtabs method. var addtabs = function (options) {//var rand = Math.random (). toString (); var id = rand.substring (rand.indexof ('. ') + 1); var url = window.location.protocol + '//' + window.location.host; Options.u

Nav-collapse" turns the module in the current div into a responsive layout - Divclass= "Collapse Navbar-collapse"> Navigation list - ulclass= "Nav navbar-nav"> class= "Active" is the default selected menu -

">I>@mCList [j]. ModuleNamea>Li> Level Two menu -i++; } } } ul> Li> } } ul>Here's the point.$.widget.bridge (' UIButton ', $.ui.button); var_url = $.geturlparam ("CID"); $(". Sidebar-

DOCTYPE HTML>HTML>HeadLang= "en"> Metaname= "Viewport"content= "Width=device-width"/> MetaCharSet= "UTF-8"> title>title> new Bootstrap core CSS file - Linkrel= "stylesheet"href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> HTML5 Shim and Respond.js for IE8 support of HTML5 elements and media queries - WARNING:Respond.js doesn ' t work if you view the page via file:// -

1. Foreword Recently need to do a background management system, I intend to use bootstrap to get a nice background template. Many templates on the web I feel the CSS and JS a bit heavy. So I intend to rely entirely on bootstrap to build a template of their own. Start with the collapse menu on the left. Look at the p

Css/* left menu */.sidebar-menu{border-right:1pxsolid #c4c8cb;} /* Level menu */.menu-first{height:45px;line-height:45px; background-color: #e9e9e9; border-top:1pxsolid# efefef;border-bottom:1pxsolid #e1e1e1; padding :0;font-size:14px;font-weight:normal; text-align:center;}

Razor View, master page Still not much to say, directly on the code Here's the point. $.widget.bridge (' UIButton ', $.ui.button); var _url = $.geturlparam ("cid"); $ (". Sidebar-menu li a"). each (function () {//Reserved menu open Status var _id = $ (this). Data ("id"); if (_id = = _url) { $ (this). Paren

CaseWith this plugin you can add drop-down menus for almost everything, including navigation bars, tabs, and capsule buttons.For navigation barsThe navigation bar is divided into four sections. The first part of the navigation head, the second part of the navigation column, the third part of form query form, part IV navigation column.[JavaScript]View Plaincopy class="NavBar navbar-default" role="navigation" > class="Navbar-header" > "button" class="Navbar-toggle" data-toggle= "