***
8651 ワード
一、Bootstrapの紹介
1,BootstrapはTwitter社が開発したHtml+css+jsベースのフロントエンドフレームワーク
2 Webアプリケーションの迅速な開発を実現するために提供されるフロントエンドツールパッケージ
3、応答レイアウト
4、モバイル機器優先
5,Bootstrapグローバルスタイルの使い方
6,Viewportの意味
7、グリッド化レイアウトの使用法
8、フォントとアイコン
9、応答式レイアウトの開発を実現
二、Bootstrapの特性
1、応答設計
2、グリッドレイアウト
3、完全なクラスライブラリ
4,JQueryのプラグイン
5、異なる使用シーン
三、Bootstrapの基礎ファイルはcss font jsの三種類ありますJQueryファイルを引用する時1.9.1以上のバージョンが必要です
四、Bootstrapのレイアウト
タイトル(h 1~h 6)テキスト(段落Pラベル)を大文字と小文字で揃える
h1: 36px;デフォルト:14 px; .text-left .text-lowercase(小文字に変更).Table-bordered(枠線付きテーブル)
h2: 30px;行の高さ:20 px; .text-center .text-uppercase(大文字に変更).Table-striped(ストライプテーブル)
h3: 24px;下部外枠:10 px; .text-right .text-capitalize(頭文字大文字).Table-hover(サスペンション変色)
h4: 18px; .table-condensed(コンパクトスタイル)
h5: 14px;
h6: 12px;
フォーム＃フォーム＃
⑴, inputボックス
.form-groupと.form-control
(2)ボタン
(3)形状
角を丸くするimg-rounded円形img-circleは枠線付きのフィレットパターンである.img-thumbnail
補助クラス:テキスト色、背景色、ステータス設定、三角記号
五、Viewportについて
MetaラベルのViewport(ユーティリティラベル)
1,width,height.
2,user-scalable(ユーザースケール)、initial-scale(初期ウィンドウ)
3,maximum-scale(最大スケール)、minimun-scale(最小スケール)
グリッドレイアウト(Grid Layout)
.cl-xs-*超小画面携帯電話(<768 px)、
.cl-sm-*小さなスクリーンプレート(≧768 px)、
.cl-md-*中画面デスクトップディスプレイ(≧992 px)(グリッドパラメータ).
2、ドロップダウンメニュー
⑴ .dropdown制御コンポーネントはドロップダウン
⑵ .代わりにpull-right右揃え
(3)divider分割線
3、コントロールグループ
4、ナビゲーション
⑴, classを1つ持つ.navの無秩序リストが始まります.
⑵,.nav-tabsは、切り替え可能なナビゲーションを表します.タブと同様に下線が引かれています
⑶,.nav-pillsはカプセルナビゲーションを表します.下線なしフィレット
⑷,.nav-justifiedはナビゲーションを垂直にします.
5、改ページ
⑴,.pagination親要素に表示ページングを追加します.
⑵,.pagerはページをめくる領域に配置されます.
⑶,.previousリンクを左に揃えます.nextリンクを右に揃えます.
6、進捗バー
⑴,.porgressは進捗バーを表します.
(2)ステータスクラスによりプログレスバーの色を変更する.
⑶,.progress-bar-stripedは、進捗バーの色をグラデーションします.
7、リスト
⑴,.List-groupはリストグループを表します.
⑵,.badgeはステータス数を表します.
⑴,.パネルはパネルを表します.
⑵,.panel-bodyはパネルの内容を表します.
⑶,.panel-footerはパネルのピンを表します.
1,BootstrapはTwitter社が開発したHtml+css+jsベースのフロントエンドフレームワーク
2 Webアプリケーションの迅速な開発を実現するために提供されるフロントエンドツールパッケージ
3、応答レイアウト
4、モバイル機器優先
5,Bootstrapグローバルスタイルの使い方
6,Viewportの意味
7、グリッド化レイアウトの使用法
8、フォントとアイコン
9、応答式レイアウトの開発を実現
二、Bootstrapの特性
1、応答設計
2、グリッドレイアウト
3、完全なクラスライブラリ
4,JQueryのプラグイン
5、異なる使用シーン
三、Bootstrapの基礎ファイルはcss font jsの三種類ありますJQueryファイルを引用する時1.9.1以上のバージョンが必要です
四、Bootstrapのレイアウト
タイトル(h 1~h 6)テキスト(段落Pラベル)を大文字と小文字で揃える
h1: 36px;デフォルト:14 px; .text-left .text-lowercase(小文字に変更).Table-bordered(枠線付きテーブル)
h2: 30px;行の高さ:20 px; .text-center .text-uppercase(大文字に変更).Table-striped(ストライプテーブル)
h3: 24px;下部外枠:10 px; .text-right .text-capitalize(頭文字大文字).Table-hover(サスペンション変色)
h4: 18px; .table-condensed(コンパクトスタイル)
h5: 14px;
h6: 12px;
フォーム＃フォーム＃
⑴, inputボックス
.form-groupと.form-control
(2)ボタン
aラベルは、 のように することもできる (3)形状
角を丸くするimg-rounded円形img-circleは枠線付きのフィレットパターンである.img-thumbnail
補助クラス:テキスト色、背景色、ステータス設定、三角記号
五、Viewportについて
MetaラベルのViewport(ユーティリティラベル)
1,width,height.
2,user-scalable(ユーザースケール)、initial-scale(初期ウィンドウ)
3,maximum-scale(最大スケール)、minimun-scale(最小スケール)
グリッドレイアウト(Grid Layout)
.cl-xs-*超小画面携帯電話(<768 px)、
.cl-sm-*小さなスクリーンプレート(≧768 px)、
.cl-md-*中画面デスクトップディスプレイ(≧992 px)(グリッドパラメータ).
六，单位
1，-px 相对于显示屏幕分辨率的长度单位
2，-em 相对于当前文本内的字体尺寸
3，-rem 与 em类似，相对于HTML根节点的字体单位
1，⑴ - px是相对于屏幕分辨率的单位
⑵ - px的大小无法跟随屏幕放大缩小
⑶ - 所有浏览器都支持px单位
2，⑴ - 1em = 16px（不同浏览器的em不一样，火狐 1em=18px ; 谷歌 1em=12px;不稳定则出现rem）
⑵ - em会继承父级元素的字体大小。（当父元素改变时候em会跟着调整，一般用于移动端）
⑶ - IE的部分浏览器并不支持em
3， ⑴ - rem与em类似
⑵ - rem会继承根元素的字体大小
⑶ - 1rem = 稳定的10px
七，Bootstrap的组件
1，字体
2、ドロップダウンメニュー
⑴ .dropdown制御コンポーネントはドロップダウン
⑵ .代わりにpull-right右揃え
(3)divider分割線
divider
3、コントロールグループ
xx
4、ナビゲーション
⑴, classを1つ持つ.navの無秩序リストが始まります.
⑵,.nav-tabsは、切り替え可能なナビゲーションを表します.タブと同様に下線が引かれています
⑶,.nav-pillsはカプセルナビゲーションを表します.下線なしフィレット
⑷,.nav-justifiedはナビゲーションを垂直にします.
5、改ページ
⑴,.pagination親要素に表示ページングを追加します.
⑵,.pagerはページをめくる領域に配置されます.
⑶,.previousリンクを左に揃えます.nextリンクを右に揃えます.
6、進捗バー
⑴,.porgressは進捗バーを表します.
(2)ステータスクラスによりプログレスバーの色を変更する.
⑶,.progress-bar-stripedは、進捗バーの色をグラデーションします.
7、リスト
⑴,.List-groupはリストグループを表します.
⑵,.badgeはステータス数を表します.
-
-
⑴,.パネルはパネルを表します.
⑵,.panel-bodyはパネルの内容を表します.
⑶,.panel-footerはパネルのピンを表します.
八，Bootstrap的插件
1，引用
⑴，Bootstrap插件依赖Bootstrap.js。
⑵，Bootstrap.js 基于 JQuery。
2，data属性
⑴，通过data属性控制页面交互。
⑵，$(document).off('.data-api')解除绑定。
九，示例
: Button data-toggle data-target
: modal fade id myModal
:modal-dislog modal modal-content