NFH.011-応答型開発とBootstrapフレームワーク応用(一)

2.16学習経験の共有#
Bruce_Zhuは2017.2.16
一、応答型ウェブページの特徴1)フロー型メッシュレイアウト(fluid)2)伸縮可能なピクチャとフォント3)CSS 3 Media Query-
二、応答式ウェブページの利点と不足の利点:PC/PAD/HONEブラウザの画面の欠点を自動的に適合させることができる:コードが複雑になり、より多くの互換性を考慮する必要があり、内容が非常に多いウェブページに適していない
三、応答式レイアウトには明確な二つの概念が必要である.
1 . viewport

2010年までhtmlページは基本的にpcのために設計されており、幅が広く、携帯電話での表示内容が押しつぶされていたが、iSiOSはviewport(ビューポート)の概念を導入し、携帯電話でウェブサイトを見る体験を最適化した.

iOSはviewport(ビューポート)の概念を導入した:ウェブページの内容を表示するための論理概念であり、その高さと幅は任意に制定することができ、ウェブページは物理ウィンドウに表示されるのではなく、ビューポートに表示される-大きなウェブページをスケールせずに携帯電話に直接表示することができるが、ユーザーが

を往復スライドする必要がある.

viewportの使い方

viewportでは、次のプロパティを指定できます.

         width:       ，       ， device-width
         height：     ，     
         initial-scale：        
         minimum-scale :          
         maximum-scale :           
         user-scalable :           ，   1/0/yes/no

2 . CSS3 media query

の役割:クライアントブラウズデバイスの特性に基づいて、選択された実行部分css

がある.

media:screen

のようなWebページを閲覧するデバイスを指す.

Query:タイプ、幅、高さ、解像度、色、方向(landscape/portrait)

などの現在のブラウズデバイスの特性を問い合わせる.

css 3 MediaQueryには2つの使い方があります

a.メディアの特性に応じて、異なる外部cssをロードする

不足:クライアントはメディアの特性にかかわらず、すべてのcssファイルを要求します.
b.メディアの特性に基づいて、あるcssの一部の内容を実行する

       @media screen and (min-width: 990px) {}

四、応答型ウェブページの作成方法

headラベルでviewportメタラベルを宣言し、Webページのビューポートとブラウザの幅を一致させる

ブラウザによって異なるcssファイル

がロードされる.

同じcssファイルにおいても、異なる画面解像度に応じて、異なるcssルール

 @media screen and (max-device-width: 400px) {

 　　.column {
 　　　float: none;
 　　　width:auto;
 　　}

 　　#sidebar {
 　　　display:none;
 　　}
 }

を適用するように選択する.

注意:

すべての要素の幅は固定値を制定することができず、相対的な幅値

width:"60%"    width:"auto"

を使用しなければならない.

フォントは絶対サイズ(px)は使用できません.相対サイズ(em)

を使用する必要があります.

レイアウト用の各ブロックの位置はフローティングであり、固定不変の

ではない.

レイアウトとテキストに加えて、ピクチャの自動スケーリングを実現するか、クライアント画面によって異なるサイズのピクチャ

    img {
       max-width:100%;
     }

をロードする必要がある.
五、Bootstrapフレームワークの使い方

ボタン

bootstrapでよく使われる5色
赤->危険緑->成功黄色->警告水色->情報水色->ベース
bootstrapでよく使われる4つのサイズ

  btn-lg -> 
 btn-md -> 
 btn-sm -> 
 btn-xs ->  

ブロックレベルボタン

 btn-block

ボタンの位置を調整する

 pull-right ->   
 pull-left  ->   

ピクチャimg-roundedフィレットimg-circle円形img-thumbnailサムネイルimg-responsiveピクチャ応答レイアウト

をサポート

レイアウトとコードは、テキスト色text-danger text-success text-warning text-info text-primary背景色bg-danger bg-success bg-warning bg-info bg-primaryテキスト整列方式text-left text-right text-center text-justifyテキスト整列方式text-lowercase text-uppercase text-capitalize

を理解するためにのみ使用される.

リストlist-unstyledリスト項目スタイルlist-inlineを削除すべての要素を同じ行

に配置

表

bootlintはjsで、bootstrapの公式提供で、bootstrapを使用するページのシーンのhtmlエラー、classの使用上のエラーを検出します-デフォルトの要求の下でブラウザがチェックできません

table

table-bordered     

table-responsive      ，  ，   table     ，   table 

table-striped        
table-hover