学習ノート3-Bootstrap CSS【転載整理->オリジナル】

4336 ワード

httml 5 移動デザインレイアウト応答式

一、html 5
1.BootstrapはHtml要素とCSS属性を使用しています.したがって、Html 5ドキュメントタイプ(doctype)を使用する必要があります.したがって、bootstrapプロジェクトに次のコードを追加します.

<!DOCTYPE html>
<html>
....
</html>

上記のコードが適用されない場合、ブラウザ表示に関連するいくつかの問題が発生する可能性があります.
二、モバイル機器
1.モバイルデバイスは、Bootstrap 3の最も顕著な変化を優先する.
2.Bootstrap 3の設計目標はモバイルデバイスを優先し、次いでデスクトップデバイスである.
3.モバイルデバイスで適切な描画とタッチスクリーンのスケーリングを確保するために、ウェブページのheadにviewport metaラベルを追加する必要があります.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

)width=device-width:異なる画面解像度のデバイスにWebページが正常に表示されていることを確認します.
2)initial-scale=1.0:Webページのロード時に1:1の割合で表示され、スケールがありません.
3)モバイルブラウザでviewport metaタグに追加
user-scalable=no
ズーム機能を無効にできます.
4)通常、maximum-scale=1.0はuser-scalable=noとともに使用される.このようにズーム機能を無効にすると、ユーザーは画面をスクロールするだけで、Webサイトをアプリケーションのように見せることができます.関連コードは次のとおりです.

<meta name="viewport" content="width=device-width, 
                                     initial-scale=1.0, 
                                     maximum-scale=1.0, 
                                     user-scalable=no">

***この方法は、状況に応じて、すべてのWebサイトで使用することをお勧めしません.
三、画像
1.img-responsive classを追加することにより、Bootstrap 3の画像の応答レイアウトのサポートをより友好的にすることができる.

<img src="..." class="img-responsive" alt="     ">

.img-responsive {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

1)height:auto; max-width: 100%; 画像は、親要素のサイズを超えないようにスケールされます.
2)display: inline-block; 要素はその周囲の内容に対してインライン形式で表示されますが、インラインとは異なり、この場合は幅と高さを設定できます.
3)height:auto、関連要素の高さはブラウザに依存します.
4)max-widthが100%の場合、widthプロパティで指定した幅はすべて書き換えられます.これにより、画像の応答レイアウトのサポートがより友好的になります.
四、レイアウトとリンク
1. body {margin: 0;}:bodyの余白を除去する
2.レイアウトスタイル
@font-family-base
@font-size-base
@line-height-base
3.@link-color:リンクの色を設定する
リンクのスタイル:

a:hover,              
a:focus {            
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;         <span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 16px;"> #333        </span>
  outline: 5px auto -webkit-focus-ring-color;    <span style="font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 16px;"> #333        </span>
  outline-offset: -2px;       2px
}

4.
BootstrapはNormalizeを使用してブラウザ間の一貫性を確立します.
Normalize.cssは小さなCSSファイルであり、HTML要素のデフォルトスタイルではブラウザ間での一貫性が向上します.
5. container:

<div class="container">
  ...
</div>

.container {
   padding-right: 15px;
   padding-left: 15px;
   margin-right: auto;
   margin-left: auto;
}

内側余白(padding)は固定幅なので、デフォルトではコンテナはネストできません.

.container:before,
.container:after {
  display: table;
  content: " ";
}

これにより、擬似要素が生成されます.
display :table ; 匿名のtable-cellと新しいブロックフォーマットコンテキストが作成されます.
before擬似要素による上辺距離の崩壊防止
after擬似要素フローティングをクリアします.
conteneditableプロパティがHTMLに表示されている場合、いくつかのOperaバグのため、上記の要素の周りにスペースが作成されます.これはcontent:""を使用して修復できます.

.container:after {
  clear: both;
}

擬似要素を作成し、すべてのコンテナにすべてのフローティング要素が含まれていることを確認します.
Bootstrap 3 CSSには申請応答のメディアクエリーがあり、異なるメディアクエリーしきい値範囲でcontainerにmax-widthを設定し、グリッドシステムに一致させる.

@media (min-width: 768px) {
   .container {
      width: 750px;
}

五、Bootstrapブラウザ/デバイスサポート

Bootstrapは最新のデスクトップシステムやモバイルブラウザでよく機能します.
次の表は、Bootstrapの最新バージョンをサポートするブラウザとプラットフォームです.

Chrome
Firefox
IE
Opera
Safari
Android
YES
YES
適用されません
NO
適用されません
iOS
YES
適用されません
適用されません
NO
YES
Mac OS X
YES
YES
適用されません
YES
YES
Windows
YES
YES
YES*
YES
NO
*BootstrapはInternet Explorer 8以降のIEブラウザをサポートします.
ソース:http://www.w3cschool.cc/bootstrap/bootstrap-css-overview.html

CSS:aラベル間のデフォルトの白間隔をクリアする方法

js,cssの動的導入