HTML5でBootstrap3を使用する


サンプル


HTML

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Sample of sites that use the bootstrap3 in HTML5." />
    <meta name="keywords" content="HTML5, CSS3, JS, JavaScript, Bootstrap3" />
    <meta name="author" content="algo13.net" />
    <title>HTML5でBootstrap3を使用するサイトのサンプル</title>
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" />
    <link rel="icon" href="/favicon.ico" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <!-- Delete "Helvetica Neue", Helvetica for IE -->
    <script>/MSIE|Trident/.test(navigator.userAgent) && document.write('<style>body,.tooltip,.popover{font-family:Arial,sans-serif;}<\/style>')</script>
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <a href="#content" class="sr-only">メインコンテンツへスキップ</a>
    <header class="navbar navbar-default navbar-static-top bs-docs-nav" id="top" role="banner">
      <div class="container">
        <div class="navbar-header">
          <h1 class="sr-only">ナビゲーションヘッダー</h1>
          <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a href="/" class="navbar-brand">Bootstrap</a>
        </div>
        <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
          <h2 class="sr-only">ナビゲーション</h2>
          <ul class="nav navbar-nav">
            <li><a href="#">メニューアイテム1</a></li>
            <li class="active"><a href="#">メニューアイテム2</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">左配置</a></li>
          </ul>
        </nav>
      </div><!-- /.container -->
    </header>
    <article id="content" role="main">
      <div class="container">
        <h2>Hello, world!</h2>
        <section>
          <header>
            <h3>1個目のセクション</h3>
          </header>
          <div class="row">
            <div class="col-md-12">1個目の中身</div>
          </div>
          <div class="row">
            <div class="col-md-6">1個目の中身1</div>
            <div class="col-md-6">1個目の中身2</div>
          </div>
        </section>
        <section>
          <h3>2個目のセクション</h3>
          <div class="row">
            <div class="col-md-6">2個目の中身1</div>
            <div class="col-md-6">2個目の中身2</div>
          </div>
        </section>
      </div><!-- /.container -->
    </article>
    <aside role="complementary">
      <div class="container">
        <h2>サブメニュータイトル</h2>
        サブメニュー本文
      </div><!-- /.container -->
    </aside>
    <footer id="footer" role="contentinfo">
      <div class="container">
        <p class="copyright"><small>Copyright</small></p>
      </div><!-- /.container -->
    </footer><!-- / #footer -->

    <!--[if lt IE 9]>
      <script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
      <script>window.jQuery || document.write('<script src="vendor/jquery/jquery-1.12.4.min.js"><\/script>')</script>
    <![endif]--><!--[if (gte IE 9)|!(IE)]><!-->
      <script src="//code.jquery.com/jquery-3.1.0.slim.min.js"></script>
      <script>window.jQuery || document.write('<script src="vendor/jquery/jquery-3.1.0.slim.min.js"><\/script>')</script>
    <!--<![endif]-->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>// IE10 viewport hack for Surface/desktop Windows 8 bug
      (function (d) {
        'use strict';
        if (/IEMobile\/10\.0/.test(navigator.userAgent)) {
          var s = d.createElement('style');
          s.appendChild(d.createTextNode('@-ms-viewport{width:auto!important}'));
          d.querySelector('head').appendChild(s);
        }
      })(document);
    </script>
  </body>
</html>