twitter-bootstrap チュートリアル
twitter-bootstrapを使い始める

Angular 2 AngularJS ASP.NET asp.net-mvc CSS HTML JavaScript jQuery PHP Ruby on Rails

備考

ブートストラップは、モバイルファーストパラダイムとレスポンシブウェブデザイン（RWD）を使用して作成されたウェブサイトを作成するために使用されるHTML、CSS、およびJavaScriptフレームワークです。これは、プレデアCSSクラスとJavaScriptの組み合わせを使用して、Web上でさまざまなことを実現します。これには、ウェブサイトをどの画面でも見ることができるカスタムレスポンスグリッド、レスポンシブなドロップダウンナビゲーションバー、プレミードボタン、フォーム、アコーディオンなどの時間を要する簡単なものなども含まれていますいくつか。

ブートストラップは、次の理由で便利です。

時間の節約 ：ブートストラップには、あらかじめ構築された多くのものがあり、コードを書くときに呼び出されるだけです。これにより、かなりの時間が節約され、ウェブサイトのコーディングに要する時間を大幅に短縮することができます。
レスポンシブなWebデザインを念頭に置いて構築されています ：Bootstrapは、Web上の開発者が画面の大きさに合わせて作成するものを作成することを心配する必要はありません。サイズ。
設計プロセスの簡素化 ：ブートストラップには、優れた設計手法を持つ要素があらかじめ組み込まれています。これは、Webデザインスキルがそれほど高くない人や、デザインを面倒な作業として見ている人にとっては、Bootstrapクラスの多くが審美的に気に入っていて見栄えが良いために役立ちます。

このセクションでは、twitter-bootstrap内の大きなテーマについて説明し、関連トピックにリンクする必要があります。 twitter-bootstrapのドキュメントは新しくなっているので、それらの関連トピックの初期バージョンを作成する必要があります。

バージョン

バージョン	発売日
4.0	2999-01-01
3.3.7	2016-07-25
3.3.6	2015-11-24
3.3.5	2015-06-15
3.3.4	2015-03-16
3.3.1	2014-11-12
3.3.0	2014-10-29
3.2.0	2014-06-26
3.1.0	2014-01-30
3.0	2013-08-19
2.3	2013-02-07
2.2	2012-10-29
2.1	2012-08-20
2.0	2012-02-01
1.0	2011-08-18

インストール/セットアップ

ダウンロード：

ブートストラップを GitHubリポジトリから直接ダウンロードするか、クローンするなど
カスタマイズされたバージョンのBootstrapを公式ドキュメントからダウンロードする
bower install bootstrap ： bower install bootstrap
npm install bootstrap ： npm install bootstrap
composer require twbs/bootstrapとのインストール： composer require twbs/bootstrap

ファイル構造

インストール：

HTMLページ内には、BootstrapのCSS、JS、およびjQueryの依存関係（少なくとも最新のBootstrapバージョンの前バージョン3）が含まれています。 BootstrapのJavaScript機能を利用する予定の場合、jQueryリファレンスは、HTML内のbootstrap.js参照の前に来る必要があります。

インストールされたBootstrapファイルを上のセクションから利用するか、またはBootstrapのメーカーが提供するCDNを参照することができます（Bootstrap 入門からのリンク）。

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

非常に基本的なブートストラップのウェブページ：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

基本テンプレート

<!DOCTYPE html>
<html lang="en">
  
    <head>
        
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    
        
        <title>Bootstrap 101 Template</title>  <!-- The title of the Website -->


        <!-- Reference to Bootstrap's CSS file -->
        <!-- This is the line to reference the bootstrap's Stylesheet -->
        <link href="css/bootstrap.min.css" rel="stylesheet"> 


        <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
         <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <!--[endif]-->
  

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

        <!-- Referencing jQuery (necessary for Bootstrap JavaScript plugins(bootstrap.min.js) to work) -->
        <script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    

        <!-- Referencing Javascript Bootstrap Plugin to Facilitate Bootstrap Animations and functionalities. -->
        <!-- (Necessary to run Bootstrap) -->
        <script src="js/bootstrap.min.js"></script>
  

    </body>
</html>

ブートストラップを使用する場合

ブートストラップは、HTML、CSS、Javascriptのための有力なフレームワークです。これには、フォーム要素、ボタン、モーダルウィンドウ、ナビゲーション要素などの[ユーザーインターフェイス]要素が受け入れられるようになったための基本的なスタイリングと機能が含まれています。

ブートストラップはレスポンシブなWebフレームワークです。つまり、モバイルデバイス、タブレット、デスクトップコンピュータなどの大小さまざまな画面サイズのレイアウトとデザインをすべて単一のコードベースで調整するように設計されています。

ブートストラップの基本概念の1つがグリッドフレームワークです。 HTML要素にクラスを適用することで、12列の基本グリッドを使用して複雑なレイアウトを作成することができます。たとえば、4列のレイアウトは、タブレットデバイスの2つの列とモバイルデバイスの1つの列に対応しています。グリッドは、 media queries 、特定の画面サイズをターゲットにするCSSメソッドを使用してこれを実現します。

ブートストラップは、次の場合に特に効果的です。

カスタムデザインは最優先事項ではありません
カスタムCSSを作成するよりも、HTMLの編集やクラスの追加が快適です。
あなたは他の多くのウェブサイトと多くの視覚的な類似点を持つフレームワークを使用して快適です

ブートストラップは、HTML、CSS、Javascriptを初めて使用する人には、ドキュメントが優れているため使用できます。しかし、Bootstrap（HTML、CSS、Javascript）で使用されている3つの基本的な技術に完全には慣れていない人にとっては、学習曲線があります。

ブートストラップのスタイルや機能を変更するために、ブートストラップテーマを購入またはダウンロードすることが可能です。 CSSとJavascriptをカスタマイズして、ブートストラップを出発点として使用することもできます。

ブートストラップコンポーネントを使用する基本Webページ

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

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

    <!-- HTML5 shim and Respond.js for 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/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
     <!-- Fixed navbar -->
        <nav class="navbar navbar-default navbar-fixed-top">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="#">Project name</a>
            </div>
            <div id="navbar" class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <li class="dropdown">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Nav header</li>
                    <li><a href="#">Separated link</a></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
                </li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="../navbar/">Default</a></li>
                <li><a href="../navbar-static-top/">Static top</a></li>
                <li class="active"><a href="./">Fixed top <span class="sr-only">(current)</span></a></li>
              </ul>
            </div><!--/.nav-collapse -->
          </div>
        </nav>
    
        <div class="container">

          <div class="jumbotron">
            <h1>Navbar example</h1>
            <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
            <p>To see the difference between static and fixed top navbars, just scroll.</p>
            <p>
              <a class="btn btn-lg btn-primary" href="../../components/#navbar" role="button">View navbar docs &raquo;</a>
            </p>
          </div>
    
        </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Modified text is an extract of the original Stack Overflow Documentation

ライセンスを受けた CC BY-SA 3.0

所属していない Stack Overflow