このレッスンでは、今までブートストラップについて学んだことを使用して、小さなプロジェクトを構築します。
ジャンボトロンとグリッドシステムを遮断するなど、私たちが話していた多くのコンポーネントが含まれています。
私はまたここにアイコンを含む1つか2つの新しいものを投げた。
私たちはまだそれらをどうやって行うのか見ていません。
また、このスクロールバーがスクロールすると、スクロールバーが上部に固定されているため、固定スクロールバーがスクロールしないようになります。
最後に、デフォルトのブートストラップされたコンポーネントの色の一部を変更しています。
これは実際には少し灰色の陰影です。
これは青の色合いで、ナビゲーションバーにはいくつかの色があります。
だから私はコードを書く前にすべてのことをする方法をあなたに教えてくれるでしょう。
ほとんどの場合、これらのイメージがWebサイトからSplashという偉大なリソースであるという事実を指摘してください。
だからスプラッシュはあなたが欲しいものを何でもすることができる美しい高いrezの写真の束を提供します。
あなたはここでライセンスを読むことができますが、それはあなたが欲しいものは大体です。
それは創造的なコモンズのライセンスだよ私は本当に気にしないと確信しているが、写真は本当に素晴らしいですし、私はこれらの8つの多くを使用しています。
実際に私たちのギャラリーに。
そして、それは私が実際に写真授業を取った以上の自分を取ったこの1つのイメージをここに残して、これは私が半分まともに見える撮影した最初のものです。
私はこれらのものに比べても熱く見えないと思う。
とにかく重要ではないこれらの全く同じイメージを使用したい場合。
これはどの画像でも動作します。
しかし、あなたがまったく同じものを望むなら、私はこのファイルギャラリーMの全てのリンクを含んでいます。
Dにはこのビデオとともにアップロードされており、ダークブルーとライトグレーを使用する2つの色も含まれています。
OK。
だからこそ、このようなことがあれば、今すぐプロジェクトを始めましょう。
だから私は空のファイルギャラリーを持っている。
H m l。
私はここでスケルトンを追加していきます。このイメージギャラリーと呼ぶだけで、まずブートストラップが必要です。
そして私はちょうど古いプロジェクトからCDの端をコピーするつもりですので、今すぐやります。
さあ。
私はブートストラップCDNにリンクしています。
私がここにいる間、私はCSSAとJay queery都市のブートストラップをつかんで、Nav
Barレッスンで行ったことをここに置いて、nav
barを追加するときには狩りをする必要はないこれらのファイルまたはスクリプトタグのために。
だから保存して、私たちができる最初のことはJumbotronを追加することです。
それは素敵で簡単です。
だから私たちはdivを持って、クラスはJumbotronに等しくなります。
そして、ジャンボトロンの内部は、画像ギャラリーだけを表示するH1から始まります。
私たちは行くと私たちは保存し、これが動作することを確認しましょう。
それで、このファイルが開きます。
Boucekが含まれています。
私たちはフォントの変更を見ています。
私たちはジャンボトロンからこのグレーを見ています。
ここでは、画面全体にわたってどこに行っているかではなく、ここにあるようにコンテナ内にあることを確認しましょう。
だから私たちはそのdivクラスがコンテナに等しいことを行います。
そこに行って、これを適切に行い、リフレッシュして元に戻しましょう。
さて、私たちはジャンボトロンを持っていますが、この段落を追加します。
今度は戻ってアイコンをやってみましょうが、これは保存するH-1の単なる段落タグです。
あなたがそこに望むテキストを自由に置いてください。私たちは現在、ジャンボトロンで終わっています。
だから戻ってみましょう。今度はnav barをやってみましょう。私は2つの理由から、最初から十分なバーをタイプするつもりはありません。
1つはかなりのコードだということです。
それは長い時間がかかります。
そしてこのビデオ。
しかし2つは、スクラッチからAckbarをほとんどタイプしないという事実です。
ほとんどの場合、NASCARのビデオで述べたように、私のワークフローは、私がブートストラップサイトまたはNAVバーで作成した以前のサイトに移動してコピーすることです。
そして私はちょうどそれをチェックし、私は欲しくない部分を取り除く。
私はいくつかの新しい作品を追加します。
それで私はここでやるつもりです。
私はすでに、ナビゲーションバーにある各HTMLアプリケーションには十分な部分があります。
それはちょうどここにあり、それをコピーするつもりだし、ちょっと微調整します。
それでコピーしてみましょう。私は戻ってきます。ちょうどそのようなファイルの一番上にこれを置きます。
私たちが得たものが新鮮であることを見てみましょう。私たちはnav barを持っています。
それは近いです。
ここでブランドを変えたい。
最終的に色を変えたいと思っています。色が上に固定されていることを確認したいのですが、今はそうではありませんが、そこに着きます。
戻ってブランドを変えましょう。
だからコーヒーの代わりに私は鉱山のイメージを呼んでいます。
もちろん、それが正常に動作することを確認してください。
次は、昼寝やデフォルトの代わりに表示される色を変更するための簡単な変更です。
私たちは今、詩にバーがあれば、私はこれを行うことができます。
私たちは現在今のところ暗くなっているか、テキストが明るいところで色が反転し、暗い背景が得られます。
まだ私はここで青色ではありません。
そしてフォントも白ではありませんが、私たちは戻ってそれを修正します。
これは今のところ十分に近いです。
ここで、そのグリッドの実際のイメージギャラリーに焦点を当てることができます。
まず、ソリューション上でどのように動作するかを見てみましょう。
それで、3つのイメージが横切って始まり、次にサイズを変更すると2つになり、次に2つになり、最後に小さいサイズでは、ここに見られるように1になります。
そして、私たちは一つのイメージを横断しています。
まずは、この3つの大きなサイズのグリッドを設定してみましょう。
12単位の合計があることを忘れないでください。
したがって、3つずつ進めたい場合は、それぞれを4つの単位として指定します。
だから、それをジャンボトロンの直下に設定しましょう。
まだコンテナの内部にあるが、divクラスが行と等しくなるようにし、その中でdivクラスが等しくなるようにし、それを4つのユニットにしたい。
だから我々はコラム大ダッシュ4を実行してEnterを押すだけで、ここにテキストを入力することから始めることができます。
そして私は、まだ刻々と大きな変化を起こすため、インデントを固定することについては心配しません。
しかし、リフレッシュして、3つの列を横断してみましょう。
だから私たちがやりたいことは、いくつかの画像を撮って、すべて始めるだけですが、私のゴールデンゲートブリッジの写真を撮って、テキストではなく画像タグを追加します。
だからイメージソースはあなたが病気のゴールデンゲートブリッジと同じです。私はそれを3回ペーストして保存します。
そして、もし私たちが帰ってきたら、私たちはこれらの3つの列を持っていてもイメージが巨大であるという問題があります。
私たちのイメージは縮小していない私たちのコラムの中にとどまっていません。
これを修正するために私たちが何をするかは、ブートストラップを少し追加することでわかります。
私はまだあなたの周りにこの素敵な小さな境界を作成することを示していない、それはサムネイルと呼ばれています。
私たちがする必要があるのは、サムネイルと等しいクラスのdivを作成し、その中に置くイメージが列内に収まるように縮小されることだけです。
そして、それはまた、私がかなりいいと思うここでこの小さな国境を取得します。
そうするためには、実際に私たちが持っているものをひとつのイメージに戻して、divクラスをサムネイルと同じように追加して適切に処理することにします。
そして、イメージの周りを包み込み、保存します。
今私たちはリフレッシュします。
グリッド内の適切なスペースを占める単一のイメージが得られるかどうかがわかります。
これはコラムであり、その周りに少しの境界線があり、イメージは偉大ではない巨大ではありません。
だから我々はこれを複製する場合、それが動作することを確認しましょう。
これは1回のイメージで3回複製して、何が更新されるのかを見てみましょう。
そしてそこに行く。
我々は3つの画像を持っています。
私は先に進み、さらに6つを追加します。
だから私たちはここでやっているように9つの合計を持っている。
実際には別々の行を追加する必要はありません。
それらをすべて同じ行に置くことができます。
それで、私たちがこれまでに持っていた3つのすべてを時代に回して保存してください。
それは私たちに9つのイメージを与えます。
私がリフレッシュすると、自動的に次の行に折り返されます。
だから、私たちはただ一つの行を持って、それらの列にあなたが医学的に知っていることを知っていなければなりません。
それぞれの画像を4単位にしたい場合は、1行に3つの画像が必要な場合は、3行の画像が必要です。
私は戻って、ビデオの終わりにあなたのエルフのすべてのこれらのイメージを変更します。
私はあなたにそれを見させたくありません。
コピーして貼り付けるのはとても面白いですが、このグリッドの残りの部分に集中しましょう。
ヒット・メディアがヒット・メディアになるとすぐに、そのイメージを1つのイメージに移動すると、私たちが探しているものは、その中断ポイントに2つのイメージがあります。
そしてそこにそこにある中間ブレークポイントの後に私達は小さいヒットし、私達はまだ2にとどまりたいと思う。
したがって、私たちの問題を修正するには、大きなブレークポイントまたは中断ブレークポイントで直ちに1つに移動し、小さなブレークポイントまたは1つの小さなブレークポイントを1にします。
私たちはここに戻り、あなたが選択して知っているこれらのすべてを変更し、コマンドdを押すと、それらを大きく呼び出すすべてのインスタンスを選択します。そして、左または右の矢印を押してカーソルを移動します。
今すぐ一度に編集することができます。
そして私がしたいことは、私たちがペローになりたいと思って働くので、私は6列の列を追加することができました。
私が戻ってリフレッシュすると、3行に1つずつ滞在してから中央のブレークポイントに到達し、2に移動します。
しかし、それから私は小さく打ちました、そして、私たちが小さく打つと、それは1と私たちに飛びます。
だから、列の中の6を行うのではなく、小さな列6を行い、このバージョンをもう一度リフレッシュすることができます。
我々は媒体を打つ。
私たちは2つに行きます。
我々は小さなヒット。
私たちは2で滞在し、それから私たちは余分な小さなものに行き、私たちは行ごとに1 1画像にあります。
完璧。
だからこそ、私たちはグリッドのためにやらなければならないことがあります。ここではほとんどの機能が完了しました。
非常に速くそれを稼働させること。
今注目したいのは、いくつかの色やアイコンです。
ブートストラップを使ってアイコンを追加する方法を紹介します。
あなたがコンポーネントに行くとブートストラップが得られます。これらのグリフアイコンが上に表示され、そこからたくさんのものを選ぶことができます。
そして私たちは私たちが使いたいものと私が使っているものを見つけます。
私はそれがカメラだと思うだけの検索をします。
このカメラはここにあり、私はそのカメラを使用していません。
それはやや異なっている。
私が使っているのはもっとレトロなカメラなので、それをどのように追加するのかをお見せしましょう。
実際にはブートストラップの一部ではありませんが、ブートストラップに付属の通常のカメラから始めましょう。
だから私たちはClifford Kahnと書いて、connのダッシュカメラに行く。
さらに下にスクロールすると、クラスを使用してConが等しいスパンを作成した後、グリフアイコンの名前をダッシュ​​することができるスパンを作成する方法が説明されています。
だからこのスパンをコピーしてみましょう.H-1の中でそれをやってみましょう.H-1の冒頭に置いて、すぐにA-Konダッシュカメラを望んで、保存してリフレッシュします。
そしてちょうどそれのようにあなたはそこにカメラを得ることができます。
私たちが宇宙にいたいなら、それをパディングで行うこともできるし、ちょうどそこにスペースを追加することもできます。
そして、私たちはnav barとまったく同じことをすることができるスペースを得て、私はPhotoと呼ばれるものを使ってここで二重チェックを行った。
このページで写真の画像を検索することができます。
そこにそれがある。
それは、絵を打ち消すことができれば行くことができます。
そこでここでnavバーブランドに行って、そのスパンに貼り付けます。
そして、スパンの中で、クラスは画像をクリックしなければなりません。そしてそこにスペースを追加します。
我々は私たちのサイトに戻って新鮮で、我々は今そこに少しの画像を持っています。
そしてカメラも持っています。
次に、ナビゲーションバーに取り掛かりましょう。まずは上部に固定して、今すぐ見ることができます。
それは私たちのスクロールを昼寝する。
しかし、それはそこにとどまっています。
これを行うには、NAVバーに追加する必要がある単一のクラスです。
だからここでは、nav barダッシュをダッシュ​​トップに固定して保存します。
私たちが新鮮ならば、それはトップに固定されていることがわかります。
1つの小さな問題があります。これは、コンテンツが少し遅れているため、Jumbotronの上にその通常のスペーシングがあるようにしたいということです。
私たちがする必要があるのは、私たちの身体に詰め物を少し加えて、70ピクセルになることです。
ブートストラップのドキュメントは、70ピクセルのパディングを忘れてしまった場合、それが現在の4ピクセルの幅であることを忘れてしまったことを伝えます。
そこでここではスタイルシートを作成してギャラリーDotsie
SSと呼んで選択したボディパッディングの最上部の70ピクセルにして、それをGallery
CSというスタイルシートにリンクして追加する必要がありますS.
それが機能していることを確認しましょう。
そこに行く。
私たちはスペーシングバックを持っており、NFRはあなたが完璧に見えるようにトップに固定されています