このビデオはキャンプのスタイリングを続けます。
すべての単一ページにナビゲーションバーを追加し、そのナビゲーションバーは今のところ空になります。
しかし、最終的には、ログインやサインアウトのようなボタンがその機能をすべて登録します。
しかしそれまではプレースホルダーのテキストを置くだけで、新しいキャンプグラウンドフォームのスタイルを変更しようとしています。
だから、サーバーを起動して、私たちが持っているものを見てみましょう。
ここにリンク先ページがあります
キャンプ場のリストにはキャンプの変更がすべて表示されます。
それはかなり大丈夫に見えます。
私たちはここにナビゲーションバーを置いておきたい。
新しいキャンプ場を追加するのと同じこと。
フォームを中央に配置し、2つの入力を並べて配置するのではなく、2つの入力を重ねて配置します。
しかし、私たちはnav barから始め、ちょうどcampgroundテンプレートでそれをやってみましょう。
そこでここに戻り、キャンプグラウンドのテンプレートを開いて始めましょう。
barを追加するのが本当に簡単であるにもかかわらず、それはかなりのマークアップであり、私たちがドロップダウンのすべてのボタンを持っていないときには、私たちはこの長い間、少なくとも始まって​​はいけません。
私はブートストラップされたボックスを開くつもりです、そして、私はコンポーネントに移動して、次にnavバーに行きます。そして、ブートストラップが本当にあなたがまだ見ることができるnav
私たちは素敵でシンプルなところから始めるつもりですが、それでもまだ覚えておくべきクラスがたくさんあります。
だから、このクラスの何かのようなブートストラップDarcsを引き上げることには間違いなく、あなたは物事を見て恥ずかしいと感じるべきではありません。
しかし、特にブートストラップでは、これらのクラスや要素が混乱することがあり、ドキュメントを見なくてもそれを行う方法はありません。
OKをクリックして、私のキャンプ場のテンプレートの上部に部屋を作って、Navを定義することから始めます。
これはヘッダーに似ています。
私たちはdivだけでNavをすることができます。 もう少し意味があります。
それは意味論的です。
だから、私はクラスのナビゲーションバーでナビゲーションを行い、次にnav barのダッシュのデフォルトを行います。
さまざまな種類と色がありますが、逆のナビゲーションバーを使用することもできますが、デフォルトのものを使用します。
bar dashと等しいクラスのアンカータグを追加しようとしています。
そして、内部はコンテナ流体と等しいクラスのdivを追加することになります。それはちょうど良い埋め込みとそこにいくつかのスペースを作って、次に私たちはnav
bar
headerと等しいクラスの別のdivを追加してから、そのクラスは私たちのヘッダーと同じです。そのような終わりにnav
そして、リンクをスラッシュにするように設定してから、それを閉じてそのようなyelperキャンプを追加します。
そして、この単純なマークアップで何が得られるか見てみましょう。
したがって、NAVにはナビゲーションバーヘッダー付きのコンテナがあり、ナビゲーションバーヘッダーにはネフバーブランドのアイテムが1つしかありません。
リフレッシュしましょう。
OKをクリックするとナビゲーションバーが表示され、ここにブランドが表示されます。このリンクをクリックすると、そのリンクは気まぐれなリンク先ページに戻ります。
ここでいくつかのプレースホルダを追加してログインしてサインアップしてみましょう。
彼らは働かないか、何もしませんが、私たちは良く見えるので、今度は私たちのキャンプに行きましょう。
E. J. テンプレートとして、その後、ナビゲーションバーとコンテナの内側ではなく、Nの内部にはありません。 F. バーヘッター。
別のdivに追加するつもりです。このdivには、それが何をするかを見る崩壊のクラスがあります。
そしてちょうどその時、Neph bar Daschはそんなに崩壊します。
そして、内部にはULを追加するつもりです。このULにはnav barダッシュnavのクラスがあります。そして、nav
barダッシュの右側に移動して、右側に移動します。今のところ3つのリンクがあり、それぞれが味方になります。
そしてその中には、アリーはアンカータグを持っていて、最初のものにログインするようにします。
そして今のところ、H refは私たちのルートパスに設定されます。なぜなら、まだログインしていないからです。登録についても同じことをします。
サインアップをして、そのようにログアウトしましょう。
OK。
だから、これがどのように見えるか見てみましょう。
私たちがリフレッシュして見た目が良くない場合の崩壊の話をする前に、私たちはここでUL上の1つのマイナークラスを見逃していました。
私たちは今すぐ追加していないように見えるので、我々はちょうどナビゲーションバーを追加しました。
今私はそれを正しくしたことはありませんでしたが、私たちはnav自体を追加しなかったので、今度は保存し直して、NAVの右側にある3つのリンクと、ここでサイズを変更します。
右のところでは、そこが右に倒れていることに注目してください。
そして最終的には小さなハンバーガーのアイコンがあります。
クリックした場所とメニューのように見えます。
今のところ、私たちはそのサイズに達すると、それらを隠すだけです。
OK。
つまり、この1ページにしかないことを除いて、Navバーのために必要なのはこれだけです。
それでは、すべてのページに追加しましょう。
だからそれをコピーするか、それをカットしてヘッダに移動します。
だから頭部または部分的に移動してください。
私はそれを開くだけです。
コマンドラインを使用するC9では、ParshallのスラッシュヘッダIjaw Yesをスラッシュして表示します。
そして、体の一番上のところに追加します。
これを正しくインデントしましょう。
私たちは行くよ。
ヘッダーバーにはヘッダーバーがあり、ヘッダー部分を含むファイルにはナビゲーションバーが表示されますが、サーバーを再起動します。
新しいキャンプ場を追加すれば、ここにもそのバーができます。
また、ホームページに行くと十分なバーがあります。
すばらしいです。
ですから、このフォームを少し上手く見せるようにしましょう。
私が以前に言及したように、私はこの形にしたい2つの大きなことがあります。
最初の1つはページの中央に配置し、もう1つは3つの入力または2つの入力とボタンを画面全体に水平に並べるのではなく、フォームを垂直に積み重ねることです。
あなたはそれらを取って別のものの上にそれらを積み重ねたい。
新しいドットである正しいファイルを開くことから始めましょう。
はい。
だから私たちはC9の意見をスラッシュして、Ejayと私たちがこれまでに持っていた私たちの形を知っています。
簡単に始めて、いくつかのブートストラップクラスをフォームや入力に追加しましょう。それはフォームダッシュコントロールです。
そして、両方の入力とボタンの両方でそれが必要です。
BootstrapクラスのPTEN ETNをそのように大きく追加しましょう。
そして、我々はまた、間違いの間にして、それがどのように見えるか見てみましょう。
だからJ.の後のノード
はい、リフレッシュします。
ここではブートストラップのコントロールとブートストラップのボタンを取得していますが、確かに巨大ですが、その必要はありません。
この問題を解決するには、私たちができることがいくつかあります。
最初は、すべてをコンテナの中に置くことです。
だから私たちはdivクラスのコンテナに入りました。そして、私はこれを底に移動します。
そこに行って、これを正しくインデントしましょう。
非常にマイナーな変更を保存します。
今はいくつかの間隔がありますが、それはまだ大きな形です。
ですから、次はグリッドシステムの使用です。
だから私たちは別のdivに追加し、このクラスはそのような行に等しいクラスを持ちます。
これを取って行にコピーしましょう。
だから、フォーム全体が一列になります。
そして、これもやっています。
OKセーブリフレッシュは大きな違いではありません。
CSSAを使って実際にブートストラップの上に独自のスタイルを書いて、これにマージンを与えて中心に置くことです。
ここでは、このすべてを左右に表示します。
そして私たちは、それが入っているこのコンテナの約30％を占有したかっただけです。
だから私たちはそれをやってから戻ってきます。私は規則の一つを破り、インラインスタイルをやめないように言ってくれました。
それは間違いなく良いアイデアです。
しかし、今は私たちが独自のスタイルシートを作成する新しいバージョンになるまで、私はそれを一直線にします。
だから私は新しいdivを作って、フォームを内部に入れます。
ちょうどそれのように。
そして、私はそのdivスタイルを与えるつもりです、そして、私は30％であると言って始めます。
そして、それをそのままにして、私たちがもっと小さな形を見ないようにしてください。
今我々はそれを中心にしたい。
そこでここに戻ります。
上下にマージンゼロを、左右にオットーを言う。
今、我々は中心にある形を持っています。
次に行うことは、ボタンがまだかなり長い全体の幅を占めるようにすることです。
しかし、私たちがやることは、それをブロック要素にするBootstrapの方法で構築されたDTNブロックを与えることです。
そして今、それは全体の行を占めます。
次に、これらのすべての要素の間にある程度の間隔をあけて説明しましょう。
フォームグループクラスで構築されたブートストラップを使用します。
ですから、divクラスECOがダッシュグループを形成する必要があり、入力ごとにECOが必要になります。
ですから、すべての入力はそのようなものの中に入ります。そして、私はこれを複製して、ここに別のものを持っていきます。これがその中に入ります。
そして、ボタンのためにもう1つ持っています。
だから我々は古典的なフォームグループを3回持っており、また閉じたdivタグが必要です。
私たちはそこに1つあります。ここにもう1つの閉じたdivタグが必要です。
OK。
フォームグループが一緒に物事を把握するように。
しかしそれはまた私たちに少しのスペースを与えます。
今ここにこのボタンがあります。
次のことは、テキストを中心に配置し、それを行うことです。テキストを中心に配置するだけです。
そして、私は再びそれを行こうとしています。
少なくとも長期的には良いアイデアではありませんが、これは何かをすばやく行うための大きな用途です。
だからスタイルと我々はテキストの中心を行うでしょう。
真ん中を中心に今すぐ保存してください。
次に行うべきことは、このボタンの色を変更することです。
白はとてもよく見えません。
プライマリボタンをプライマリにして青色にしてリフレッシュを保存しましょう。
はい、それはもっと良く見えます。
また、このリンクを中に戻ってリンクしてみましょう。
だから私たちはこれをコピーして、このマージンの内側に置くだけです。
自動divので、ここにこのdivはフォームの後にちょうどそのように保存してください。
そこに行く。
私たちは帰ってきました。最後に行うべきことは、パディングやマージンを少し追加して、このH-1がそれを行うのが正しいとは限りません。
私たちはちょうど戻って、私たちがすでに選んだこの部門を持っています。
マージンゼロではなく、開始するために20ピクセルのマージンを与えることができます。
どのように見えるか見てみましょう。
それはもう少しよく見えます。
もっと50のようなことをしよう。
それは少しすぎるかもしれません。
間違いなく自分の好み。
25歳に戻りましょう。
大丈夫。
それは今のところ十分です。
あなたが好きなだけこれで遊んでください。あなたが好きな人はこのフォームを入力して幅を広げることができますが、それがより狭いのですが、それは反応があり、途中にとどまり、ちょっと収縮することがわかります。
最後にこの商標を取り除きましょう。
あなたは間違いなくもうそれを必要としません。
フッタの一番下にあるので、フッタファイルに行き、私は不正行為をするでしょう。
ちょうどこれを今のところやってください。私たちはそのセーブを取り除きます。
今私たちのフォームが悪く見えることはありません私たちは私たちが1つを追加できる十分なバーを持っているキャンプサイトのリストを取得することができます戻ることができます。
また、まだ行っていないランディングページを表示することもできます。
それはおそらく最も仕事があり、それは他のページとはかなり違って見えるでしょう。それはもっとよく見え、より多くのカスタムスタイルを持っています。
だからこそ、私はそれを後で保存するのです。
そして、何もしないダミーのボタンでここに番号をつけています。
大丈夫