Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus、porta ac consectetur ac、eros の前庭。
Bootstrap は、Web アプリケーションとサイトの開発を開始するために設計された Twitter のツールキットです。
タイポグラフィ、フォーム、ボタン、テーブル、グリッド、ナビゲーションなどのベース CSS と HTML が含まれています。
オタクの警告: Bootstrap はLessで構築されており、最新のブラウザーを念頭に置いてすぐに動作するように設計されています。
最も迅速かつ簡単に開始するには、このスニペットを Web ページにコピーするだけです。
Lessの使用のファンですか?問題ありません。レポをクローンして、次の行を追加するだけです。
Twitter の初期の頃、エンジニアは使い慣れたほぼすべてのライブラリを使用して、フロントエンドの要件を満たしていました。Bootstrap は、Twitter の最初の Hackweek で発生した課題への回答として始まり、開発は急速に加速しました。
Twitter の多くのエンジニアの助けとフィードバックにより、Bootstrap は大幅に成長し、基本的なスタイルだけでなく、よりエレガントで耐久性のあるフロントエンドのデザイン パターンを含むようになりました。
dev.twitter.comで詳細を読む›
Bootstrap は、Chrome、Safari、Internet Explorer、Firefox などの主要な最新ブラウザーでテストおよびサポートされています。
Bootstrap には、コンパイル済みの CSS、コンパイルされていないテンプレート、およびサンプル テンプレートが付属しています。
Bootstrap の一部として提供されるデフォルトのグリッド システムは、幅 940px の 16 列のグリッドです。これは人気のある 960 グリッド システムのフレーバーですが、左右に追加のマージン/パディングはありません。
ここに示すように、基本的なレイアウトは 2 つの「列」で作成できます。各列は、グリッド システムの一部として定義した 16 の基本的な列にまたがっています。その他のバリエーションについては、以下の例を参照してください。
- <div クラス="行">
- <div class = "span6 列" >
- ...
- </div>
- <div class = "span10 列" >
- ...
- </div>
- </div>
ほぼすべてのサイトまたはページに対応する、幅 940 ピクセルの中央配置の基本的なコンテナー レイアウト。
- <本体>
- <divクラス= "コンテナ" >
- ...
- </div>
- </body>
最小幅と最大幅、および左側のサイドバーを備えた柔軟な流動的または流動的なページ構造。アプリに最適です。
- <本体>
- <div class = "コンテナ流体" >
- <divクラス= "サイドバー" >
- ...
- </div>
- <divクラス= "コンテンツ" >
- ...
- </div>
- </div>
- </body>
Web ページを構造化するための標準のタイポグラフィ階層。
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>
要素は、その最も近い先祖、または作品全体の連絡先情報に使用されます。外観は次のとおりです。
注:の各行は<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.
ジュリアス・ヒバート博士
<ul>
<ul.unstyled>
<ol>
dl
<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 | ストゥ | 凹み | コード |
注:ゼブラ ストライピングは、IE8 以下のような古いブラウザーでは利用できない漸進的な機能強化です。
- <table class="common-table zebra-striped"> クラス= "共通テーブル ゼブラ ストライプ" >
- ...
- </表>
前の例では、 jQueryとTablesorterプラグインを介して並べ替え機能を提供することで、テーブルの有用性を向上させます。並べ替えを変更するには、任意の列のヘッダーをクリックします。
# | ファーストネーム | 苗字 | 言語 |
---|---|---|---|
1 | 君の | 1 | 英語 |
2 | ジョー | 6パック | 英語 |
3 | ストゥ | 凹み | コード |
- <script src="js/jquery/jquery.tablesorter.min.js"></script> src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <スクリプト>
- $ (関数() {
- $ ( "テーブル #sortTableExample" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <table class = "common-table zebra-striped" >
- ...
- </表>
すべてのフォームには、読みやすくスケーラブルな方法で表示するためのデフォルト スタイルが与えられています。スタイルは、テキスト入力、選択リスト、テキストエリア、ラジオ ボタンとチェックボックス、およびボタンに対して提供されます。
フォームの HTMLに追加.form-stacked
すると、フィールドの左側ではなく、フィールドの上部にラベルが表示されます。これは、フォームが短い場合や、重いフォーム用に 2 列の入力がある場合に最適です。
慣習として、ボタンはアクションに使用され、リンクはオブジェクトに使用されます。たとえば、「ダウンロード」はボタンであり、「最近のアクティビティ」はリンクである可能性があります。
すべてのボタンはデフォルトで明るい灰色のスタイルですが、青色の.primary
クラスが利用可能です。さらに、独自のスタイルを展開するのは簡単です。
アクションの失敗、失敗の可能性、または成功を強調するための 1 行のメッセージ。フォームに特に役立ちます。
少し説明が必要なメッセージについては、段落スタイルのアラートがあります。これらは、長いエラー メッセージを泡立たせたり、保留中のアクションをユーザーに警告したり、単にページを強調するために情報を提示したりするのに最適です。
モーダル (ダイアログまたはライトボックス) は、バックグラウンド コンテキストを維持することが重要な状況でのコンテキスト アクションに最適です。
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.
ポップオーバーを使用して、レイアウトに影響を与えずにサブテキスト情報をページに提供します。
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus、porta ac consectetur ac、eros の前庭。
Bootstrap は、Web 開発をより迅速かつ簡単にするための CSS プリプロセッサであるLessと組み合わせて使用される、ミックスインと変数のオープンソース パックであるPrebootで構築されました。
Bootstrap で Preboot をどのように使用したか、次のプロジェクトで Less を実行することを選択した場合にどのように利用できるかを確認してください。
このオプションを使用して、Bootstrap の Less 変数、ミックスイン、およびブラウザーの JavaScript を介した CSS のネストをフルに活用します。
- <link rel="stylesheet/less" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" href = "less/bootstrap.less" media = "all" />
- <script 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 )) ! 重要;
- }