プログラミングの勉強をしよう@Wiki
プログラミングの勉強をしよう@Wiki

ボタン

概要

ボタンのスタイル


ボタンを表現するタグ

a、input type="button"、input type="submit"、buttonを使用する

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ボタン</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>ボタン</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>タグはa、input type="button"、input type="submit"、buttonタグで使用する</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <table class="table">
            <tr>
              <th>No</th>
              <th>タグ</th>
              <th>確認</th>
            </tr>
            <tr>
              <td>1</td>
              <td>a</td>
              <td><a href="#" class="btn">ボタン</a></td>
            </tr>
            <tr>
              <td>2</td>
              <td>input type="button"</td>
              <td>
                <input type="button" class="btn" value="ボタン" />
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>input type="submit"</td>
              <td>
                <input type="submit" class="btn" value="ボタン" />
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>button</td>
              <td>
                <button type="button" class="btn">
                  ボタン
                </button
              </td>
            </tr>
          </table>
          <h4>class="btn"で使用する</h4>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

ボタンの種類

プライマリ、情報、警告などの種類がある

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ボタン</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>ボタン</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>ボタンのスタイル</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <table class="table">
            <tr>
              <th>No</th>
              <th>class=""</th>
              <th>確認</th>
            </tr>
            <tr>
              <td>1</td>
              <td>btn</td>
              <td>
                <a href="#" class="btn">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>btn btn-primary</td>
              <td>
                <a href="#" class="btn btn-primary">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>btn btn-info</td>
              <td>
                <a href="#" class="btn btn-info">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>btn btn-success</td>
              <td>
                <a href="#" class="btn btn-success">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>btn btn-warning</td>
              <td>
                <a href="#" class="btn btn-warning">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>6</td>
              <td>btn btn-danger</td>
              <td>
                <a href="#" class="btn btn-danger">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>7</td>
              <td>btn btn-inverse</td>
              <td>
                <a href="#" class="btn btn-inverse">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>8</td>
              <td>btn btn btn-link</td>
              <td>
                <a href="#" class="btn btn-link">リンク</a>
              </td>
            </tr>
          </table>
          <h4>class="btn"で使用する</h4>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

ボタンのサイズ

大きさを指定

ソース（デモ）
<!DOCTYPE html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ボタン</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>ボタン</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>ボタンのサイズ</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <table class="table">
            <tr>
              <th>No</th>
              <th>class=""</th>
              <th>確認</th>
            </tr>
            <tr>
              <td>1</td>
              <td>btn btn-large</td>
              <td>
                <a href="#" class="btn btn-large">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>btn</td>
              <td>
                <a href="#" class="btn">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>btn btn-small</td>
              <td>
                <a href="#" class="btn btn-small">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>btn btn-mini</td>
              <td>
                <a href="#" class="btn btn-mini">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>5</td>
              <td>btn btn-block</td>
              <td>
                <a href="#" class="btn btn-block">ボタン</a>
              </td>
            </tr>
          </table>
          <h4>class="btn"で使用する</h4>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

ボタンの無効化

無効化のclassを定義

ソース（デモ）
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>ボタン</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
  </head>
  <body>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h1>ボタン</h1>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <h2>ボタンの使用不可設定</h2>
      </div>
    </div>
    <div class="row" style="margin: 10px;">
      <div class="span12">
        <form>
          <table class="table">
            <tr>
              <th>No</th>
              <th>タグ</th>
              <th>確認</th>
            </tr>
            <tr>
              <td>1</td>
              <td>a</td>
              <td>
                <a href="#" class="btn disabled">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>2</td>
              <td>a</td>
              <td>
                <a href="#" class="btn btn-primary disabled">ボタン</a>
              </td>
            </tr>
            <tr>
              <td>3</td>
              <td>button</td>
              <td>
                <button type="button" class="btn disabled" disabled>ボタン</button>
              </td>
            </tr>
            <tr>
              <td>4</td>
              <td>button</td>
              <td>
                <button type="button" class="btn btn-primary disabled" disabled>ボタン</button>
              </td>
            </tr>
          </table>
          <h4>class="disabled"でリンク不可になります。</h4>
        </form>
      </div>
    </div>
    <hr />
 
    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
 
 

「ボタン」をウィキ内検索
最終更新：2013年06月07日 10:26