このレッスンでは、あなたのキャンプで作業を続けようとしています。
すでに初期設定を行っています。
ヘッダーとフッターのParshallにブートストラップを追加し、新しいキャンプ場を作成する機能を追加しました。
今度は、ブートストラップを使ってキャンプ場のページをインスタイルにします。
だから始めましょう。
私が最初にやることは、サーバーが稼動していることを確認することです。
そして今私たちが持っているものを見てみましょう。
間違いなくちょっとアンダー。
だから私は2つの主な目標を持っています。
最初の1つは、ここでタイトルのヘッダーをより良くしたいので、これはよりよく見えるはずです。
私たちは、ブートストラップにジャンボトロンと呼ばれるものを使用し、次にキャンプ場もキャンプ場のリストをこのように垂直に表示すべきではありません。
代わりに、より小さなイメージのグリッドが横切っていて、そのグリッドが反応しやすいようにする必要があります。
このタイトルのテキストを少し上手く見せている最初のものから始めましょう。
だから私はキャンプ場を開くつもりです、はい、ここで働くつもりです。
だから私はちょっとサイズを変えるつもりです。なぜなら、私たちはかなりのHDメールを書くつもりであり、端末では何もしません。
ヘッダーを処理するには、これまで見たことがないヘッダータグを使用します。
機能的には、divのようなものとまったく同じように動作します。
唯一の違いは、これに意味的な意味が少しあることです。
任意のdivではなくヘッダーを使用していますが、それは単なるコンテナではありません。
そして、私たちはそれにジャンボトロンのクラスを与え、それからその中に実際にこのH-1をコピーして追加するつもりです。それをそのままにしてFrigoを保存し、ページを更新します。
私たちは現在、ジャンボトロンと呼ばれるものを持っています。
それはまだ素晴らしいことではありません。
次の作業は、ブートストラップコンテナの中にすべてを作ることです。
だから私たちがここで見ることのすべては、私はインデントするつもりです、そして、私は、クラスと同じようにコンテナを持つdivを追加するつもりです。
そして、私たちはそれの中にすべてをこだわるでしょう、そして、これは私たちの側にいくつかのspecacingを追加します。
リフレッシュ。
あなたはもはやここでは左側のものに対して右のものを持っていないことが分かります。
私たちはいくつかのスペースを持っており、JumboTronは少し近くを見ていて、ついにナフバーが現れます。
だからこれは少し良く見えるでしょう。
今のところ、ジャンボトロンがあります。
さて、テキスト自体を変更しましょう。
キャンプ場へようこそ！キャンプ場へようこそ！
あなたが望むコンテンツを自由に置いてください。私は段落の段落にも追加します。ほんの少しのタグラインを追加します。私は、私たちの手を見て、世界中のキャンプ場を選ぶと言うでしょう。
そのようなものは本当に問題ではありません。
リフレッシュを保存します。
今は小さなタグラインがあり、最後にしたいのはこのリンクの世話です。
新しいキャンプ場のリンクを追加します。
だから私はそれをコピーして、それをジャンボトロンの中に入れます。
しかし、私はボタンにするつもりです。
ブートストラップボタンの1つで、これを行うか、最初に段落を追加して、その中にアンカータグを入れます。
そして私は間隔を置いてそれをやっています。
あなたはこれを自分の行にしたいと思っています。そして、私はボタンクラスにPTEN
ETNプライマリの複数のクラスを色のために与え、ダッシュの間にそれを大きく保存して保存します。
今我々は新しいキャンプ場ボタンを持っています。
クリックすると、完全にスタイリングされたフォームが表示されます。
一つの小さなことは、ここでこのウィンドウのサイズを変更した場合です。
私たちのテキストがジャンボトロンの端にぴったりと合っていることに注目してください。
ここにいくつかのスペースがあり、それらのスペースを維持したいのは、Jumbotronの中に別のコンテナを追加してdivクラスがコンテナに等しくなるようにしてから、Jumbotronの内側で閉じたdivの最後までインデントしてからすべて。
そして今、リフレッシュすれば
彼女は同じように見えましたが、それを縮小するとそこにいくらかスペースがあります。
OKでヘッダー部分です。
今、私たちはそのイメージのグリッドに取り組んでいきたいと思います。私はあなたの前に立ちます。
それは間違いなくもう少し作業です。
そのグリッドを開始してみましょう。行を作成してdivクラスが行と同じになるようにすることから始めます。ここで少しのメッセージから始めます。
だから私たちはdivクラスを追加するつもりです、そして、私はこれをちょうど幅全体を占めるようにしようとしています。私たちはここでメッセージを持っています.H-3はあなたが知っているキャンプ場です多くのように見えません。
ここではもう一度頭を下げて、divクラスの行に追加することから始めましょう。これは、私たちの小学校ですべてを必要としています。
divクラスは行と同じです。
そして今、私たちが実際にやりたいことは、それぞれのキャンプ場の列の中のグリッドの代わりに、列クラスを持つdivとブートストラップグリッドを使った列を作るためです。
ですから、今度はそれをやってみましょう。ここでは、各ループのすべてのコードを、そのようにインデントされるようにします。
そしてここに閉じたdivタグが必要です。
これは古典的な行のためのもので、これはコンテナ用です。
OK。
このようなコンテンツをdivでそのまま残すのではなく、画像のためにHを使用していますが、このdivを変更して列の中の3つのクラス6それは応答するようにするだけで、画面サイズが大きくなると大きな画像が得られます。
そしてそれを縮小すると、行ごとに2つの画像になります。さらに、1行につき1つの画像にまでさらに縮小されます。
その中に実際に別のdivに追加する予定です。このdivはサムネイルのクラスを持つ予定ですが、これはブートストラップクラスです。小さなカードを作ってサムネイルの中に小さなグリッドアイテムを作成しますそのように始まるイメージ。
私たちはRLのキャンプ場と同じイメージサービスを提供しています。
そして、私たちは今、これを取り除き、ただ保存し、私たちが新鮮ならば何を得るのかを見てみましょう。
大丈夫。
だから我々は今、画像のグリッドを持っている。
3つだけですが、私たちはこのグリッドを得ています。
そして私はそれを反応的にすることによって、あなたが何を意味するかを見せます。
したがって、これらを縮小すると、画面上でどのように2つの四角形または2つのアイテムに変化するかを確認します。
12ユニットがあることを覚えておいてください。
だから最初に持っていたものを4つの塊に分けて、それぞれが3つのユニットを取り出してから、ここでグリッドが小さくなると、それぞれ6つのユニットを取り、さらに小さくなると自動的に1つになります。
余分な小さなデフォルトは12単位を使用するため、これを書く必要はありませんでした。
だから我々はそれを指定する必要はなかった。
さて、このキャンプグラウンドの名前でタイトルを取得してみましょう。notherブートストラップクラスを実行する年齢ではなく、divクラスはそのようなキャプションと同じです。
そしてそこに、キャンプグラウンド名のためにHを入れます。
それでは、保存してみましょう。
そこに行く。
私たちはこれらの素敵な小さなカードを手に入れます。
これは私たちのために作ったサムネイルクラスです。
私たちはイメージを持っています。
そして、たくさんのアイテムに画像が残っていれば、それがどのように見えるかを見てみましょう。
だからこそこれをする必要はありませんが、私はここに貼り付けます。
ちょうど私達にいくつかのデータを与えてください。
重複したデータになりますが、問題ありません。
そして、正しいカンマを追加してカンマを追加してそこに来るようにする必要があります。
これで、サーバーを再起動する必要があります。
そして、私たちはアプリを使いこなすたびに。
はい。
そして今、リフレッシュすると、彼には小さな問題があることがわかります。
私たちのグリッドはちょっと混乱しています。
そして、起こっているのは、我々は異なる高さの画像を持っているということです。
だからこのサケ・クリーク・ワンはこれらとは違う。
この場合、幅は同じですが。
それはグリッドから投げ飛ばされていて、ちょっと変わったが、簡単に修正できる方法がある。
そして、私たちがキャンプ場の代わりにそれをどうやって行うのかをお見せしましょう。
はい。
クラス行の日に、私はスタイル属性を追加して、これを一時的に行うつもりです。
私たちはこれを外部のスタイルシートに移していきますが、私はそれを見やすくするために一列にします。
そこで、フレックス表示と折り返し表示にスタイルを設定しました。
そしてそれらは私たちのグリッドを助ける2つの特性です。
だから私は新鮮だった今、我々はより柔軟なグリッドで終わる。
グリッドが適応するので、我々はいくつかの異なる高さを持っていることは重要ではありませんので、これらの2つの間にはスペースがあります。
基本的には、最小限のスペースが必要ですが、すべてを完全に整列させるために必要なスペースを最小限に抑えることができます。
そしてもう一つの変更があります。これは、テキストセンターにテキストを追加することです。テキストセンターは、テキストをテキストの中央に配置するためのブートストラップです。
そして私はそれが少し良く見えると思う。
また、個人的な好みの問題と今私たちはしばらくの間、キャンプ場のページで終わった。
ブートストラップが実際に私たちを助けることができる方法を示してくれれば、これを最初からやっているのと比べてかなり容易にすることができます。
そして私たちが持っている素敵なレスポンシブルグリッドをお見せしましょう。
これはモバイル上にあります。
私たちはこの素晴らしいレイアウトを、最大4つのイメージまで表示しています。
OKだから私はこれがどのように見えるかにとても満足しています。
私は次のビデオで会いましょう