ブートストラップの学習ノートブートストラップの概要_html/css

HTML 5 ドキュメントタイプ (Doctype)

モバイルファースト

レスポンシブ画像

グローバル表示、レイアウト、リンク

基本的なグローバル表示

タイポグラフィ

リンクスタイル

ブラウザ間の不整合を回避する

Container (コンテナ)

Bootstrap 浏览器/设备支持

ホームページ

ウェブフロントエンド

htmlチュートリアル

ブートストラップの学習ノートブートストラップの概要_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:30 AM

HTML 5 ドキュメントタイプ (Doctype)

Bootstrap は、いくつかの HTML5 要素と CSS プロパティを使用します。これらが正しく動作するには、HTML5 ドキュメントタイプ (Doctype) を使用する必要があります。したがって、ブートストラップを使用してプロジェクトの先頭に次のコードスニペットを含めます。

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

ログイン後にコピー

Bootstrap によって作成された Web ページの先頭で HTML5 ドキュメントタイプ (Doctype) を使用しない場合、ブラウザーの表示に不一致が発生する可能性があり、特定の状況では不一致が発生し、コードが通過できなくなる可能性もあります。 W3C標準の検証。

モバイルファースト

モバイルファーストは、Bootstrap 3 の最も重要な変更です。

以前の Bootstrap バージョン (2.x まで) では、プロジェクト全体をモバイル対応にするために別の CSS を手動で参照する必要がありました。

今は違います。Bootstrap 3 のデフォルト CSS 自体はモバイル対応です。

Bootstrap 3 はモバイルを第一に、デスクトップを第二に設計されています。モバイルデバイスを使用するユーザーがますます増えているため、これは実際には非常にタイムリーな変化です。

Bootstrap によって開発された Web サイトをモバイル対応にし、適切な描画とタッチスクリーンのスケーリングを確保するには、以下に示すように、Web ページの先頭に viewport メタ タグを追加する必要があります:

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

ログイン後にコピー

幅属性はデバイスの幅を制御します。 Web サイトがさまざまな画面解像度のデバイスで表示されることを想定して、Web サイトをデバイス幅に設定すると、さまざまなデバイスで正しくレンダリングされます。

Initial-scale=1.0 は、Web ページが読み込まれるときに、スケーリングなしで 1:1 の比率でレンダリングされることを保証します。

モバイルブラウザでは、user-scalable=no を viewport meta タグに追加することでズーム機能を無効にできます。

通常、maximum-scale=1.0 は user-scalable=no とともに使用されます。ズームを無効にすると、ユーザーはスクロールのみできるようになり、Web サイトがネイティブアプリのように見えます。

この方法はすべての 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-sensitiveclass を追加することで、Bootstrap 3 の画像の応答性を高め、レスポンシブレイアウトのサポートに対応させることができます。

次に、このクラスに含まれる CSS 属性を見てみましょう。

以下のコードでは、img-sensitiveclass が max-width: 100%; 属性と height: auto; 属性を画像に割り当てていることがわかります。これにより、画像は親要素のサイズを超えずに比例的に拡大縮小されます。

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

ログイン後にコピー

これは、関連する画像がインラインブロックでレンダリングされることを示します。要素の表示プロパティを inline-block に設定すると、要素は周囲のコンテンツに対して相対的にインラインでレンダリングされますが、インラインとは異なり、この場合は幅と高さを設定できます。

高さを自動に設定します。関連する要素の高さはブラウザーによって異なります。

max-width を 100% に設定すると、width 属性で指定された幅がオーバーライドされます。これにより、画像がよりわかりやすくなり、レスポンシブなレイアウトをサポートできるようになります。

グローバル表示、レイアウト、リンク

基本的なグローバル表示

ブートストラップ 3 body {margin: 0;} を使用してボディのマージンを削除します。

本文の次の設定を参照してください:

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

ログイン後にコピー

最初のルールは、本文のデフォルトのフォントスタイルを「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;}

ログイン後にコピー

したがって、マウスがリンク上にある場合、またはクリックされたリンク上にある場合、色は #2a6496 に設定されます。同時に下線が表示されます。

さらに、クリックされたリンクには、カラーコード #333 の細い点線の輪郭が表示されます。もう 1 つのルールは、アウトラインを 5 ピクセル幅に設定し、Webkit ベースのブラウザの場合は -webkit-focus-ring-color ブラウザ拡張機能を持たせることです。アウトラインオフセットは -2 ピクセルに設定されます。

上記のスタイルはすべて scaffolding.less にあります。

ブラウザ間の不整合を回避する

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

Normalize.css は、HTML 要素のデフォルトのスタイルにおけるブラウザー間の一貫性を向上させる小さな CSS ファイルです。

Container (コンテナ)

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

ログイン後にコピー

Bootstrap 3 のコンテナクラスは、ページ上のコンテンツをラップするために使用されます。 bootstrap.css ファイル内のこの .containerclass を見てみましょう。

.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 bug，围绕上述元素创建一个空格。这可以通过使用 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 浏览器。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7328

Java チュートリアル

1626

CakePHP チュートリアル

1350

Laravel チュートリアル

1262

PHP チュートリアル

1209

Related knowledge

公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？ Mar 04, 2025 pm 12:32 PM

公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、