twitter-bootstrap-3twitter-bootstrap-3を使い始める


備考

ブートストラップは、WebサイトやWebアプリケーションを設計するためのフリーでオープンソースのフロントエンドWebフレームワークです。これには、タイポグラフィ、フォーム、ボタン、ナビゲーションおよびその他のインターフェイスコンポーネント、およびオプションのJavaScript拡張機能のためのHTMLベースおよびCSSベースのデザインテンプレートが含まれています。多くのWebフレームワークとは異なり、フロントエンド開発のみに関わっています。

BootstrapはGitHub上で2番目に星印のついたプロジェクトで、約10万の星と約45,000のフォークを持っています。

バージョン

バージョン発売日
3.3.7 2016-07-25

ブートストラップのインストールと開始

前書き
だからあなたのプロジェクトにブートストラップを使い始めたいのですか?すばらしいです!今すぐ始めましょう!

ブートストラップとは何ですか?ブートストラップは、レスポンシブなデザインとシンプルなコードを使用して素早く反応性の高いプロジェクトを作成できるオープンソースライブラリです。レスポンシブ・デザインは、システムの設計(表現とレイアウト)がデバイスのレイアウトに応じて応答/適応する設計哲学です。設計の応答性を維持する主な理由は、一連のデバイスを使用して、アプリケーションのリーチをより大きなユーザーベースに拡大することです。
インストール
ブートストラップは、さまざまな方法で、さまざまな種類のプロジェクトにインストールできます。以下のリストでは、ブートストラップのインストール方法に関するダウンロードとチュートリアルのリンクをいくつか載せています
ダウンロードリンク

  • 直接ダウンロード - ダウンロードリンク
  • CDN - ここに来る
  • Bower - bower install bootstrap [read]
  • NPM - npm install bootstrap [read]
  • 作曲家 - composer require twbs/bootstrap [read]
  • カスタマイズ - あなた自身の設定があります。 ここでカスタマイズできます
  • Sass - Sass関連プロジェクトでは、あなたはそれを得るかもしれません[1]。

基本情報
今はあなたのプロジェクトにブートストラップをインストールしました。そして今、ブートストラップの大きな利点を使い始める時が来ました。最初に、ブートストラップの基本的な使い方を説明します。その後、いくつかの小さな例を紹介し、最後にスタートテンプレートとして使用できるスタートアップコードの例を示します。

グリッドシステム
ブートストラップはグリッドシステムを使用します。このグリッドシステムは通常、12個の列で構成されています。これらの12列のそれぞれは同じ幅を持ちますが、異なる高さを持つことができます。

だから我々は12列からなるグリッドシステムを持っている。これらの列を使用して、基本的なウェブサイトを構築することができます。次のレイアウトを達成したいと言うことができます:

メニュー - 全幅
サイドバー - 画面の1/3
メインコンテンツ画面の2/3
フッター - 全幅

メニュー
まず、メニューを見ていきます。我々が知っているように、グリッドシステムは12列で動作します。メニューを全幅にしたいので、メニューを12列すべてに配置する必要があります。下の例のようになります

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    Menu
</div>
 

メニューにcol-lg-12クラスを与えることによって、次のことを示します:
col - classnameのcolは列を表します。
lg - classnameのlgは画面の幅を表します。この場合は大きくなります。
12 - クラス名の12は、私たちのメニューに所有したいカラムの数を表します。この例では、メニューを全幅にしたいので、すべての12列(12/12)

12行のうち12行をメニューに使用していたので、メニューが新しい行に設定された後、

サイドバー
テンプレートに追加する2つ目の項目はサイドバーです。サイドバーを画面の1/3にしたいと言ったように。ですから、私たちがやろうとしていることは、3の12の欄を4に分割することです。これで、画面の1/3に達する欄の数がわかります。以下のコードに従ってください。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
 

メニューと同じように、私たちの数はメニューとは異なります。
col - classnameのcolは列を表します。
lg - classnameのlgは画面の幅を表します。この場合は大きくなります。
4 - クラス名の12は、サイドバーに持たせたいカラム数を表します。この場合、サイドバーに画面の1/3を塗りつぶして、12列のうち4列(4/12)しか取得しないので、

コンテンツ
今度はサイドバーの横に8列あります。だから私たちは私たちのコンテンツでそれらを埋めるつもりです。以下のサンプルコードを参照してください

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
 

この行の12個の列の残りの8個の列を塗りつぶしたので、次のセクションは12個の列の新しい行から再び開始されます。

フッター
フッターは画面上のフル幅のブロックになるメニューと同じように、この行の12行すべてをフッターとして取得します(下のサンプルコードを参照)。

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The menu
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
    The sidebar
</div>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
    The main content
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
    The footer
</div>i are described below.
 

これで、最初のブートストラップテンプレートであるhtmlファイルが非常に小さくなっています。しかしこれは非常に基本的なことです。通常、ブートストラップの完全な経験を得るために、このコードをもう少し作成します。これらの経験のいくつかを以下に説明します。

行とコンテナの使用上の簡単な例で述べたように、ブートストラップは12列の行を使用します。行が12列で満たされると、ブートストラップは新しい行で開始します。これらの行を表示する最善の方法は、行クラスを使用することです。コンテナクラスも使用します。これはbodyタグのようなものですが、このコンテナではすべてのコードを記述します。コンテナまたはコンテナ流体クラスのいずれかを選択できます。唯一の違いは、コンテナ流体クラスは画面の全幅を使用し、コンテナクラスは使用しないことです。これらの基本的な機能の例は以下の通りです。

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The menu consisting of 12 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
            The sidebar consisting of 4 columns
        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
            The main content consisting of 8 columns
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            The footer consisting of 12 columns
        </div>
    </div>
</div>
 

そこで、ブートストラップ付きのフルページテンプレートを作成しました。これは非常に単純なものですが、基本から始めて、後であらゆる種類のブートストラップクラスと機能を使用できるようになります。最後のもの。クラスのlg - md - smとxsカラム名は、私がページの幅に言ったように対応しています。 LarGe、MeDium、SMallおよびXSmall。列の量を変えることで、幅の違う列に異なるスタイルを適用することもできます。完全な行が12列で構成されていることを忘れないでください!

詳細については、 http//getbootstrap.com/ <br?素晴らしい例はhttp://expo.getbootstrap.comまたはhttp://bootsnipp.com/をご覧ください。

もっと情報を追加したい場合や、いくつかの問題に遭遇した場合は、私に知らせてください!皆さんに幸せなコーディングをお届けします!

こんにちは世界

次のHTML ページは、 Bootstrap 3 を使用した単純なHello Worldページを示しています。

このページには、サンプルリンクとドロップダウンコントロールを備えた全幅ナビゲーションバーが含まれています。ナビゲーションバーは、Bootstrapのモバイル機能の最初の機能を利用します。使用可能なビューポートの幅が増加すると、モバイルビューで折りたたまれて水平になります。

さらに、 jumbotron 要素が、注目情報を表示するために使用されている。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Hello World</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <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="#">Hello, World!</a>
            </div>


            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</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><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class="jumbotron">
            <h1>Bootstrap</h1>
            <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
            <p><a class="btn btn-primary btn-lg">Learn more</a></p>
        </div>
    </div>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>
</html>
 

インストール

使用法

<head>
  <link rel="stylesheet" href="path/to/bootstrap.min.css">
</head>
 

ブートストラップのjsファイルへの参照はbodyタグの直上にscriptタグを使用して行います(下記参照)。また、ブートストラップは、アコーディオンカルーセルなどのウィジェットのほとんどにjQueryを使用していますので、jQuery jsファイルの下の参照ブートストラップjsファイルを参照してください。

**サンプル**
<!DOCTYPE html>
<html lang="en">

<head>

  <title>Form Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body>

  <div class="container">
    <h2>Form Email</h2>
    <form role="form">
      <div class="form-group">
        <label for="email">Email:</label>
        <input type="email" class="form-control" id="email" placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="pwd">Password:</label>
        <input type="password" class="form-control" id="pwd" placeholder="Enter password">
      </div>
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>