ブートストラップナビゲーションタブにアイコンを追加することは可能ですか？

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Bootstrap Case</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
</head> 
<body> 

<div class="container"> 
    <h3>Tabs</h3> 
    <ul class="nav nav-tabs"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Menu 1</a></li> 
    <li><a href="#">Menu 2</a></li> 
    <li><a href="#">Menu 3</a></li> 
    </ul> 
</div> 

</body> 
</html>

これはサンプルコードです。ブートストラップナビゲーションタブにアイコンを追加することは可能ですか？

ブートストラップのナビゲーションタブにアイコンを追加することは可能ですか？

私は、ナビゲーションタブで番号アイコンを追加したいです。

出典

2015-11-09 somputer

Working demo

あなたのバッジと位置を挿入badge、

<li class="active"><a href="#">Home<span class="badge">140</span></a></li>

とCSSの少し

.nav-tabs .badge{ 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    background: red; 
}

出典

2015-11-09 01:28:44 Popnoodles

はい、これは複数の方法で可能です。ブートストラップにはbadgesがあり、それは優雅な解決策になります。

<span class="badge">140</span>

出典

2015-11-09 01:24:23 camelCase

これはOPは、画像で示したものを達成しません。 – Popnoodles

私はあなたに、CSSと全部を使って完全なことをするように提案していると思いますか？ – camelCase

ようこそスタックオーバーフロー – Popnoodles

でこれを行うだろうに相対的ですこのようなコンテナ：

.count-badge { 
 
    position: relative; 
 
    top: -50px; 
 
    right: -50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script> 
 

 
<div class="container"> 
 
    <h3>Tabs</h3> 
 
    <ul class="nav nav-tabs"> 
 
    <li class="active"><a href="#">Home</a> 
 
     <span class="count-badge badge">140</span> 
 
    </li> 
 
    <li><a href="#">Menu 1</a> 
 
    </li> 
 
    <li><a href="#">Menu 2</a> 
 
    </li> 
 
    <li><a href="#">Menu 3</a> 
 
    </li> 
 
    </ul> 
 
</div>

出典

2015-11-09 01:32:20 DavidG

ブートストラップナビゲーションタブにアイコンを追加することは可能ですか？

答えて

関連する問題