Bootstrap 4 入門

Bootstrapは、応答式レイアウト、モバイルデバイスファーストのWEBプロジェクトを開発するための、世界で最も人気のあるフロントエンドコンポーネントライブラリです。

Bootstrap 4は現在、HTML、CSS、およびJS開発用のオープンソースツールセットであるBootstrapの最新バージョンです。提供したSass変数と大量なmixin、レスポンシブグリッドシステム、拡張可能なプレハブコンポーネント、jQueryに基づく強力なプラグインシステムを使用して、アイデアのプロトタイプをすばやく開発したり、アプリ全体を構築したりできます。

この記事を読むべき読者

HTMLとCSSの基本的な知識がある限り、この記事を読んで独自のWebサイトを開発できます。この記事を学習終えると、Bootstrapを使用してWebプロジェクトを開発する中級レベルに達します。

この記事を読む前に、知るべき知識は以下になります。

この記事を読み始める前に、HTML、CSS、およびJavaScriptの基本的な知識が必要です。これらの概念をまだ理解していない場合は、最初に以下の記事を読むことをお勧めします。

  • HTMLチュートリアル
  • CSSチュートリアル
  • JavaScriptチュートリアル

Bootstrap 4 実例

<div class="jumbotron text-center">
  <h1>自分の最初のBootstrapページ</h1>
  <p>ブラウザのサイズをリセットして、効果を表示する!</p> 
</div>
 
<div class="container">
  <div class="row">
    <div class="col-sm-4">
      <h3>1列目</h3>
      <p>初心者チュートリアル</p>
      <p>学んだのはスキルだけでなく、夢だ!!!</p>
    </div>
    <div class="col-sm-4">
      <h3>2列目</h3>
      <p>初心者チュートリアル..</p>
      <p>学んだのはスキルだけでなく、夢だ!!!</p>
    </div>
    <div class="col-sm-4">
      <h3>3列目</h3> 
      <p>初心者チュートリアル..</p>
      <p>学んだのはスキルだけでなく、夢だ!!!</p>
    </div>
  </div>
</div>

Bootstrap4およびBootstrap3

Bootstrap4はBootstrapの最新バージョンであり、Bootstrap3と比較して、より具体的なクラスがあり、いくつかの関連するパーツを関連コンポーネントに変換します。同時に、Bootstrap.min.cssのサイズが40%以上削減されました。

Bootstrap4はIE8とiOS 6のサポートを終了し、IE9以降とiOS 7以降のブラウザのみをサポートするようになりました。古いバージョンを使用する必要がある場合は、Bootstrap3を使用してください。

Share

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です