このレッスンでは、ショーページのスタイリングに焦点を当てています。
だから今私たちのショーページはこのように見えます。
私たちは何もしないボタンを使ってここに小さなナーバーを持っています。
私たちはキャンプ場の名前を持つH-1を持っています。
画像と説明があり、新しいコメントを追加するボタンがあると、すべてのコメントが表示されます。
各1つの小さな段落。
ですから、私たちの目標はこれをもう少し見えるようにすることです。
だから私はここにサイドバーを持っている。
私たちはまだ地図を持っていませんが、私たちは地図のためのスペースを作って、主な内容を説明します。
いくつかのテキストはまだ評価を行うつもりはないが、次に同様のようなレビューのリストが表示されます。
彼ら自身の小さなコンテナは、私は少しレバーをするための小さなボタンがあります。
一般的には少しスタイリッシュです。
私たちはこれを追加することができます。
それが私たちが目指しているものです。
開始するには、ブートストラップグリッドに焦点を当てるだけです。
ブートストラップグリッドは12単位であることに注意してください。
この小さなサイドバーの12のうち3つを指定し、次にメインコンテンツに9を追加します。
実際に何かを変えることを始める前に、今私がv5で作業していることを指摘したいと思います。
ですから、もしあなたがこれらすべての変化に沿って歩きたいのであれば、V 5になります。
私がやっている理由は、カスタムスタイルシートを作る必要があるということです。
私たちは、公開ディレクトリとその他の大きな変更であるいくつかのものを提供しなければなりません。
だから私は別のバージョンを作りたかったのです。
しかし、これを行う前に、最初に行うことは、このブートストラップコンテナのすべてにコンテナを追加することです。
だから、E. J. コンテナのクラスをdivに追加する予定です。その中にすべてを入れていきます。
サイドバーを追加することから始めましょう。私たちはここにあるようにいくつかのダミーデータを埋めます。
だからDIVXとこれは、クラスはプロと等しい必要があります。その行では、クラスがそのような列の中の3つのクラスである別のdivを持つことになります。
そして、ここでは、段落を追加して、Joachimと言うこのテキストを取得します。
だから、クラスが先導されている段落です。そして、私たちはあなたをキャンプに入れようとしています。今度は、これを最終的に変更します。
しかし、ええキャンプし、それらの小さなリストアイテムを追加するには、クラスとdivを行うリストダッシュグループを作成し、ここでは各アリーで同盟者の束を追加するつもりですリストグループ項目のクラスを持っています。
そして、内部ではダミーのデータを追加するだけで、情報1と呼ぶことにして、この情報を情報3に複製します。
それでは、どうなっているのか見てみましょう。
ページをリフレッシュするにはここにサイドバーがあり、これらのアイテムの1つを選択して開始します。
そして、私たちがしなければならないことは、積極的に権利を追加することだけです。
私たちが新鮮ならば、そのうちの1人が活発であることがわかります。
これは実際には何かを持つプレースホルダなので、空白がたくさんありませんが、実際のデータとマップを最終的に追加します。
そして、それを指摘するために、マップはこの媒体の3列の中に、ここでは最終的にはまだまだではありません。
OK、それはサイドバーです。
ここでメインコンテンツに追加します。
だから別の列が必要で、これはクラス列の媒体9です。
その代わりに、イメージを持つ必要があるH-1を持つ必要がありますが、その前に、実際にはサムネイルのいずれかに気づくでしょう。
これらはそれぞれサムネイルです。
私たちはタイトルとコメントとそのすべてのイメージ全体で同じことをやろうとしています。
そこで、divを追加し、そのdivにはクラスがサムネイルと同じになるようにします。
そして、その中にイメージを追加するつもりです。私はすでに書いたイメージをそのまま残し、そこに置いてください。
それが私たちのキャンプ場のイメージになるでしょう。
そして、ブートストラップされたものにクラスを追加して、画像Daschが応答するものを与えたいと思っています。
そこに行く。
それを保存します。
私たちが現在持っているものを見て、リフレッシュすると、少なくとも適切な場所にイメージとコンテンツがあります。
私たちは、これが欲しいと思っているにもかかわらず、これがうまくいかない問題があります。
私はそれを全面的に行きたいと思っていますし、最後にカスタムC Sを使ってそれを処理しなければなりません。
そしてここで私たちは戻ってここにキャンプ場の名前と、データベースに実際にはない夜間の料金がある場所を追加します。
だから私たちはただハードコーディングします。
それでは、今やってみましょう。
そして、それは別のdivです、そして、これは、キャプションダッシュいっぱいのクラスを持っています。
そしてそこに、Hを追加します。
そして、私たちはこれを右に引き上げるでしょう、そして、私たちはクラスが正しいダッシュを引きます、そして、私たちがここに入れたものが価格になります。
そして、私はもう一度$ 9で始まるでしょう、これは最終的にデータベースから来るでしょう。
私たちが新鮮なら今私たちは右側に1泊9ドルを得て、私たちはここで左手にコピーするキャンプ場の名前を得たいと思っています。
右下に置くと右に引っ張りますが、それは自動的に左に移動しますが、これは私が気にしていたものよりも大きく、私はそれをより小さなHに変換しますそこにアンカータグを追加し、アンカータグの中にキャンプグラウンド名を入れてください。
その背後にあるアイデアは、結局私は元に戻るということです。
これは実際のキャンプ場へのリンクか、または何かを予約することができるパークサービスページにリンクする必要があります。
今のところ、どこにもリンクしていません。
OK。
だから我々はそれを持っている。
私たちには価格があります。
ここで説明を追加してみましょう。
ですから、これは単なる段落タグになります。そこで私たちの説明には、ここにキャンプ場の説明が追加されます。
私たちが大量のサブスクリプションを持っていないので、今はちょっと印象的ではありません。Lorem
Ipsumを使ってデータベースを見て、これを盗むつもりです。それをシードファイルに戻してください。
その後、私たちの種子のファイルの代わりに、私はそれらの3つすべての記述を変更します。
ちょっとしたことではなく、同じことをしてください。
私たちはLorem Ipsumのロングビットを持っています。
そして、これを有効にするには、データベースを受信するためにサーバーを再起動する必要があります。
そして、戻ってキャンプ場のページに戻ってみましょう。
私たちは3つのキャンプ場を持っています。
しかし、彼らは今、より正当な説明をいくつかのテキストがあります。
大丈夫です。
それでは、今私たちが取り組むべきことを見てみましょう。
小さなことがいくつかあります。
私たちは、今のところレビュー数に星を残して、コメントに移ります。
Eさんのショーに戻りましょう。 J.
はい、私たちが今では種を取り除くことができるのは、私たちがそれを同じ列に置いて欲しいからです。
同じ量のスペースを取る。
サムネイルの後にちょうどここに行けば、これとキャプションはサムネイルです。
だから彼らはdivクラスを追加するつもりです。
それと同じです。
そして、その中でそれを開き、コメントを追加するためのループを行います。
しかし、私はあなたのボタンのレバーをボタンに追加することから始めるつもりです。私たちは単純なdivを行い、このdivにはテキストのダッシュのクラスがあります。
そしてそこにアンカータグを追加して、すでに新しいコメントを作成する必要があります。
ちょうどここに入れてください。
それは長いものですが、ボタンボタンの成功のクラスが緑色になるアンカータグであることを忘れないでください。
しかし、refは本当に長い部分です。
キャンプ場には、キャンプ場のIDスラッシュのコメントスラッシュをスラッシュして新しく保存して更新します。
OK。
だから、私たちは今、私たちに国境のすてきな灰色の背景を与える井戸を持っているのを見ることができます。
ここでコメントに追加します。
だから私たちは次のことをする必要がありますコメントをループし、我々はすでにそれを行っている。
しかし、それぞれの段落を作成するのではなく、実際に別の行を作成します。
だから私はそれをコピーするか、それをカットするときに見えるものをあなたに見せます。
そしてこの余分な段落を削除することができます。そして、テキストの直後に置くつもりです。
そしてこれを適切にやりましょう。
そこでループを作成し、各コメントをループして、divクラスの行ごとにdivクラスの行を追加します。
そして、それぞれの内部に、別のdivクラスを追加して、列のメディア12と同じものを保存します。
私たちがここにあるものを見れば、私たちは著者と呼ばれるユーザ名の電子メールスラッシュのユーザ名になります。
そして、右側に10日前の今度はハードコードがあり、次に実際のコメントが来ます。
その作業をするために、テキストを作成して右のテキストを右に引く必要があります。その後、実際のコメント自体のために段落を追加する必要があります。
だからここで試してみましょう。
私たちはコラム培地12を持っています。
その中で、コメント作成者を追加することから始めます。
ですから、そこに追加してみましょう。
そして、それから我々はスパンで追加するつもりです、そして、これは右側にあります。
だから古典的なプル権を追加します。
そして、ここでは10日前に追加するだけです。
まあまあハードコードです。
そして最後に、コメント・テキストを表示します。
だから私はここでこのコメントテキストを取得するつもりです。私たちは著者と10日間行くようにここに列の中でそれを移動したいのを除いて、私たちがすでに持っている段落の中に入れます。
私たちは、彼らが一緒に同じコラムにいて今は保存して元に戻って欲しいです。
私たちが得るものを見てください。
大丈夫。
だから1つのコメントがあります。
それでおしまい。
しかし、新しいコメントを追加するためのボタンがあることがわかります。
それが動作することを確認します。
コメントはここに表示されます。
我々は格付けを逃している。
だから少し奇妙に見えますが、それは今のところうまいです。
私たちがやりたいことは、1つか2つ以上のコメントを追加することです。
だからここに戻って、ちょっとだけlorem ipsumを使ってみましょう。
ですから、私はちょうどこれの一部をコピーしてコメントとして追加します。
ちょうどそれのいくつかを使用して、著者はここにキャンプするでしょう。
おじいちゃん。
提出してください。
OK。
だから私たちは今ここでコメントしています。
それは働いている。
私は追加したいと思うスペースがあります。
私たちがここにあるものを見れば、本当にかすかな線があるのですが、あなたが画面に出てくるかどうかわかりません。
いくつかのスペースを追加する本当にかすかな線があり、その作業を行うために必要なのはh rを追加することだけです。
だからこのテキスト右のボタンの後ろに横方向のルールを追加し、リフレッシュするとそこにスペースがあります。
あなたにはボタンがあり、私たちはすべてのコメントを短期間で表示しています。
なぜユーザー名を作成しないのですか？
だから私たちはここに戻って、すでにこれを持っていて、彼らはそれを取り除きましたが、私たちは元に戻って、著者に強いタグを付け加え、少し見やすくなります。
そこに行く。
まだ偉大ではありませんが、今は十分です。
それは実際には私たちが今必要としているすべてのブートストラップです。
しかし、まだ完了していません。
私たちが戻って、完成したishバージョンを見ると、画像がサムネイル全体を占めていて、それをしていないことがわかります。
私はまったく同じイメージを使用するように言いましたが、それは実際のイメージそのものではありません。
問題は私たちのスタイリングに帰着します。
私たちがやりたいことは、入り込み、このイメージにコンテナで100％を占めるように伝えることです。
だから私はあなたにそれを検査することができることを示してくれるでしょう、そして、これはここでインスペクタのための大きな用途です。
ここでそれを選択し、ここで100％のスタイルを追加できます。
そしてそこに行く。
それが私たちがしたいことです。
まだ少しの違いがありますが、そこにはちょっとしたスペースがあります。
そして、私たちがやりたいことは、実際のサムネイルに入り、ここにあるサムネイルを選択することです。このパディングはゼロにします。
そして、今見てみると、それを見るか、見た目に近いかのように見えるように見えます。
ここでは間隔をいくつか追加します。
あなたはここでいくつかのスペースがあることを見ることができ、私たちはそれを今修正することができます。
また、それを調べて、実際に修正していないことを覚えているだけで、ブラウザでテストしてから、私たちは元のスタイルシートに戻って実際にこれらの変更を行います。
だから私たちがやりたいことは、ここのボックスであるキャプションの子猫にちょっとしたパディングを加えることです。
そして、私たちが望むパダムは、右上と左下にあり、それは9または10ピクセルになるでしょう。
だから、私たちは9 xをパディングします。
そしてそこに行く。
私たちはそこで素敵なスペースに終わります。
それは私たちがやりたいことではなく、そのスタイリングを取って、私たちが書くスタイルシートに実際に追加することです