Bootstrapフレームワーク個人まとめ
5689 ワード
bootstrapの概要
bootstrapは応答型設計をサポートするフロントエンドフレームワークです.
応答設計とは、ユーザの動作および使用するデバイス環境(システムプラットフォーム、スクリーンサイズ、スクリーン配向など)にインテリジェントに基づいて対応するレイアウトを指す.簡単に言えば、1つのサイトが複数の端末と互換性を持つことができ、各端末のために特定のバージョンを作るのではありません.これにより、絶えず到来する新しいデバイスのために専門的なバージョン設計と開発を行う必要がなくなります.
bootstrapの基礎知識の予熱
HTML 5ドキュメントタイプ(Doctype)
BootstrapはHTML 5要素とCSS属性をいくつか使用しています.これらを正常に動作させるには、HTML 5ドキュメントタイプ(Doctype)を使用する必要があります.したがって、最初に次のコード・セグメントを含める必要があります.
コンテナ(Container)
bootstrapはContainer classでページの内容を包み、以下はbootstrapである.cssファイルの.container class
内側ピッチは左右にそれぞれ15 pxあり,外側ピッチは適応的であることが分かった.フローレイアウトを行う場合は、上記
メッシュ(グリッド)レイアウト
Bootstrapのグリッド(グリッド)レイアウトは、応答性のないデフォルトでは、各行を12列に分割する12列レイアウトを採用しています.レイアウト方法:作成.row容器は、容器に適当な数のものを加える.span*列でいいです.フローレイアウトが必要な場合は、2列レイアウト
上のコードは、三列レイアウト
上記のコードは、3つの列
必要な列数を必要に応じて割り当てることができ、12グリッドを超えると自動的に新しい行が開きます.
media queries
上記コードは、画面幅が300 px、580 pxの場合、背景色が赤色であることを示している.
異なるデバイスで非表示または表示
この機能には、link
共通のテキストレイアウトラベル
リスト#リスト#
説明のリストは次のとおりです.
記述された語彙は
bootstrapは応答型設計をサポートするフロントエンドフレームワークです.
応答設計とは、ユーザの動作および使用するデバイス環境(システムプラットフォーム、スクリーンサイズ、スクリーン配向など)にインテリジェントに基づいて対応するレイアウトを指す.簡単に言えば、1つのサイトが複数の端末と互換性を持つことができ、各端末のために特定のバージョンを作るのではありません.これにより、絶えず到来する新しいデバイスのために専門的なバージョン設計と開発を行う必要がなくなります.
bootstrapの基礎知識の予熱
HTML 5ドキュメントタイプ(Doctype)
BootstrapはHTML 5要素とCSS属性をいくつか使用しています.これらを正常に動作させるには、HTML 5ドキュメントタイプ(Doctype)を使用する必要があります.したがって、最初に次のコード・セグメントを含める必要があります.
<html>
....
html>コンテナ(Container)
...
bootstrapはContainer classでページの内容を包み、以下はbootstrapである.cssファイルの.container class
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}内側ピッチは左右にそれぞれ15 pxあり,外側ピッチは適応的であることが分かった.フローレイアウトを行う場合は、上記
class = "container"をclass = "container-fluid"に変更します.メッシュ(グリッド)レイアウト
Bootstrapのグリッド(グリッド)レイアウトは、応答性のないデフォルトでは、各行を12列に分割する12列レイアウトを採用しています.レイアウト方法:作成.row容器は、容器に適当な数のものを加える.span*列でいいです.フローレイアウトが必要な場合は、
class = "row"をclass = "row-fluid"に変更します.たとえば、次のようにします."row">
"span4">...
"span8">...
上のコードは、
.span4と.span8の2列を示しており、2列の合計は12グリッドです. "row">
"span4">...
"span4">...
"span4">...
上記のコードは、3つの列
.span4を示しており、3つの列の合計は12グリッドである.必要な列数を必要に応じて割り当てることができ、12グリッドを超えると自動的に新しい行が開きます.
media queries
min-widthおよびmax-widthBootstrapはいくつかの少数のMedia queriesをサポートし、異なるデバイスと画面解像度に適応するためにプロジェクトをより柔軟にすることができます.min-width:最小幅、すなわち、デバイスサイズがこの値より大きい場合に適用スタイルmax-width:最大幅、すなわち、デバイスサイズがこの値より小さい場合に適用スタイルも両者を組み合わせて使用することができる.@media (min-width:300px) and (max-width: 580px) {body{background-color: red;} }上記コードは、画面幅が300 px、580 pxの場合、背景色が赤色であることを示している.
異なるデバイスで非表示または表示
この機能には、link
bootstrap-responsive.css携帯端末のみ表示.visible-phone：タブレット表示.visible-tablet：パソコンのみ表示.visible-desktop：携帯端末のみ非表示.hidden-phone：タブレットのみ非表示.hidden-tablet：パソコンのみ非表示.hidden-desktop：パソコンのみ共通のテキストレイアウトラベル
...:太字...:斜体を使用"initialism" title="">....initialismクラスでラベルの中の文字を大文字にしたり、大文字のアルファベットを少し縮小したりします.........:...:参照のソースを示すclass = "pull-right":文字を右側に表示するリスト#リスト#
説明のリストは次のとおりです.
<dl>
<dt>Drupaldt>
<dd> CMFdd>
<dt>Joomladt>
<dd> CMSdd>
<dt>Wordpressdt>
<dd> dd>
dl>記述された語彙は
.dl-horizontalを追加すると、スタイルを変更できます.