このレッスンでは、ブートストラップグリッドの作業を続けていきますが、特に強調する2つの主な機能があります。
最初に、簡単に言及した4つの異なるサイズに対処したいと思います。
私たちはElgieコラムを使って作業してきましたが、それが意味するものについては話していませんでした。
彼らはまた、他のグリッドの内部にグリッドを入れ子にして、それらの12個の単位をさらに細かく分割する方法を示したいと思っています。
しかし、私はブラウザに戻り、最後のレッスンで構築したデモを見て始めるつもりの4つのサイズについて話しています。
だから、私たちは2列に1列に12列、3列には3列の列があり、ウィンドウのサイズを変更すると何が起こるのかを見ています。
今では全部で12単位を占め、互いの上に積み重なります。サイズを変更し続けると、実際には何の変更も気付かないでしょう。
彼らはすべて12台を持ち続け、互いの上に積み重ねています。
しかし実際には4つの異なるサイズがあり、4つの異なるレイアウトを持つことができます。
今はこれがモバイルレイアウトです。これは余分な小さなアクセスです。
それから、私たちは小さすぎて、タブレットのようになり、ここにあるのは媒体です。
これは、ラップトップや小さいブラウザウィンドウにあるでしょうし、ここには大きなものがあります。
だから、私たちが大きなものになるときはここを除いて違いがあるようには見えません。
しかし、4つのサイズがあり、それらのサイズごとに比率と比率を指定できます。
したがって、グリッドオプションの下のブートストラップドックには、グリッドシステムがあります。テーブルがあり、4つの異なるサイズが表示されています。
だから、小さなデバイス、すなわち、タブレットメディアデバイスのデスクトップである小型デバイスよりも電話のような特別なデバイスがあります。それは、幅が1200ピクセルを超える大型デバイスやデスクトップです。
S. M. 小さいです。 D. 私たちが使ってきたものはLGです。
だから私は私のレイアウトが大きなブレークポイントで同じままにしたいとしましょう。
ここでメディアに切り替えると、それぞれが1つのユニットを占める12個の列が必要になります。
代わりにそれぞれ2つのユニットを使いたいと思います。
だから、私たちは6人になるだろう。
そして、さらに6つ下に。
ですから、それに集中して物事を簡素化しましょう。
私は実際に今のところ2列目を取り除くでしょう。
だから私たちが持っているものはすべてここにある。
だから私たちがこの中断点をそこに打つと、​​私はこれが起こることを望んでいません。
代わりに、私はそれをするために横に6つのコラムをしたい。
私は別のクラスを追加するだけです。
だから私はそれをそれぞれに行い、それは列の媒体になるだろう。
だから、このグリッドが設定されているときには、それぞれのサイズを2単位にして保存して、保存します。
さあ、行きましょう。
フルサイズにします。
私たちは大きなサイズなので何も変わりません。
しかし、今私はここにメディアに切り替える。
彼らはそれぞれ2つのユニットを今持っていることに注意してください。
そして私がそれを縮め続けたら、小さなブレークポイントを打ちました、そして、それはそれぞれのコラムが全部で12個のユニット全体に行き渡って、それが互いの上に積み重なる位置に切り替わります。
だから戻って、崇高なものに戻り、古いグリッドを復活させてみましょう。
実際には12種類のコンポーネントが共通しているのは一般的ではないので、これを取り除きます。
通常、3つまたは4つの作業をしている場合がありますが、6つの列がありますが、12つの列はかなりまれです。
だからここに戻りましょう。ここでは、オラフル・アーノルドのツアースケジュールから、そのグリッドを再現しようとしています。
だから、それは4回に渡って始まります。
その後、縮小します。
ミディアムブレークポイントがあり、私たちはまだ4であり、次に小さなブレークポイントに到達し、2つに移動します。
そして、モバイルxまたは小さいものが1つです。
だからこそ、私たちは、構造だけのコンテンツではなく、再作成しようとします。
そこでここに戻ってきます。
そして、私たちは4人から始めたいと思っています。
これは、それぞれが3つのユニットを取り上げ、ここでテキストを変更できることを意味します。
そして、それを言うか、または日付をつけましょう。
だから私たちが新鮮だったならば、私たちは4つの列を通過するべきです。
唯一の違いは実際のコンテンツです。
だから、各列の代わりに、H3段落のボタンを追加し、何か他の内容を追加するだけです.Hを少し必要とします。
R. それは同じように見え、私たちはまだ同じ間隔を得るでしょう。
大丈夫。
だから次のブレークポイントは、私たちが中に入るときです。
それは4にとどまります。
だから、私たちがする必要があると思うことは中程度のブレークポイントを指定することなので、これをヒットするとそれぞれは3つの単位を取ります。
私たちは昇華に戻ってそれを追加し、再び3つのメディアと呼ぶことができ、3つのユニットからスタートし、それぞれ3つのユニットに入り、3つのユニットに留まり、次に小さくなり、今度は12ユニットになります。
そして、私たちがこれに従うことを望んでいるのは、小さいサイズになったときに、それぞれ6単位を使うから、ここに入り、それを小さな列6に加えることができるということです。
したがって、これらの大きなサイズはそれぞれ、中型サイズで12のうち3単位が25％を占めます。
同じこと。
彼らは25％を占め、次に小さなサイズではそれぞれ50％を占めるタブレット用です。
ですから、それぞれ3分後に3単位を更新してから、少しずつヒットしましょう。
そして今、彼らはそれぞれ6つのユニットを持っているし、我々はさらに小さなものを持っていた。
それから、彼らは自動的に全部で12個のユニットを取ります。
あなたが小さなものに当たったとき、彼らが1つのユニットを横切って行くのを見ることができます。
大丈夫。
だから、私たちが崇高なるものに戻るならば、私たちができる小さな変化があります。
この3つのユニットを大型と中型の2つに指定していることがわかります。
私たちは実際に大きな3列を取り除き、そこにメディアを入れて、ブートストラップは、メディアを3に設定しているので、明示的に大きく設定していないので、メディアに対して設定したものだけを適用し、適用しますそれは大きい。
それは同じように動作します。
何も変わっていません。
私はすでに、中位のブレークポイントはまだそこにあり、我々の小さな作品と同じ見た目をリフレッシュしています。
だから私たちはそれを二度指定する必要はありません。
だから私はNに来てください。 Z. 私たちはそれを取り除き、全く同じように動作します。
実際に見てみると、Webサイトに行きます。
私は、これらのそれぞれを調べると、そこに行くことがわかるでしょう。
列の小さな6列の媒体3。
今私たちが持っていたのは、これら4つの異なるサイズをカバーしたものです。
うまくいけば、グリッドシステムがいかに多目的かつ有用であるかを見ることができます。
戻ってみましょう。
そして今、私はグリッドの入れ子に取り組んでいきます。
ここでは、この最初の列の代わりに、半分に分割し、左側に何かを、右側に何かを入れたいとしましょう。
私は実際に行くことができ、そこの別の列に追加します。
したがって、クラスは行と等しくなります。
そして、その行の中で、私は列に等しい等級のクラスにdivを追加することができます。今は大きすぎる列6と大きな列6を追加して、ここで半分のテキストと他の半分を書きます。
前半と後半に変更しましょう。保存して古典的なピンクにしましょう。
だから、私たちが今やったことは、3つがまだ横断しているか、あるいは4つ横切っていることです。
1つ2つ3つ4つ、最初の1つは別の行を追加してさらに12単位に分割し、最初の6つを使用して、次の6つを使用して保存またはリフレッシュします。
そこに行くとそれはさらに明らかにします。
もう一つのクラスを私に教えてください。
それをオレンジ色と呼んでみましょう。
まだ存在しません。
これはオレンジ色で表示され、背景色はオレンジ色で表示され、赤色のピクセルを赤色で順番に追加し、実際にはダッシュをOKにします。
リフレッシュすると、今、これらの4つのことが起こっていることがわかります。
それぞれが3つのユニットを取りますが、最初のユニットを6つのユニットと6つのユニットに分割します。その行を追加すると、行を追加する必要があります。
列の代わりに列がある場所でこれをやり始めることはできません。
行がなければなりません。
もう一度やりましょう。
この最後のものを6個の小さな小片に入れてみましょう。
だから、そのdivクラスの内部に行を追加する必要があります。
別のdivが必要です。これらのうち6つの列があります。ここでは、2つの列のそれぞれが12単位のうち2つを占めています。
私たちは6つを求めてから、それぞれに進み、そのオレンジ色のクラスを追加してみましょう。
OK。
だから我々は4つの大きな柱が最初の柱を横切って半分に分かれています。
私たちが6つの部分に分割した最後のものは何も見えないので、そこにテキストを置かなかった。
だからそれをやりましょう。
それとも、実際にはオレンジ色のクラスまたは高さを与えるだけです。
それらをそれぞれ50ピクセルにしましょう。
そして私がリフレッシュすると、クラスオレンジ色のオレンジ色のものはすべて、高さが50ピクセルになります。
そこで、2つの均等に分割された列と、これらの4つの均等に分割されたトップレベルの列の中の6つの均等に分割された列を持っています。
それが、グリッドシステムの重要な部分のすべてです。
一言で言えば、我々はすべての行に12ユニットを持っています。
あなたは好きなようにそれらを分割します。
4つのサイズがありますが、中小規模のものがあります.4つの異なるサイズの4つのブレークポイントのいずれかでこれらの12の単位を再割り当てすることができます。
それで、あなたはこれらの素敵なレスポンシブなレイアウトに仕上がり、一般的に見ているパターンはモバイルサイトにあります。
私たちがこれを縮小すれば、ここにあるように、余分な小さなサイズでは、ほとんどのサイトはコンテンツを互いの上に重ねて表示します。
これは、同じ行に複数のコンテンツがないモバイル上の一般的なレイアウトです。
OK。
昇華に戻ってみましょう。
3つの主な目的について私が話したことを確認してください。
そこで、グリッドシステムのポイントが私たちの物事を築くのに役立つという目的について話しました。
それは素晴らしいです。
4つの異なるサイズを理解する。
それらは大きな中小小規模で小さいネストされたグリッドです。
そして、ここでは列の代わりに行を追加して、次にその行に次のビデオのさらに別の列を埋め込むことができます。
グリッドシステムを使って簡単な画像グリッドを構築しよう