[モバイルWeb開発|モバイル]レスポンシブレイアウト+ブートストラップの使用

1つ：レスポンシブ開発

メディアクエリを使用して、さまざまなデバイスの目的に合わせてさまざまな幅のデバイスのレイアウトとスタイルを設定します。

画面分割	サイズ範囲	通常設定
超小型画面（携帯電話）	<768px	100％
小画面デバイス（タブレット）	> = 768px〜 <992px	750px
中画面（（デスクトップモニター）	> = 992px〜 <1200px	970px
ワイドスクリーンデバイス（大型デスクトップモニター）	> = 1200px	1170px

1.1：レスポンシブレイアウトコンテナ

Responsiveでは、変更効果を実現するために子要素と連携するレイアウトコンテナとして親が必要です。

メディアクエリ->レイアウトコンテナのサイズ->子要素の配置のサイズ

さまざまなスタイルのさまざまな画面

2：ブートストラップフレームワーク

コンセプト（Baidu）：html + cssコーディング仕様を提供し、簡潔で直感的で強力なコンポーネントのセットを提供します。独自のエコシステムを持ち、常に更新と反復を行います。開発を容易にし、開発効率を向上させます。

Baidu

迅速な開発：ブートストラップフロントエンド開発フレームワーク

モバイル、レスポンシブ

ブートストラップをダウンロードする

1：

2：
ここに画像の説明を挿入
3：

ここに画像の説明を挿入 4：

ここに画像の説明を挿入 [Chiji wow wow]ブートストラップには他の機能が必要ですが、まだわかりません。後で追加します

2.1：ブートストラップの使用

フォルダ構造を作成する
HTMLスケルトンを作成し、ファイル（ブートストラップ、cssなどをインポートする必要がある）をインポートします（公式Webサイトにコードがあり、そこに移動してコピーすることもできます）

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
</head>

コンテンツの作成
には、Bootstrapの事前定義されたスタイルを直接使用します。Bootstrapの
元のスタイルを変更し、重みに注意し
ます。Bootstrapを学習するための鍵は、Bootstrapが定義するスタイルと、これらのスタイルが実現できる効果を知ることです。

2.2：レイアウトコンテナ

Bootstrapは、ページコンテンツとグリッドシステム用に.containerコンテナをラップする必要があります。この目的のために2つのクラスを提供します。

コンテナクラス
・レスポンシブレイアウトのコンテナの固定幅
・大画面（> = 1200px）の幅を1170pxに設定
・中画面（> = 992px）の幅を970pxに設定
・小画面（> = 768px）の幅を750pxに設定
・超小画面（100％）
コンテナ-流体クラス
、流体レイアウトコンテナの100％幅、
すべてのビューポートを占めるコンテナ。
・独立したモバイル開発に適しています

2.3：グリッドシステム：システムはページを同じ幅の列に分割します

Bootstrapは、応答性の高いモバイルデバイスファーストのストリーミンググリッドシステムを提供します。画面またはビューポートのサイズが大きくなると、システムは自動的に最大12列に分割されます。

①行（列）

	超小型画面（携帯電話）<768px	小画面デバイス（タブレット）> = 768px	中画面（デスクトップモニター）> = 992px	ワイドスクリーンデバイス（大型デスクトップディスプレイ）> = 1200px
	xs-極小	sm-small	md-中	lg-大
クラスプレフィックス	.col-xs-	.col-sm-	.col-md-	.col-lg-

ここに画像の説明を挿入

各列にはデフォルトで15pxのパディングがあります
列が12より大きい場合、追加の列の要素は全体として取得され、新しい行に配置されます
列が12より大きい場合、いくつかの列の要素は空白です。
コピー数を分割するために、1つの列に複数のデバイスのクラス名を同時に指定できます。

      <div class="col-sm-1 col-md-8">3</div>

上位互換性のあるスタイル

②列の入れ子

グリッドシステムに組み込まれているグリッドシステムは、コンテンツを再びネストします。簡単に理解すると、列はいくつかの小さな列に分割されます。新しい.row要素と一連の.col-sm- *要素を既存の.col-sm- *要素に追加できます。

[叽叽歪歪]ネストされた列に行を追加し、親要素のパディング値を削除すると、高さは自動的に親と同じ高さになります

③列オフセット

.col-md-offset-classを使用して、列を右にオフセットします。これらのクラスは、セレクターを使用して、現在の要素に実際に左マージンを追加します。

コード

運転結果

【おしゃべりスケッチ】

右にしか行けず、影響があります

④列の並べ替え

.col-md-push-クラスと.col-md-pull-クラスを使用することで、列の順序を簡単に変更できます。

<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左侧</div>
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>

2.4：レスポンシブレイアウト

クラス名	小さな	小さい	に	大きい
.hidden-xs	××	√	√	√
.hidden-sm	√	××	√	√
.hidden-md	√	√	××	√
.hidden-lg	√	√	√	××

√可視×不可視
可視-xs、可視-sm、可視-md、可視-lgは上記の正反対です

【叨叨】モバイルレイアウト❀