ブートストラップ、Twitter から

Bootstrap は、Web アプリケーションとサイトの開発を開始するために設計された Twitter のツールキットです。
タイポグラフィ、フォーム、ボタン、テーブル、グリッド、ナビゲーションなどのベース CSS と HTML が含まれています。

オタクの警告: Bootstrap はLessで構築されており、最新のブラウザーを念頭に置いてすぐに動作するように設計されています。

CSS をホットリンクする

最も迅速かつ簡単に開始するには、このスニペットを Web ページにコピーするだけです。

Less で使用する

Lessの使用のファンですか？問題ありません。レポをクローンして、次の行を追加するだけです。

GitHub のフォーク

Github の公式 Bootstrap リポジトリを使用して、ダウンロード、フォーク、プル、ファイルの問題などを行います。

GitHub のブートストラップ »

歴史

Twitter の初期の頃、エンジニアは使い慣れたほぼすべてのライブラリを使用して、フロントエンドの要件を満たしていました。Bootstrap は、Twitter の最初の Hackweek で発生した課題への回答として始まり、開発は急速に加速しました。

Twitter の多くのエンジニアの助けとフィードバックにより、Bootstrap は大幅に成長し、基本的なスタイルだけでなく、よりエレガントで耐久性のあるフロントエンドのデザインパターンを含むようになりました。

詳しくはdev.twitter.comをご覧ください ›

ブラウザのサポート

Bootstrap は、Chrome、Safari、Internet Explorer、Firefox などの主要な最新ブラウザーでテストおよびサポートされています。

最新のサファリ
最新の Google Chrome
Firefox 4+
Internet Explorer 7 以降
オペラ 11

含まれるもの

Bootstrap には、コンパイル済みの CSS、コンパイルされていないテンプレート、およびサンプルテンプレートが付属しています。

すべての元の .less ファイル
完全にコンパイルおよび縮小された CSS
完全なスタイルガイドドキュメント
ページテンプレートの例 (さらに追加予定)

デフォルトのグリッド

Bootstrap の一部として提供されるデフォルトのグリッドシステムは、幅 940px の 16 列のグリッドです。これは人気のある 960 グリッドシステムのフレーバーですが、左右に追加のマージン/パディングはありません。

グリッドマークアップの例

ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッドシステムの一部として定義した 16 の基本的な列にまたがっています。その他のバリエーションについては、以下の例を参照してください。

<divクラス= "行" > 
  <divクラス= "span6 列" > 
    ...
  </div>
  <divクラス= "span10 列" > 
    ...
  </div>
</div>

1/3

2/3

列のオフセット

8 オフセット 4

1/3 オフセット 2/3s

4 オフセット 4

5 オフセット 3

10 オフセット 6

固定レイアウト

単一の<div.container>.

<本体>
  <divクラス= "コンテナ" > 
    ...
  </div>
</body>

流動的なレイアウト

最小幅と最大幅、および左側のサイドバーを備えた、代替の柔軟で流動的なページ構造。アプリやドキュメントに最適です。

<本体>
  <div class = "コンテナ流体" > 
    <divクラス= "サイドバー" > 
      ...
    </div>
    <divクラス= "コンテンツ" > 
      ...
    </div>
  </div>
</body>

見出しとコピー

Web ページを構造化するための標準のタイポグラフィ階層。

文字体裁グリッド全体は、preboot.less ファイル内の 2 つの Less 変数に基づいています:@basefontと@baseline. 1 つ目は全体で使用されるベースの font-size で、2 つ目はベースの line-height です。

これらの変数といくつかの計算を使用して、すべてのタイプのマージン、パディング、および行の高さなどを作成します。

h1. 見出し 1

h2. 見出し 2

h3. 見出し 3

h4. 見出し 4

h5. 見出し 5

h6. 見出し 6

段落の例

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.

見出しの例サブ見出しがあります…

その他要素

強調、住所、略語の使用

<strong> <em> <address> <abbr>

いつ使用するか

強調タグ (<strong>および<em>) は、周囲のコピーに関連する単語またはフレーズの追加の重要性または強調を示すために使用する必要があります。<strong>重要性と<em>ストレス強調に使用します。

段落内の強調

Fusce dapibus、tellus ac cursus commodo、tortor mauris condimentum nibh、ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero、pharetra augue。

注:<b> HTML5 でおよびタグを使用することは引き続き問題<i>なく、それぞれ太字と斜体のスタイルにする必要はありません (ただし、より意味のある要素がある場合はそれを使用してください)。<b>重要性を増やさずに単語やフレーズを強調することを目的としています<i>が、主に音声、技術用語などを対象としています。

住所

この<address>要素は、その最も近い先祖、または作品全体の連絡先情報に使用されます。外観は次のとおりです。

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
: (123) 456-7890

注:の各行は<address>改行 ( ) で終了するか、コンテンツを適切に構成するために<br />ブロックレベルのタグ ( など) で囲む必要があります。<p>

略語

略語と頭字語については、<abbr>タグを使用します (<acronym>はHTML5 では非推奨です)。タグ内に短縮形を置き、完全な名前のタイトルを設定します。

ブロッククオート

<blockquote> <p> <small>

引用方法

ブロック引用を含めるには、折り返し<blockquote>てタグ<p>を付けます。<small>要素を使用し<small>てソースを引用すると、その前に em ダッシュが表示—されます。

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
ジュリアス・ヒバート博士

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
- インゲンマメ iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

スタイルなし`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
- インゲンマメ iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

順序付けられました`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
マッサで整数痴漢ロレム
プレチウムニスルアリケのファシリシス
Nulla volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

説明`dl`

説明リスト: 説明リストは、用語を定義するのに最適です。
ユースモッド: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
マレスアダポルタ: Etiam porta sem malesuada magna mollis euismod.

テーブルの作成

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

テーブルは、さまざまな用途に最適です。ただし、優れたテーブルには、(コードレベルで) 有用で、スケーラブルで、読みやすいものにするために、多少のマークアップ愛が必要です。役立つヒントをいくつか紹介します。

<thead>階層が<thead>> <tr>>であるように、常に列ヘッダーをラップします<th>。

列ヘッダーと同様に、すべてのテーブルの本文コンテンツはでラップする必要がある<tbody>ため、階層は<tbody>> <tr>><td>です。

例: デフォルトのテーブルスタイル

すべての表は、読みやすさを確保し、構造を維持するために、必要な境界線のみで自動的にスタイル設定されます。クラスや属性を追加する必要はありません。

#	ファーストネーム	苗字	言語
1	いくつか	1	英語
2	ジョー	6パック	英語
3	ストゥ	凹み	コード

<テーブル>
  ...
</表>

例: ゼブラストライプ

.zebra-stripedクラスを追加するだけで、ゼブラストライプを追加して、テーブルを少し凝らせます。

#	ファーストネーム	苗字	言語
1	いくつか	1	英語
2	ジョー	6パック	英語
3	ストゥ	凹み	コード

注:ゼブラストライピングは、IE8 以下のような古いブラウザーでは利用できない漸進的な機能強化です。

<テーブルクラス= "ゼブラ ストライプ" > 
...
</表>

例: TableSorter.js を使用したゼブラストライプ

前の例では、 jQueryとTablesorterプラグインを介して並べ替え機能を提供することで、テーブルの有用性を向上させます。並べ替えを変更するには、任意の列のヘッダーをクリックします。

#	ファーストネーム	苗字	言語
1	君の	1	英語
2	ジョー	6パック	英語
3	ストゥ	凹み	コード

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<スクリプト> 
  $ (関数() { 
    $ ( "テーブル #sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<テーブルクラス= "ゼブラ ストライプ" > 
  ...
</表>

固定トップバー

それは何ですか

トップバーは、Web サイトのロゴまたは名前、プライマリナビゲーション、および検索フォームを収容する固定バーです。

カスタマイズ可能

内部のすべての要素、およびトップバー全体もオプションです。ロゴ/名前、ナビゲーション、検索、およびセカンダリナビゲーション、またはそれらの任意の組み合わせを含めることを選択できます。

ドロップダウンが含まれています

メインナビゲーションの一部として、ナビゲーションにドロップダウンを追加する機能が含まれています。上のセカンダリナビゲーション (右揃え) をチェックして、その方法を確認してください。

注:任意のページでトップバーを使用する場合はpadding-top: 40px;、body.

タブと丸薬

を使用して簡単なセカンダリナビゲーションを作成します<ul>。適切なクラスを追加して、タブまたはピルを交換します。

アカウント設定ページなどのコンテンツのサブセクションや、同様のコンテンツのページ間を切り替えるユーザータイムラインに最適です。タブ付きまたは錠剤のスタイルで利用できます。

<ulクラス= "タブ" > 
  <li class = "active" ><a href = "#" >ホーム</a></li>  
  <li><a href = "#" >プロフィール</a></li> 
  <li><a href = "#" >メッセージ</a></li> 
  <li><a href = "#" >設定</a></li> 
  <li><a href = "#" >連絡先</a></li> 
</ul>

<ulクラス= "丸薬" > 
  <li class = "active" ><a href = "#" >ホーム</a></li>  
  <li><a href = "#" >プロフィール</a></li> 
  <li><a href = "#" >メッセージ</a></li> 
  <li><a href = "#" >設定</a></li> 
  <li><a href = "#" >連絡先</a></li> 
</ul>

ページネーション

Rdio にインスパイアされた、非常に単純化された最小限のスタイルのページネーション。大きなブロックは見逃しにくく、簡単に拡張でき、大きなクリック領域を提供します。

<divクラス= "ページネーション" > 
  <ul>
    <li class = "prev disabled" ><a href = "#" > ← 前へ </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li class = "next" ><a href = "#" > Next → </a></li>  
  </ul>
</div>

基本アラート

div.alert-message

アクションの失敗、失敗の可能性、または成功を強調するための 1 行のメッセージ。フォームに特に役立ちます。

聖ワカモレ！自分でチェックするのが一番です、あなたはあまり見栄えがよくありません。

ああスナップ！あれこれ変えて、やり直してください。

素晴らしい！この警告メッセージを読みました。

注意喚起！これは注意が必要なアラートですが、まだ大きな優先事項ではありません。

メッセージをブロックする

div.alert-message.block-message

少し説明が必要なメッセージについては、段落スタイルのアラートがあります。これらは、長いエラーメッセージを泡立たせたり、保留中のアクションをユーザーに警告したり、単にページを強調するために情報を提示したりするのに最適です。

聖ワカモレ！これは警告です！自分でチェックするのが一番です、あなたはあまり見栄えがよくありません。Nulla vitae elit libero、pharetra augue。Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

このアクションを実行またはこれを行う

ああスナップ！エラーが発生しました。あれこれ変えて、やり直してください。Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.

このアクションを実行またはこれを行う

素晴らしい！この警告メッセージを読みました。Cum sociis natoque penatibus et magnis dis parturient montes, nasceturridiculus mus. Maecenas faucibus mollis interdum.

このアクションを実行またはこれを行う

注意喚起！これは注意が必要なアラートですが、まだ大きな優先事項ではありません。

このアクションを実行またはこれを行う

モーダル

モーダル (ダイアログまたはライトボックス) は、バックグラウンドコンテキストを維持することが重要な状況でのコンテキストアクションに最適です。

ツールのヒント

Twipsies は、混乱しているユーザーを助け、正しい方向に向けるのに非常に便利です。

Lorem ipsum dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi opit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque Beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam Architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis.

下！

右！

左！

その上！

ポップオーバー

ポップオーバーを使用して、レイアウトに影響を与えずにサブテキスト情報をページに提供します。

Bootstrap は、Web 開発をより迅速かつ簡単にするための CSS プリプロセッサであるLessと組み合わせて使用される、ミックスインと変数のオープンソースパックであるPrebootで構築されました。

Bootstrap で Preboot をどのように使用したか、次のプロジェクトで Less を実行することを選択した場合にどのように利用できるかを確認してください。

それの使い方

このオプションを使用して、Bootstrap の Less 変数、ミックスイン、およびブラウザーの JavaScript を介した CSS のネストをフルに活用します。

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />    
<script src = "js/less-1.1.3.min.js" ></script>

.js ソリューションを感じていませんか? コードをデプロイするときに、Less Mac アプリを試すか、Node.js を使用してコンパイルします。

含まれるもの

以下は、Bootstrap の一部として Twitter Bootstrap に含まれているもののハイライトの一部です。ダウンロードして詳細を確認するには、Bootstrap Web サイトまたは Github プロジェクトページにアクセスしてください。

変数

Less の変数は、CSS の頭痛の種を無料で維持および更新するのに最適です。色の値や頻繁に使用する値を変更する場合は、1 か所で更新すれば完了です。

// リンク
@linkColor : #8b59c2;         
@linkColorHover :    暗くする( @linkColor , 10 ); 
 
//グレイ
@黒: #000;             
@grayDark :          明るくする( @black , 25 %); 
@gray :              明るくする( @black , 50 %); 
@grayLight :         明るくする( @black , 70 %); 
@grayLighter :       明るくする( @black , 90 %); 
@ホワイト: #fff ;             
 
// アクセント カラー
@ブルー: #08b5fb ;              
@グリーン: #46a546 ;             
@レッド: #9d261d ;               
@イエロー: #ffc40d ;            
@オレンジ: #f89406 ;            
@ ピンク: #c3325f ;              
@紫: #7a43b6 ;            
 
// ベースライン グリッド
@ベースフォント: 13px ;          
@ベースライン: 18px ;

Less は、CSS の通常の/* ... */構文に加えて、別のスタイルのコメントも提供します。

// これはコメントです
/* これもコメントです */

ワズーをミックスイン

ミックスインは基本的に、CSS のインクルードまたはパーシャルであり、コードのブロックを 1 つに結合できます。box-shadow、クロスブラウザーグラデーション、フォントスタックなどのベンダープレフィックス付きプロパティに最適です。以下は、Bootstrap に含まれている mixin のサンプルです。

フォントスタック

#フォント {
  . 略記( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    フォント-サイズ: @size ; 
    フォント-ウェイト: @weight ; 
    行の高さ: @lineHeight ; 
  }
  . サンセリフ( @weight : normal , @size : 14px , @lineHeight : 20px ) { _ _     
    フォントファミリー： 「 Helvetica Neue」、Helvetica 、Arial 、sans - serif ;   
    フォント-サイズ: @size ; 
    フォント-ウェイト: @weight ; 
    行の高さ: @lineHeight ; 
  }
  . セリフ( @weight : normal , @size : 14px , @lineHeight : 20px ) {     
    フォントファミリー：「ジョージア」、タイムズニューローマン、タイムズ、サンセリフ。_     
    フォント-サイズ: @size ; 
    フォント-ウェイト: @weight ; 
    行の高さ: @lineHeight ; 
  }
  . monospace ( @weight : normal , @size : 12px , @lineHeight : 20px ) {     
    フォントファミリー：「モナコ」、クーリエニュー、モノスペース。   
    フォント-サイズ: @size ; 
    フォント-ウェイト: @weight ; 
    行の高さ: @lineHeight ; 
  }
}

グラデーション

#グラデーション{
  . 水平( @startColor : #555, @endColor: #333) { 
    背景-色: @endColor ; 
    背景-繰り返し:繰り返し- x ;
    背景-画像: - khtml -グラデーション(線形、左上、右上、( @startColor )から( @endColor )まで); // Konqueror   
    背景-画像: - moz -線形-グラデーション( left 、@startColor 、@endColor ); // FF 3.6+    
    背景-画像: - ms -線形-グラデーション(左、@startColor 、@endColor ); //IE10    
    背景-画像: - webkit -グラデーション(線形、左上、右上、色-停止( 0 %、@startColor )、色-停止( 100 %、@endColor )); // Safari 4 以降、Chrome 2 以降    
    背景-画像: - Webkit -線形-グラデーション( left 、@startColor 、@endColor ); // Safari 5.1 以降、Chrome 10 以降    
    背景-画像: - o -線形-グラデーション( left 、@startColor 、@endColor ); // オペラ 11.10    
    背景-画像:線形-グラデーション( left 、@startColor 、@endColor ); // ル・スタンダード   
  }
  . 垂直( @startColor : #555, @endColor: #333) { 
    背景-色: @endColor ; 
    背景-繰り返し:繰り返し- x ;
    背景-画像: - khtml -グラデーション(線形、左上、左下、( @startColor )から( @endColor )まで); // Konqueror   
    背景-画像: - moz -線形-グラデーション( @startColor 、@endColor ); // FF 3.6+   
    背景-画像: - ms -線形-グラデーション( @startColor 、@endColor ); //IE10   
    背景-画像: - webkit -グラデーション(線形、左上、左下、色-停止( 0 %、@startColor )、色-停止( 100 %、@endColor )); // Safari 4 以降、Chrome 2 以降    
    背景-画像: - Webkit -線形-グラデーション( @startColor 、@endColor ); // Safari 5.1 以降、Chrome 10 以降   
    背景-画像: - o -線形-グラデーション( @startColor 、@endColor ); // オペラ 11.10   
    背景-画像:線形-グラデーション( @startColor 、@endColor ); // 標準  
  }
  . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . 垂直- 3 -色( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { 
    ...
  }
}

オペレーションとグリッドシステム

以下のような柔軟で強力な mixin を生成するために、工夫を凝らしていくつかの計算を実行してください。

// グリディチュード
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// グリッド システム
. コンテナ{
  幅: @siteWidth ; 
  マージン: 0自動;  
  . クリアフィックス();
}
. 列( @columnSpan : 1 ) {  
  幅: ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. オフセット( @columnOffset : 1 ) {  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;           
}