レスポンシブWebデザインのための最高のブートストラップチュートリアル

Bootstrapは、Web開発で人気のあるフロントエンドフレームワークです。HTMLコンテンツのスタイルを設定するためのビルド済みのコンポーネントとデザイン要素が含まれています。Chrome、Firefox、Opera、Safari、InternetExplorerなどの最新のブラウザはBootstrapをサポートしています。

Bootstrapには、さまざまなレイアウトに対応するレスポンシブグリッドシステムが含まれています。これは、モバイルフレンドリーなWebサイトを構築するための優れた出発点です。また、折りたたみ可能なコンテンツ、カルーセル、モーダルなどのオプションのJavaScript機能も含まれています。

バージョン履歴

Twitterは当初、内部ツールとしてBootstrapフレームワークを開発しました。2011年8月にオープンソースプロジェクトとしてリリースしました。

Bootstrap 2は2012年1月にリリースされました。主な機能の1つは、12列のレスポンシブグリッドシステムの導入でした。Bootstrap 3は2013年8月に登場し、フラットなデザインとモバイルファーストのアプローチに切り替えました。Bootstrap 4は、2017年8月の時点でベータ版で利用可能であり、SassとFlexboxが含まれるようになりました。

Bootstrap 4は2017年にいくつかのベータバージョンをリリースする前に2年間開発されていましたが、最初の安定したリリースは2018年1月にリリースされました。いくつかの注目すべき変更は次のとおりです。

  • LessからSassに移動しました。
  • Flexboxに移動し、グリッドシステムを改善しました。
  • カードを追加しました(ウェル、サムネイル、パネルの交換)。
  • そしてもっとたくさん!

執筆時点で、Bootstrapの最新リリースは4.1.3です。発表のニュースについていく場合は、こちらでフォローしてください。

インストール

WebプロジェクトにBootstrapを追加するには、主に2つのオプションがあります。公開されているソースにリンクするか、フレームワークを直接ダウンロードできます。

別のソースへのリンク

コンテンツ配信ネットワーク(CDN)を参照するWebページ内の要素を使用して、ブートストラップCSSを追加できます。

BootstrapのJavaScript要素の追加は、通常 ''タグの下部に配置される要素と似ています。最初にいくつかの依存関係を含める必要があるかもしれません。リストされている順序に特に注意してください。

注:これらは単なる例であり、予告なしに変更される場合があります。プロジェクトに含める現在のリンクについては、CDNを参照してください。

ダウンロード/インストール

Bower、Composer、Meteor、またはnpmを使用してBootstrapソースファイルをダウンロードしてインストールできます。これにより、より優れた制御と、必要に応じてモジュールを含めるまたは除外するオプションが可能になります。

npm install bootstrap

gem 'bootstrap', '~> 4.1.3'

注:これらは単なる例であり、予告なしに変更される場合があります。最新のリンクについては、空白の 'rel =' nofollow '> BootstrapWebサイトを参照してください

ブートストラップグリッドシステム

グリッドシステムは、すべてのデバイスに適したすべての形状とサイズのレイアウトをすばやく構築するためのモバイルファーストのフレックスボックスシステムです。これは12列のレイアウトに基づいており、メディアクエリ範囲ごとに1つずつ、複数の層があります。

Bootstrapには、マークアップで使用するための事前定義されたグリッドクラスが付属しています。詳細と例については、// getbootstrap.com/docs/4.1/layout/grid/をご覧ください。

Boostrapの機能

詳しくは:

Bootstrapには、多くの例と開始用のHTMLテンプレートを含む完全なドキュメントがあります(このテンプレートにはスクリプトのみが含まれています。探しているものであれば、グリッドシステムのセットアップは含まれていません)。

さらに、Bootstrapフレームワークに基づいて構築された無料と有料の両方のテーマを見つけて、よりカスタマイズされたスタイリッシュな外観を提供できます。

ブートストラップリソース:

Bootstrapの公式ブログ

ブートストラップサイトのインスピレーション

Bootstrapを使用して構築されたサイトのショーケース

Bootstrapを使用するプロジェクトのHTMLリンター

Bootstrapのデザイン要素とコードスニペット

Bootstrapのコード、テーマ、およびアドオンリソース

Bootstrapチュートリアルの開始

Bootstrapを使用すると、完全にレスポンシブなWebサイトを簡単に設計でき、学ぶ価値のあるフレームワークです。

レスポンシブウェブサイトとは何ですか?

レスポンシブウェブサイトは、ブラウザのサイズに応じてページ上のアイテムのサイズを変更したり再配置したりするウェブサイトです。レスポンシブウェブサイトでは、ブラウザのサイズを変更すると、変更がリアルタイムで発生することを確認できます。Bootstrapを使用すると、Webサイトの応答性が向上します。

ページにブートストラップを追加する方法

ページにブートストラップを追加するのは速いプロセスです。コードのタグに以下を追加するだけです。

またbody、コード内のタグの間に以下を追加する必要があります。ブートストラップを使用すると、タグを使用することになります。Bootstrapの機能の多くを使用する場合、各タグには、タグがそのタスクを実行できるようにする独自のクラスのセットが適用されます。このBootstrapガイドの他のセクションでは、Bootstrapがタグを使用する方法の例をさらに示します。(タグはBootstrap専用ではありませんが、Bootstrapはそれらを利用します。)

以下は、body開始を完了するためにコード内のタグに追加するコードです。これによりコンテナが作成されますが、コンテナにコンテンツを追加するまでページは空白のままになることに注意してください。

Congratulations!

Bootstrap is now working on this page

テンプレート

テンプレートは、新しいWebページを簡単に作成できるビルド済みのツールキットです。目的のレイアウトの一般的なアイデアがある場合、またはアイデアの一般的なレイアウトテンプレートのライブラリを参照する場合、Bootstrapテンプレートは、最初のビルドプロセスから面倒でフラストレーションの多くを取り除きます。この支援は、CSSが協力していない理由を不思議に思うのではなく、プロジェクトのより細かい詳細に集中するのに役立ちます。

入門

テンプレートリンク

ナビゲーションバー

Bootstrapフレームワークは、機能呼び出しナビゲーションバーを提供します。要するに、ナビゲーションバー(ナビゲーションバーとも呼ばれます)は、ナビゲーション情報を表示するためのページ上部のヘッダーです。

使い方

ブートストラップナビゲーションバーを使用するには、Webページの要素内の上部に要素を追加します。ナビゲーションバーの表示をカスタマイズするために追加できるさまざまなスタイルがあります。

コード例

これは、基本的なナビゲーションバーを作成するために必要なコードです。

 Site Name 
  • Home
  • Page 1
  • Page 2
  • Page 3

ナビゲーションバースタイル

Bootstrapは、ナビゲーションバーのスタイルを設定するための一連のクラスをBootstrapフレームワークに提供します。これらのクラスは次のとおりです。

ナビゲーションバーへのドロップダウンメニューの追加

ナビゲーションバー内にドロップダウンメニューを含めることができます。この機能を使用するには、Bootstrapのjavascriptファイルを含める必要があります。

  • Drop down
    • Item 1
    • Item 2
    • Item 3
  • ナビゲーションバーにボタンを追加する

    ナビゲーションバーにボタンを追加できます。既存のBootstrapButtonクラスは機能しますがnavbar-btn、クラスリストの最後にクラスを含める必要があります。

    Button

    ナビゲーションバーにフォームを追加する

    ナビゲーションバーにフォームを追加することもできます。これは、検索フィールド、クイックログインフィールドなどのタスクに使用できます。

     Search 

    ナビゲーションバーの右側に要素を配置する

    場合によっては、ナビゲーションバーの要素を右に揃えたい場合があります(たとえば、ログインボタンまたはサインアップボタン)。これを行うには、navbar-rightクラスを使用する必要があります。

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3
    • Action Link #1
    • Action Link #2

    スクロールとは関係なくナビゲーションバーを表示する

    場合によっては、スクロールに関係なく、ナビゲーションバーを画面の上部または下部に保持したいことがあります。navbar-fixed-topまたはnavbar-fixed-bottomクラスを要素に追加する必要があります。

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    ナビゲーションバーの折りたたみ

    小さな画面(電話やタブレットなど)では、ナビゲーションバーが占有するスペースが大きすぎます。幸いなことに、ナビゲーションバーを折りたたむオプションがあります。これは、次の例を使用して実行できます。

     Site Name 
    • Home
    • Page 1
    • Page 2
    • Page 3

    ナビゲーションバーの例

    Original text