Bootstrapの入力コンポーネント (6/6)

■バッジとアイコン

最後に、これはインターフェイスそのものではありませんが、インターフェイスの表示を強化するものとして「アイコン」と「バッジ」について触れておきましょう。

■アイコンについて

Bootstrapには、200以上ものアイコンが用意されています。これらは、<span>タグにクラスを指定することで簡単に表示できます。

<span class="glyphicon glyphicon-○○"></span>

クラスには、class="glyphicon glyphicon-○○"というようにクラスを指定します。glyphiconは、グラフィックアイコンの基本クラスです。これに、使用するアイコンを表示するクラス名を「glyphicon-○○」というように追加します（○○には、表示するアイコン名を指定します）。

例えば、チェックマークを表示する場合は、こんな具合に書けば良いでしょう。

<span class="glyphicon glyphicon-ok">

用意されているアイコンは、Bootstrapのサイトで調べることができます。非常に沢山のものがあるので、実際にいくつか試してみて下さい。

http://getbootstrap.com/components/#glyphicons

■バッジについて

バッジは、テキストの脇に付けておくちょっとした表示です。例えば、Facebookの「いいね」ボタンには、その横にいいねした数が吹き出しのように表示されますね？　あれが、バッジです。

このバッジは、非常に簡単につけることができます。こんな感じです。

<span class="badge">バッジ</span>

<span>タグにclass="badge"というクラスをつければ、それだけでバッジになります。非常に単純ですね。

では、下のリスト欄に、アイコンとバッジの利用例を挙げておきましょう。実際にやってみてわかるのは、「スタイルが自動調整される」ということでしょう。普通にテキストにアイコンやバッジを付けると、黒字に白い文字で表示されます。が、ボタンでbtn-primaryクラスを設定した場合、白地に青い文字でアイコン・バッジが表示されます。追加されているタグのスタイルによってバッジの表示も自動調整されているんですね。

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Bootstrap</title>

    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">

</head>
<body >
    
<div class="container">
            
<div class="row">
    <div class="col-md-12">
        
        <div class="page-header">
            <h1>コンテンツの表示</h1>
            <h2 >Badge</h2>
        </div>
        
        <div class="form-group">
        <a href="#"><span class="glyphicon glyphicon-ok"></span>
        BadgeLink <span class="badge">7</span></a>
        </div>
        <div class="form-group">
            <button class="btn btn-default">
            <span class="glyphicon glyphicon-heart"></span>
            Click <span class="badge">ok</span></button>
        </div>
        <div class="form-group">
            <button class="btn btn-default btn-primary">
            <span class="glyphicon glyphicon-tags"></span>
            Click <span class="badge">ok</span></button>
        </div>
        <p><span class="glyphicon glyphicon-star"></span>
        this is <span class="badge">Badge</span> content.</p>
    </div>
</div>
    
</div>

</body>
</html>

<< 前へ　

記事のリストに戻る

PC Site G+ mail