ブートストラップチュートリアル

Twitter Bootstrapは、最近最も人気のあるフロントエンドフレームワークです。より高速で簡単なWeb開発のための、洗練された直感的で強力なモバイルファーストフロントエンドフレームワークです。 HTML、CSS、およびJavascriptを使用します。このチュートリアルでは、Webプロジェクトを簡単に作成できるBootstrap Frameworkの基本について説明します。チュートリアルは、Bootstrap Basic Structure、Bootstrap CSS、Bootstrap Layout Components、Bootstrap Pluginsなどのセクションに分かれています。これらの各セクションには、関連トピックと簡単で役立つ例が含まれています。

ブートストラップを学ぶ理由

モバイルファーストアプローチ-ブートストラップ3、フレームワークは、個別のファイルではなく、ライブラリ全体のモバイルファーストスタイルで構成されます。
ブラウザのサポート-すべての一般的なブラウザでサポートされています。

人気ブラウザ

始めるのは簡単-HTMLとCSSの知識があれば、誰でもBootstrapを使い始めることができます。また、Bootstrapの公式サイトには優れたドキュメントがあります。
レスポンシブデザイン-ブートストラップのレスポンシブCSSはデスクトップ、タブレット、モバイルに適応します。レスポンシブデザインの詳細については、次の章のリンクをご覧ください。/bootstrap/bootstrap_sensitive_utilities[BootstrapResponsive Design。]

レスポンシブデザイン

開発者向けのインターフェースを構築するためのクリーンで統一されたソリューションを提供します。
カスタマイズが容易な美しく機能的な組み込みコンポーネントが含まれています。
また、Webベースのカスタマイズも提供します。
そして何よりも、それはオープンソースです。

Bootstrapを使用したHello World。

Bootstrapについて少し興奮するために、従来の小さなBootstrap Hello Worldプログラムを紹介します。デモリンクを使用して試してみることができます。

<!DOCTYPE html>
<html>

   <head>
      <title>Bootstrap 101 Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">

      <!-- Bootstrap -->
      <link href = "css/bootstrap.min.css" rel = "stylesheet">

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file://-->

      <!--[if lt IE 9]>
      <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

   </head>

   <body>
      <h1>Hello, world!</h1>

      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src = "https://code.jquery.com/jquery.js"></script>

      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src = "js/bootstrap.min.js"></script>

   </body>
</html>

ブートストラップの応用

Scaffolding -ブートストラップは、グリッドシステム、リンクスタイル、および背景を持つ基本構造を提供します。これについては、*ブートストラップの基本構造*セクションで詳しく説明します。
CSS -ブートストラップには、グローバルCSS設定、拡張可能なクラスでスタイル設定および拡張された基本的なHTML要素、および高度なグリッドシステムの機能が付属しています。これについては、 Bootstrap with CSS セクションで詳しく説明します。
コンポーネント-ブートストラップには、図像、ドロップダウン、ナビゲーション、アラート、ポップオーバーなどを提供するために構築されたダース以上の再利用可能なコンポーネントが含まれています。これについては、*レイアウトコンポーネント*セクションで詳しく説明します。
* JavaScriptプラグイン*-ブートストラップには12個以上のカスタムjQueryプラグインが含まれています。それらをすべて、または1つずつ簡単に含めることができます。これについては、*ブートストラッププラグイン*セクションで詳しく説明します。
カスタマイズ-Bootstrapのコンポーネント、LESS変数、jQueryプラグインをカスタマイズして、独自のバージョンを取得できます。

聴衆

このチュートリアルは、HTMLとCSSの基本的な知識があり、Webサイトを開発したい人のために用意されています。このチュートリアルを完了すると、Twitter Bootstrapを使用したWebプロジェクトの開発に中程度の専門知識を身に付けることができます。

前提条件

このチュートリアルを始める前に、HTMLとCSSの基本について既に理解していることを前提としています。これらの概念をよく知らない場合は、HTMLチュートリアルとCSSチュートリアルに関する短いチュートリアルを読むことをお勧めします。