Как получить стиль прикрепленного навигационного списка Bootstrap?

Я когда-то играл с Bootstrap. Хотя у меня всегда все получалось. Я рассматривал его для предстоящего проекта, для которого требуется прикрепленная боковая навигация, точно такая же, как в Документ Twitter Bootstrap.

Я даже пытался включить эти классы в свой элемент.

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

Здесь есть знатоки начальной загрузки, которые могли бы помочь мне понять, что мне нужно добавить, чтобы они заработали. Кроме того, мне не удалось заставить шевроны отображаться точно так, как это сделано здесь, мои шевроны всегда смешиваются с текстом.


css twitter-bootstrap nav
person Ameen    schedule 14.10.2012    source источник

Ответы (3)


arrow_upward
7
arrow_downward

Вы не забыли включить его в JS?

Они используют:

$('#navbar').affix()

, но вам нужно изменить селектор на то, что вам нужно.

А, теперь ты перефразировал то, что хотел!

У них есть еще один класс, который называется .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);
}

Затем они добавляют класс с именем active в li, а затем определяют его поведение здесь:

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

Короче говоря, это не встроенная функция бутстрапа.

person Rich Bradshaw    schedule 14.10.2012
comment
Спасибо, но это только для того, чтобы прикрепить навигацию. Я не могу воссоздать визуальный стиль ((.nav-tabs stacked) приближается, но не имеет текущей подсветки выбора) их навигационного списка. Спасибо, в любом случае. :) - person Ameen; 14.10.2012
comment
Благодаря тонну. Кроме того, нужно ли мне возиться с JS, чтобы актив работал правильно? Кроме того, я на самом деле хотел добавить изображение в этот пост, чтобы передать то, что я на самом деле намеревался сделать, похоже, я пока не могу этого сделать. - person Ameen; 14.10.2012
comment
Я не уверен, не похоже. Думаю, вам также может понадобиться scrollspy, чтобы выделить его. Все нормально! Вы получите репутацию довольно быстро! - person Rich Bradshaw; 14.10.2012
comment
Что добавляет класс active в LI? это часть модуля bootstrap.affix? - person Nic Cottrell; 19.02.2013

arrow_upward
0
arrow_downward

У меня была та же проблема, и я не мог заставить свою работать, пока не нашел это на странице документов начальной загрузки.

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)

поэтому добавление кода при копировании и вставке навигации по афиксу начальной загрузки должно решить проблему.

person NICKO    schedule 27.01.2013

arrow_upward
0
arrow_downward

Чтобы получить тот же эффект, что и на странице github.io, вам нужен полный CSS, который они добавили.

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

включите это в свой шаблон или html и следуйте формату боковой навигации начальной загрузки:

<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>
person Nikolay Christov    schedule 24.06.2013