Come nascondere la barra laterale in bootstrap di default?

Ho un grande riferimento qui come un side-bar per Bootstrap nella progettazione di applicazioni web form: http://startbootstrap.com/template-overviews/simple-sidebar/Come nascondere la barra laterale in bootstrap di default?

ed ecco il suo codice:

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Simple Sidebar - Start Bootstrap Template</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 

</head> 

<body> 

    <div id="wrapper"> 

     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li class="sidebar-brand"> 
        <a href="#"> 
         Start Bootstrap 
        </a> 
       </li> 
       <li> 
        <a href="#">Dashboard</a> 
       </li> 
       <li> 
        <a href="#">Shortcuts</a> 
       </li> 
       <li> 
        <a href="#">Overview</a> 
       </li> 
       <li> 
        <a href="#">Events</a> 
       </li> 
       <li> 
        <a href="#">About</a> 
       </li> 
       <li> 
        <a href="#">Services</a> 
       </li> 
       <li> 
        <a href="#">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /#sidebar-wrapper --> 

     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-lg-12"> 
         <h1>Simple Sidebar</h1> 
         <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, the page content will be pushed off canvas.</p> 
         <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
         <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
        </div> 
       </div> 
      </div> 
     </div> 
     <!-- /#page-content-wrapper --> 

    </div> 
    <!-- /#wrapper --> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Menu Toggle Script --> 
    <script> 
    $("#menu-toggle").click(function(e) { 
     e.preventDefault(); 
     $("#wrapper").toggleClass("toggled"); 
    }); 
    </script> 

</body> 

</html>

Come faccio a nascondere la barra laterale di navigazione prima utilizzando jquery quando la pagina viene caricata e mostra solo la barra laterale quando il pulsante è su "Toggle Menu". La barra laterale in questo codice viene mostrata al caricamento della pagina.

Ecco la funzione di jQuery per la commutazione:

<!-- Menu Toggle Script --> 
<script> 
    $("#menu-toggle").click(function(e) { 
    e.preventDefault(); 
    $("#wrapper").toggleClass("toggled"); 
    }); 
</script>

fonte

2015-09-01 laurence keith albano

defaulty aggiungere classe commutato to sidebar-wrapper div. – suresh

Change

<div id="wrapper">

<div id="wrapper" class="toggled">

che significa che stai dicendo alla barra laterale di essere nascosta di default.

uscita:

Vedi a schermo intero

$("#menu-toggle").click(function(e) { 
 
    e.preventDefault(); 
 
    $("#wrapper").toggleClass("toggled"); 
 
});

/*! 
 
* Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) 
 
* Code licensed under the Apache License v2.0. 
 
* For details, see http://www.apache.org/licenses/LICENSE-2.0. 
 
*/ 
 

 
/* Toggle Styles */ 
 

 
#wrapper { 
 
    padding-left: 0; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled { 
 
    padding-left: 250px; 
 
} 
 
#sidebar-wrapper { 
 
    z-index: 1000; 
 
    position: fixed; 
 
    left: 250px; 
 
    width: 0; 
 
    height: 100%; 
 
    margin-left: -250px; 
 
    overflow-y: auto; 
 
    background: #000; 
 
    -webkit-transition: all 0.5s ease; 
 
    -moz-transition: all 0.5s ease; 
 
    -o-transition: all 0.5s ease; 
 
    transition: all 0.5s ease; 
 
} 
 
#wrapper.toggled #sidebar-wrapper { 
 
    width: 250px; 
 
} 
 
#page-content-wrapper { 
 
    width: 100%; 
 
    position: absolute; 
 
    padding: 15px; 
 
} 
 
#wrapper.toggled #page-content-wrapper { 
 
    position: absolute; 
 
    margin-right: -250px; 
 
} 
 
/* Sidebar Styles */ 
 

 
.sidebar-nav { 
 
    position: absolute; 
 
    top: 0; 
 
    width: 250px; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style: none; 
 
} 
 
.sidebar-nav li { 
 
    text-indent: 20px; 
 
    line-height: 40px; 
 
} 
 
.sidebar-nav li a { 
 
    display: block; 
 
    text-decoration: none; 
 
    color: #999999; 
 
} 
 
.sidebar-nav li a:hover { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    background: rgba(255, 255, 255, 0.2); 
 
} 
 
.sidebar-nav li a:active, 
 
.sidebar-nav li a:focus { 
 
    text-decoration: none; 
 
} 
 
.sidebar-nav > .sidebar-brand { 
 
    height: 65px; 
 
    font-size: 18px; 
 
    line-height: 60px; 
 
} 
 
.sidebar-nav > .sidebar-brand a { 
 
    color: #999999; 
 
} 
 
.sidebar-nav > .sidebar-brand a:hover { 
 
    color: #fff; 
 
    background: none; 
 
} 
 
@media(min-width:768px) { 
 
    #wrapper { 
 
    padding-left: 250px; 
 
    } 
 
    #wrapper.toggled { 
 
    padding-left: 0; 
 
    } 
 
    #sidebar-wrapper { 
 
    width: 250px; 
 
    } 
 
    #wrapper.toggled #sidebar-wrapper { 
 
    width: 0; 
 
    } 
 
    #page-content-wrapper { 
 
    padding: 20px; 
 
    position: relative; 
 
    } 
 
    #wrapper.toggled #page-content-wrapper { 
 
    position: relative; 
 
    margin-right: 0; 
 
    } 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 

 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <meta name="description" content=""> 
 
    <meta name="author" content=""> 
 

 
    <title>Simple Sidebar - Start Bootstrap Template</title> 
 

 
    <!-- Bootstrap Core CSS --> 
 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 
 

 
    <!-- Custom CSS --> 
 
    <link href="css/simple-sidebar.css" rel="stylesheet"> 
 

 
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
 
    <!--[if lt IE 9]> 
 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
 
    <![endif]--> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="wrapper" class="toggled"> 
 

 
    <!-- Sidebar --> 
 
    <div id="sidebar-wrapper"> 
 
     <ul class="sidebar-nav"> 
 
     <li class="sidebar-brand"> 
 
      <a href="#"> 
 
         Start Bootstrap 
 
        </a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Dashboard</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Shortcuts</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Overview</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Events</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">About</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Services</a> 
 
     </li> 
 
     <li> 
 
      <a href="#">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /#sidebar-wrapper --> 
 

 
    <!-- Page Content --> 
 
    <div id="page-content-wrapper"> 
 
     <div class="container-fluid"> 
 
     <div class="row"> 
 
      <div class="col-lg-12"> 
 
      <h1>Simple Sidebar</h1> 
 
      <p>This template has a responsive menu toggling system. The menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will appear/disappear. On small screens, 
 
       the page content will be pushed off canvas.</p> 
 
      <p>Make sure to keep all page content within the <code>#page-content-wrapper</code>.</p> 
 
      <a href="#menu-toggle" class="btn btn-default" id="menu-toggle">Toggle Menu</a> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- /#page-content-wrapper --> 
 

 
    </div> 
 
    <!-- /#wrapper --> 
 

 
    <!-- jQuery --> 
 
    <script src="js/jquery.js"></script> 
 

 
    <!-- Bootstrap Core JavaScript --> 
 
    <script src="js/bootstrap.min.js"></script> 
 

 
    <!-- Menu Toggle Script --> 
 

 

 
</body> 
 

 
</html>

fonte

2015-09-01 05:56:50

Quando la pagina fatta loadingyou Basta attivare e disattivare la barra laterale

Jquery sostenerlo:

$(document).ready(function() { 
    $("#wrapper").toggleClass("toggle"); 
});

fonte

2015-09-01 05:55:24

Inizialmente Aggiungi classe commutato alla sidebar-wrapper. In modo che inizialmente sarà nello stato nascosto. Quando fai clic sul menu, attiva la modalità normale.

<div id="sidebar-wrapper" class="toggled">

fonte

2015-09-01 05:57:52 suresh

Si prega di provare questo uno

codice HTML: Codice

<div class="container"> 
<div class="row"> 
    <div id="colPush" class="span0"></div> 
    <div id="colMain" class="span12"> 
     <a id="trig" class="btn btn-inverse">Sidebar Toggle</a> 
    </div> 

    </div> 
</div>

Css: codice

.row div { 
    height: 200px; 
    -webkit-transition: width 0.3s ease, margin 0.3s ease; 
    -moz-transition: width 0.3s ease, margin 0.3s ease; 
    -o-transition: width 0.3s ease, margin 0.3s ease; 
    transition: width 0.3s ease, margin 0.3s ease; 
} 

.span0 { 
    width: 0; 
    margin-left: 0; 
} 

#colPush { 
    background-color: #A6BFBA; 
} 

#colMain { 
    background-color: #DE4124; 
} 

#trig { 
    margin: 50px; 
} 

.row div + div { 
    margin-left: 0; 
}

jQuery:

$('#trig').on('click', function() { 
    $('#colMain').toggleClass('span12 span9'); 
    $('#colPush').toggleClass('span0 span3'); 
});

DEMO

create-simple-cool-sidebar-menu-with-bootstrap-3

fonte

2015-09-01 05:59:11

Come nascondere la barra laterale in bootstrap di default?

risposta

Problemi correlati