NFH.012-応答型開発とBootstrapフレームワーク応用(二)
3179 ワード
2.17学習経験の共有#
Bruce_Zhuは2017.2.17
一.bootstrap-グローバルcssスタイル-グリッドレイアウトシステム-ポイント難点のすべての行は容器に入れなければならない.containerまたはcontainer-fluid container は複数行に分けられ、1行は最大12列 に分けられる.ページの内容は列にのみ、行には は配置できません. colにrow を再ネストすることができる colは4種類のcol-xs-i col-sm-i col-md-i col-lg-iに分けられ、i値は1-12であり、値はある列の幅 である.は、1つの列に対して異なる画面下の幅 を指定することができる. col-lg-i大PC col-md-i大PC普通PC col-sm-i大PC普通PC平板col-xs-i大PC普通PC平板携帯電話 hidden-lg大PC hidden-md普通PC hidden-smタブレットhidden-xs携帯電話 列のオフセット問題col-xs-offset-i大PC普通PCタブレットcol-sm-offset-i大PC普通PCタブレットcol-md-offset-i大PC普通PC col-lg-offset-i大PC グリッドシステムを用いて応答レイアウト を実現する.
11.補足 web開発ページレイアウトが採用できる方式 tableを使用するレイアウトは簡単でエラーが発生しにくいが、ロード効率は 低い. HTML+CSSのロード速度が速く、柔軟で、制御しにくい cssに関する知識 親要素の第1のサブ要素margin-top境界問題をどのように解決するか親要素にborder-topを加え親要素にpadding-topを指定親要素にoverflowを指定する:hiddenこの要素が第1のサブ要素ではなく親要素に前置内容を追加する生成-推奨使用.parent:before { content:""; display:table; } すべてのサブエレメントのフローティングを解決すると、親エレメントの高さが0になり、後続のエレメントが親エレメントにoverflowを指定することに影響します:hidden親エレメントに高さを指定親エレメントに後置コンテンツを追加する生成-推奨使用.parent:after {
bootstrapシステムにおけるコンテナの特徴幅メディアクエリーを行い、前置と後置のコンテンツ生成を追加し、サブ要素の境界を越え、フローティングの影響 を防止することができる.
二.bootstrap-グローバルcssスタイル-フォーム-ポイント難点
三.bootstrap-コンポーネント-アイコンフォント
四.bootstrap-コンポーネント-ボタングループ
五.bootstrap-コンポーネント-ドロップダウンメニューのポイントは簡単です
Bruce_Zhuは2017.2.17
一.bootstrap-グローバルcssスタイル-グリッドレイアウトシステム-ポイント難点
screen>1200px( PC -lg) 1170px
screen>992px( PC -md) 970px
screen>768px( -sm) 750px
screen<768px( -xs) auto
11.補足
3） bootstrap (grid layout)
， ， ， ( )
content:"";
display:table;
clear:both;
二.bootstrap-グローバルcssスタイル-フォーム-ポイント難点
1. bootstrap
1)
2)
form-inline
3)
：container->row->col-*
：form-horizontal->form-group->col-*
三.bootstrap-コンポーネント-アイコンフォント
1.glyphicons ， web/
2. bootstrap 250+ ，
3. ，
4. glyphicon - ；
5.
fonts html
四.bootstrap-コンポーネント-ボタングループ
btn-group
btn-group-vertical
btn-group btn-group-justified
btn-group-lg
btn-group-xm
btn-group-xs
五.bootstrap-コンポーネント-ドロップダウンメニューのポイントは簡単です
1. html
2.
divider
dropdown-header