Symfoware

Symfowareについての考察blog

プログラマのためのBootstrap入門 その2 ボタンとラベル

Bootstrapの使い方を勉強中です。
プログラマのためのBootstrap入門 その1 設置方法

今回はボタンについて調べてみます。


用意されているスタイル



ボタンのスタイルは7種類用意されています。

435_01.png


btn-default
btn-primary
btn-success
btn-info
btn-warning
btn-danger
btn-link




htmlはこんなかんじです。


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div><button type="button" class="btn btn-lg btn-default">Default</button></div>
  13.     <div><button type="button" class="btn btn-lg btn-primary">Primary</button></div>
  14.     <div><button type="button" class="btn btn-lg btn-success">Success</button></div>
  15.     <div><button type="button" class="btn btn-lg btn-info">Info</button></div>
  16.     <div><button type="button" class="btn btn-lg btn-warning">Warning</button></div>
  17.     <div><button type="button" class="btn btn-lg btn-danger">Danger</button></div>
  18.     <div><button type="button" class="btn btn-lg btn-link">Link</button></div>
  19.     
  20.     
  21.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  22.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  23. </body>
  24. </html>







ボタンの大きさ



ボタンの大きさは4種類。

435_02.png


btn-lg
(未指定)
btn-sm
btn-xs





  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10. </head>
  11. <body>
  12.     <div><button type="button" class="btn btn-primary btn-lg">btn-lg</button></div>
  13.     <div><button type="button" class="btn btn-primary">未指定</button></div>
  14.     <div><button type="button" class="btn btn-primary btn-sm">btn-sm</button></div>
  15.     <div><button type="button" class="btn btn-primary btn-xs">btn-xs</button></div>
  16.     
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  18.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  19. </body>
  20. </html>








画面いっぱいに表示



btn-blockを指定すると、ボタンが画面いっぱいに表示されます。

435_03.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <div><button type="button" class="btn btn-primary btn-lg btn-block">btn-block指定</button></div>
  14.     <div><button type="button" class="btn btn-primary btn-lg">btn-block未指定</button></div>
  15.     
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  17.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  18. </body>
  19. </html>








ボタンを押しっぱなしに



activeを指定すると、ボタンをホバーしたりクリックした時の表示のままになります。

435_04.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <div><button type="button" class="btn btn-primary btn-lg active">active指定</button></div>
  14.     <div><button type="button" class="btn btn-primary btn-lg">active未指定</button></div>
  15.     
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  17.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  18. </body>
  19. </html>







アンカーをボタンに



a hrefリンクもボタン風に見せることができます。

435_05.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <div><button type="button" class="btn btn-primary btn-lg">普通のボタン</button></div>
  14.     <div><a href="#" type="button" class="btn btn-primary btn-lg" role="button">リンク</a></div>
  15.     
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  17.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  18. </body>
  19. </html>



roleって何だろ?と思い調べると、html5で追加された役割を示すタグのようです。
これは省略しても表示は変わりませんでした。




ボタンを使用不可状態に



disabledを指定すると、ボタンが使用できない表示になります。

435_06.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <div><button type="button" class="btn btn-primary btn-lg disabled">disabled指定</button></div>
  14.     <div><button type="button" class="btn btn-primary btn-lg">disabled未指定</button></div>
  15.     
  16.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  17.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  18. </body>
  19. </html>







ラベル



spanタグのclassにlabelを指定するとこんな表示になります。

435_07.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <h1><span class="label label-default">Default</span></h1>
  14.     <h1><span class="label label-primary">Primary</span></h1>
  15.     <h1><span class="label label-success">Success</span></h1>
  16.     <h1><span class="label label-info">Info</span></h1>
  17.     <h1><span class="label label-warning">Warning</span></h1>
  18.     <h1><span class="label label-danger">Danger</span></h1>
  19.     
  20.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  21.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  22. </body>
  23. </html>




用意されているスタイルはボタンと同じです。


label-default
label-primary
label-success
label-info
label-warning
label-danger






大きさは、hタグとかで変更可能。

435_08.png


  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <title>Bootstrap</title>
  8.     <!-- Bootstrap -->
  9.     <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
  10.     
  11. </head>
  12. <body>
  13.     <h1><span class="label label-default">H1</span></h1>
  14.     <h2><span class="label label-primary">H2</span></h2>
  15.     <h3><span class="label label-success">H3</span></h3>
  16.     <h4><span class="label label-info">H4</span></h4>
  17.     <h5><span class="label label-warning">H5</span></h5>
  18.     <div><span class="label label-danger">DIV</span></div>
  19.     
  20.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  21.     <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  22. </body>
  23. </html>

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2014/08/02(土) 16:16:47|
  2. 備忘録
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<プログラマのためのBootstrap入門 その3 コンボボックス(ドロップダウン) | ホーム | プログラマのためのBootstrap入門 その1 設置方法>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/1448-57004b5b
この記事にトラックバックする(FC2ブログユーザー)