引導邊欄菜單和邊欄導航

我使用引導程序，它只是發生，我想創建一個響應網站，這就是爲什麼推我使用引導。引導邊欄菜單和邊欄導航

我想要做的就像在照片上。（注意：不是整個頁面，而只是帶有圖標的側邊欄。）這正是我想要的側邊欄。我會在照片上看到很多模板（側邊欄），但沒有什麼和我想要發生的一樣。

有人能幫我嗎？

sidebarnav

2014-05-15 x' tian

我們不能在這裏做功課，告訴我們你的代碼，告訴我們你都試過了，如果可能的話做的jsfiddle。我們在這裏可以解決你的疑惑，不完成任務 – crafter

嗨@crafter我還沒有嘗試過任何東西。我是一名使用bootstrap的新手，因此我不知道我應該從哪裏開始。我只有鏈接代碼爲我的引導。對於那個很抱歉。謝謝。 –

首先，學習bootstrap的基礎知識，學習他們的12個網格佈局。可能是這是解決你的問題的鏈接，http://tympanus.net/codrops/2013/07/30/google-nexus-website-menu/ – crafter

經典的引導沒有包括側邊欄組件，您應該建立它自己.. 如果你想更容易啓動，我會告訴你的代碼，一個簡單的例子。

所以，採取掠奪的CSS：

#wrapper { 
    padding-left: 250px; 
    transition: all 0.4s ease 0s; 
} 

#sidebar-wrapper { 
    margin-left: -250px; 
    left: 250px; 
    width: 250px; 
    background: #000; 
    position: fixed; 
    height: 100%; 
    overflow-y: auto; 
    z-index: 1000; 
    transition: all 0.4s ease 0s; 
} 

#page-content-wrapper { 
    width: 100%; 
} 

.sidebar-nav { 
    position: absolute; 
    top: 0; 
    width: 250px; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

.sidebar-nav li { 
    line-height: 40px; 
    text-indent: 20px; 
} 

.sidebar-nav li a { 
    color: #999999; 
    display: block; 
    text-decoration: none; 
} 

.sidebar-nav li a:hover { 
    color: #fff; 
    background: rgba(255,255,255,0.2); 
    text-decoration: none; 
} 

.sidebar-nav li a:active, 
.sidebar-nav li a:focus { 
    text-decoration: none; 
} 

.sidebar-nav > .sidebar-brand { 
    height: 65px; 
    line-height: 60px; 
    font-size: 18px; 
} 

.sidebar-nav > .sidebar-brand a { 
    color: #999999; 
} 

.sidebar-nav > .sidebar-brand a:hover { 
    color: #fff; 
    background: none; 
} 

.content-header { 
    height: 65px; 
    line-height: 65px; 
} 

.content-header h1 { 
    margin: 0; 
    margin-left: 20px; 
    line-height: 65px; 
    display: inline-block; 
} 

#menu-toggle { 
    display: none; 
} 

.inset { 
    padding: 20px; 
} 

@media (max-width:767px) { 

#wrapper { 
    padding-left: 0; 
} 

#sidebar-wrapper { 
    left: 0; 
} 

#wrapper.active { 
    position: relative; 
    left: 250px; 
} 

#wrapper.active #sidebar-wrapper { 
    left: 250px; 
    width: 250px; 
    transition: all 0.4s ease 0s; 
} 

#menu-toggle { 
    display: inline-block; 
} 

.inset { 
    padding: 15px; 
} 

}

和側邊欄的HTML部分：

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

希望它可以幫助你！

來源

2014-05-15 04:56:05

hi @ dei.andrei98我應該在哪裏放置css代碼？ –

在和bootstrap.min.css或bootstrap.css –

和沒有你把它放在一個單獨的文件中，不要編輯原始的引導文件。 –

這個HTML將您的內容身體開始頂部導航欄的下方。

<div class= "row"> 
    <div class="col-xs-3"> 
     <!-- this is your sidebar area --> 
     <div class= "container">image </div> 
     <div class= "container">heading </div> 
    </div> 
    <div class= "col-xs-9"> 
     <!-- this is the rest of your content area --> 
    </div> 
</div>

來源

2014-05-15 04:48:07

雖然你試圖通過發佈來幫助OP是好事一個代碼示例，您應該考慮包括一個更詳細的描述它的代碼是什麼。 OP不太瞭解BootStrap，所以考慮解釋給你'div'的類值。 – Daniel

引導確實有一個內置的側邊欄

nav-sidebar

居然有上引導網站模板，顯然是爲了使它看起來像上面你將需要定製一個公平位的人。

如果您尋找一些額外的glyphicons像上面的例子，你可以看一下字體真棒

來源

2014-05-15 21:31:03 Tik

引導邊欄菜單和邊欄導航

回答

相關問題