ぱそくま ろご
開発 > Bootstrap > Bootstrapとは?

Bootstrapとは?

Bootstrapとは

BootstrapはHTML、CSS、Javasvript等、WEBページ作成のフレームワークになります。 Bootstrapを使うとHTMLのタグにBootstrapで定義してあるクラスをクラス属性に設定するだけで、簡単にかっこいいページが作成できたりします。

Bootstarpの関連ページ

Bootstrapはオープンソースで開発されています。ドキュメントや最新情報を取得するには以下のサイトを参考にしてください。

Bootstrapをはじめる

簡単にはじめる場合はCDN(コンテンツデリバリーネットワーク)を使って、Bootstarpのcss等をページにリンクするのが良いでしょう。



CDNを使ったBootstrap:index.html

<!DOCTYPE html>
<html lang="jp">

  <head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/css/bootstrap.min.css"
          integrity="sha384-2hfp1SzUoho7/TsGGGDaFdsuuDL0LX2hnUp6VkX3CUQ2K4K+xjboZdsXyp4oUHZj" crossorigin="anonymous">
  </head>

  <body>

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
      <a class="navbar-brand" href="#">Menu</a>
      <ul class="nav navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </nav>

   <div class="container" style="margin-top:5rem;">
      <h1>Hello, Bootstrap!</h1>
      <p class="lead">This is sample page.</p>
    </div>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"
            integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.2.0/js/tether.min.js"
            integrity="sha384-Plbmg8JY28KFelvJVai01l8WyZzrYWG825m+cZ0eDDS1f7d/js6ikvy1+X+guPIB" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"
            integrity="sha384-VjEeINv9OSwtWFLAtmc4JCtEJXXBub00gtSnszmspDLCtC0I4z4nqz7rEFbIZLLU" crossorigin="anonymous"></script>
  </body>
</html>

上のコードをぺたっと貼り付けてブラウザーで表示してください。以下のようなページが出れば成功です。

Bootstrapサンプルページのイメージ

このように簡単にそれなりのページができると思います。なお、上記サンプルはjQueryベースになります。react用はまた別になります。