Bootstrap 4 alpha の使い方 - Getting started

phi phi on bootstrap

Bootstrap 4 alpha の使い方.
とりあえず今回は Getting started の紹介です.

Runstant で作ってあるのでそのまま, fork するなり download するなりして使って下さい♪

Bootstrap 4 alpha とは

別途エントリーにて詳しく説明するので, 今回はサイトの紹介だけしておきます.

Getting started

今回作った Bootstrap 4 alpha の Getting started です.

font-size が rem になっていたり, デフォルトカラーが変更されてたりするのがわかるかと思います.

※画面右下の拡縮ボタンを押せばコードを実際に編集できます

Usage

読み込むライブラリについては, 公式では rawgit の cdn を使うように言ってますが, 載っているパスが branch を指していて内容が変わる危険があるので cdnjs の方を使っています.

<!-- style -->  
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css' />

<!-- script -->  
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>  
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js'></script>  

Code

今回作ったやつのコードです. 基本的に version 3 と変わらないですね.

  <body>
    <nav class='navbar navbar-inverse navbar-static-top'>
      <a class='navbar-brand' href='#'>Phiary</a>
      <ul class="nav nav-pills">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
      </ul>
    </nav>

    <div class='jumbotron'>
      <div class='container'>
        <h1>Hello, Bootstrap 4 alpha</h1>
        <p>
          Bootstrap 4 alpha の Getting started です.
          これを元に, 実際にコードをいじりながら遊んでみてください♪
        </p>
        <p>
          <a class='btn btn-primary btn-lg' href='http://phiary.me/bootstrap-4-alpha-getting-started/' target='_blank'>Learn more &raquo;</a>
        </p>
      </div>
    </div>

    <div class='container'>
      <div class='row'>
        <div class='col-md-4'>
          <h2>Heading</h2>
          <p>
            Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text
          </p>
          <p><a class='btn btn-secondary' href='#'>View details &raquo;</a></p>
        </div>
        <div class='col-md-4'>
          <h2>Heading</h2>
          <p>
            Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text
          </p>
          <p><a class='btn btn-secondary' href='#'>View details &raquo;</a></p>
        </div>
        <div class='col-md-4'>
          <h2>Heading</h2>
          <p>
            Text Text Text Text Text Text Text Text
            Text Text Text Text Text Text Text Text
          </p>
          <p><a class='btn btn-secondary' href='#'>View details &raquo;</a></p>
        </div>
      </div>
    </div>

    <hr />

    <footer>
      <div class='container'>
        <p>&copy; Company 2015</p>
      </div>
    </footer>

    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js'></script>
  </body>