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

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

HTML5 doctype

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

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

モバイルファースト

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

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

_width_プロパティは、デバイスの幅を制御します。 _device-width_に設定すると、さまざまなデバイス（モバイル、デスクトップ、タブレットなど）で適切にレンダリングされるようになります。
_initial-scale = 1.0_を使用すると、ロード時にWebページが1：1の縮尺でレンダリングされ、すぐにズームが適用されなくなります。

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

<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はこの属性の使用を推奨しません。

レスポンシブ画像

ブートストラップ3では、クラス .img-responsive を <img> タグに追加することにより、イメージをレスポンシブにすることができます。このクラスは、 max-width：100％; および height：auto; を画像に適用して、親要素に合わせて適切に拡大縮小します。

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

タイポグラフィとリンク

ブートストラップは、基本的なグローバルディスプレイ（背景）、タイポグラフィ、およびリンクスタイルを設定します-

基本的なグローバル表示-_ <body> _要素に_background-color：#fff; _を設定します。
タイポグラフィ-_ @ font-family-base 、 @ font-size-base_、および_ @ line-height-base_属性を活版印刷のベースとして使用します。
リンクスタイル-属性_ @ link-color_を介してグローバルリンクの色を設定し、_：hover_にのみリンク下線を適用します。

'_LESSコードを使用する場合は、これらすべてを_scaffolding.less_内で見つけることができます。_

ノーマライズ

Bootstrapはhttps://necolas.github.io/normalize.css/[Normalize]を使用して、ブラウザー間の一貫性を確立します。

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

コンテナ

クラス .container を使用して、ページのコンテンツをラップし、以下に示すようにコンテンツの中心を簡単に合わせます。

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

_bootstrap.css_ファイルの .container クラスを見てください-

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

パディングと固定幅のため、デフォルトではコンテナはネストできません。

_bootstrap.css_ファイルを見てください-

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

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

Bootstrap-css-overview

目次