30

サイトを Bootstrap 3 に更新する準備をしていますが、 Bootstrap 2 からクラスを置き換える方法がわかりませnav-listん。

list groupsを調べましたが、これが nav リストの代わりに使用されるかどうかはわかりません。以下のマークアップを Bootstrap 3 で機能させるにはどうすればよいですか?

<div class="well">
    <ul class="nav nav-list">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</div>

編集

これは私が目指している外観です: http://jsfiddle.net/bplumb/2Nguy/

4

5 に答える 5

26

編集

の削除については、v3.x への移行 – 削除される内容 に記載され.nav-list ています。

Nav リスト
.nav-list .nav-header
直接同等のものはありませんが、リスト グループと.panel-groupsは似ています。

この変更は、 「WIP: Bootstrap 3」プル リクエスト内の変更ログに記載されています。

  • .nav-listオプションを削除します。.list-group新しいコンポーネントに置き換えられます。

したがって、.list-group代わりに使用するコードを翻訳すると、次のようになります。

<div class="well">
    <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
    </ul>
</div>


<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="well">
    <ul class="list-group">
        <li class="list-group-item"><a href="#">Link 1</a></li>
        <li class="list-group-item"><a href="#">Link 2</a></li>
    </ul>
</div>

ただし、これは Bootstrap 2 で行った方法と同じには見えません。この回答のコメントで指摘.nav-listしたように、Bootstrap 3 に組み込まれている正確に同等なものはないようです。したがって、.list-group持っていない機能が必要な場合は、 CSS を自分で作成するか、Bootstrap 2 から移植する必要があります。

于 2013-08-16T20:54:43.693 に答える
9

私は使用class="nav nav-pills nav-stacked"しましたが、私にとっては、よりスタイルの良い代替品です。しかし、おそらくバージョン 3.0.2 で解決されています。

于 2013-11-24T20:04:34.167 に答える
9

nav-list次の .less は、多かれ少なかれ 2.3.2 の状態に戻します。

@import "../bootstrap/variables.less"; // replace with path to bootstrap variables.less

// Nav headers (for dropdowns and lists)
.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: @line-height-small;
  color: @gray-light;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  text-transform: uppercase;
}
// Space them out when they follow another list item (link)
.nav li + .nav-header {
  margin-top: 9px;
}

// NAV LIST
// --------

.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left:  -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.nav-list > li > a {
  padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: @body-bg;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background-color: @link-color;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}
// Dividers (basically an hr) within the dropdown
.nav-list .divider {
  .nav-divider();
}

結果の CSS は次のとおりです。

.nav-header {
  display: block;
  padding: 3px 15px;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
  color: #999999;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
}
.nav li + .nav-header {
  margin-top: 9px;
}
.nav-list {
  padding-left: 15px;
  padding-right: 15px;
  margin-bottom: 0;
}
.nav-list > li > a,
.nav-list .nav-header {
  margin-left: -15px;
  margin-right: -15px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.nav-list > li > a {
  padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
  background-color: #428bca;
}
.nav-list [class^="icon-"],
.nav-list [class*=" icon-"] {
  margin-right: 2px;
}
.nav-list .divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}

通常のブートストラップ アセットの後に CSS または LESS を含めます。

于 2013-11-26T11:41:59.883 に答える
3

ブートストラップ 2.3.2 から nav-list を取得し、同じ名前で 3.0 では使用できないいくつかの変数を入力し、mixin の依存関係を解決する要点を作成しました。それはすべてストレートなデフォルトであり、（これまでのところ）更新されたブートストラップ 3.0 ウェルでうまく機能するようです。これは私が主に使用する場所です。

https://gist.github.com/jimbojsb/6754116

于 2013-09-29T16:39:49.363 に答える