twitter-bootstrap-3 チュートリアル
twitter-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関連のプロジェクトについては、 ここで入手できます 。
使用法
<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>
こんにちは世界
次の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>
ブートストラップのインストールと開始
前書き
だからあなたのプロジェクトにブートストラップを使い始めたいのですか？すばらしいです！今すぐ始めましょう！
ブートストラップとは何ですか？ブートストラップは、レスポンシブなデザインとシンプルなコードを使用して素早く反応性の高いプロジェクトを作成できるオープンソースライブラリです。レスポンシブ・デザインは、システムの設計（表現とレイアウト）がデバイスのレイアウトに応じて応答/適応する設計哲学です。設計の応答性を維持する主な理由は、一連のデバイスを使用して、アプリケーションのリーチをより大きなユーザーベースに拡大することです。
インストール
ブートストラップは、さまざまな方法で、さまざまな種類のプロジェクトにインストールできます。以下のリストでは、ブートストラップのインストール方法に関するダウンロードとチュートリアルのリンクをいくつか載せています
ダウンロードリンク
- 直接ダウンロード - ダウンロードリンク
- 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/をご覧ください。
もっと情報を追加したい場合や、いくつかの問題に遭遇した場合は、私に知らせてください！皆さんに幸せなコーディングをお届けします！