Tạo thanh điều hướng bên cạnh trong Bootstrap 3.0

Question

Tôi muốn tạo Sticky Side Navbar ở bên trái trong trang web của tôi. & Tôi đang sử dụng Bootstrap 3 RC2. Tôi không biết Làm thế nào để tạo ra nó.

Answer 1

Thanh điều hướng mặc định của Bootstrap 3 của Twitter nằm ngang. Có bốn loại của nó, mặc định, đầu tĩnh và cố định trên cùng và dưới cùng, xem phần ví dụ của trang này: http://getbootstrap.com/getting-started

Nhưng tất nhiên bạn có thể sử dụng Bootstrap 3 của Twitter để tạo điều hướng bên trái (trái). Trước tiên, hãy đọc Tài liệu, nó chứa nhiều ví dụ. Thực hiện một phác thảo của bạn ý tưởng, cố gắng để mã nó với các ví dụ. Đặt câu hỏi tại đây để khắc phục sự cố mã của bạn. Bắt đầu tại dấu (http://getbootstrap.com/javascript/#affix) và phần nav (http://getbootstrap.com/components/#nav) có thể là đầu tiên.

lẽ cũng kiểm tra: how to make bootstrap off canvas nav overlap content instead of move it

Answer 2

Bạn cần phải xác định CSS cho khi thanh bên trở nên cố định ...

Ví dụ,

#sidebar.affix { 
    position: fixed; 
    top:25px; 
    width:228px; 
    } 

Đây là một ví dụ làm việc: http://bootply.com/73864

Answer 3

Thanh điều hướng hấp dẫn mà bạn đang tôn trọng là có thể nhờ vào plugin ix. Bạn có thể view the bootstrap documentation on this.

Jsfiddle này chứa thanh bên hoạt động (làm cửa sổ kết quả lớn hơn để xem nó hoạt động bình thường). Đọc để tạo cùng một thanh bên.

1. Tạo html cho thanh bên của bạn. Đối với ví dụ này, chúng tôi sẽ sử dụng bootstraps nav-pills trong một giếng.

<div class="row"> 
    <div class="col-sm-3"> 
    <div class="well bs-sidebar affix" id="sidebar"> 
     <ul class="nav nav-pills nav-stacked"> 
     <li><a href="#">Link 1</a></li> 
     <li><a href="#">Link 2</a></li> 
     </ul> 
    </div> <!--well bs-sidebar affix--> 
    </div> <!--col-sm-3--> 
    <div class="col-sm-9"> 
    <p>Main body content goes here</p> 
    </div> <!--col-sm-9--> 
</div> <!--row--> 

2. Gọi plugin đóng trong js bạn nộp

$('#sidebar').affix({ 
    offset: { 
    top: $('header').height() 
    } 
}); 

Bạn cần phải thay thế 'tiêu đề' với bất cứ điều gì sẽ ở trên thanh bên. Nếu bạn đang sử dụng một navbar bootstrap và nó là trực tiếp trên thanh bên, thay thế 'tiêu đề' với lớp bạn đang sử dụng cho các thanh điều hướng, ví dụ:

top: $('.navbar navbar-default').height() 

3. Add css cho lớp đóng

CSS cho không đáp ứng bố trí

.bs-sidebar.affix { 
    width: 263px; 
    top: 25px; 
} 

CSS cho bố cục đáp ứng

@media (min-width: 768px) { 
    .bs-sidebar.affix { 
    width: 158px; 
    top: 25px; 
    } 
} 

@media (min-width: 992px) { 
    .bs-sidebar.affix { 
    width: 213px; 
    position: fixed; 
    top: 25px; 
    } 
} 

@media (min-width: 1200px) { 
    .bs-sidebar.affix { 
    width: 263px; 
    } 
}