So erstellen Sie eine linke vertikale Sidebar mit Bootstrap

Ich möchte eine andere Navigationsleiste in meiner Seite mit Bootstrap erstellen - eine vertikale, aber auf der linken Seite zwischen meiner Kopfzeile und meiner Fußzeile, und ich habe auch etwas Text, der sollte Bleiben Sie in der gleichen Position. Was ist der beste Weg, es zu tun? Irgendwelche Vorschläge?So erstellen Sie eine linke vertikale Sidebar mit Bootstrap

Meine HTML/CSS-Codes sind:

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>xxx</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
     <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 

<style type="text/css"> 
     html { 
      position: relative; 
      min-height: 100%; 
     } 
     body { 
      margin-bottom: 160px; 
       } 

     footer { 
      position: absolute; 
      bottom: 0; 
      left:0; 
      width: 100%; 
      height: 140px; 
      background-color:#555; 
      } 

      hr { 
      height: 1px; 
      background-color:#555; 
      margin-top: 30px; 
      margin-bottom: 30px; 
      width: 100%; 
     } 

    .custom{ 
    color: white; 
    background-color:black; 
    height: 85px; 
    } 

    </style> </head> 
    <body> 

    <div class="container-fluid"> 
    <nav class="navbar navbar-default"> 

       <div class="navbar-header"> 
       <a class="navbar-brand" href="#">Test</a> 
       </div> 

       <div id="navbar" class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class='active'><a href="#">Home</a></li> 
        <li><a href="#"> Team</a></li> 
        <li><a href="#">Help</a></li> 
       </ul></div></nav> 

    <div class="row"> 
    <div class="col-sm-12 custom"> 
    <h2><strong>Test -test-test</strong></h2> 
    <h4>bla bla bla</h4> 
    </div></div><BR> 


    <div class="container"> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textvvSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    <p class="text-justify">Some textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p><BR> 
    </div> 

    <footer> 
     <div class="container"> 
     <div class="row"> 
     <div class="col-sm-12 text-center"> 
     <image style="height:80px" src="/footer_image/Logo.gif"></image> 
     </div></div></div> </footer> 

    </body> 
    </html>

dank Clarissa

Quelle

2016-09-16 Paul

Vorteile Ihrer Spalte Klassen auf Bootstrap gefunden Nehmen here oder v4 here

Werfen Sie einen Blick auf meine pin here, Das wird dir die richtige Idee geben.

<div id="header" class="col-lg-12"> 
    <p>Header/Nav</p> 
</div> 

<div id="sideLeft" class="col-lg-2"> 
    <p>Sidebar Left</p> 
</div> 

<div id="body" class="col-lg-8"> 
    <p>This is where your all body content goes.</p> 
</div> 

<div id="sideRight" class="col-lg-2"> 
    <p>Sidebar Right</p> 
</div> 

<div id="footer" class="col-lg-12"> 
    <p class="white-text">Footer</p> 
</div>

CSS:

#header { 
    height: 50px; 
    background-color: #ccc; 
} 
#body { 
    height: 500px; 
    background-color: #eee; 
} 
#footer { 
    height: 300px; 
    background-color: #3f3f3f; 
}

Quelle

2016-09-16 21:12:15 Illdapt

sieht einfach, ich werde es versuchen. Vielen Dank. – Paul

@Clarissa Sie können auch [diesen Stift] (http://codepen.io/illdapt/pen/xEGgOE) auschecken, da Sie ein Side-Nav sehen möchten. – Illdapt

Ich konnte die verschiedenen Abschnitte erstellen, aber nicht die linke Seitenleiste, ich möchte kein Java-Skript verwenden, gibt es eine Möglichkeit, nur mit Bootstrap zu erstellen? Ich habe keinen Weg gefunden. – Paul

So erstellen Sie eine linke vertikale Sidebar mit Bootstrap

Antwort

Verwandte Themen