ブートストラップ-CSSの概要

この章では、Bootstrapのより優れた、より高速な、より強力なWeb開発へのアプローチなど、Bootstrapのインフラストラクチャの主要部分の概要を説明します。

HTML5 doctype

Bootstrapは、HTML5Doctypeの使用を必要とする特定のHTML要素とCSSプロパティを利用します。したがって、Bootstrapを使用するすべてのプロジェクトの最初に、HTML5Doctypeの以下のコードを含めます。

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

モバイルファースト

Bootstrap 3がリリースされて以来、Bootstrapは最初にモバイルになりました。つまり、「モバイルファースト」スタイルは、個別のファイルではなく、ライブラリ全体で見つけることができます。追加する必要がありますviewport meta tag に <head> 要素、モバイルデバイスでの適切なレンダリングとタッチズームを保証します。

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

widthプロパティは、デバイスの幅を制御します。デバイス幅に設定すると、さまざまなデバイス（モバイル、デスクトップ、タブレットなど）で適切にレンダリングされます。
initial-scale = 1.0を指定すると、読み込まれたときにWebページが1：1の縮尺でレンダリングされ、すぐにズームが適用されることはありません。

追加 user-scalable = no に content以下に示すように、モバイルデバイスのズーム機能を無効にする属性。この変更により、ユーザーはスクロールのみが可能になり、ズームはできなくなります。その結果、サイトはネイティブアプリケーションのように感じられます。

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

通常、maximum-scale = 1.0は、user-scalable = noとともに使用されます。上記のようにuser-scalable = no ユーザーにネイティブアプリのようなエクスペリエンスを提供する可能性があるため、Bootstrapはこの属性の使用を推奨していません。

レスポンシブ画像

Bootstrap 3では、クラスを追加することで画像をレスポンシブにすることができます .img-responsive に <img>鬼ごっこ。このクラスが適用されますmax-width: 100%; そして height: auto; 親要素に適切に拡大縮小されるように画像に合わせます。

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

タイポグラフィとリンク

Bootstrapは、基本的なグローバル表示（背景）、タイポグラフィ、およびリンクスタイルを設定します-

Basic Global display−背景色を設定します：#fff; 上の<BODY>要素。
Typography−活版印刷のベースとして、@ font-family-base、@ font-size-base、および@ line-height-base属性を使用します。
Link styles−属性@ link-colorを介してグローバルリンクの色を設定し、：hoverにのみリンクアンダースコアを適用します。

LESSコードを使用する場合は、scaffold.less内にこれらすべてが含まれている可能性があります。

ノーマライズ

BootstrapはNormalizeを使用して、ブラウザー間の一貫性を確立します。

Normalize.cssは、CSSリセットに代わる最新のHTML5対応です。これは小さなCSSファイルであり、HTML要素のデフォルトのスタイル設定でブラウザー間の一貫性を向上させます。

コンテナ

クラスを使用する .container 以下に示すように、ページのコンテンツを折り返し、コンテンツを簡単に中央に配置します。

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

を見てください .containerbootstrap.cssファイルのクラス-

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

パディングと固定幅のため、コンテナはデフォルトでネストできないことに注意してください。

bootstrap.cssファイルを見てください-

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

ここで、CSSにメディアクエリがあることがわかります。 width。これは応答性を適用するのに役立ち、それらの中でコンテナクラスはそれに応じて変更され、グリッドシステムを適切にレンダリングします。