このユニットでは、ブートストラップと呼ばれる新しいツールを紹介します。ブートストラップのホームページには、ブートストラップされたドットコムがあります。
そして、私はこの紹介ビデオで、ブートストラップが何であるか、なぜそれを使用しているのかを説明するために、数分を要したいと思います。
また、ブートストラップを使用するサイトの例をいくつか紹介します。
それでは公式のブートストラップ宣言を読んで始めましょう。
ブートストラップは、ウェブ上で応答性の高いモバイルの最初のプロジェクトを開発するための、JavaScriptフレームワークで最も一般的なTMLC SSです。
それをちょっと打ち砕いてみましょう。
ブートストラップは非常に人気があります。
実際、それは基本的にそれがほとんどの人がそれを追加して助けを得ることに好意を持ってそれを使用していることを意味し、基本的にはハブを取得する上で最も有名かつフォークされたリポジトリであり、そのブートストラップは実際には成功の単一のファイルとjavascript
。
今では多くのC S
Sとそれらのファイルに多数のjavascriptがありますが、それらは2つのファイルに過ぎず、私たち自身のアプリケーションにそれらを含めることができます。
基本的に私たちは誰かのコードを取得し、Bootstrapから独自のアプリケーションを追加しました。これは反応の良い良質のサイトを作成するのに役立ち、独自のコードを書くことなく高速化するのに役立ちます。
私がこのコースであなたにそれを示している主な理由は2つあります。
最初は、非常に人気があるということです。
たくさんの場所でそれを使用しています。
多くのデベロッパーがそれを使用していて、知るだけの価値があります。
しかし、第二は、このコースでは、見栄えの良いWebサイトをすばやく作成するのに役立つだろうということです。
だから、私たちがNodeとexpressとMongoとmongooseとdeepのすべてと複雑な背中と論理に集中しているときに私たちが背中と物事を学んでいるとき、我々はまだ1時間か2時間を費やすことなくよく見える何かを作ることができますビデオをスタイリングすることでブートストラップを差し込むことができます.10分15分で作業を進めることができます。
私がやることは、ドックを素早く見学することですが、ブートストラップには良い例がたくさんあります。実際にはこのウェブサイトにはブートストラップが使われています。
それではC
Ssをクリックしてみましょう。ブートストラップとは、CSSAファイル内に単一のJavaScriptファイルが1つだけ存在することです。
私たちが無料で入手できるものがたくさんあります。
ですから、ボタンを見てみましょう。
したがって、ボタンを作成してアプリケーションにブートストラップした場合、クラスにこのクラスを追加することができます。実際にはBeatiとPTENのデフォルトです。これらのボタンを取得します。
私たちは色々なことができます。
フォームを見てみましょう。
私たちはここで良い入力を得る。
また、すべてがサイト上で反応的であることに注意することも重要ですので、画面の幅に応じたものを得ることができます。
また、さまざまな種類のフォームがあります。
さまざまな部分を組み合わせることができます。
そこでここではフォームのボタンを使用しています。
だから、レゴのブーツストラップのようなもので、たくさんの方法でレゴのものができあがり、一緒に組み立てて自分のサイトに追加することができます。
私たちは、これらのコンポーネントのほとんどを検討していきます。
これらの大部分の大部分は、一度作業を開始し、ブートストラップコードを作成することで始まります。
だから今私たちに移りましょう。次のタブにはコンポーネントのコンポーネントがあります。これには、より大きなブートストラップの一部が含まれています。これには、ナビゲーションバーのようなものも含まれています。
これはおそらく、少しのコードで見られるように、たくさんのサイトが使用するブートストラップの最も一般的な側面の1つです。
それはたくさんのように見えますが、最初からNAVバーを作成していた場合よりもはるかに少なくなっています。
これにはドロップダウン形式があり、さまざまな種類のバーがあり、ページの上部にスクロールするものがいくつかあります。
Jumbotronのような他のコンポーネントがありますが、これはWebサイトの進行状況バーにいくつかのコンテンツを表示する方法です。
これらはすべてブートストラップと一緒に来ます。
だから、ブートストラップがこれらすべての部分に付属しているかどうか疑問に思うかもしれません。
答えは「はい」と「いいえ」です。
サイトがどのようにブートストラップを使用するかによって異なります。
私は、ブートストラップをよく使っている会社やプロジェクトでは、ブートストラップを使っていることを伝えるのが難しいと主張しています。なぜなら、それらの主要なコンポーネントを使用していて、自分のスタイルを上に書くことができるからです。
色を変更すると、フォントがホバー効果の一部を変更します。
まったく同じ色とブートストラップに付属しているものはすべて使用する必要はありませんが、ブートストラップ・スタイルを組み込むのに本質的に悪いことはありません。
そして我々は間違いなく両方をやっています。
だから私たちがサイトを作っているときに、フォーカスが実際にフロントエンドにあるわけではなく、私たちはすぐに見えるものを作りたいだけです。
基本的にプロトタイプのフロントエンドはブートストラップを使用し、実際には多くの部分を変更することはありません。
しかし、少し大きめのものに取り組んでいるのであれば、何も変更せずにブートストラップを使用したように見えないようにしたい場合、私たちは自分のスタイルを追加して基本的にスプレー塗装ブートストラップの上に
私がしたいことは、ブートストラップで構築されたサイトの一部を表示し、Buddhの旅行に実際にそれらのサイトのいくつかを紹介する公式Webサイトがあることです。
Expoをクリックすると、すでに開いています。
彼らはショーケースが美しく、感動的なものはブートストラップを使用していることがわかります。そのため、これらを開いて新しいタブを開くことができます。
これらはまさに最新のものです。
このサイトには何百というものがあります。
あなたはそれらのトンとトンを見ることができますし、スクロールとスクロールを維持することができますし、我々はいくつかの古いものに行くことができますし、それを使用している非常に多くの異なるサイトがあります。
そして、彼らは本当にすべてが同じに見えるわけではありません。
はい、多分彼らにはナビゲーションバーがあります。
たぶんそれらの多くは、このフルスクリーンの大きな画像レイアウトを持っているかもしれませんが、それは純粋に責任があるものをブートストラップしたものよりも、デザイントレンドのほうです。
だから、これらのいくつかを見てみましょう。
これは創造的なTimであり、Webサイトのテンプレートを実際に作成する会社です。
そして、あなたはこの素晴らしいグリッドの画像を見ることができます。
それは非常に敏感です。
私がこれを縮めれば、ここに私たちの小さなナビゲーションバーができます。
これは、すべてがこのグリッドに配置される方法のブートストラップコンポーネントです。
ブートストラップはそれに部分的に責任がありますが、ブートストラップのボタンに組み込まれているデフォルトを使用していないこともわかります。
彼らは彼らを変えました。
ものは異なって見える。
だから、これはブートストラップの本当にいい使い方だと思います。それは本当に素晴らしい探しサイトです。
それはうまく動作し、ブートストラップを使用しますが、ブートストラップ100％には依存しません。
1つまたは2つ以上を見てみましょう。
だから、これはIndicusと呼ばれたり、そのような指標になったりします。
明らかに、彼らは人々が楽しむデジタル製品を設計し、構築しています。
ここで下にスクロールしましょう。
私たちが持っているものを見てみましょう。
だから、おそらくPearcey
SSでは、これまで述べてきたようにレイアウトや整理に役立つブートストラップ・グリッド・システムで構築されたコンテンツがいくつかあります。
それは良くなってきていますが、ブートストラップは本当にアプリケーションの上に物事を築くのに役立ちます。
ここにはナビゲーションバーがあるので、ブートストラップに行くのは本当に楽しいです。Expoは、ブートストラップに使っていたプロジェクトのいくつかを調べて、その使い方や、企業が変更しているさまざまな方法を見て時間を割いています独自のフォントを独自の色で追加し、たくさんのサイトが使用しているコアコンポーネントが何であり、どうしてブートストラップを使用するのかを決定します。
そして、私の意見では、実際にはこのシステムのビデオとナビゲーションバーとすべての応答性を重視するグリッドシステムになっています。
OK。
だから私が作ってくれるシンプルなサイトをあなたに見せてくれるでしょう。
これは私たちのスタートアップであり、激しいペッティングです。
それはあなたの完璧なネコのソウルメイトを見つけるのに役立ち、ブートストラップを使用します。
Morganボタンにサインアップしたのと同じように、ここにnav barがあることがわかります。
これらの小さなアイコンが表示され、ここにテキストが表示され、小さなタグ行とボタンが表示されます。
そして、私がサイズを変更すると、すべてが反応して、あなたは物事が動き回っていくのを見ることができます。
そして、最も重要なことに、私たちはその小さなハンバーガーを手に入れ、私たちはモバイルフレンドリーなナビゲーションバーを持っています。
このユニットの終わりには、ロマンチックな関係で人々とペットにマッチするこの偽のスタートアップのランディングページを作成する作業をしていきます