このレッスンをもう一度覚えておきますが、ブートストラップの中で最も重要で広く使われているコンポーネントの1つをNFRに表示して、実際にBoucekドットコムを入手することができます。
彼らはここに十分な棒成分を使っています。
また、Yelpキャンプアプリケーションとナビゲーションバーのサイズを変更する際にも使用します。
それがどれほど反応しているかを確認してから、TABを押すと直ちに通知し、私たちはこのサイズのハンバーガーを手に入れます。
そこで、このレッスンではすべてのことに取り組んでいきます。
しかし、我々はより簡単に始めるつもりです。
まず最初にする必要があるのは、コンポーネントに行き、nav
barに行くことです。かなり前に行く前に、かなりのコードを書いているので、新しいファイルを作成しました。
古いものは渋滞していた。
私はそれをナフと呼んでいますBar H T M L.
それらの中にはブートストラップへのリンクがあり、ここでタイトルを変更しません。
私はちょうどそれをブートストラップのNav Barと呼ぶでしょう。
ちょうどそれのように。
さて、ドキュメントに行き、デフォルトのナビゲーションバーを見てみましょう。
ここでは、ブランドリンクを持つことができる重要な機能のすべてを紹介しています。
私たちはメニューにドロップできる他のリンクを持つことができます。
私たちは、ナビゲーションバーのフォームとボタンを持つことができます。私たちは、左側にある右側のものにあるものを持つことができます。
これは本当にすべてを展示しています。
それはブートストラップナフバーのキッチンシンクです。その結果、マークアップは少し長くなります。
このビデオの終わりまでに、これらのすべての作品と一緒に作業します。
しかし、私はより簡単に始めたいと思います。まず番号を作る最も簡単な方法を紹介します。
だから、私たちはnav要素を作る必要があり、そのNAV要素にはnav barとnav
barが必要な2つのクラスが必要です。そして、Daschのデフォルトで保存を開始できます。
それではブラウザのファイルを見てみましょう。
私はそれが横断してスクリーンキャストが十分にあることを願っていることがわかります。バーが非常に暗いバーが上を横切っているので、実際にNFバーを初期化する方法です。
さあ、いくつかのコンテンツを埋めてみましょう。
まず最初に、このブランドをどのように追加できるかを見ていきます。
基本的にあなたの会社名。
ほとんどの場合。
それはナビゲーションバーのヘッダーを使用しており、NFRヘッダーの内側にはNavバーブランドを使用しています。
だからdivクラスがnav barのダッシュヘッダと同じであることを追加してみましょう。そこにアンカータグであるnav
barブランドを追加します。
通常、その会社名をクリックすると、ホームページに戻ります。
だからここでアンカータグをして、ソープスと同じ交通量から始めて、どこにでも連れて行くわけではありません。
クラスはnav bar dashブランドと同等で、会社名を作るだけです。
私は私の周りのコーヒーカップを持っているので、コーヒーと一緒に行こうかどうか見てみましょう。
しかし、実際にそれを真のスタートアップにするには、スペルを少し変更する必要があります。
OKアレックス。
私のために十分に良い。
Kとコーヒー
見てみましょう。
リフレッシュし、NAVバーブランドをリンクにしました。
私はそれをクリックします。
私は今どこにでもいませんが、最終的に私たちのアプリケーションはそれを持っているので、会社名をクリックすると次のホームページに戻ります。
連絡先のような他のリンクを追加できるかどうかを見てみましょう。
登録するにはサインアップしてください。
バーのすべての共通リンク。
ページリンクについては、ここで追加してみましょう。
だから私たちは元に戻って、次にこのdivの別のdivを作るためのnav
barヘッダーの外側で、少なくともNAVバーの左側にすべてのコンテンツを集めます。
ヘッダーがあり、コンテンツがあるとしたら、右側に何かが必要な場合は別のクラスを持つ別のdivがあります。
だからここのクラス。
実際には2つのnavとnav barダッシュnavが必要です。
彼らのnav bar dash navの命名について私に聞かないでください。
ブートストラップの大きな批判の1つは、少し醜いことであり、時にはあまり意味がないということです。
また、セマンティックUIと呼ばれる場合は、ブートストラップのセマンティックな無意味さに対応して作成されたCSSAフレームワークが実際にあります。
それは私が本当に楽しむものです。
そして私は教えを議論しました。
しかし、結局のところ、それほど広く使われていないだけでなく、偉大なチュートリアルはまだありません。
だから私たちのdiffにここに戻る。
クラスnav nav navとクラスnavの両方。
そして、私たちがこのアンカータグを持っているだけでリンクしたいならば、私たちがこのNFR上で必要とする各アイテムについて、同盟国を追加し、次にYの内部に追加する必要があります。
だから、これはどこにも行きません。
再度これはAboutページになります。
私が戻ってリフレッシュすると、もう一度save save goに連絡してみましょう。
今、2つのリンクがあります。ページの右側に何かを追加しましょう。
登録のために2つのリンクを追加してください。もう1つは、バーの右側にログインするためのリンクです。
ここではnotherコンテナが必要です。実際にdivを使用する代わりに、それを使用するのがより一般的です。同じ方法で動作しますが、divでうまく動作するにもかかわらず、井戸の代わりに味方をしたいULの代わりになるという感覚はほとんどありません。
それで、別のULを追加して、これをNavにします。 nav barダッシュnavとnav barダッシュ。
右。
そして、クラスを有効にしない場合は、それを正しく綴るようにする必要があります。
これが行うことは、そのnav barの右側の新しいコンテンツグループになります。
そして今、私たちはそれを埋める必要があります。
そこで、エッジワイドに2つのリンクを追加します。
最初のものはどこにも行きませんし、サインアップをしてからもう一度ログインするだけです。
見てみましょう。
ページを更新すると、右側にコンテンツが表示されます。
しかし、それはちょうど端に逆らって、我々が主なコンテンツにいくらかのスペースを追加するために以前コンテナを使用するのと同じように、十分なバーにコンテナを追加することを修正することです。
ナビゲーションバーの代わりに1つを追加することができます。
だから私は容器の代わりにネフバーにすべてを置く。
クラスはコンテナと同じです。
これを下に移動してください。
すべてが正しくインデントされていることを確認してください。
そこに行く。
それを試してみましょう。
ニース。
だから今はすべてがうまく中心に置かれています。
あなたがnavの外にコンテナを追加して、それらがnav bar全体を内側に置くと、私はあなたを見せます。
まあ何が起こるか見る。
今私が十分な新鮮なバーであれば、私は実際には切り離され、通りの向こう側に行くだけです。
だから、コンテナはそれを私たちが内部に置いたものにする。
そして、この場合、私たちはnav
barの中にコンテナを置いて、実際のnaffパーツを自分自身に束縛していないようにしますが、内部の内容を制限しています。
OK。
コンテナにはヘタがあり、左に物があり、右にいくらかの内容があるので、ここで見ることができます。
さて、ちょっとステップアップして、この基本的なナビゲーションバーか、ドキュメントにあるデフォルトのナビゲーションバーを使って、この全体をコピーして、ちょうどそれをすぐ下に置いてみましょう。
それをもっと明確にするためのコメントがたくさんあります。
デフォルトのナビゲーションバー。
それをリフレッシュしてみましょう。
だからここにこのナビゲーションバーがあり、私が強調したいことがいくつかあります。
1つは、メニューにドロップしたが、実際には機能しないということです。
また、ウィンドウのサイズを変更すると、ここでハンバーガーメニューが表示されます。
それらのリンクは遠ざかります。
フォームは消え、ここをクリックする必要があります。
しかし、それはどちらもうまくいかない。
ですから、それを動作させることから始めましょう。次に、これらのさまざまな部分について、それらを動作させるために何をするかについて話します。
私たちは、ブートストラップのjavascriptファイルを含める必要があります。
したがって、ブートストラップのドキュメントに戻ると、ダウンロードをクリックします。
私たちが必要とするjavascriptファイルもここにあります。
私はCdnバージョンを使用しますが、ダウンロードしたフォルダの中にも入っています。
それはちょうどブートストラップと呼ばれています。
はい。
または、最小化されたバージョンがMenciusを起動しました。
それを加えてみましょう。体の一番下に置いて保存します。
私はJavaScriptについて話していないことを知っています。
あなたはスクリプトが何であるかわからないし、ここでは何のソースも問題ではない。
ブートストラップにプラグインするだけです。
そして、今私たちのリフレッシュ。
私がここに示した小さな問題を解くことができますか？ブートストラップのjavascriptにはクエリが必要です。
これが何で、どのようにこのメッセージになったのか心配しないでください。
しかし、私はちょうどそれをあなたに示して、実際のメッセージを見るようにしたいと思います。
私たちはまだ話していないJの問い合わせを必要とする必要があります。
しかし、行くと取得するのは簡単です。
JavaScriptを書く必要はありません。
あなたはJavaScriptを知る必要はありません。
それを含めるだけです。
だから、私たちがする必要があることは、Jayのcomとその下にある最新のバージョンを選択してこのURLをコピーする必要があるコード上のJayクエリーCDNを検索することだけです。
これはQuerreyファイルです。ここから戻ってきます。
これらのスクリプトタグの1つを追加します。
基本的にこの正確なコードをコピーします。
実際には、その正確な行を複製し、このURLを変更してjeyクエリにするのが簡単になるようにします。
他のすべてが失敗した場合は、これを入力するだけです。
あなたが私であるならそれは悪くないが、私はJay queery
CDNを検索してこれを取得して保存し、これはクエリに依存しているのでjavascriptファイルをブートストラップする前に来る必要がある。
だからもう一度、Jayのクエリーがどのように機能するかについて、あまり心配しないでください。
それは今から数分後に起こっている。
しかし、ブートストラップを最大限に活用するには、特にナビゲーションバーとドロップダウンメニューが必要です。
私たちはこれを使用しているときはいつでもこの2つのラインを持つ必要がありますので、今戻ってリフレッシュします。
まず最初に、ドロップダウンメニューを持っているのがわかるように、今メニューがドロップされています。
私たちはこのビデオでそれについて話すつもりはありませんが、サイズを変更するとそのハンバーガーを手に入れます。
ハンバーガーは、クリックすると動作します。
その隠された素材をトグルします。
だからここには、この小さなブレークポイントがあります。このコンテンツはすべて隠れていて、私たちが見ているのはヘッダとそのボタンだけです。
そして、ボタンをクリックすると、それ以前に隠されたコンテンツがすべて再表示されます。
今私たちのために。
しかし、私たちはこれらの4つのリンクを非表示にして、サイズを変更するとこれらの4つのリンクが隠されていて本当に素早く表示されるように、あまり複雑ではないバージョンを実行します。
それを行うには、このデフォルトバージョンでどのように達成されるのかを見て始めてください。この巨大なnav
barのモンスター。
ここで重要な行を指摘します。
barの崩壊私たちがこのdivの中に置いたものは、Mobile sizeを押したときに折りたたまれ、私たちのためにボタンを作ることはありません。
Divクラスの崩壊nav
それは隠れて見えなくなってしまった時のトグルをやり直すことはありませんが、そのタブレットとモバイルサイズに当たったときに私たちがその中に入れた内容を隠すことになります。
だから私たちはこれをコピーして、私たちが隠したいコンテンツの周りにそれを囲むだけでいいので、ここでこれを隠したいと思っています。
これらの2つのJuelzので、我々は小さな画面サイズを打つときに隠したい4つのリンク。
ですから、終了タグを追加して保存してください。ここには行があり、これは重要です。
まだ私たちに影響を与えることはありませんが、リフレッシュしても意味がありません。
わかるでしょ。
ここでサイズを変更すると、崩壊部内のすべてのコンテンツが消えてしまうところがあります。
今は再現されません。
私たちはこのハンバーガーを手に入れません。
私たちは何かをクリックすることはありませんが、それは崩壊してしまいました。
これはdivクラスの折りたたみnav bar collapseをここに追加したためです。
次はハンバーガーを追加するだけです。それはかなりのコードです。
残念ながら、それは自分でやる必要がある場合よりずっと優れています。
しかし、ハンバーガーは実際にここのすべてです。
だから私はそれをコピーして、昼寝やヘッターの中にコーヒーを入れる前に貼り付けます。
そして、私たちは私がそれが何をするかに戻るだろう節約します。
ちょっとリフレッシュしましょう。
そして今私がサイズを変更すると、ハンバーガーを手に入れます。
そこに行く。
さて、それがどのように機能するかについて少し説明しましょう。
そこでボタンがあり、そのボタンの中に3つのスパンがあり、それぞれがこれらのバーの1つを作る責任があります。
だから、私たちが見ているイメージではなく、実際にこの小さなスパンを作っている各チームがその狭いバーにハンバーガーを作るようになっています。
そして、私たちがそれをクリックしたときにコンテンツを表示し隠す限り、このデータターゲット属性と、これが私たちのケースB-Sの例で設定されているものを持っているということです。
今私たちの崩壊のために私たちのクラブのためのブートストラップの一例ネットとそうそれをはいに変更しましょう。
Nav。 そのようなデモ。
次に、実際に折りたたみたいコンテンツのIDを表示して非表示にする必要があります。
だから私はvs navデモと一致するように変更します。
重要な違いがあることに注目してください。
私たちはArctic Thorに追加していません。だから、Cで何かを選択するとCSIのようになります.Cを使ってOcta
Thorpeを使ってIDをターゲットにする必要があるので、IDだけをテキストの名前にします。
ここでデモを行うと、それをThorpeに追加してリフレッシュを保存します。
今私はサイズを変更すると、私たちはハンバーガーを取得し、彼らはそれをクリックし、それは表示と非表示を切り替えるために動作します。
すばらしいです。
最後にあなたに示すのは、この崩壊の外に何かを動かす場合です。
だからここでこれらのリンクを取ってみましょう。
アカウントやaboutと連絡先を入力して、崩壊部の外に移動しただけで、実際に崩壊していないことがわかり、崩壊ではなく他の2つをクリックすると表示されますトグルされます。
今私はこれはいいように見えるわけではありませんが、それはその崩壊部の重要性を示しています。
だから何が起こったのか崩壊の辺り、または私たちの場合には、それへの異なるリンクのために何を持っているのかは、左側または右側の右側にあります。
私たちがその小さなモバイルサイズに達すると、それらはすべて崩壊します。
そして、それらを再び表示させるには、ここでこのボタンをクリックしてください。そのボタンにはデータターゲット属性があり、それに対応するIDは隠れて表示されます。
そして、それはここでこの考え方になります。
OKなので、マラソンのようなものです。
ブートストラップのナビゲーションバーを作るための多くのもの。
しかし、ここでも私たちがそこに着いたのは、これを私たちのファイルにまっすぐにコピーし、それを解剖することでした。
それで、サンプルコードを読んで、私たちが必要とする部分を見つけ出し、そこでそこから移動するだけで十分です。