Как создать левую вертикальную боковую панель с бутстрапом

Я хотел бы создать еще одну панель навигации на моей странице, используя bootstrap - вертикальную, но в левой части моего заголовка и нижнего колонтитула, а также у меня есть текст, который должен оставаться в том же положении. Каков наилучший способ сделать это? Какие-либо предложения?Как создать левую вертикальную боковую панель с бутстрапом

Мои HTML/CSS коды:

<!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>

благодаря Кларисса

источник

2016-09-16 Paul

Воспользуйтесь ваших классов столбцов найденную на Bootstrap here или если v4 here

Посмотрите на мои pin here, это даст вам правильную идею.

<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; 
}

источник

2016-09-16 21:12:15 Illdapt

выглядит просто, я буду стараться. Благодарю. – Paul

@ Clarissa Вы также можете проверить [эту ручку] (http://codepen.io/illdapt/pen/xEGgOE), а также посмотреть, как вы хотите использовать навигационную панель. – Illdapt

Мне удалось создать разные разделы, но не левую боковую панель, я не хочу использовать java-скрипт, есть ли способ построить только с бутстрапом? Я не нашел пути. – Paul

Как создать левую вертикальную боковую панель с бутстрапом

ответ

Смежные вопросы