Bootstrap4-environment-setup

提供：Dev Guides
移動先:案内、検索

ブートストラップ4-環境設定

Bootstrap 4をWebサイトで使用するには、CDN（Content Delivery Network）から含めるか、_getbootstrap.com_からダウンロードします。

CDNを使用する

Bootstrap 4は、https://en.wikipedia.org/wiki/Content_delivery_network [Content Delivery Network]から追加することにより、Webサイトで使用できます。

以下のコンパイル済みのBootstrapのCSSおよびJSのCDNをプロジェクトで使用します。 

<!-- Compiled and Minified Bootstrap CSS -->
<link rel = "stylesheet"
   href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
   integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
   crossorigin = "anonymous">

<!-- jQuery Library -->
<script src = "https://code.jquery.com/jquery-3.2.1.slim.min.js"
   integrity = "sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
   crossorigin = "anonymous">
</script>

<!-- Popper -->
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
   integrity = "sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
   crossorigin = "anonymous">
</script>

<!-- Compiled and Minified Bootstrap JavaScript -->
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
   integrity = "sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
   crossorigin = "anonymous">
</script>

コンパイルされたバージョンのJavaScriptを使用している場合は、minified Bootstrap JavaScript_の前に、CDNバージョンの_jQuery_および_Popper.js（Bootstrap 4はjQueryおよびPopper.jsを使用して、モーダル、ツールチップ、ポップオーバーなどのJavaScriptコンポーネントを使用します）を含めます。

以下はjQueryを必要とするいくつかのコンポーネントです-

  • クローズ可能なアラートに使用
  • ボタンとチェックボックス/ラジオボタンを使用して状態を切り替え、コンテンツを切り替えるために折りたたみます
  • スライド、コントロール、インジケーターのカルーセル
  • ドロップダウン（完璧な配置のために_Popper.js_を使用）
  • モーダルの開閉
  • Navbarを折りたたみます
  • ツールチップとポップオーバー（_Popper.js_を使用して完璧な位置に配置します）

Bootstrap 4のダウンロード

Bootstrap 4はhttps://getbootstrap.com/docs/4.1/getting-started/download/からダウンロードできます。 このリンクをクリックすると、次のような画面が表示されます-

ブートストラップ4ダウンロード画面

ここでは、2つのボタンを見ることができます-

  • ダウンロード-これをクリックすると、BootstrapのCSSおよびJavaScriptのプリコンパイルおよび縮小版をダウンロードできます。 ドキュメントまたは元のソースコードファイルは含まれていません。
  • ソースのダウンロード-これをクリックすると、最新のBootstrap SCSS、JavaScriptソースコード、およびドキュメントファイルを取得できます。

理解を深めて使いやすくするために、チュートリアル全体でプリコンパイルされたバージョンのBootstrapを使用します。 ファイルはコンパイルおよび縮小されるため、個々の機能のために個別のファイルを含めるたびに気にする必要はありません。

ファイル構造

プリコンパイル済みブートストラップ4

コンパイルされたバージョンのBootstrap 4がダウンロードされたら、ZIPファイルを解凍すると、次のファイル/ディレクトリ構造が表示されます-

プリコンパイル済みブートストラップ4

ご覧のとおり、コンパイルされたCSSとJS（bootstrap。）、およびコンパイルされ縮小されたCSSとJS（bootstrap.min。）があります。

ブートストラップ4ソースコード

あなたがBootstrap 4のソースコードをダウンロードしている場合、ファイル構造は次のようになります-

ブートストラップ4ソースコード

  • _js/_および_scss/_の下のファイルは、Bootstrap CSSおよびJavaScriptのソースコードです。
  • _dist/_フォルダーには、上記のプリコンパイル済みダウンロードセクションにリストされているすべてのものが含まれます。
  • _docs/examples/_には、BootstrapドキュメントのソースコードとBootstrapの使用例が含まれています。

Bootstrap 4で最初のWebページを作成する

以下の例では、Bootstrap 4の単純なWebページを指定しています-

例

<html lang = "en">
   <head>
      <!-- Meta tags -->
      <meta charset = "utf-8">
      <meta name = "viewport" content = "width=device-width, initial-scale = 1, shrink-to-fit = no">

      <!-- Bootstrap CSS -->
      <link rel = "stylesheet"
      href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
         integrity =" sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
         crossorigin = "anonymous">

      <title>Bootstrap 4 Example</title>
   </head>

   <body>
      <h2>Hello, world!!! Welcome to finddevguides...</h2>

      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script src = "https://code.jquery.com/jquery-3.3.1.slim.min.js"
         integrity = "sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
         crossorigin = "anonymous">
      </script>

      <script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
         integrity = "sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
         crossorigin = "anonymous">
      </script>

      <script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
         integrity = "sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
         crossorigin = "anonymous">
      </script>

   </body>
</html>

それは次の結果を生成します-

出力

「https://www.finddevguides.com/index.php?title=Bootstrap4-environment-setup&oldid=7376」から取得
Powered by MediaWiki