Bootstrap4 基礎教程

Bootstrap4 チュートリアル

Bootstrapは世界で最も人気のあるフロントエンドコンポーネントライブラリで、レスポンシブレイアウトやモバイルデバイス優先のWEBプロジェクトの開発に使用されます。

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

このチュートリアルに適した読者は？

HTMLとCSSの基礎をもちいているだけであれば、このチュートリアルを読むことができます。本チュートリアルを学習した後、Bootstrapを使用してWebプロジェクトを開発する中級レベルに達することができます。

このチュートリアルを読む前に、理解する必要がある知識：

このチュートリアルを読み始める前に、HTML、CSS、JavaScriptの基礎を理解している必要があります。これらの概念に詳しくない場合は、まず私たちのこれらのチュートリアルを読むことをお勧めします：

Bootstrap4 サンプル

サンプル

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap4　実例</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<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>
</body>
</html>

テストして見て‹/›

Bootstrap4 　とBootstrap3

Bootstrap4 はBootstrapの最新バージョンであり、Bootstrap3 具体的なクラスがもっと多くあり、関連する部分が関連するコンポーネントに変えられたため、Bootstrap.min.cssのバージョンはもっと小さくなりました。40%以上。

Bootstrap4 がIE8 およびiOS 6 のサポートが現在はIE9 のバージョンおよびiOS 7 のバージョンのブラウザ。もしそのうちに以前のブラウザを使用する必要がある場合は、 Bootstrap3.

注意：デフォルトでは、Bootstrap 4Bootstrapはモバイル優先の方法で応答を行います。Bootstrap 4.3はBootstrapの最新、最も安定したバージョンです。すべての主要な現代ブラウザがBootstrapをサポートしています。 4、例えばGoogle Chrome、Firefox、Safari、Internet Explorer 10および更高版本等。