家 › 料金 › Bootstrap 4 とエディターのトレーニング。要素の順序クラス

Bootstrap 4 とエディターのトレーニング。要素の順序クラス

レスポンシブ Web サイトのレイアウトを作成するために使用される Bootstrap 4 グリッドを分析する記事です。

グリッドの目的

Bootstrap 4 グリッドフレームワークは、応答性の高い Web サイトレイアウトを作成するために設計されています。

Bootstrap 4 グリッドは、CSS Flexbox および CSS メディアクエリに基づいています。これらを研究すると、Bootstrap 4 グリッドがどのように機能するかをより詳細に理解できるようになります。

アダプティブレイアウトとは、ブラウザのメインエリア（ビューポート）の幅に応じて見た目を変えることができるレイアウトです。これは、一部のビューポート幅ではレスポンシブレイアウトが一方向に見える場合もあれば、別の幅ではまったく異なるように見える場合があることを意味します。

Bootstrap 4 では、レイアウトの外観の変更はメディアクエリを通じて実装されます。ブートストラップの各メディアリクエストは、ブラウザーのビューポートの最小幅 (ブレークポイント、ブレークポイント、デバイス名) に基づいています。

Bootstrap 4 フレームワークには 5 つのブレークポイントまたはデバイス名 (ラベルなし、sm、md、lg、xl) があるため、それぞれで異なるように見えるレイアウトを作成できます。

Bootstrap 4 では、Bootstrap 3 と比較して、ブレークポイントの数が変更されています。 Bootstrap 3 には、xs、sm、md、lg の 4 つがありました。

グリッド要素

Bootstrap 4 グリッドは次の要素で構成されます。

包装容器（容器および容器流体）；
行（行）;
アダプティブブロック (列)。

ラップ容器

ラッパーコンテナは、応答性の高いページまたはブロックレイアウトの作成が開始される Bootstrap 4 グリッド要素です。他のグリッド要素 (行とアダプティブブロック) はその中に配置する必要があります。

Bootstrap 4 には、Response-fixed と Response-fluid という 2 種類のコンテナラッパーがあります。

応答固定コンテナの HTML マークアップ:

...

レスポンシブなラバーコンテナの HTML マークアップ:

...

最初の (応答固定) コンテナーは、ブラウザーの特定のビューポート幅内で幅を一定に保つ必要があるレイアウトを作成する必要がある場合に使用されます。

ブラウザのビューポートの幅に対する適応固定コンテナの幅の依存性を表に示します。

これは、適応固定コンテナには次のものがあることを意味します。

ビューポートの幅は 100%、最大 576 ピクセル。
540 ピクセル、ビューポート幅は 576 から 768 ピクセル。
720 ピクセル、ビューポート幅は 768 から 992 ピクセルなど。

水平方向では、固定応答コンテナーは中央に配置されます。これは、bootstrap.css で CSS プロパティ margin-left: auto および margin-right: auto を使用して行われます。

2 番目の (応答性の高いラバー) コンテナーは、ページまたはブロックの完全に柔軟なレイアウトを作成する必要がある場合に使用されます。このコンテナの幅は、どのビューポート幅に対しても 100% です。

さらに、ラッパーコンテナー (コンテナーとコンテナー流体) にも 15 ピクセルの左右に内部パディングがあります。コンテナをラッピングするためのパディングの設定は、Bootstrap 4 CSS ファイルで、padding-left: 15px プロパティと padding-right: 15px プロパティを使用して行われます。

Bootstrap 4 グリッドを使用してレイアウトを作成する場合は、ラッパーコンテナーを他のコンテナーの中に配置しないでください。

行

行は、次の場合にレイアウトを作成するときに使用される特別なグリッド要素 (行) です。

コンテナとその中に配置する必要があるアダプティブブロックの間。
1 つのアダプティブブロックと他のアダプティブブロックの間にあり、最初のアダプティブブロックに配置する必要があります。

行の HTML マークアップ:

...

Bootstrap 3 では、行はラッパーコンテナーまたは応答ブロックの左右の内部パディングを補うためにのみ機能していましたが、Bootstrap 4 では非常に重要な役割を果たします。これは、このグリッドが CSS Flexbox 上に構築されているためです。このグリッドでは、フレックス要素 (アダプティブブロック) のフレックスコンテナーとして機能します。それらの。行の外側でアダプティブブロックを使用すると、機能しません。ブートストラップ 4 では、応答ブロックは行クラスのブロック内に存在する必要があります。

マージンの内部パディングの補正は、負の左右のマージンが 15px (margin-left:-15px および margin-right:-15px) であるため、Bootstrap 3 と同じ方法で実行されます。

フィールドパディングがどのように補正されるかの例:

コンテナ (+15px) -> 行 (-15px) -> 列 (+15px) -> コンテンツコンテナ流体 (+15px) -> 行 (-15px) -> 列 (+15px) -> 行 (-15px) -> 列 (+15px) -> コンテンツ

その結果、ラッピングコンテナの左右端からコンテンツまでの余白は常に15pxになります。

さらに、論理的に互いに無関係なアダプティブブロックは、ある種のラッパーコンテナーまたは他のアダプティブブロックのフレームワーク内で 1 つの行に配置する必要はありません。最も正しい方法は、それらを個別の論理グループに分割し、それぞれを個別の行に配置することです。

例えば：

... … … … ...

アダプティブブロック

アダプティブブロックは、レスポンシブレイアウトの主要な構成要素であり、Web ページレイアウトがさまざまなコントロールポイント (シンボルなし、sm、md、lg、xl) でどのように見えるかを決定します。

アダプティブブロックの作成は非常に簡単です。1 つ以上のクラス Col-?-? を追加するだけです。必要な HTML 要素に追加します。

Col-?-?> クラスでは、最初の疑問符の代わりに、制御点の名前が示されます (指定なし、sm、md、lg、または xl)。 2 番目の疑問符の代わりに、指定されたコントロールポイントでのアダプティブブロックの幅が示されます。応答ブロックの幅は、1 ～ 12 (ブートストラップ列) の数値を使用して相対形式で指定されます。

この数値は、親ブロックの幅から指定されたコントロールポイントでアダプティブブロックがどのくらいの幅を占めるかを決定します。行。数値上の行幅 (ブートストラップ列) は 12 です。

たとえば、制御点 md にあるクラス Col-md-4 のブロックは、行幅の 4/12 を占めます。 33.3% (つまり、4/12*100% = 33.3%)。

アダプティブブロックとコンテナには、左右に 15 ピクセルのパディングがあります。 Bootstrap 4 フレームワークのアダプティブブロックのこれらのパディングは、CSS プロパティのpadding-left: 15px およびpadding-right: 15px を使用して設定されます。

アダプティブブロックは一列に配置する必要があります。それらの。アダプティブブロックには、親としてクラス行を持つブロックが必要です。

たとえば、次の応答ブロックが各デバイス上でどのくらいの幅になるかを検討してください。

...

このアダプティブブロックには次のものが含まれます。

最大 sm (xs による) の幅は 12 ブートストラップ列に等しい (つまり、行幅の 12/12*100%=100%)。
sm デバイスでは、幅はブートストラップ列 9 個分に相当します (つまり、行幅の 9/12*100%=75%)。
md デバイスでは、7 ブートストラップ列に等しい幅 (つまり、行幅の 7/12*100%=58.3%)。
lg デバイスでは、幅は 5 ブートストラップ列に等しい (つまり、行幅の 5/12*100%=41.6%)。
xl デバイスでは、幅はブートストラップの 3 列に相当します (つまり、行幅の 3/12*100%=25%)。

さらに、あるコントロールポイントのアダプティブブロックの幅を指定すると、このポイントだけでなく、指定されていない場合は後続のすべてのコントロールポイントにも適用されます。

md および lg デバイス上の応答ブロックの幅は、ブートストラップ列の 6 つ分になります: (12) -> sm(6) -> md -> lg -> xl(3) 。

sm デバイス上の応答ブロックの幅は 8 ブートストラップ列に等しく、lg および xl デバイスでは 4 つのブートストラップ列に等しい幅になります: (8) -> sm -> md(4) -> lg - >XL。

すべてのデバイス上の応答ブロックの幅は、ブートストラップの 6 列に相当します: (6) -> sm -> md -> lg -> xl 。

列のないアダプティブブロック

特別なクラスcol、col-sm、col-md、col-lg、col-xl、col-auto、col-sm-auto、col-md-auto、col-lg-auto、およびcol-xlがブートストラップ 4 グリッド -auto 。

最初のクラスグループ (col、col-sm、col-md、col-lg、col-xl) は、アダプティブブロックを作成することを目的としており、その幅はラインの空きスペースに依存します。ラインの占有されていない幅 (空きスペース) は、そのようなすべてのブロック間で均等に分配されます。さらに、これらのアダプティブブロックは、空きラインスペースを割り当てる前は幅がゼロになります (デフォルト)。

いくつかの例を見てみましょう。

1. 同じ幅のアダプティブブロックを 5 つ連続して作成します。

1/5 2/5 3/5 4/5 5/5

幅の計算:

空き行スペース - 100% (幅が 0 であるため)。
各適応ブロックの幅は 20% (100%/5) です。

2. ライン内に列数のアダプティブブロックがある場合の、クラスがcolのブロックの幅。

? 7列？ ?

幅の計算:

空き行スペース - 41.67% ((12-7)/12*100%);
列 7 を除く各アダプティブブロックの幅は 13.89% (41.67%/3) です。

Safari ブラウザの一部のバージョンでは、このようなマークアップを使用するとバグが発生し、複数の行に分割される可能性があります。

これを修正するには 2 つの方法があります。

アダプティブブロックを設定することにより border.col ( border: 1px 実線透明; )
アダプティブブロックに CSS プロパティ flex-basis .col (flex: 1 0 20%;) を与えることによって

さらに、Bootstrap 4 グリッドを使用すると、複数行の列数を指定せずに応答ブロックを配置できます。

... ... ... ...

このアクションは、クラス w-100 の空の div 要素をアダプティブブロックの前のマークアップに追加することによって実行されます。アダプティブブロックは新しい行で開始する必要があります。

このアクションを一部のコントロールポイントにのみ使用する必要がある場合は、Bootstrap 4 応答ユーティリティクラス (w-100 クラス) を追加する必要もあります。

この例では、アダプティブブロックは、ビューポートが非常に小さいデバイス上でのみ新しい行に転送されます。

... ... ... ...

2 番目のクラスグループ (col-auto、col-sm-auto、col-md-auto、col-lg-auto、col-xl-auto) は、アダプティブブロックを作成するように設計されており、その幅は次に従って決定されます。それらの内容。

例えば：

(1) (2) - md、lg、xl 制御点の幅は内容に基づいて決定されます (3)

結果として：

xs および sm では、アダプティブブロックは垂直方向 (上下に) に配置され、行の幅全体を占めます。
md では、応答ブロック 2 はそのコンテンツを表示するのに必要な幅を持ちます。ブロック 2 が行の幅全体を占めていない場合、適応ブロック 1 と 3 はブロック 2 を均等に分割します。ブロック 2 がラインの幅全体を占める場合、画像は制御点 xs および sm の場合と同じになります。
lg および xl では、応答ブロック 2 はそのコンテンツを表示するために必要な幅を持ちます。ブロック 2 が行の幅全体を占めていない場合、ブロック 3 はブートストラップの 2 列に等しい幅を占め、ブロック 1 は行の残りの幅全体を占めます。ブロック 2 が行の幅全体を占める場合、マークアップは xs および sm と同じになり、3 行のブロック 3 のみがブートストラップ 2 列に等しい幅になります。

アダプティブブロックを一列に配置

デフォルトでは、行内のアダプティブブロックは水平線に配置されます。横線内には、左から右に順にアダプティブブロックが並んでいます。合計列数が 12 を超えないアダプティブブロックは 1 つの水平ラインに収まります。現在の行に収まらないアダプティブブロックは次の行に移動します。

(1) (2) (3) (4)

アダプティブブロックが異なるコントロールポイントで異なる幅を持つ別の例を見てみましょう。

レイアウトレイアウトの基本原則

Bootstrap 4 グリッド上に Web ページレイアウトをレイアウトする基本原則は、いくつかのアダプティブブロックを他のアダプティブブロック内にネストすることです。

同時に、アダプティブブロックの幅は常に相対値であり、ブートストラップ列で設定され、親の幅のみに依存します。行。

Web ページのコンテンツは、レスポンシブブロック内にのみ配置する必要があります。

たとえば、既存のレイアウト、つまりアダプティブブロック Col-8 に、さらに 2 つのブロックを追加します。

... ...

これを行うには、まず列 8 ブロックに行 (アダプティブブロックのコンテナ) を配置する必要があります。

... ... ブートストラップ 4 - 応答ブロックのコンテンツへの行の挿入 Col-8

その後、2 つのアダプティブブロックを続けて追加します。

... ... ... ブートストラップ 4 - 応答ブロックを連続して挿入する

アダプティブブロックの位置合わせ

アダプティブブロックの水平方向と垂直方向の位置合わせは、Bootstrap 4 でユーティリティフレックスクラスを使用して行われます。

アダプティブブロックの垂直方向の配置

行ライン内のアダプティブブロックの垂直方向の位置合わせは、次のクラスのいずれかを使用して実行されます。これらのクラスをさらに行に追加する必要があります。

align-items-start (行の先頭を基準に);
align-items-center(center);
align-items-end (末尾を基準にして)。

たとえば、すべてのアダプティブブロックを行の中央に揃えてみましょう。

1/2 2/2

デフォルトでは、応答性要素は、それらが配置されている行行の高さ全体を占めます。

ライン内の特定のアダプティブブロックの垂直方向の位置合わせは、次のクラスのいずれかによって実行できます。

align-self-start (行の開始を基準にして);
align-self-center (中心);
align-self-end (末尾を基準にして)。

これらのクラスは、行ではなくアダプティブブロックに追加する必要があります。

たとえば、アダプティブブロック 2 を線の下端に揃えます。

(1) (2)

アダプティブブロックの水平方向の配置

次のクラスは、アダプティブブロックを水平方向に整列させることを目的としています。

justify-content-start (行の先頭を基準とした - デフォルト);
justify-content-center (センター);
justify-content-end (行末を基準にして);
justify-content-around (最初と最後のアダプティブブロックの前のスペースを考慮して均等);
justify-content-between (応答ブロック間の均等なスペースを確保)。

たとえば、アダプティブブロックを水平方向に均等に分散させてみましょう。

(1) (2)

レスポンシブなボーダーレスレイアウト

アダプティブブロックの内部パディングと行の外部負のマージンは、ガターなしクラスが後者 (つまり、行) に追加された場合に削除できます。

... ... ...

このクラス (ガターなし) は、この行に直接配置されたアダプティブブロックにのみ影響することに注意してください。それらの。パディングを削除するための CSS プロパティは、この行を親として持たないアダプティブブロックには適用されません。

Bootstrap 4 では、以下を使用して応答ブロックオフセットを実行できます。

クラスのオフセット (特定の列数の場合)。
サービス（ユーティリティ）マージンクラス。

オフセットクラス

オフセットクラスは、アダプティブブロックを特定の列数だけ右にシフトするように設計されています。

これらのクラスの構文は次のとおりです。

オフセット-(1) またはオフセット-(ブレークポイント)-(1)

(ブレークポイント) – このブロックにオフセットが適用される制御ポイント (指定されていない場合、オフセットは最小のデバイスから適用されます)。

(2) – ブートストラップ列の数を使用して指定されたオフセット値。

例として、図に示すようにアダプティブブロックにオフセットを設定してみましょう。

(1) (2) (1) (2) (1)

マージンクラスを使用したオフセット

Bootstrap の 4 番目のバージョンでは、マージンインデント (margin-left: auto および (または) margin-right: auto) を使用してアダプティブブロックのオフセットを設定することもできます。このオフセットオプションは、Bootstrap (4) の新しいバージョンのグリッドが CSS Flexbox に基づいているために提供されます。

この変位オプション (マージンクラスを使用) は、ブロックを相互に相対的に一定の可変量だけシフトする必要がある場合に使用されます。

Bootstrap 4 では、ブロックのマージンインデント (margin-left: auto および (または) margin-right: auto) をより便利で適応的に設定するために、クラス ml-auto 、 mr-auto 、 ml-(breakpoint) を使用できます。 )-auto および mr-( ブレークポイント)-auto 。

ブートストラップ 4 - 応答ブロックオフセット

(1) (2) (1) (2) (3) (1) (2)

アダプティブブロックの視覚的な順序を変更する

デフォルトでは、レスポンシブブロックは HTML コード内にある順序で視覚的に表示されます。

Bootstrap 4 での応答ブロックの視覚的な順序の変更は、order-(visual_number) クラスを使用して行われます。このクラスは xs チェックポイント用です。要素の順序を制御点 xs ではなく、sm、md、lg、または xl に対して決定する必要がある場合は、このクラスの次のバージョンが使用されます。

順序-(ブレークポイント)-(ビジュアル番号)

(visual_number) の代わりに、1 ～ 12 の数値を指定する必要があります。

この数値により、要素がページ上でどのように視覚的に表示されるかが決まります。つまり、すべてのアダプティブ要素がこれらの数値の昇順に視覚的に続きます。要素に順序クラスが設定されていない場合、デフォルトは 0 になります。

たとえば、2 つのアダプティブブロックの順序を変更してみましょう。

最初 (順序付けされておらず、順序クラスなし) 2 番目、ただし最後に表示されます 3 番目、2 番目に表示されます

別の例 (適応順序クラスを使用):

1 番目 (xs では sm が 2 番目に表示されます) 2 番目 (xs では sm が最初に表示されます)

数字 (デフォルトでは 1 ～ 12) に加えて、 first と last という単語も使用できます。これらのクラス (order-first、order-(breakpoint)-first、order-last、order-(breakpoint)-last) を使用すると、要素をそれぞれ先頭または末尾に視覚的に移動できます。

order-first クラスと order-(breakpoint)-first クラスは、要素の CSS order プロパティを -1 (order: -1) に設定することで効果を発揮し、order-last クラスと order-(breakpoint)-last クラスは CSS を設定します。 order プロパティを値 13 (order: $columns + 1) に設定します。

first と last のキーワードを使用する順序クラスを使用して、上の例を書き直してみましょう。

最初 (xs では sm が最後に表示されます) 最後 (xs では sm が最初に表示されます)

数字と最初と最後の単語の両方を含む順序クラスを使用する例:

#1 (XS)、#LAST (SM)、#1 (MD、LG、XL) #2 (XS)、#7 (MD、LG、XL) #3 (XS)、#6 (MD、LG、XL) ) #4 (XS)、#5 (MD、LG、XL) #5 (XS)、#4 (MD、LG、XL) #6 (XS)、#3 (MD、LG、XL) #7 (XS) )、#2 (MD、LG、XL) #8 (XS)、#FIRST (SM)、#8 (MD、LG、XL)

Boostrap 4 グリッド上のアダプティブレイアウトの例

Bootstrap 4 グリッドを使用して、図に示す Web ページブロックのレスポンシブレイアウトを作成してみましょう。 Bootstrap 4 - レスポンシブブロックレイアウトの例。

1. モバイルデバイス (xs) 用のブロックマークアップを作成します。

(1) (2) (3) (4) (5)

2. sm コントロールポイントのマークアップを設定します。

(1) (2) (3) (4) (5)

3. md および lg デバイス上で必要な列数にブロックを設定します。

(1) (2) (3) (4) (5)

4. xl のマークアップを作成します。

(1) (2) (3) (4) (5)

アダプティブブロックから不要なコントロールポイントを削除します。

(1) (2) (3) (4) (5)

さらに、Bootstrap 4 の初期状態では、応答ブロックの幅は 100% です。これにより、アダプティブブロックの初期幅が 12 列 (100%) である必要がある場合、アダプティブブロックを作成するときに列数を指定しなくても済みます。

(1) (2) (3) (4) (5)

GitHub の星の数に基づいています。

Bootstrap、特に最新の第 4 バージョンをマスターしたい場合は、この資料が特別に用意されています。ここでは、実際に 30 分でマスターできる小さなエンドツーエンドの例を使用して、Bootstrap の基本を説明します。一度理解すると、このフレームワークを使用して独自の何かを実行できるようになります。

前提条件この資料は、HTML、CSS、および jQuery の基本を理解している初心者の Web 開発者を対象としています。

ここでは、Bootstrap を使用して作成する 1 ページの Web サイトについて説明します。

Bootstrap を使用して作成された既製のプロジェクト

NPM インストールブートストラップ
ブートストラップは、コンテンツ配信ネットワークを使用してページに接続できます。これを行うには、次のリンクをタグに追加します。

Bootstrap の最新バージョンはここからダウンロードしてローカルで使用できます。

プロジェクト構造は次の図のようになります。

プロジェクトの構造 Bootstrap 4 の機能について Bootstrap 4 の最初の安定版は、今年 1 月末にリリースされました。 Bootstrap には、以前のバージョンには存在しなかったいくつかの興味深い機能が含まれています。つまり、改善と変更について言えば、次の点に注意することができます。

Bootstrap 4 は flexbox テクノロジーを使用して書き直されましたが、Bootstrap 3 は float テクノロジーを使用しました。フレックスボックスに詳しくない場合は、このリソースを参照してください。
Bootstrap 4 の CSS は rem 単位を使用しますが、以前は px 単位を使用していました。それらがどのように異なるかを知ることができます。
パネルなどの一部のコンポーネントは削除されています。 Bootstrap 4 で行われた変更の詳細については、こちらをご覧ください。

実際、Bootstrap 4 には Bootstrap 3 と比較して多くの新機能があり、必要に応じてこれらの革新的な機能に慣れることができます。私たちは現在、教育プロジェクトに取り組み始めています。 Bootstrap Grid System は、ページレイアウトを作成するために設計されています。レスポンシブな Web サイトを簡単に開発できるようになります。 Bootstrap の新しいバージョンでは、クラス名は変更されていません (class.xs は存在しないことに注意してください)。

グリッドは 12 列に分割されており、開発者の必要に応じて構成されたこの構造がページレイアウトの基礎となります。

Bootstrap グリッドを使用するには、ページのメイン要素に .row クラスを追加する必要があります。ネストされた要素のサイズを設定する場合、次のクラスが使用されます (クラス名の末尾のアスタリスクの代わりに、特定の要素が占有する基本 12 列グリッドの列数が示されます)。

Col-lg-* - ラップトップなどの大画面デバイス向けのページに使用されるクラス。
Col-md-* - タブレットなどの中型画面デバイス用に設計されたページのクラス。
Col-sm-* - スマートフォンなどの小さな画面用に設計されたページのクラス。

ナビゲーションバー Bootstrap のナビゲーションバーは、.navbar クラスを使用して作成されます。実際、これはナビゲーションバーを形成する要素が配置されるラッパーです。以下はこれから作成するパネルです。ページの上部にあり、スクロールしても消えません。

ナビゲーションバー

したがって、ページにナビゲーションバーを表示するには、クラス .navbar を含むタグを Index.html に追加します。その中で、 .navbar-brand 、 .navbar-toggler 、 .nav などの他のクラスを使用します。 -item では、サイトナビゲーションシステムの特別な要素と構造を作成します。 .fixed-top クラスを使用すると、ページの上部にナビゲーションバーを固定できます。ナビゲーションバーのレイアウトは次のとおりです。

家

次に、main.css ファイルを作成し、index.html ファイルタグに次の内容を配置してページに接続しましょう。

これにより、このファイルに CSS ルールを配置することで、ページ要素のスタイルをカスタマイズできるようになります。ナビゲーションバーのカラーデザインを設定するルールをこの CSS ファイルに追加してみましょう。

Navbar( 背景:#F97300; ) .nav-link , .navbar-brand( color: #f4f4f4; カーソル: ポインター; ) .nav-link( margin-right: 1em !重要; ) .nav-link:hover( 背景: #f4f4f4; カラー: #f97300; ) .navbar-collapse( justify-content: flex-end; ) .navbar-toggler( 背景:#fff !重要; )
新しいブートストラップグリッドはフレックスボックスに基づいているため、コンテンツを配置するには適切なプロパティを使用する必要があります。たとえば、ナビゲーションバーメニューを右側に配置するには、justify-content プロパティを使用し、その値を flex-end に設定する必要があります。

Navbar-collapse( justify-content: flex-end; )
ナビゲーションバーの背景色をカスタマイズするには、クラス .bg-light (明るい背景)、.bg-dark (暗い背景)、および .bg-primary (主な背景色) を使用できます。次の設定を使用します。

Bg-dark( 背景色:#343a40!重要 ) .bg-primary( 背景色:#343a40!重要 )

ページヘッダー次のタグは、ページヘッダーを記述するために使用されます。

ページヘッダーのレイアウトを準備しましょう。ウィンドウの高さ全体を占めるようにしたいので、ここでは jQuery が役に立ちます。 main.js ファイルを作成し、終了タグの前にindex.html に接続しましょう。

main.js ファイルに以下を追加しましょう。

$(document).ready(function())( $(".header").height($(window).height()); ))
ページヘッダーに素敵な背景画像を配置することをお勧めします。次のようにしてみましょう:

/*ヘッダースタイル*/ .header( 背景-画像: url("../images/headerback.jpg"); 背景-添付: 固定; 背景-サイズ: カバー; 背景-位置: センター; )
これが最終的に出来上がったものです。

背景画像付きのページヘッダー

現時点では、サイトのヘッダーは少し空に見えるので、それに要素を追加してクラス .overlay を割り当てましょう。これにより、ヘッダーの背景画像の上に配置されるブロックが作成されます。 Index.html ファイルのヘッダーを記述したセクションを次のように変更してみましょう。

次に、main.css に以下を追加します。

オーバーレイ(位置: 絶対; 最小高さ: 100%; 最小幅: 100%; 左: 0; 上: 0; 背景: rgba(244, 244, 244, 0.79); )
次に、ヘッダーにプロジェクトの説明を追加しましょう。これをクラス .container の新しい要素に配置します。これは、応答性の高いレイアウトのニーズに基づいてコンテンツをレイアウトするように設計された Bootstrap フレームワークのヘルパークラスです。このステップでマークアップがどのように変化するかは次のとおりです。

ここに別の要素を追加して、class.description を割り当てましょう。

▍ こんにちは、私の公式ウェブサイトへようこそ

キラム・ドロレ・エウ・フギアット・ヌラ・パリトゥール。例外的に、問題を提起することはできませんが、責任を負う義務を負うものではありません。

続きを見る
また、このタグにクラス .text-center を割り当てます。これにより、コンテンツがページの中央に配置されるようになります。サイト説明の最後にボタンがあります。設定方法について話しましょう。

ボタン Bootstrap には、ボタン用のクラスが多数用意されています。ボタンのデザイン例をいくつかご覧いただけます。前のセクションのマークアップの例からわかるように、クラス .btn とを要素に追加しました。 btn-アウトライン-セカンダリ。

次に、class.description のスタイルを設定しましょう。

description( 位置: 絶対; トップ: 30%; マージン: 自動; パディング: 2em; ) .description h1( color:#F97300 ; ) .description p( color:#666; font-size: 20px; width: 50%;行の高さ: 1.5; .description ボタン(ボーダー:1px ソリッド #F97300; 背景:#F97300; カラー:#fff; )
上記の手順を完了すると、ページヘッダーは次のようになります。

プロジェクトの説明を含むページヘッダーセクションについてまず、作成したいものを見てみましょう。ここには、Web 開発者に関する情報が含まれるページのセクションがあります。

「概要」セクション

ここでは、Bootstrap のグリッド機能を使用して、2 部構成のセクションレイアウトを作成します。まず、セクションの親要素に .row クラスを追加します。

レイアウトの最初の部分は左側にあり、写真が含まれます。右側にある 2 番目の部分には説明が含まれています。

このセクションの左側のマークアップは次のようになります。

// 左側 S.ウェブ開発者
ここにレイアウトの右側の説明を追加すると、次のようになります。

S.Web 開発者 ▍D.ジョン

最高の悲しみを抱き、エリートを集めて、一時的な事件を起こし、労働と悲しみを大きくします。必要最小限の費用で、必要な作業をすべて行って、結果を得ることができます。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur. 例外はありません。

上で説明したcol-lg-*、col-md-*、およびcol-sm-*クラスを使用した列幅の設定に注意してください。

これらすべてのスタイルは次のとおりです。

About( マージン: 4em 0; パディング: 1em; 位置: 相対; ) .about h1( color:#F97300; margin: 2em; ) .about img( 高さ: 100%; 幅: 100%; 境界半径: 50% ) .about スパン(表示: ブロック; カラー: #888; 位置: 絶対; 左: 115px; ) .about .desc( パディング: 2em; ボーダー左:4px ソリッド #10828C; ) .about .desc h3( カラー: #10828C; ) .about .desc p( 行の高さ:2; カラー:#888; )

ポートフォリオセクション次に、開発者のポートフォリオが表示されるセクションに移りましょう。作品ギャラリーが入る予定です。

ポートフォリオセクション

このセクションのレイアウトを作成するときは、上で説明したグリッドの操作と同じ原則が適用されます。

ポートフォリオ
各画像に .img-fluid クラスを追加すると、応答性が高くなります。

ギャラリー内の各要素は、中型および大画面で 4 列を占めます (覚えておいてください - クラスcol-sm-12は小さな画面のデバイスに使用され、クラスcol-md-4は中型画面に使用され、col-lg-4 -大きな画面を備えたデバイスの場合）。その結果、大画面および中画面では、1 つの要素がコンテナ要素の約 33.3% を占めますが、小型デバイスでは、各要素が画面全体 (12 列) を占めます。

作品ギャラリーのスタイリング:

/*ポートフォリオ*/ .portfolio( マージン: 4em 0; 位置: 相対; ) .portfolio h1( color:#F97300; マージン: 2em; ) .portfolio img( 高さ: 15rem; 幅: 100%; マージン: 1em; )

ブログセクションとカードの操作条件付き Web 開発者が管理するブログからの資料のお知らせを含むセクションの作成について説明します。

ブログセクション

このセクションを作成するには、いわゆるカード (ブートストラップ用語ではカード) が必要になります。

カードを作成するには、レイアウトに要素を含めて、それに .card クラスを追加する必要があります。次のクラスを使用して、さまざまなカード要素を構成できます。

.card-header: ヘッダー
.card-body: メインコンテンツ
.card-title: タイトル
.card-footer: フッター
.card-image: 画像

このセクションの HTML マークアップは次のようになります。

ブログ記事のタイトル

はっきりと、これは労働上の責任を負う義務を負っています。

記事のタイトル

はっきりと、これは労働上の責任を負う義務を負っています。

記事のタイトル

はっきりと、これは労働上の責任を負う義務を負っています。

続きを読む
カードのスタイルは次のとおりです。

Blog( マージン: 4em 0; 位置: 相対; ) .blog h1( color:#F97300; マージン: 2em; ) .blog .card( box-shadow: 0 0 20px #ccc; ) .blog .card img( width: 100%; 高さ: 12em; ) .blog .card-title( color:#F97300; ) .blog .card-body( パディング: 1em; )
ブログセクションを作成すると、1 ページのページは次のようになります。

ブログセクションを追加した後のページチームセクションこのセクションにはプロジェクトチームに関する情報が含まれます。

チームセクション

このセクションを形成するには、グリッドを使用して、画像間で利用可能なスペースを均等に分割します。各画像 (大画面および中画面) は、合計スペースの 25% に相当する 3 つのグリッド列を占有します。

このセクションの HTML マークアップは次のとおりです。

私たちのチームサラマネージャー Chris S.エンジニア Layla フロントエンド開発者 J.ジラードチームマネージャー
スタイルは次のとおりです。

Team( マージン: 4em 0; 位置: 相対; ) .team h1( カラー:#F97300; マージン: 2em; ) .team .item( 位置: 相対; ) .team .des( 背景: #F97300; カラー: #fff ; text-align: center; border-bottom-left-radius: 93%; イーズインアウト
画像の上にマウスを置くと表示されるアニメーションでこのセクションを飾りましょう。以下の画像のようになります。

画像上にマウスを置いたときのアニメーション

この効果を実現するには、次のスタイルを main.css に追加します。

チーム .item:hover .des( 高さ: 100%; 背景:#f973007d; 位置: 絶対; 幅: 89%; パディング: 5em; 上部: 0; ボーダー下左半径: 0; )

フィードバックフォームページのこのセクションには、サイト訪問者がサイト所有者にメッセージを送信できるフォームが含まれます。ここでは、いつものように、要素のスタイルを設定し、応答性を確保するために、Bootstrap の機能を使用します。

フィードバックフォーム

Bootstrap 3 と同様に、Bootstrap 4 では入力フィールドに .form-control クラスを使用しますが、何か新しいものがあります。たとえば、廃止された class.input-group-addon の代わりに、新しい class.input-group-prepend が (アイコンとラベルに) 使用されます。詳細については、Bootstrap 4 のドキュメントを参照してください。この場合、各入力フィールドは .form-group クラスが割り当てられた要素に配置されます。

以下をindex.htmlファイルに追加してみましょう。

連絡する
main.css ファイルに配置する必要があるフィードバックフォームセクションのスタイルは次のとおりです。

contact-form( margin: 6em 0;position:relative; ) .contact-form h1(padding:2em 1px; color: #F97300; ) .contact-form .right( max-width: 600px; ) .contact-form 。 right .btn-Secondary(background: #F97300; color: #fff; border:0; ) .contact-form .right .form-control::placeholder( color: #888; font-size: 16px; )

フォント標準フォントはすべての人に適しているわけではありません。私たちは Google Font API を利用して、プロジェクトで Raleway フォントを使用しました。ここはとても良く見えます。フォントをインポートするには、次のディレクティブを main.css ファイルに追加します。

@import url("https://fonts.googleapis.com/css?family=Raleway");
次に、さまざまな HTML タグのグローバルスタイルを設定しましょう。

Html,h1,h2,h3,h4,h5,h6,a( font-family: "Raleway"; )

スクロール効果以下の画像は、実現したいページの動作を示しています。

ナビゲーションバーのリンクをクリックしたときにページをスクロールする

ナビゲーションバーのリンクをクリックしたときにページが目的のセクションまでスムーズにスクロールするには、jQuery の機能を利用する必要があります。このライブラリにあまり慣れていない場合でも、ここには複雑なことは何もないことに注意してください。以下のコードを main.js ファイルに追加するだけです。

$(".navbar a").click(function())( $("body,html").animate((scrollTop:$("#" + $(this).data("value")).offset ( ).トップ )、1000) ))
その後、ナビゲーションバーの各リンクにデータ値属性を追加し、マークアップを次のようにします。

について

ポートフォリオ

ブログ

チーム

接触

これらすべてを最終的に機能させるには、ページの各セクションのメイン要素に id 属性を追加するだけです。この場合、その値が、対応するリンクの data-value 属性で指定された値と同じであることを確認する必要があります。たとえば、About セクションに対応する属性は次のとおりです。

これで例は完了です。タグを追加する

Bootstrap4 の新しいバージョンのリリースをきっかけに、このガイドを書くようになりました。新しいバージョンは大幅に異なるためです。ある程度の時間をかけて勉強する必要がありますが、それだけの価値はあります。このガイドは Bootstrap4 の完全なガイドではなく、ドキュメントを何度も見る必要があることは間違いありませんが、ここでは、Bootstrap4 を使用して Web サイトのレイアウトを作成する基本を 2 つの異なる方法で説明します。

インストールこの場合、SASS を使用するため、完全インストールを使用します。

ラピッドプロトタイピングにブートストラップが必要なだけの場合は、CDN メソッドを使用するのが合理的です。インストール (ダウンロード) せずに、インターネット上の他のリソースにあるファイルを接続するだけです。このようにして、それらをリンクとしてプロジェクトに追加します。

以下の例のコードをプロジェクトファイル (index.html) に追加するだけです。

Bootstrap 4 スターターテンプレートこんにちは< /h1>

このコードは、Bootstrap 4 ブートストラップページから直接引用したものです。

このテンプレートを使用すると、Bootstrap をすぐに使い始めることができます。利点は簡単に始められることですが、欠点は Sass が提供するカスタマイズを利用できないことです。

NPM 経由で Bootstrap 4 をインストールするこの時点でプロジェクトを開始します。これには、Node.js とそのパッケージマネージャーを使用して、他のいくつかのパッケージとともにブートデバイス自体をインストールする必要があります。これにより、Sass へのアクセス、リアルタイムのリロードなどが可能になります。

まず、コンソールまたはコマンドラインを開いて、Nodejs がインストールされていることを確認します。

現在のバージョンを入手した場合は、すべて問題なく続行できますが、そうでない場合は、OS に基づいて適切なインストーラーをダウンロードし、デフォルト設定でインストール手順に従います。

私の投稿「NPM Cconfiguring Gulp and SASS Compilation」でいくつかの有用な構成情報を読むことができます。

インストールが完了したら、コンソールまたはコマンドラインを再起動すると、Node.js コマンドにアクセスできるようになります。

プロジェクト用のフォルダーを作成して、そのフォルダーに入りましょう。

マクディル BS4 && CD BS4

次に、npm init を実行して、依存関係を保存するだけの package.json ファイルを作成します。

(注: -y フラグを使用すると、さまざまなクエリへの応答をスキップし、代わりにデフォルト値を提供できるようになります)

次に、npm を再度使用して、開発の依存関係に応じていくつかの異なるパッケージをインストールします。

Npm インストール gulp ブラウザー同期 gulp-sass --save-dev

Gulp は、頻繁に使用されるタスクを自動的に実行するためのタスクマネージャーです。初心者であれば、それがどのように機能するかがわかります。

Brows-sync は、ファイルが変更されるとブラウザを自動的に更新します。

gulp-sass を使用すると、sass と統合してプロジェクトを構築できます。

--save-dev - 別のフォルダーにインストールします。この例では、プロジェクトフォルダー、つまりローカルにあります。

次に、最後にもう一度 npm を使用して、通常のプロジェクトの依存関係としていくつかのパッケージをインストールします。

Npm インストールブートストラップ jquery Popper.js --save

bootstrap はもちろんブートストラップパッケージです。

jquery - ブートストラップテンプレート自体によって直接使用される Java スクリプトライブラリ

Popper.js はブートストラップでも使用されます。ポップアップやツールチップなどを配置できます。

次に、コードエディターでプロジェクトを開きます。 Sublime3を使っていきます。

プロジェクトの src フォルダーとその中にいくつかのサブフォルダーを作成する必要があります。ツリーは次のようになります。

/src /assets /css /js /scss

/src 内に上記のように 4 つのフォルダーも作成します。

次に、/src/ 内に次の内容のindex.html ファイルを作成します。

ブートストラップ 4 のレイアウト< /title> < meta name="viewport" content="width=device-width, initial-scale=1.0" /> < /head> < body> < /body> < /html>

Raleway フォントとアイコン用の FontAwesome をインポートしています。次に、bootstrap.css およびstyles.css ファイルを参照します。これらはまだ存在しませんが、すぐに作成する予定です。

/src/scss/ フォルダー内にstyles.scss ファイルも作成しましょう。 Sass のコンパイルが確実に機能するようにするための簡単な変数と一連のルールを紹介します。

$bg-color:赤; 本文 (背景: $bg-color; )

ルートフォルダー (プロジェクトフォルダー) に gulpfile.js ファイルを作成し、次の内容を貼り付けます。

var gulp = require("gulp"); var browserSync = require("browser-sync").create(); var sass = require("gulp-sass"); // Sass を CSS にコンパイルし、ブラウザに自動挿入します gulp.task("sass", function() ( return gulp.src(["node_modules/bootstrap/scss/bootstrap.scss", "src/scss/*.scss) "]).pipe(sass()) .pipe(gulp.dest("src/css")) .pipe(browserSync.stream()); )); // JavaScript ファイルを /src/js フォルダーに移動します gulp.task("js", function() ( return gulp.src(["node_modules/bootstrap/dist/js/bootstrap.min.js", "node_modules/ jquery/dist/jquery.min.js", "node_modules/popper.js/dist/umd/popper.min.js"]) .pipe(gulp.dest("src/js")) .pipe(browserSync.stream ()); // 静的サーバー + scss/html ファイルの監視 gulp.task("serve", ["sass"], function() (browserSync.init(( server: "./src" )); gulp.watch(["node_modules /bootstrap/scss/bootstrap.scss", "src/scss/*.scss"], ["sass"]); gulp.watch("src/*.html").on("change", browserSync.reload ); )); gulp.task("デフォルト", ["js","serve"]);

上記で定義したタスクに基づいて、ここで何が起こっているかを説明します。

デフォルトタスク - デフォルトタスク。コマンドラインで gulp と入力すると、js タスクとサーブタスクの両方を実行するように指示されます。

js タスクこれは、npm install... を実行して作成される node_modules フォルダーに保存されている 3 つの異なる JavaScript ファイルを指定し、それらを /src/js フォルダーに移動するだけです。このようにして、node_modules フォルダーの代わりに /src/js を指定することで、これらを上記の HTML ファイルに含めることができます。

serve タスクは単純なサーバーを起動し、sass ファイルを監視し、ファイルが変更された場合は sass タスクを呼び出します。また、*.html ファイルを保存するときにブラウザーが同期します。

sass タスクこのタスクは、ブートストラップ sass ファイルとカスタム sass ファイルの両方を取得して通常の CSS にコンパイルし、これらの CSS ファイルを /src/css フォルダーに保存します。

コマンドラインで gulp を実行してみましょう。

それはこのように動作します：

マージンには m を、パディングには p を使用します
m または p の後に、t (上 -)、b (下)、l (左)、r (右)、x (左と右)、y (上と下) を追加するか、4 つの側面すべてに何も追加しません。
ハイフンの後に、0 ～ 5 のサイズを指定します (スペースの最大数は 5)。

したがって、この例では、次のようにする必要があるように見えます マージンそして底下のカードを押しのけます。

最初のカードコンテナに mb-4 を追加します。

現在修正されました:

Bootstrap 4 でマージンとパディングの両方を簡単に処理する方法を次に示します。

さまざまな Bootstrap 4 コンポーネントを使用して少し遊んでみましょう。

Bootstrap 4 での「タイポグラフィ」の操作行クラスの終わりの 3 列の下に、2 列を持つセクションを追加しましょう。

最初の列は列の大部分 (8) を使用し、右側の列はその後のセクションの垂直ナビゲーション用になります。

重要な見出し

重要な小見出しのようなものをここに入れることができます。これは大きくて灰色です。

ロレム・イプサム・ドルー・シット・アメット、コンセクト・アディピシング・エリート、セド・ド・エイウスモッド・テンポラ・インシディダント・ユー・レイバーとドローレ・マグナ・アリクア。必要最小限の費用で、必要な作業をすべて行って、結果を得ることができます。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur.

必要最小限の費用で、必要な作業をすべて行って、結果を得ることができます。 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eufugiat nulla pariatur.

..垂直方向のナビゲーションが間もなく開始されます..

Bootstrap 4 のドキュメントには、タイプベースのヘルパークラスをすべて提供する「タイポグラフィ」セクションがあります。とてもシンプルです。を使用しております。鉛要素の下のサブタイトルを強調表示します h3.

また、ドキュメントにはテキストユーティリティセクションがあり、テキストの配置、変換、斜体、フォントの太さのオプションが提供されます。

小さなビューポートでは、タイプをデフォルトの左揃えではなく中央に配置したいとします。

これにより、div に含まれるテキストが小さいビューポートでは中央に配置され、中型以上のビューポートでは左揃えになります。

Bootstrap 4 垂直ナビゲーションカスタマイズに入る前に、もう 1 つ要素を追加します。追加したばかりの右側の列に、垂直ナビゲーションを追加しましょう。

二次メニュー

アクティブ< /li>
リンク

ブラウザでの結果は次のようになります。

小さなビューポートでテストして、応答性が高いことを確認することもできます。もちろん、ナビゲーションに関連するオプションは他にもたくさんあります。

Bootstrap 4 でのカスタマイズこれで、ほとんどの Web サイトで見られるかなり標準的なレイアウトが完成しました。

幸いなことに、Bootstrap 4 には、単純な要素を簡単にカスタマイズできる堅牢なシステムが備わっています。

ファイル /src/scss/styles.scss を開き、次の内容を貼り付けます。

// 変数のオーバーライド // Bootstrap Sass インポート @import "node_modules/bootstrap/scss/bootstrap";

「テーマ設定」セクションによると、ニーズに応じて、すべての Bootstrap 4 sass ファイルを含めるか、個々の要素を追加するかを選択できます。物事を簡単にするために、上記のようにすべてをインポートするだけです。

Bootstrap 4 でのテーマの色の変更おそらく最も一般的な問題は、色の変更です。

node_modules/bootstrap/scss/_variables.scss ファイルを開くと、上部にカラーシステムについて言及していることがわかります。このセクションでは、色に一致するように書き換えることができるすべての変数が表示されます。

ベースカラーだけを変更しましょう。styles.scss を次のように変更します。

// 変数がオーバーライドします $theme-colors: ("primary": #d95700);

保存すると、結果は次のようになります。

とてもシンプルです！

背景色も変更しましょう。

// 変数がオーバーライドします $theme-colors: ("primary": #d95700); $body-bg: #ededed;

結果は次のようになります。

うーん、ジャンブルトロン (ヒーロー) セクションも灰色だったので見苦しくなりました。

Chrome または Firefox のインスペクターを使用して特定の要素のカスタム設定を設定し、変更したい関連要素クラスを見つけて、styles.scss ファイルで変更できます。

この場合、ジャンボトロンを担当するクラスは次のとおりです。 .ジャンボトロン。背景色を変更し、上部に小さな境界線を追加して、ナビゲーションバーからのドロップシャドウをシミュレートしましょう。

// 変数がオーバーライドします $theme-colors: ("primary": #d95700); $body-bg: #ededed; .jumbotron (背景色: #ffffff !重要; ボーダートップ: 3px ソリッド rgb(219, 219, 219); )

結果は次のとおりです。

結論 Bootstrap 4 に関するこのコース/チュートリアルを楽しんでいただければ幸いです。ここでは基本の表面をなぞっただけで、さらに多くのことを学ぶことができます。この時点では、基本を理解しており、ほぼすべてがドキュメントでカバーされているため、学ぶ必要があるものはすべて簡単なものになるはずです。

今年 1 月、Bootstrap 4 (v4 とも呼ばれます) が 2 年以上アルファ版であった後、ついにリリースされました。これは機能の大幅な書き換えを意味します。 Bootstrap 4 には内部的に多くの変更が加えられているだけでなく、理解しておく必要がある新しい概念も多数含まれています。

したがって、この記事では、v3 と比較した v4 の Bootstrap の最も重要な変更点について説明します。すでに Bootstrap を使用していることを前提としているため、基本原理については説明しません。

次に、最も重要な変更点を見てみましょう (順不同)。

#1: ボタンビュー

楽しくてビジュアルなものから始めましょう! v4 のボタンは、v3 よりもフラットなデザインになっています。以前のボタンは次のとおりです。

そして、ここに新しいもののいくつかを示します。

これは、ここ数年で絶大な人気を博したマテリアルデザインガイドなど、最新のデザインガイドとより一致しています。

#2: メディアクエリの改善

私の意見では、Boostrap v3 ではグリッドの制御ポイントが少なすぎました。たとえば、最小の xs は 768 ピクセルでした。現在、多くのトラフィックははるかに小型のデバイスから発生しており、これは多くの開発者にとってストレスとなっています。

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

$ グリッド - ブレークポイント : (

xs: 0、

sm: 576ピクセル、

MD: 768ピクセル、

LG: 992ピクセル、

XL : 1200ピクセル

）！デフォルト ;

これにより、あらゆる画面サイズで適切に機能するグリッドを簡単に作成できます。

#3: Flexbox のサポートにより柔軟性が向上

Bootstrap の有名なグリッドは、float の代わりに Flexbox を使用して作成されるようになりました。ほとんどのグリッドレイアウトはまったく同じように機能するため、一見したところ、開発者にとっては大きな違いはありません。ただし、これによりいくつかの新しい可能性が開かれます。

以前は、各列の幅 (1 ～ 12) を定義する必要がありました。 1 つの列の幅を定義すると、Flexbox が他の列の幅を自動的に設定できるようになりました。これを行う方法の例を次に示します。

ご覧のとおり、中央の列の幅を 6 (全幅の半分) に設定し、他の列は残りのスペースを占有します。

1/3 2/3 (幅広) 3/3

< div class = "container" >

< div class = "row" >

< div class = "col" >

3 件中 1 件

< / div >

< div class = "col-6" >

2/3 (幅広)

< / div >

< div class = "col" >

3/3

< / div >

フレックスボックスクラス

Bootstrap 4 には、コンテナーや Flexbox 要素の管理に使用できるクラスも多数付属しています。要素を Flexbox コンテナに変えるには、要素に d-flex クラスを与えるだけです。

私はフレックスボックスコンテナです！

< div class = "d-flex" >私は「フレックスボックスコンテナです！」< / div >

これにより、内部にテキストを含む Flexbox コンテナが得られます。

注記。ここでは、Flexbox 関連のスタイルのみを取り上げます。

さらにいくつかの要素を追加し、コンテナ内での要素の配置方法を制御する別のクラスを導入しましょう。

Bootstrap 4 フレームワークのクイックスタート。

ゼロからブログをデザインする実践的な例で Bootstrap 4 の基本を学びましょう

< div >フレックスアイテム< / div >

< / div >

その結果、要素はコンテナ内の中央に配置されます。

#4: クラスを使用したインデントの管理

すごいかっこいい。 p-* クラスと m-* クラスを使用してパディングとマージンを制御できるようになりました。パディングは、0 から 5 までの数値を使用して、0.25 から 3 レムまで変化します。たとえば、最大のパディングを作成するために、Flexbox コンテナをクラス p-5 に設定してみましょう。

みなさん、こんにちは！ Bootstrap 3 は 2013 年半ばにリリースされ、応答性の高いレイアウトを迅速に作成するための便利で拡張可能な CSS フレームワークであることが長年にわたって証明されてきました。何百万ものサイトがこのフレームワークをうまく使用しており、私たちはすでにこのフレームワークにかなり慣れています。

どもり

2018 年 1 月 18 日、重要な出来事が起こりました。マークアップ用の Flexbox モデルの使用に基づいて、待望の Bootstrap 4 バージョンがベータ版からリリースされました。このバージョンは現在、すべての最新のブラウザーをすでにサポートしており、より便利で柔軟です。開発者にとっては、Float に基づく従来のマークアップモデルよりも優れています。今では、それは不可能であると完全に自信を持って言えますが、Flex を使用してタイプ入力する必要があります。

追加の Bootstrap 4 レッスン資料

すべてのレッスン例を自分でテストできます: アーカイブをダウンロード

Bootstrap 4 のドキュメントの詳細については、オフィスで読むことができます。 Webサイト;

Bootstrap 4: OptimizedHTML 5 を含む最新のスターター。

今日は、古いバージョンと比較しながら、Bootstrap 4 グリッドの操作を詳しく見ていきます。このレッスンは、あなたが初心者で Bootstrap に慣れ始めている場合だけでなく、経験豊富な開発者で、Bootstrap 4 のグリッドと Flexbox ツールを使用してレイアウトの微妙な違いをすべて学びたい場合にも役立ちます。それ。

1. 基本的なデフォルトのグリッドパラメータ

Bootstrap 4 のデフォルトのグリッドは 3 番目のバージョンとよく似ていますが、いくつかの重要な違いがあります。

主なオプションの表から、第 3 バージョンのグリッドとの明らかな違いに気づくことができます。最小解像度を担当するクラス接頭辞「.col-xs-」が削除され、簡素化された接頭辞「.col-」に置き換えられました。「.col-」プレフィックスがモバイルデバイスの最小解像度を決定すると誤解するかもしれませんが、これは完全に真実ではありません。とりわけ、「.col-」接頭辞は、Bootstrap 4 の最も重要な革新の 1 つです。これは、任意の解像度で列を自動的にレイアウトする役割を担うクラスです。しかし、それについては後で詳しく説明します。

解像度が低い場合は、576 ピクセルのメディアクエリを持つプレフィックス「.col-sm-」が使用されます。コンテナの幅は 540 ピクセルです。中解像度は 768 ピクセルから始まります。コンテナの幅 - 720 ピクセル。より高い解像度は、992 ピクセル以上のデバイス解像度で動作します。コンテナの幅 - 960 ピクセル。そして最大のもの - 1200ピクセルから。コンテナの幅は 1140 ピクセルに固定されます。

メディアクエリの最大値は、ピクセル単位の小数部「.98」を持つ不正確な値であることに注意してください。これは、メディアクエリの最大幅が制限されているデスクトップファーストレイアウト方法を選択した場合に顕著です。たとえば、Sass「+media-breakpoint-down(lg)」をコンパイルすると、「@media (max-width: 1199.98px)」が得られます。ここでは、次のメディアクエリを開始するために 0.02 ピクセルが解放されます。これを念頭に置いてください。「Jedi Layout 8」の次号では、実際の例を使用して、このレッスンのこの点と他の多くの点を見ていきます。

2. 自動列レイアウト 2.1 同じ幅の列

新しいジェネリッククラス「.col」を使用すると、行 (「.row」の親) に最大 12 列を指定できます。その幅は要素の数に応じて自動的に計算され、等しくなります。

例えば：

2.2 1 列の幅の設定

1 つの列の幅を明示的に設定し、残りを自動のままにすることもできます。

1/3 2/3 (ワイド) 3/3 1/3 2/3 (ワイド) 3/3

この例では、3 行目の 2 番目の要素はクラス「.col-6」を持ち、2 行目の 2 番目の要素はクラス「.col-5」を持ち、すべての画面解像度で対応する数の列を占めます。残りの列の幅は応答性が高く、残りのスペースをすべて使用して自動的に計算されます。

2.3 可変幅の内容

「col-(breakpoint)-auto」クラスを使用すると、列のコンテンツが占めるスペースに応じて、可変幅のコンテンツを定義できます。ここで、ブレークポイントは画面サイズ (xl、lg、md、または sm) です。

1/3 可変幅コンテンツ 3/3 1/3 可変幅コンテンツ番号 2 3/3

ここでは、中央の 2 つの列がコンテンツの幅に対応する幅を占めていることがわかりますが、最初の行では、「.row」の「.justify-content-sm-center」クラスのおかげで、行全体が中央に配置されています。また、合計の幅は中央の列の幅のみに依存し、2 行目は利用可能な幅いっぱいに引き伸ばされますが、2 列目はコンテンツの幅に固定されたままになります。

2.4 複数行

Bootstrap 4 のおかげで、1 行に複数の行 (ハイフン) を作成できます。これは、「.w-100」クラスを使用して実装できます。このクラスは「br」タグに非常に似ており、基本的に列を新しい行に折り返すだけです。

コルコルコルコルコル

このクラスは、Bootstrap プロジェクトの Sass バージョンを使用している場合にプロジェクトに個別に含まれる Bootstrap 4 エクストラの一部であり、「scss/utilities」フォルダーにあることに注意してください。必要に応じて、このフォルダーから他のプラグインをプロジェクトに接続することもできます。 3. アダプティブクラス 3.1 ブレークポイント

Bootstrap 4 の非常に興味深い機能は、すべての解像度で表示されるユニバーサル列を設定できることです。これが前述の「.col」クラスです。さらに、コンテンツが占める特定の列数を示すクラスを定義できます。これらはプレフィックス「.col-(列数)」を持つクラスです。たとえば、「.col-6」は、コンテンツは 12 列中 6 列を占めます。特定の数量を指定する必要がない場合は、ユニバーサルクラス「.col」を安全に使用できます。

コルコルコルコルコル-8 コル-4

3.2 モバイルデバイスの場合

クラス接頭辞「.col-sm-(占有列数)」を使用して、最小解像度を除くすべてのベースグリッドを定義できます。小さな画面では、このようなグリッドの列が互いの下に積み重なって表示されます。さらに権限を与えると、クラスで定義したのと同じだけのスペースが占有されます。

列-SM-8 列-SM-4 列-SM 列-SM 列-SM

ここでは、解像度が「sm」を超える、つまり 576 ピクセルを超えるデバイスの最初の行が表示されます。は 2 つの列 (それぞれ 12 幅中 8 列と 4 列) に分割されています。 2 行目の列の幅は自動的に計算されますが、最小の解像度では、「.col-sm」クラスのおかげで、これらの列も互いに積み重ねられます。

3.3 複雑な結合メッシュの作成

Bootstrap を使用すると、グリッドの作成時に列を任意に組み合わせて作成できます。アダプティブクラスを使用して、列ごとにさまざまな解像度で動作を設定できます。ここでは、3 番目のバージョンとの違いはクラスの名前のみです。

.col-12 .col-md-8 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-md-4 .col-6 .col-6

4. 位置合わせ

Bootstrap 4 は「flex」に基づいており、このモデルのすべての機能を提供し、簡単な既製のクラスで利用できます。可能性としては、垂直方向と水平方向の配置が挙げられます。

4.1 垂直方向の配置上上上中中央中下下下

親「.row」を通じて配置を制御することに加えて、列に適切なクラスを与えることで列を配置できます。

上中下

4.2 水平方向の位置合わせ

さらに、Bootstrap 4 には、「.row」の「.justify-content-」プレフィックスを使用して列を水平方向に配置するツールがあります。

row justify-content-start row justify-content-start row justify-content-center row justify-content-center justify-content-end justify-content-end justify-content-around justify-content-around justify-content-between justify -内容-間

4.3 列間の余白を削除する

列間のマージンを削除する必要がある状況がよくあります。たとえば、ギャラリーを作成していて、次のように要素を近くに配置する必要がある場合:

これを行うには、追加のクラス「.no-gutters」を「.row」要素に設定するだけです。

列-6 列-sm-4 列-MD-4 列-6 列-SM-4 列-MD-4 列-6 列-SM-4 列-MD-4 列-6 列-SM-4 列-MD -4 列-6 列-sm-4 列-MD-4 列-6 列-SM-4 列-MD-4 列-6 列-SM-4 列-MD-4 列-6 列-SM-4 列-md-4col-6col-sm-4col-md-4

4.4 列を新しい行に移動する

行 (.row) の合計列数が 12 を超える場合、次の列が新しい行に移動されます。

.col-9 .col-4
9 + 4 = 13 列 - これは 12 列以上です。この要素は 4 列幅で、新しい行に移動されます。 .col-6
次の列がラインに沿って配置されます。

ここにあるものはすべて、Bootstrap のバージョン 3 と同じです。 5. 要素の順序 5.1 要素の順序クラス

「.order-」接頭辞が付いた特別なクラスを使用して、要素の順序を定義できます。 Flex レイアウトに慣れている場合は、これらのルールに馴染みがあるでしょう。 Bootstrap 4 では、クラスを使用して要素の順序を設定する機能が提供されます。順序を直接設定できます (.order-1.order-md-2)。

最初の順序付けされていない要素