Làm cách nào để có được kiểu danh sách điều hướng được gắn sẵn của Bootstrap?

Question

Tôi đã chơi xung quanh với Bootstrap đôi khi. Trong khi tôi luôn có thể làm mọi thứ hoạt động. Tôi đã xem xét nó cho một dự án sắp tới đòi hỏi một nav-side gắn liền chính xác như một mặt trong Twitter Bootstrap doc.

Tôi thậm chí đã cố gắng đưa các lớp này vào phần tử của mình.

<ul class="nav nav-list affix-top"> 

Bất kỳ người khởi động nào ở đây có thể giúp tôi tìm ra những gì tôi cần thêm để làm việc này. Ngoài ra, tôi đã không thể có được chữ V để hiển thị chính xác như được thực hiện trên đó, chữ V của tôi luôn luôn bị nghiền nát cùng với văn bản.

Answer 1

Bạn đã nhớ bật tính năng này trong JS chưa?

Họ sử dụng:

$('#navbar').affix() 

, nhưng bạn sẽ cần phải thay đổi bất cứ điều gì để chọn nhu cầu của bạn.

Ah, bây giờ bạn đã lặp lại những gì bạn muốn!

Họ có một lớp trên mà gọi là .bs-docs-sidenav

.bs-docs-sidenav { 
    width: 228px; 
    margin: 30px 0 0; 
    padding: 0; 
    background-color: #fff; 
    -webkit-border-radius: 6px; 
    -moz-border-radius: 6px; 
    border-radius: 6px; 
    -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); 
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); 
    box-shadow: 0 1px 4px rgba(0,0,0,.065); 
} 

Sau đó, họ thêm một lớp được gọi là active đến li, sau đó xác định hành vi đó ở đây:

.bs-docs-sidenav > .active > a { 
    position: relative; 
    z-index: 2; 
    padding: 9px 15px; 
    border: 0; 
    text-shadow: 0 1px 0 rgba(0,0,0,.15); 
    -webkit-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
    -moz-box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
    box-shadow: inset 1px 0 0 rgba(0,0,0,.1), inset -1px 0 0 rgba(0,0,0,.1); 
} 

Vì vậy, trong ngắn hạn, mà không phải là một chức năng được xây dựng trong bootstrap.

Answer 2

Tôi đã có cùng một vấn đề và không thể làm cho tôi hoạt động cho đến khi tìm thấy điều này bao gồm trên trang tài liệu bootstrap.

http://twitter.github.com/bootstrap/assets/js/application.js

!function ($) { 

    $(function(){ 

    var $window = $(window) 

    // Disable certain links in docs 
    $('section [href^=#]').click(function (e) { 
     e.preventDefault() 
    }) 

    // side bar 
    $('.bs-docs-sidenav').affix({ 
     offset: { 
     top: function() { return $window.width() <= 980 ? 290 : 210 } 
     , bottom: 270 
     } 
    })   
    }) 
}(window.jQuery) 

để thêm nơi trú ngụ mã trong khi sao chép và dán các hướng afix bootstrap nên chăm sóc của vấn đề.

Answer 3

Để có được tác dụng tương tự như trên các trang github.io bạn cần đầy đủ các css họ thêm

<style type="text/css"> 

.bs-docs-sidenav > li > a { 
    border: 1px solid #E5E5E5; 
    /*display: block;*/ 
    /*margin: 0 0 -1px;*/ 
    padding: 8px 14px; 
} 

.bs-docs-sidenav > li > a { 
    border: 1px solid #E5E5E5; 
    /*display: block;*/ 
    /*margin: 0 0 -1px;*/ 
    padding: 8px 14px; 
} 

.bs-docs-sidenav > li:first-child > a { 
    border-radius: 6px 6px 0 0; 
} 

.bs-docs-sidenav > li:last-child > a { 
    border-radius: 0 0 6px 6px; 
} 

.bs-docs-sidenav > .active > a { 
    border: 0 none; 
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1) inset, -1px 0 0 rgba(0, 0, 0, 0.1) inset; 
    padding: 9px 15px; 
    position: relative; 
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); 
    z-index: 2; 
} 

.bs-docs-sidenav .icon-chevron-right { 
    float: right; 
    margin-right: -6px; 
    margin-top: 2px; 
    opacity: 0.25; 
} 

.bs-docs-sidenav > li > a:hover { 
    background-color: #F5F5F5; 
} 

.bs-docs-sidenav a:hover .icon-chevron-right { 
    opacity: 0.5; 
} 

.bs-docs-sidenav .active .icon-chevron-right, .bs-docs-sidenav .active a:hover .icon-chevron-right { 
    /*background-image: url("../img/glyphicons-halflings-white.png");*/ 
    opacity: 1; 
} 

.bbs-docs-sidenav.affix { 
    top: 40px; 
} 

.bbs-docs-sidenav.affix-bottom { 
    bottom: 270px; 
    position: absolute; 
    top: auto; 
} 

</style> 

bao gồm này trong mẫu hoặc html của bạn và làm theo bootstrap định dạng side navigation:

<div class="row"> 
     <div class="span3 bs-docs-sidebar"> 
     <ul class="nav nav-list bs-docs-sidenav"> 
      <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li> 
      <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li> 
      .... 
     </ul> 
     </div> 
     <div class="span9"> 

     .... 

     </div> 
</div>