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を使用してください。
コメントを残す