BootstrapチュートリアルのCSSの概要

5274 ワード

HTML 5ドキュメントタイプ(Doctype)
BootstrapはHTML 5要素とCSS属性をいくつか使用しています.これらを正常に動作させるには、HTML 5ドキュメントタイプ(Doctype)を使用する必要があります.したがって、Bootstrapプロジェクトの先頭に次のコードセグメントを含めてください.

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

Bootstrapで作成したページの先頭にHTML 5のドキュメントタイプ(Doctype)を使用しない場合は、ブラウザの表示が一致しない問題や、特定のシナリオでの一致しない問題に直面し、コードがW 3 C標準で検証できない可能性があります.
モバイルデバイス優先はBootstrap 3の最も顕著な変化である.
Bootstrapが開発したウェブサイトがモバイルデバイスに友好的で、適切な描画とタッチスクリーンのスケールを確保するために、ウェブページのheadにviewport metaラベルを追加する必要があります.以下に示します.

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

widthプロパティはデバイスの幅を制御します.Webサイトが異なる画面解像度のデバイスで閲覧されると仮定すると、デバイス-widthに設定すると、異なるデバイスに正しく表示されることを確認できます.initial-scale=1.0 Webページのロード時に1:1の割合で表示され、スケールが発生しないことを確認します.モバイルデバイスブラウザでviewport metaラベルにuser-scalable=noを追加することで、スケール機能を無効にできます.通常、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">

レスポンス画像

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

img-responsive classを追加することで、Bootstrap 3の画像の応答レイアウトのサポートをより友好的にすることができます.次に、このclassに含まれるcssプロパティを見てみましょう.次のコードでは、img-responsive classがmax-width:100%を画像に付与していることがわかります.とheight:auto;を選択します.

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

これは関連画像がinline−blockとして現れることを示している.エレメントのdisplayプロパティをinline-blockに設定すると、エレメントはその周囲のコンテンツに対してインライン形式で表示されますが、インラインとは異なり、幅と高さを設定できます.height:autoを設定します.関連要素の高さはブラウザによって異なります.max-widthを100%に設定すると、widthプロパティで指定した幅が書き換えられます.これにより、画像の応答レイアウトのサポートがより友好的になります.
グローバル表示、レイアウト、リンク
基本的なグローバル表示
Bootstrap 3はbody{margin:0;}を使用に表示されます.次のbodyの設定を見てください.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

最初のルールはbodyのデフォルトフォントスタイルを「Helvetica Neue」、Helvetica、Arial、sans-serifに設定します.2番目のルールでは、テキストのデフォルトフォントサイズを14ピクセルに設定します.3番目のルールでは、デフォルトの行の高さを1.428571429に設定します.4番目のルールでは、デフォルトのテキスト色を#333333に設定します.最後のルールでは、デフォルトの背景色を白に設定します.レイアウトには、@font-family-base、@font-size-base、および@line-height-baseプロパティをレイアウトスタイルとして使用します.リンクスタイルは、プロパティ@link-colorでグローバルリンクの色を設定します.リンクの既定のスタイルについては、次のように設定します.

a:hover,
a:focus {
  color: #2a6496;
  text-decoration: underline;
}

a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

したがって、マウスがリンクにぶら下がったり、クリックしたリンクがある場合、色は#2 a 6496に設定されます.同時に、下線が表示されます.それ以外に、クリックしたリンクは、色コード#333の細い破線の輪郭を呈します.もう1つのルールは、アウトラインを5ピクセル幅に設定し、webkitベースのブラウザに-webkit-focus-ring-colorのブラウザ拡張子を設定することです.輪郭オフセットは-2ピクセルに設定されています.これらのスタイルはすべてscaffolding.lessで見つかりました.ブラウザ間での不一致BootstrapがNormalizeを使用してブラウザ間での一貫性を確立しないようにします.Normalize.cssは小さなCSSファイルであり、HTML要素のデフォルトスタイルではブラウザ間での一貫性が向上します.
コンテナ(Container)

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

Bootstrap 3のcontainer classは、ページの内容をラップするために使用されます.一緒に見てみましょうcssファイルのこれcontainer class.

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

上のコードでcontainerの左右外距離(margin-right,margin-left)をブラウザに渡して決定します.内側余白(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;
}

dedecmsテンプレートではphpコードをどのように使用しますか?

3-Djangoビュー