Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus、porta ac consectetur ac、eros の前庭。
グリッド システム標準の 940px をロックするか、独自のロールを作成します
デフォルトのグリッド
Bootstrap の一部として提供されるデフォルトのグリッド システムは、幅 940px の 16 列のグリッドです。これは人気のある 960 グリッド システムのフレーバーですが、左右に追加のマージン/パディングはありません。
グリッド マークアップの例
ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッド システムの一部として定義した 16 の基本的な列にまたがっています。その他のバリエーションについては、以下の例を参照してください。
- <div クラス="行">
- <div class = "span6 列" >
- ...
- </div>
- <div class = "span10 列" >
- ...
- </div>
- </div>
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
3
3
3
3
3
1
4
4
4
4
4
6
6
8
8
5
11
16
列のオフセット
4
8 オフセット 4
4 オフセット 4
4 オフセット 4
5 オフセット 3
5 オフセット 3
10 オフセット 6
レイアウトWeb ページを作成するための基本的なテンプレート
固定レイアウト
ほぼすべてのサイトまたはページに対応する、幅 940 ピクセルの中央配置の基本的なコンテナー レイアウト。
- <本体>
- <divクラス= "コンテナ" >
- ...
- </div>
- </body>
流動的なレイアウト
最小幅と最大幅、および左側のサイドバーを備えた柔軟な流動的または流動的なページ構造。アプリに最適です。
- <本体>
- <div class = "コンテナ流体" >
- <divクラス= "サイドバー" >
- ...
- </div>
- <divクラス= "コンテンツ" >
- ...
- </div>
- </div>
- </body>
タイポグラフィ見出し、段落、リスト、およびその他のインライン タイプ要素
見出しとコピー
Web ページを構造化するための標準のタイポグラフィ階層。
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>
その他 要素
強調、住所、略語の使用
<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。
住所
このaddress要素は、ご想像のとおり、住所に使用されます。外観は次のとおりです。
795 Folsom Ave, Suite 600
San Francisco, CA 94107 電話
: (123) 456-7890
注:の各行はaddress改行 ( <br />) で終了し、スタイルを適用せずに実際に読み取られるようにコンテンツを適切に構成する必要があります。
略語
略語と頭字語については、abbrタグを使用します (acronymはHTML5 では非推奨です)。タグ内に短縮形を置き、完全な名前のタイトルを設定します。
ブロッククオート
<blockquote> <p> <cite>
必ず巻き付けてblockquoteタグparagraphをcite付けてください。ソースを引用するときは、cite要素を使用します。CSS は、名前の先頭に em ダッシュ (—) を自動的に付けます。
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labe et dolore magna aliqua...
ジュリアス・ヒバート博士
リスト
順不同<ul>
- ジェレミー・ビクスビー
- ロバート・デジュア
- ジョシュ・ワシントン
- アントン・カプレーシ
- 私のチームメイト
- ジョージ・カスタンザ
- ジェリー・サインフェルド
- コスモクレイマー
- エレイン・ベニス
- ニューマン
- ジョン・ジェイコブ
- ポール・ピアース
- ケビン・ガーネット
スタイルなし<ul.unstyled>
- ジェレミー・ビクスビー
- ロバート・デジュア
- ジョシュ・ワシントン
- アントン・カプレーシ
- 私のチームメイト
- ジョージ・カスタンザ
- ジェリー・サインフェルド
- コスモクレイマー
- エレイン・ベニス
- ニューマン
- ジョン・ジェイコブ
- ポール・ピアース
- ケビン・ガーネット
順序付けられました<ol>
- ジェレミー・ビクスビー
- ロバート・デジュア
- ジョシュ・ワシントン
- アントン・カプレーシ
- 私のチームメイト
- ジョージ・カスタンザ
- ジェリー・サインフェルド
- コスモクレイマー
- エレイン・ベニス
- ニューマン
- ジョン・ジェイコブ
- ポール・ピアース
- ケビン・ガーネット
説明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 | ストゥ | 凹み | コード |
- <table class="common-table"> クラス= "共通テーブル" >
- ...
- </表>
例: ゼブラ ストライプ
.zebra-stripedクラスを追加するだけで、ゼブラ ストライプを追加して、テーブルを少し凝らせます。
| # | ファーストネーム | 苗字 | 言語 |
|---|---|---|---|
| 1 | いくつか | 1 | 英語 |
| 2 | ジョー | 6パック | 英語 |
| 3 | ストゥ | 凹み | コード |
- <table class="common-table zebra-striped"> クラス= "共通テーブル ゼブラ ストライプ" >
- ...
- </表>
例: TableSorter.js を使用したゼブラ ストライプ
前の例では、 jQueryとTablesorterプラグインを介して並べ替え機能を提供することで、テーブルの有用性を向上させます。並べ替えを変更するには、任意の列のヘッダーをクリックします。
| # | ファーストネーム | 苗字 | 言語 |
|---|---|---|---|
| 1 | 君の | 1 | 英語 |
| 2 | ジョー | 6パック | 英語 |
| 3 | ストゥ | 凹み | コード |
- <script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script type = "text/javascript" >
- $ (ドキュメント)。準備ができました(関数() {
- $ ( "テーブル #sortTableExample" ). tablesorter ( { sortList : [[ 1 , 0 ]]} );
- });
- </script>
- <table class = "common-table zebra-striped" >
- ...
- </表>
フォーム
デフォルトのスタイル
すべてのフォームには、読みやすくスケーラブルな方法で表示するためのデフォルト スタイルが与えられています。スタイルは、テキスト入力、選択リスト、テキストエリア、ラジオ ボタンとチェックボックス、およびボタンに対して提供されます。
積み重ねられたフォーム
フォームの HTMLに追加.form-stackedすると、フィールドの左側ではなく、フィールドの上部にラベルが表示されます。これは、フォームが短い場合や、重いフォーム用に 2 列の入力がある場合に最適です。
ボタン
慣習として、ボタンはアクションに使用され、リンクはオブジェクトに使用されます。たとえば、「ダウンロード」はボタンであり、「最近のアクティビティ」はリンクである可能性があります。
すべてのボタンはデフォルトで明るい灰色のスタイルですが、青色の.primaryクラスが利用可能です。さらに、独自のスタイルを展開するのは簡単です。
Alerts & Errors成功、警告、およびエラー メッセージまたはアラートのスタイル
基本アラート
アクションの失敗、失敗の可能性、または成功を強調するための 1 行のメッセージ。フォームに特に役立ちます。
メッセージをブロックする
少し説明が必要なメッセージについては、段落スタイルのアラートがあります。これらは、長いエラー メッセージを泡立たせたり、保留中のアクションをユーザーに警告したり、単にページを強調するために情報を提示したりするのに最適です。
モーダル、ツールチップ、およびポップオーバーでコンテンツを表示するためのコンポーネント
モーダル
モーダル (ダイアログまたはライトボックス) は、バックグラウンド コンテキストを維持することが重要な状況でのコンテキスト アクションに最適です。
モーダル見出し
×綺麗な体一つ…
ツールのヒント
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 with Less Supercharge を変数、ミックスイン、関数で CSS に追加する
Bootstrap は、Web 開発をより迅速かつ簡単にするための CSS プリプロセッサであるLessと組み合わせて使用される、ミックスインと変数のオープンソース パックであるPrebootで構築されました。
Bootstrap で Preboot をどのように使用したか、次のプロジェクトで Less を実行することを選択した場合にどのように利用できるかを確認してください。
それの使い方
このオプションを使用して、Bootstrap の Less 変数、ミックスイン、およびブラウザーの JavaScript を介した CSS のネストをフルに活用します。
- <link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" media = "all" />
- <script type = "text/javascript" src = "js/less-1.0.41.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 ;
- // ベースライン
- @ベースライン: 20px ;
コメント
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
- - ms -フィルター: %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+
- フィルター: e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 & IE7
- 背景-画像:線形-グラデーション( 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
- - ms -フィルター: %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+
- フィルター: e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 & IE7
- 背景-画像:線形-グラデーション( @startColor 、@endColor ); // 標準
- }
- . directional ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . 垂直- 3 -色( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
- ...
- }
- }
オペレーションとグリッド システム
以下のような柔軟で強力な mixin を生成するために、工夫を凝らしていくつかの計算を実行してください。
- // グリディチュード
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- // グリッド システム
- . コンテナ{
- 幅: @siteWidth ;
- マージン: 0自動;
- . クリアフィックス();
- }
- . 列( @columnSpan : 1 ) {
- 表示:インライン;
- フロート:左;
- 幅: ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- マージン-左: @gridGutterWidth ;
- &:最初-子{
- マージン-左: 0 ;
- }
- }
- . オフセット( @columnOffset : 1 ) {
- margin -左: ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! 重要;
- }