このレッスンでは、架空のスタートアップ用のリンク先ページを作成するためにブートストラップを使用します。
私たちのスタートアップはパーフェクトマッチと呼ばれています。
非常に面白い。
私はそれが人間のネコの出会い系アプリであると知っています。私はそれが、孤独な人間とSheldrickのネコとのマッチングが比較的無害であるかもしれないことを解釈するためにあなたに任せます。
知りません。
サイトのクイックツアーをして彼女に書いてみましょう。
私は本当にいくつかの機能を指摘しています。
ここにはあまりありません。
私たちは実際にはこれをつかまえておらず、まだ何もしていません。
だから、それは本当にただのHDムービーですが、これまでに述べたことはすべてです。
だから私たちは十分な長さについての完璧なマッチホームを持っています。
彼らは実際にどこにもサインアップしていないし、右側に2つの小さなアイコンがある。私たちは彼女のハンバーガーを手に入れる。
私はそれをクリックすることができます。
これらのリンクはすべて、そのハンバーガーの中にあります。
次に、我々は中心にとどまり、全体の背景をカバーする大きな背景イメージを持っています。
だから真ん中に私たちのスタートアップの名前が私たちと完璧にマッチして、私たちはキャプションを持っています。
そして、我々は少し水平なルールを持っています。次に、アイコンを使い始めるためのボタンです。
私がこれを縮小するにつれて、すべてが真ん中にとどまり、少し上に移動して、ページの途中でテキストが始まるモバイルデバイス上に、何らかの厄介なレイアウトがないようにします。
だから私たちは少し上に移動し、それは中心にとどまっています。
このレイアウトは本当に簡単でブートストラップが簡単ですが、ランディングページには比較的効果的です。
私たちが持っているものはすべて、幅全体を占める単一の列です。
だから、この列は12単位になります。
私たちはそれを1列12単位に分割していませんし、すべての列をその列の中央に配置します。
だから始めましょう。
まず、ファイルを作るだけです。
私はDMLでインデックスと呼ばれるものを持っています。
私はこれを定期的なボイラープレートの完璧なマッチで追加してから、ブートストラップを追加して開始し、CDN
Bitstrips
CDNを使用します。
SSとJavascriptをここでやりましょう。
タスクバー用のJavaScriptが必要になります。
だから私たちはタグをリンクする必要があります。
その後、私たちはJavaScriptを取得します。
了解。
これをスクリプトタグの一番下に置き、ソースをあなたと同じに設定します。
今、私たちがこれを開くと、コンソールを開くと小さな問題があります。これは、ブートストラップのjavascriptのためにJayのクエリも必要とすることです。
私たちがJを必要とする必要があるナビゲーションバーの教訓から覚えています。
クエリー。
だから私たちはそのためのCDNを手に入れます。
私たちは修正版をやります。
そのURLをコピーします。
そして最後にここに戻り、javascriptへのリンクを張る前にそれをしなければなりません。
それ以外の場合は、依然としてクエリについて知りませんので、まずクエリをロードする必要があります。
もう一度やり直しましょう。
火災リフレッシュ。
私たちは何の誤りも見られないので、いい兆候は何も見えません。
真ん中のテキストから始めましょう。
このすべてのコンテンツはここにあります。
そこで、コンテナを作成し、コンテナ内にクラスECOコンテナを作成する行が必要です。次に、そこには常にその行が必要な別のdivがあります。
グリッドシステムを使用しているときはいつでも、divは列ダッシュ大12に等しいクラスになります。
そして、それはその容器の向こうまで広がっていきます。
そして、彼らは完全なマッチと保存を言うだけのH1を持っている場合は、内部。
そして、そのリフレッシュでそれを残しましょう。
実際には私たちが望むものではありません。それは、私たちがやるべきことがいくつかあるからです。
最初は、すべてをその列に集中させる必要があるということです。
したがって、ここで扱っていることを調べると、H1が全部通り抜けていることがわかり、その内部にH1の中心を置くだけでよいのです。
もう1つは、少し下げなければならないということです。
パディングや余白を追加して、ページの上部に移動しないようにする必要があります。
残りのコンテンツを追加することから始めましょう。
だから私たちは唯一の人間のネコの出会い系アプリを持っていて、それはただH
3になり、私たちが望むどんな要素でもできるが、私はそれをH-3唯一の人間ダッシュネコのデートアプリにするだろう。
そして、そのように見えない水平ルールを追加することができますが、事実の後にスタイルを適用し、そのボタンのクラスにボタンを追加します。
私たちは見ています。
これはブートストラップボタンのデフォルトであり、大きなボタンです。
戻ってみましょう。
だから私たちはPTENと色のデフォルトとLGの間のサイズが大きいとここでは、開始するテキストを追加して保存してみましょう。
大丈夫。
だから私たちのコンテンツは次にグリッドの中央にあります。
そして、我々はパッディングに焦点を当てて、それを動かします。
しかし、このグリッド内の中心から始めて、それをより簡単にするために、私たちがそれぞれのものを個別に集中させる必要がないように、div内にすべてをグループ化します。
H-1を3つ、次に3つのボタンを中心に配置する必要があります。むしろ、1つの線で区切るdivとちょうど中央にグループ化することができます。
divを作ってみましょう。私はCantetのIDを与えて、その中にすべてを入れます。
だからH-1歳3歳。 R. ボタンが適切にインデントされて保存されます。
私たちがスタイルシートを追加する前にページをリフレッシュすると、何も変わっていないはずです。
だから私はリンクのタグを追加し、私は自分のスタイルシートアプリを呼び出すよ。
SSまだ存在しません。
だから私はそれを保存する必要があります。
同じディレクトリにSSがあります。
すべてのhが紫色であるような単純なものから始めましょう。
それが正常に動作することを確認するだけです。
リフレッシュに戻りましょう。
アンドリューは紫色のH-1を手に入れました。
すばらしいです。
それでは、Daveにコンテンツのアイデアを追加して中心に置くことを選択しましょう。
だからそれを取り除くと、IDの内容が必要になり、テキストを整列することは省略します。
戻ってみましょう。
そこに行く。
だから今はセンターが一直線に並んでいる。
次に、25％のパディングを正確に行うために、このページを25％下に押し下げます。
だから、ここではパディングトップ25％を行うだろう。
そして、それをパーセンテージとして保持すると、ピクセル数を厳密に指定するのではなく、少し反応がよくなります。
それは中心にあるのです。
画面のサイズを変更すると25％も変化します。
すばらしいです。
さて、背景画像を追加しましょう。
私が使用しているイメージは愛らしい猫であり、人間のやりとりはここから始まります。これはSplash
Webサイトで最後に紹介したブートストラップイメージグリッドのビデオで紹介しました。
そして、彼らはあなたが何の問題もなく使用することができる本当に素晴らしい高品質の画像のすべての種類があります。
そして、私が使っているものはここにあります。私はその説明の猫のリンクも検索します。
ここであなたはこの画像のAroです。ちょうどあなたの画像を右クリックしてコピーしてください。
今戻って、それを背景イメージとして体に追加します。
だからバックグラウンドし、その巨人であるURLをあなたに教えてください。
そして、それをこのレベルのままにしたり、リフレッシュすると、巨大な背景イメージが得られます。これは、爪のスタートアップのようなものです。
だから我々はそれをサイズ変更する必要があり、それを行うには、バックグラウンドサイズを使用し、それを変更して新たにカバーする必要があります。
再び我々は近づいている。
これにより、画面の幅と高さ全体をカバーしながら、画像をできるだけ小さくします。
したがって、アスペクト比は変更されません。画像の歪みはありませんが、必要に応じて両方向に伸びます。
しかし、それは我々の画面に合うために必要な最小限の量であり、それはまだ完全ではありません。
そして私たちがしたいことは、その大きさを変えることではなく、その位置を変えることです。
我々はバックグラウンドポジションセンターを中心にしますが、私たちはより近くにいます。
しかし、それはイメージが行く限り、まだ完璧なマッチではありません。
そして、それらの変更は後で来るでしょう。
今のところ私はナビゲーションバーに追加することに焦点を当て、Boucekのドキュメントに行きコンポーネントを調べる前にこれを行うことにしたいと思います。
私がブートストラップのナビゲーションバーに追加する場合、私はいつもこれを行います。
そうでなければ覚えておくのはあまりにも多くのものです。
そして私はちょうどここにこれをコピーします。
全体のナビゲーションをここに戻って開始し、ちょうどそれを一番上に置きます。
これは間違いなく私たちが望むNAFではなく、更新したい部分を含んでいます。
それは十分に近いです。
だから私たちがしたいいくつかの変更があります。
最初の最も簡単なのは、ソリューション上のコンテンツがコンテナ内にあるため、ここにあるようにエッジまで完全には移動しないということです。
だから、私たちは戻ってinsetすることができます、またはこれをdivクラスのコンテナに変更するだけです。今戻ってみると、そのコンテナに追加したので、ここで解決策のようにいくつかの間隔があることがわかります。
さて、Nevの実際のコンテンツを手に入れましょう。
だから、最も簡単なのは今言うだけのブランドを変えることです。ブランドはここにこのラインクラスはネズバーブランドと同じで、それを固定マッチと保存に変更します。
やってみて。
いいよ。
さて、このフォームを取り除きましょう。
私たちはこれを全く必要としません。
だから私たちのフォームはすべてここから始まります。
その全体をリフレッシュしてください。
ドロップダウンも取り除きましょう。
あなたはそれを必要としません。
それはここから始まります。
この嘘は終わり、再び新鮮です。
今、我々は単一のリンクを持っています。
だから私たちはサインアップしてログに記録されるはずのこれら2つのリンクから始めます。
それがここのリンクなので、サインアップして複製することができます。
内部にアンカータグが付いた味方だけ。
これがログインします。
それをチェックしよう。
すばらしいです。
アイコンは最後に表示されます。
私たちは2つのリンクを持っています。
今ここでは3つのリンクが必要です。
私たちはすでにそれらの2つを持っており、私たちはそのドロップダウンを取り除くでしょう。
だから私たちは連絡のために家にいる必要があります。
そこでドロップダウンを見つけてください。
クラスはドロップダウンに等しい。
それを取り除きましょう。そして今、アクバルは単純化されています。
今我々は2つの異なる長さを持っています。
私たちは実際にそれらの両方を取り除き、最初からやります。
そこで、アンカータグを付けて1人の同盟者を追加してから、それを3回実行します。
この最初のものは家に言わなければなりません。
次は約です。
そして最後は連絡先です。
それをチェックしよう。
そこには3つの長さがあります。
一つの小さなこと。
ホームはアクティブで、ブートストラップは本当に簡単です。
私たちがしなければならないことは、アンカータグではなく親の同盟国である同盟者にアクティブなクラスを追加することです。
すばらしいです。
OKですので、私たちのナビゲーションバーです。サイズを変更すると、このハンバーガーはすでにうまく動作しています。
私たちは、私たちの背景イメージが台無しになるという問題があります。
私たちはそれをちょっとだけカバーするつもりですが、ハムバーガーはうまく動作しています。
すべてがよさそうだ。
さて、私がここで使ったフォントがLedo Lであるように、フォントを説明しましょう。 A. それはGoogleのフォントのものなので、Googleのフォントに行き、Ledoを探します。
LA T-Oは毎回コレクションに行きます。
正常で大胆になったら使いましょう。
また、H-1を大胆にしたい。
はい。
そして、彼女のアプリケーションにこのリンクを追加します。
ここに一番上へここで今すぐアプリケーションを入力してください。私たちはそのフォントをすべてに適用しようとしています。
だから私は本体フォントファミリの中からLedoを選択し、それが正しくロードされていることを確認しましょう。
私たちがリフレッシュしたものを見てください。
そして、私たちの前部は、テキストが暗いですが、変更されているので、見るのが難しいです。あなたはNFRでそれを見ることもできます。
それは変わった。
これは、このソリューションに含まれているものと一致します。