0

そのため、ブートストラップをスリムと一緒に使用して、ナビゲート可能なページを作成しています。「アクティブ化」クラスが適用されているため、リストで選択したアイテムを強調表示することに固執しています。私は affix または scrollspy と呼ばれるものを見つけましたが、これらは私がする必要があること、つまりページ間を移動することとは異なります。私は次のコード部分を持っています:

  .container-fluid
      .row-fluid
        .span2
          ul.nav.nav-list
            li.active = link_to 'Home', root_path
            li.divider
            li = link_to 'Openings', openings_path
            ...
        .span10
          ==yield

これにはベストプラクティスが必要だと思います。任意の提案をいただければ幸いです。

4

1 に答える 1

-1

ページを動的に作成している場合、多くの場合、フレームワークを使用してアクティブなクラスをメニュー リンクに追加できます。私は ruby​​ on rails の経験がないので、あまり助けにはなりません。

ただし、同じ目標を達成する方法は他にもたくさんあります。たとえば、さまざまなページの body タグにクラスを追加したり、ナビゲーション リスト項目の HTML を微調整したり、CSS スタイルを追加したりできます。

HTML 

<body class="home"> 
or  
<body class="contact">  

<ul class="nav nav-list">
  <li class="home"> <a href="#">home</li>
  <li class="contact"> <a href="#">contact</li>
</ul>

CSS 

.home li.home a, .contact li.contact a{  
background-color#999;
color:white;
}

or if you want to go with the built-in Bootstrap active styling, 
something similar to this:  

.home li.home a, .contact li.contact a,
.home li.home a, .contact li.contact a:hover,
.home li.home a, .contact li.contact a:focus {  
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

このアプローチは、動的サイトと静的サイトの両方に使用できます。

これで始められることを願っています！

于 2013-03-28T16:38:30.930 に答える