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

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

なぜブートストラップを学ぶのですか？

Mobile first approach − Bootstrap 3、フレームワークは、個別のファイルではなく、ライブラリ全体のモバイルファーストスタイルで構成されています。
Browser Support −一般的なすべてのブラウザでサポートされています。

Easy to get started− HTMLとCSSの知識だけで、誰でもBootstrapを使い始めることができます。また、Bootstrapの公式サイトには優れたドキュメントがあります。
Responsive design− BootstrapのレスポンシブCSSは、デスクトップ、タブレット、およびモバイルに適応します。レスポンシブデザインの詳細については、「ブートストラップレスポンシブデザイン」の章を参照してください。

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

Bootstrapを使用したHelloWorld。

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

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

聴衆

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

前提条件

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