8

Twitter Bootstrap でいくつかの効果を取得しようとしていますが、苦労しています。以前に行われたに違いないと確信しています。どちらも非常に似ているので、1 つの質問にまとめました。

私がやりたいことは、リストとナビゲーションバーの両方でアイコンを機能させることです。少し絵を描くことで達成しようとしている各効果の簡単な説明:

リスト

ここに画像の説明を入力

<div class="well span4">
   <ul class="nav nav-list">
       <li class="active"><a href="#">Value 1</a></li>
       <li><a href="#">Value 2</a></li>
       <li><a href="#">Value 3</a></li>
   </ul>
</div>

私は<img>and <span>and <div>all を含めようとしましたclass="close"が、どれも正しく動作していないようでした.

ナビゲーション バー

ここに画像の説明を入力

<div class="navbar">
        <div class="navbar-inner">
            <div class="container" style="width: auto;">
                <a class="brand" href="#">NavBar</a>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li class="divider-vertical"></li>
                        <li class="active">
                            <img src="edit.png" width="16" height="16"/>
                            <a href="#">Nav 1</a>
                        </li>
                        <li>
                            <img src="play.png" width="16" height="16"/>                               
                            <a href="#">Nav 2</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

ここで必要なのは、ナビゲーション バー アイテムの横 (および最初のナビゲーション バー アイテムのアクティブ領域内) に 2 つのアイコンを表示することです。リストと同じような問題で、今回は画像が上に押し出されます。Nav2 をフォトショップして、達成したい効果を説明しました。

私は を<img>試しました を試しました<i>が、これらはどういうわけか魔法であり、常にある種のグリフアイコンを指していると思います-これらについて読む必要があります。私が本当に欲しいのは、ここでカスタム画像を使用することです。

どんな提案や小さな例も素晴らしいでしょう。ありがとう。

4

2 に答える 2

25

画像よりも優れた fontawesome アイコンを使用しました。

ブートストラップでアイコンを使用する構文は、クラス名 icon- のタグを使用することです。デフォルトでは、グリフィコンはブートストラップに存在しますが、fontawesome にはより多くのアイコンがあり、完全に無料です。ここで font-awesome の詳細を知ることができます: http://fortawesome.github.com/Font-Awesome/#integration

アイコンを使用してナビゲーションとリストを作成する方法は次のとおりです。

あなたのためのJsfiddle http://jsfiddle.net/shail/GKsSd/2/

for Lists :

     <div class="well span4">
       <ul class="nav nav-list">
         <li class="active"><a href="#">Value 1 <i class=" icon-remove pull-right"></i></a>  </li>
         <li class="active"><a href="#">Value 2 <i class=" icon-remove pull-right"></i></a></li>
         <li class="active"><a href="#">Value 3 <i class=" icon-remove pull-right"></i></a></li>
      </ul>

ブラウザでの結果: アイコン付きのナビゲーションとリスト ナビゲーションについては、同様のことができます:

<div class="navbar">
<div class="navbar-inner">
 <a data-toggle="collapse" data-target=".nav-collapse" class="btn btn-navbar">
  <i class="icon-bar"></i>
   </a>

 <a class="brand" href="">New Icon Menu</a>

    <div class="nav-collapse">
        <ul class="nav nav-pills pull-right">
            <li><a href=""><i class="icon-home icon-2x"></i> Home<br></a>
            </li>
            <li><a href=""><i class=" icon-pencil icon-2x"></i>About Us</a>
            </li>
            <li><a href=""><i class=" icon-briefcase icon-2x"></i>Portfolio</a>
            </li>
            <li><a href=""><i class=" icon-envelope icon-2x"></i>Contact Us</a>
            </li>
        </ul>
       </div>
       </div>
    </div>

どうしても画像を使う必要がある場合に備えて。クラスを作成し、その中にアイコン イメージを配置する必要があります。次のように：

 .icon-edit {
     background:url('/images/edit.png') 0 0 no-repeat;
     height: 16px;
     line-height: 16px;
     width: 16px;
     }
于 2013-02-26T10:21:37.220 に答える
6

Bootstrap 3 では、Bootstrap に含まれているグリフィコンを使用して、このようなことができます...

アイコン付きのリスト グループ:

<div class="list-group">
    <a href="#" class="list-group-item active">Active item <i class="glyphicon glyphicon-camera pull-right"></i></a>
    <a href="#" class="list-group-item">Second item <i class="glyphicon glyphicon-envelope pull-right"></i></a>
    <a href="#" class="list-group-item">Third item <i class="glyphicon glyphicon-chevron-right pull-right"></i></a>
</div>

アイコン付きのタブ..

<ul class="nav nav-tabs">
    <li class="active"><a href="#">Home <i class="glyphicon glyphicon-dashboard"></i></a></li>
    <li><a href="#">Tab1 <i class="glyphicon glyphicon-tree-conifer"></i></a></li>
    <li><a href="#">Tab2 <i class="glyphicon glyphicon-fire"></i></a></li>
</ul>

または、アイコン付きの積み重ねられたナビゲーション..

<ul class="nav nav-tabs nav-stacked">
     <li><a href="#">One <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Two <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Three <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
     <li><a href="#">Four <i class="glyphicon glyphicon-remove pull-right"></i></a></li>
</ul>

Codeply スニペット: http://codeply.com/go/E0R4MTFrFS

于 2015-04-25T13:24:57.180 に答える