ホームページ > 記事 > ウェブフロントエンド > 【Bootstrap】7日間徹底Bootstrap (3) CSSlayout_html/css_WEB-ITnose
【Bootstrap】7日間徹底Bootstrap (3) CSSlayout_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:37:10959ブラウズ
Bootstrap の 3 つのコアコンテンツの基礎は、基本的な CSS レイアウト構文です。これには、基本的なタイポグラフィ、コード、テーブル、フォーム、ボタン、画像、ヘルパー クラス、および応答性の高いユーティリティが含まれています。
このセクションの内容:
概要
HTML5ドキュメントタイプ
ありがとうBootstrap には HTML5 固有の HTML 要素と CSS 属性が使用されるため、Bootstrap を使用する場合、すべての HTML ファイルは先頭にある HTML5 DOCTYPE 属性を参照する必要があります
<!DOCTYPE html><html lang="en"> ...</html>
Mobile first
モバイル デバイスのブラウザでは、userscalable= の追加を通じてビューポート メタ タグに no を指定すると、ズーム機能が無効になります。
レスポンシブ画像
画像のサイズを適応的に拡大縮小するために、Bootstrap はバージョン 3.x で .img レスポンシブ スタイルを追加しました。これにより、画像の maxwidth: 100% と height: が基本的に設定されます。属性
タイプセットとリンク
ブートストラップは、Web ページのいくつかの基本的なグローバル スタイル、タイポグラフィー、およびリンク スタイルを設定します
- body 要素のマージン設定をキャンセルし、デフォルトの 0、margin:0 に変更します。
- body 要素の背景色を白に設定します (background-color: #ffffff)。
- レイアウトと組版の観点から、フォント、フォントサイズ、行間隔に使用される標準値
中央揃えコンテナ
ページ (または要素) を中央に表示するには、単に外部コンテナの .container スタイル。グリッド システムは外部コンテナのサイズ設定に依存するため、コンテナ スタイルにはデフォルトで max-width 属性があり、グリッド システムの最大幅を制限します
基本的なタイポグラフィ
タイトル
bs は伝統的ですタイトル要素 h1 ～ h6 は、表示効果がすべてのブラウザで同じになるように標準スタイルを再定義します。
bs は、.h1 スタイルなどの h タイプのスタイルも提供します。h1 タグ スタイルと比較すると、margin-top と margin-bottom が定義されていない点が異なります。
Text
bs は、グローバルに設定されるフォント サイズです。
small、strong、em、cite
コンテナ内のテキスト配置: text-left、text-center、text-right、text-justify
省略形: abbr (マウスオーバーでタイトル値が表示されます)
リスト
bs は、通常リスト、順序付きリスト、無意味リスト、インライン リスト、説明リスト、水平説明リストの 6 つの形式のリストを提供します。
通常のリスト (ul)、順序付きリスト (ol)、スタイルなしリスト (list-unstyled)、説明リスト、水平説明リストは単なる最適化であり、効果は明らかではありません。
インラインリスト (list-inline) は、リスト項目を水平方向に表示します。同様の水平メニュー効果
コード
コードスタイルは通常、コードを引用符で囲む必要がある場所に表示されます
code 要素を使用して 1 行のインラインコードを含める必要があります
5e4e803d53d659f332070b5d4aa430db要素は、コンテンツがユーザーのキーボード入力である必要があることを示すため、通常は入力効果に設定されます。
pre 要素は通常、大きなコードを表示し、元の形式が変更されないようにするために使用されます。 。 さらに、 pre 要素に .pre-scrollable スタイルを適用すると、領域の最大高さを 340 ピクセルに制御し、y 方向にスクロールできます
Table
bs は 1 つの基本的な を提供します。 table スタイル、4 つの 3 つの追加スタイル (.table-striped、.table-border、.table-hover、.table-condensed)、および応答性の高いレイアウトをサポートする .table-sensitive コンテナー スタイル。.table-striped スタイル。交互の行と背景色の設定を追加します。
.table-border は、テーブル内のすべてのセルに 1 ピクセル幅の境界線を提供します
.table-hover マウスを上に移動したときに対応する部分の色が変わると、非常に動的に見え、ハイライト機能があります
.table -condensed Compact table、つまり、テーブルの表示が通常のテーブルよりわずかにコンパクトです。実装原理は、セルの内側のマージンを減らすことです。
.tableresponse スタイルは、.table スタイルの外側にラップすることで作成できます。小さな画面デバイス (768 ピクセル未満) で水平にスクロールする応答性の高いテーブル
bs は、tr の背景色を制御するために、テーブルの tr 要素に 5 つの基本的なカラー スタイル (アクティブな成功情報、警告、危険) を提供します。
Form
BS フレームワークのコアコンテンツであるフォームは、豊富なスタイル (基本、インライン、水平) を提供します。まずは2つの基本スタイルを理解しましょう
form-control: 100%に設定します
form-group: 各コントロールが確実に表示されるように下マージンを設定します。
select、input、textarea 要素に .form-control スタイルを適用すると、表示される幅は 100% になり、プレースホルダーの色は #999999 に設定されます
インラインフォーム
有的时候，我们可能需要一个所有控件都在一行中的表单，只需要在普通的form元素上应用一个.form-inline样式
横向表单
与内联表单的使用方式不太一样，其不能在form元素上简单应用一个.form-horizontal样式。
由于.form-horizontal样式改变了.form-group的行为，将其表现得像栅格系统中的行（row）一样，因此就无需再使用.row样式了。
表单控件
对现有HTML5语法下的input都进行了支持（如 type为text、password、datetime、datetime-local、date、 month、time、week、number、email、url、search、tel和color 的元素）
input元素，必须声明type类型，否则可能会引 起其他问题
select元素，多行选择设置mulitiple属性为multiple
textarea元素，定义了rows数字即可定义大文本框的高度，定义cols可以定义大文本框的宽度
checkbox和radio元素，是input元素里两个非常特殊的type，由于经常搭配文字显示，bs做了标准显示
<div class="radio"> <label><input name="opt" type="radio" />ON</label> </div> <div class="radio"> <label><input name="opt" type="radio" />OFF</label> </div> <div class="checkbox"> <label><input type="checkbox"/>Swing</label> </div> <div class="checkbox"> <label><input type="checkbox" />Runing</label> </div>
当checkbox和radio内容很少时,需要横向显示的时候，可以用checkbox-inline和radio-inline
控件状态
bs提供了3种状态的样式可供使用，分别是：焦点状态（默认提供）、禁用状态、验证提示状态。
使用方式和普通的disabled一样，只需要在禁用元素上使用 disabled属性即可。e4e08887f3c485ddc42c286c339531ad
fieldset如果使用了disabled属性时，内部的控件也将会禁用。
在填写表单的时候，经常要提示用户其输入内容是否合法，bs提供了.has-warning、.has-error、.has-success三种样式。
（父容器上的has-feedback样式用于 设置定位方式；小图标元素上的form-control-feedback样式用于 设置图标的显示大小）
<div class="form-group has-success has-feedback"> <label class="control-label" for="name">User Name:</label> <input type="text" class="form-control" id="name" /> <span class="glyphicon glyphicon-ok form-control-feedback"></span></div>
控件大小
bs提供了两个样式用于设置稍大或者稍小的input输入框，分别是：.input-lg和.input-sm
按钮
按钮样式，定义了标准5种颜色、1个默认和一个link按钮。
按钮大小，定义3种.btn-lg、.btn-sm、.btnxs。.btn-block样式可以充满父元素，不随文字符宽度变化。
多标签，支持button a input3个标签。为了兼容性，非常建议使用button。
支持active和disabled状态。
图像
提供了3种风格效果,在img标签上应用.img-rounded、.img-circle、.img-thumbnail样式即可
使用过程中需要注意，上述样式没有控制图片的显示大小，所以需要额外应用样式或者限制父元素大小来控制图片显示大小.
IE8及以下版本不支持.img-rounded和.img-circle样式特效。
辅助样式
文本样式，bs提供了1个灰色，和5个基本标准样式的颜色，分别是：柔和灰（text-muted）、主要蓝（text-primary）、成功绿 （text-success）、信息蓝（text-info）、警告黄（textwarning）、危险红（text-danger）
文本背景样式，bs还提供了上面的5种文本颜色样式对应（muted样式除外），分别是：主要蓝（bg-primary）、成功绿（bg-success）、信息蓝（bg-info）、警告黄 （bg-warning）、危险红（bg-danger）
辅助图标
关闭图标（右浮动）
<button class="close">×</button> <a class="close">×</a>
向下箭头
<span class="caret"></span>
浮动
对于内容浮动，一般会有3种需求 （左浮动、右浮动、居中对齐），分别对应了pull-left、pull-right和center-block样式
响应式样式
利用媒体查询的特性，对特定的情况进行隐藏或显示的设置。
.visible-开头的样式表示仅 在某尺寸时显示，其他都隐藏；而.hidden样式则表示仅在某尺寸 时隐藏，其他都显示。
如：
提供了分别对浏览器和打印机进行隐藏和显示的设置 visible-print和hidden-print
只在大屏幕下显示 visble-lg