このユニットでは、ジャンボトロンとブートストラップのフォームと入力を含むいくつかの他のコンポーネントを紹介します。
しかし、私がそれをする前に、ブートストラップのような新しいツールを学ぶときに、本当に重要なことに取り組んでいきたいと思います。
そして、人々をウェブ開発者になるように教えてきた私の経験では、ブートストラップは、生徒の中には不快感を感じ始めた最初の場所の1つで、私たちは突然、他の誰かが私たちのアプリケーションに書いたたくさんのコードを含んでいます。
しかし、ここでドキュメントを見てみると、彼らは本当に長くて充実していますが、ここではたくさんあります。すべてを理解するために読んでおかなければならないマニュアルではなく、
これは、ブートストラップを使用する前に完了しなければならないことを指導する方法とは異なります。
フォームが必要な場合は、テーブルが必要な場合はフォームセクションを見てください。
あなたは、ナビゲーションバーが必要な場合は、テーブルのセクションをヒットします。
あなたはNFRのセクションを見ていますが、あなたが使用しているようにドキュメントを扱うことが重要です。ここに戻ってくるコードの個々のビットを参照して、コードセグメントをコピーして、いくつかのデモンストレーションをチェックしてください。この時点で何年も。
そして、私はそれのほとんどについてかなり良いと感じます。
しかし、私はブートストラップを使って作業しているときにドキュメントを開いたままにしておきます。
私はこのコースの本当の初期のビデオの中の例を絶えず参照しています。私はWeb開発者になる方法について話しました。
あなたは記憶の熟練者にならず、あらゆる情報を知っています。
はい、あなたは物事を知る必要があります。
はい、あなたは理解し、いくつかのことを暗記する必要がありますが、あなたは専門家や記憶になることはありません。
あなたは情報にアクセスする上での専門家になりつつあります。
そしてその情報のいくつかはあなたが覚えているでしょう、そして、その多くはドキュメントや例のビデオブックでオンラインになるでしょう、あらゆる種類のリソース。
よろしくお願いします。
基本的には、ブートストラップには多くのことがありますが、20〜30％は見えますが、そこにはさらに多くのことがあることを心に留めてください。
しかし、それによって威圧されないでください。
操作方法がわからないものを行う必要がある場合は、ドキュメントにアクセスするのが快適であると感じるはずです。
ドキュメントを開き、それを探します。
そして、ブートストラップされたドットコムを得るための素晴らしい例と解説が常にあります。
OKだからこそ、これらの重要なコンポーネントのいくつかについて話を進め、Jumbotronを見せ始めます。
ジャンボトロンは公式ドキュメントによれば、軽量で柔軟なコンポーネントであり、オプションでビューポート全体を拡張して、サイトの主要コンテンツを紹介することができます。
ここにある例を見ることができます。ジャンボトロンを使用したい場合は、本当に簡単です。
私たちがする必要があるのは、divクラスのジャンボトロンを書いてから、その中に入れたものがジャンボトロンの一部になることだけです。
だからそれを試してみましょう。
ちょうどそれは下のボタンはクラスJumbotronジャンボトロンとdivを持っているし、そこにある場合はH1またはH-1はこれがジャンボトロンであると言うだろうし、そこにボタンを追加すると、ここにあるように段落を追加するだけでなく、私たちの段落にはちょっとひどくなります。
今は十分です。
そして、ボタンと私たちのボタンはちょうどそこにこんにちはと言うでしょう。
OK。
そして、ボタンをいくつか選択します。
私たちはボタンの成功をし、私はそれを大きくして保存します。
私たちが得たものを見てみましょう。
そしてJumbotronがあると、それはブラウザウィンドウの幅全体を占めることがわかります。これは通常、私たちが望むものではありません。
そして起こっているのは、JumboTronが内部にあるコンテナの100％を占めるように設定されていることです。
この場合、それは何の外にもありません。
しかし、まもなく、グリッドシステムとブートストラップを見せて、画面の中央に配置して画面の3分の1を占めるようにするために、画面のどのくらいの部分を正確に制御できるかを示します。
画面の3分の2は画面の4分の1で、ブートストラップグリッドシステムを使用してこれらのさまざまな選択肢があります。
ここでは、コンテナと等しいクラスのコンテナと、コンテナが行うコンビネーションがない別の要素を示します。
divクラスのコンテナの中に物を置くだけでは、周囲にいくつかの間隔を空けて配置し、物を配置します。
だから、コンテナはここでこのスペースをすべて占めるかどうかを調べることができますが、そこにはかなりの余裕があります。
だから、私たちが話していないグリッドシステムを使わなくてもすぐに改善が必要な場合は、divクラスコンテナを追加することができます。そして今、この素晴らしいジャンボトロンを取得します。
私たちが既にこのコンテナに入れたコードを移動させれば、それをジャンボトロンの中に入れません。
そのコンテナの影響をまだ受けていることがわかります。
したがって、ジャンボトロンの外側ではあるが、コンテナ内に保存して更新すると、そのコンテナ内にも表示され、視覚的に反映されます。
[OK]をクリックして、コンポーネントと次に表示されることに戻りましょう。
私たちはトップに行く。
私たちは評価を見なければなりません。そして、私はあなたにそのフォームとそれらがどのように働くかを示します。
フォームをクリックすると、いくつかの種類があり、例が異なります。
そして、私たちが何かをタイプする前に、最初にそれらをスクロールします。
ここでは、ブートストラップ形式の基本的な例を示します。
あなたはそれを作り出す市場を見ることができます。
次にインラインフォームと呼ばれるインラインフォームがあり、インラインフォームの別のタイプと、入力の種類とフォームの別の種類のインラインフォームがあります。
そして今、これは、サポートされているさまざまなタイプの入力をコントロールする異なるタイプのフォームコントロールについて話しています。
だからこれらの色はすべてあなたです。
電子メール番号週の時間などテキスト領域異なるチェックボックス無効チェックボックス無効ラジオボタンインラインチェックボックスインラインラジオボタンドロップダウンメニューは継続的にダウンします。
私たちは他のフォーラム国を持っています。
私たちは焦点を当てています。
この青色で強調表示されています。
これがデフォルトのブートストラップフォーカススタイリングです。
私たちはまた、無効にすることで入力を無効にすることもできますし、他にもできることがいくつかありますが、私は元に戻って実際に基本的な始まりに集中します。それを少しずつ解剖します。
そこでここに戻って、このフォームを他のものの後に追加します。
しかし、私はコンテナの中でそれをやります。
私はこのフルスクリーンをしばらく作ってみましょう。
私たちは私たちのフォームを持っており、そのフォームの中にはかなりの内容があります。
ブラウザに戻り、見た目を見てみましょう。
最初に気づくのは、私たちのフォームがこのコンテナの向こう側にあることです。
それはそれの100％を占め、それは我々が制御できるものです。
いったんブートストラップ・グリッド・システムについて話をすると、これが50％も進むはずです。
ブートストラップ・グリッド・システムについて話したら、それは簡単に変更できますし、まだそこにはありません。
だから私たちはただそれと一緒に行くつもりです。
今は100％を占めています。
それは奇妙な奇妙な探しているフォーラムですが、それは問題ありません。
私たちはそれがいかに大好きです。
だから私たちは崇高に戻って、一度にこれを解剖しましょう。
だから私たちはそのフォーラムタグの内側にforumタグを持っています。
divクラスのフォームグループがあり、ブートストラップのドキュメントに戻ってフォームグループを検索し、ラップラベルとコントロールをフォームグループ内で最適な間隔で表示することができれば、そのことについてもっと知りたい場合は、
だから、この最初のクラスの周りのフォームグループクラスを取り除くと、最初と2番目のクラスの周りでそれを行います。
私は保存し、これらの入力間の間隔がここでどのように変化するかを再表示します。
だから私たちは戻ってフォームグループを追加することができます。これは実際にあなたが入力とラベルを持ち、それらを一緒にグループ化したい場合に使用します。
だからちょうどちょっとしたスペースがそこに追加されています。
ここにちょっとしたスペースが追加され、これらの2つを効果的にグループ化してグリップします。
フォームグループです
そしてラベルはちょうど正常です。
Boucekクラスにラベル付けするために何かを追加する必要はありませんが、入力にはクラスフォームコントロールがあります。
だから私がそれを取り除くとどうなるか見てみましょう。
だから私はちょうど最初にそれを行い、電子メールの入力を入れて戻ってリフレッシュします。
これは、通常のデフォルトのブラウザ入力に完全に戻ります。
だからあなたは角を丸くしません。
同じパディングとスペーシングの間隔はありません。
また、私がクリックしたときに同じフォーカス効果を得ることはありません。青いアウトラインを取得しますが、これはこれとは異なります。
ブートストラップの輪郭はもう少し微妙で、2つの間の視覚的な変化はただちに明らかになりますが、実際にグリッドシステムで作業すると、さらに重要な違いがあります。要素。
戻り、フォームコントロールを再度追加します。
だから実際にこれを蒸留したいのであれば、ここにあるすべてのものがグループとフォームコントロールを形成するために沸騰します。
これらの2つのクラスは、物事を見栄えにする責任があります。
今、このパラグラフクラスのヘルプブロックがあり、私たちがそれから何を得るかを見てみることができます。
このテキストはここにあります。ちょうどあなたのフォームの一部についてのポインタとそのクラスのヘルプブロックでのヒントを示しています。ここに私たちのボタンがあります。これはちょうど普通のPucelleボタンです。他のボタンと同じように色を変えることができます。
だからすでにこれはレゴのようなものですが、私たちがジャンボトロンに加えることができるレゴボタンがあるのがわかります。
単独で追加することもできますし、フォームの代わりに追加することもできます。
これは、アプリケーションのさまざまな部分に追加できる小さなプラグアンドプレイコンポーネントです。
ですから、インラインフォームであるもう1つのタイプのフォームを見てみましょう。
だからこれは少し違って見える。
私たちがこのコードをコピーしただけで、相違点を見てみましょう。その最初のフォームを残して、ライン形式でここにコメントを追加し、物事を適切にインデントしましょう。
いいね。
すべてが同一であることに注意してください。
私たちはまだフォームグループを持っている入力にフォームコントロールを持っていますが、大きな違いがあります。
すべてが1行になるように、クラス形式のフォーム内にあります。
始めるのが見えるように見せましょう。
私は戻ってきてここにラインの形をしてくれます。
そして、私がそれを取り除き、それを保存するとすぐに、私たちはここにあるように通常の形に戻ります。
したがって、1つのクラスには、それを制御するすべてのスタイルが含まれています。
それで、Form in lineとして保存します。
そして、やはり今の間隔は理想的ではありません。
これは、グリッドシステムについて話すときに修正される予定です。
ブートストラップフォームについては、もっと多く話すことができます。
私たちはおそらく、複雑なフォームを作成するだけで30分45秒の講義を行うことができます。これらのさまざまな部分のすべてを分析して、さまざまな種類のさまざまなスタイルをカスタマイズすることができます。
しかし、私はそれをするつもりはありません。
私たちは重要な基礎をカバーしました。
Boucekフォームのパンとバターの種類には、基本的な規則形式とインライン形式の2種類があり、フォームの周りに使用するブートストラップのさまざまな側面にはいくつかの機能があります。
しかし、今は時間を費やすことなく、PRICHEPフォームの詳細や細かい点については、私が実際にブートストラップを使用しているときに必要なときに、それらの小さな部分を投げていきます。
だから、フォームについての2つのテイクアウェイは、本当に重要なフォームコントロールとフォームグループフォームコントロールの2つのクラスであり、入力をブートストラップの洗練されたフォームグループにするだけですばらしい間隔を追加します。
だから、あなたが書いたものが何であれ、フォームグループにはすばらしい間隔が得られ、その後、単一クラスのフォームが一列に並んでいます。
フォーム全体を一列にまとめるという形でフォームをラップする場合。
そして、ジャンボトロンについても話しました。
非常に単純なクラスはJumbotronに等しい。
あなたはピアを見ることができます。
そして、すべてをコンテナの中に入れます。
私たちがその容器を取り除いて何が起こるかを見せたら、
すてきなマージンが消える間隔をすべてリフレッシュしてください。
だから、コンテナはちょうどあなたのアプリに間隔の素早いビットを得るために良い方法は、物事は比較的いいように見えるようにします。
OK、このビデオを終了する前に、ノードとエクスプレスとMongoとmongooseとたくさんの技術を使ってフルバックエンドデータベースを接続したアプリケーションを構築するサイトを10秒間表示します。インターフェイスをプロトタイプ化して比較的速く見えるようにするためのブートストラップです。ここにはジャンボトロンがあります。
後で説明するグリッドシステムを使用しているボタンのいくつかを使用しています。
私がログインすると、フォームがあることがわかります。
したがって、これらはフォームコントロールであり、グリッドシステムを使用してスタイリングしたので、画面の幅全体を占めることはありません。
むしろ、それはこの小さな中間部分を取り上げるだけです。
だから、我々は一度グリッドシステムについて話をする。
しかし、私はちょうどこれが本当のアプリケーションであることを示したいと思っています。それは、ブートストラップを使ってプロトタイプを作成し、かなり素早く見えるようにするものです