このレッスンでは、自分のアプリケーションにブートストラップをインストールする方法を説明します。
そしてそれを済ませたら、ピッチを使う重要な基礎をいくつかお見せします。
だから、私はちょうどホームページ上のブートストラップドットコムを取得しています。ここにはブートストラップをダウンロードするリンクがあります。
また、実際には直接ダウンロードリンクではありません。なぜなら、ブートストラップの使い方には2つの主な選択肢があるからです。
私たちはファイルをダウンロードすることができます。
その後、これらのファイルを取得してアプリケーションに追加することができます。
私は単純な検索チームを持っています。私は基本的なものをhMLMLと呼んでいます。
タイトルを追加するだけで、ブートストラップのいくつかの要素を追加するだけです。
一度インストールすれば、包括的なものを作りません。基本的なブートストラップコンポーネントの一部として、それを単に遊び場として使用します。
まず、単純なH-1ブートストラップの基本を追加して保存してみましょう。
そして、これをブラウザで開いてみましょう。
今のところそれを保つだけです。
今すぐブートストラップをインストールします。
私はそれをダウンロードしました。
そのファイルを開くと、ここにはいくつかの異なるコンポーネントがあります。
C
Sのディレクトリがあり、CCSディレクトリの中にはかなりのファイルがありますが、実際にCSSAを起動する重要なファイルは1つだけです。
これは実際にはここでブートアップされた同じファイルです。
それは分の戦いが少ないスペースを取るために縮小されていることを除いてSS。
したがって、これらの2つはブートストラップを実際に使用するための重要なファイルです。
これはブートストラップのテーマです。これらの3つはブートストラップにカスタムテーマを追加するのに使われていますので、それほど重要ではありません。
我々が必要とするのは、ブートストラップ・ドットシ・アセスメントだけです。
そして、それを開くだけで作業しているものを見ることができます。
これは主に再評価されたブートストラップのファイルです。
それは単なるクラスです。
あなたがCSSAのすべての一行を見ると、ほぼクラス宣言が点になります。
そして、私たちができることは、アプリケーションの代わりにそれらのクラスを使用することです。
したがって、白いテキストと赤い背景のボタンを使用する場合は、ドットボタンの危険性を適用します。
そして、これがここでやっていることです。
しかし危険は白い背景に赤い背景と赤い境界線を持っています。
それでは、他のCSSAファイルと同じように、アプリケーションにこれを含めましょう。
だから私がやることは、基本的な調査チームを持っているのと同じディレクトリにここをドラッグするだけで、これに代わってブートストラップされた分を再評価することもできます。
それは本当に重要ではありません。
技術的にはこれは少し速くロードされます。なぜなら、私がそれを開くと、すべての空白が削除された1つの巨大な行であることがわかるからです。
ロードする方が簡単ですが、この長いバージョンを使用して、作業しているものを正確に見ることができます。
ここで実際のファイルに移動します。ここではこれを閉じて、ブートストラップされたCSXを取り上げます。
他のスタイルシートと同様に、リンクされたタグが必要です。TrefはブートストラップドットC
Ssです。保存するとここに新しいページが表示されます。
このH-1のフォントを見てください。
それは変わる。
私たちは今ブートストラップをインストールしているか、少なくともブートストラップと一緒になっているC Sを持っています。
私たちはjavascriptを使って作業しませんが、ブートストラップをインストールするための別のオプションはありません。
ブートストラップCDNここでこのリンクを利用してコードに追加することができます。
そして、それは同じファイルのホストされたバージョンへのリンクです。
したがって、ブラウザでそのファイルを開き、それを貼り付けると、最小化されたファイルの内容が表示され、このファイルでホストされていることがわかります。そうすれば、私はそれを置き換えることができます。
別のリンク。
あなたがEllenであることをタグ付けして貼り付けてください。私はこれをコメントします。
今のところ戻ってリフレッシュしてください。
何も変わりません。
唯一の違いは、最初のケースでは、リンク先のファイルがコンピュータにダウンロードされていて、2番目のケースでは、オンラインでホストされている外部ファイルにリンクしているという点です。
さて、ブートストラップのドキュメントに行き、これらのコンポーネントの周りや一部を再生してみましょう。
だから、ブートストラップを手に入れてC Ssをクリックしてみましょう。私たちが使用する重要な部分を指摘します。
ですから、ボタンで簡単に始めましょう。
ボタンを使用する場合は、叩かれたクラスを使用してから、デフォルトのボタンのタイプを選択します。このボタンは、白いボタンを表示しますが、これもVTAMプライマリBATNAアクセス情報です。
危険とリンクを警告し、それらはすべて少しずつ異なったスタイルになっています。
もちろん、私たち自身でこれらの色を変更することもできますが、一度に組み込みを使用して開始し、ここで表示することもできます。
ボタン要素を使用するだけでなく、アンカータグとしてボタンや入力を使用することもできます。
だからそれを試してみましょう。
こんにちは、このH-1。
ボタンタグを追加しましょう。このボタンのタグは、私をクリックして、今すぐページをリフレッシュして見てみましょう。
それはかなり醜いボタンです。
しかし、私たちが行ってそのクラスPTENを追加すると、成功と保存の間に、この素​​晴らしい緑のボタンが表示されます。
基本的なスタイルをかなり簡単に得ることができます。
もう一度戻ってみましょう。また、私たちも使うことのできるサイズの違うボタンについて、いくつかのことを紹介します。本当に簡単です。
ボタンを大きくしたり小さくしたり、ボタンを小さくしたりする必要があります。ボタンの成功後に試してみる必要はありません。
クラスの順番は関係ありませんが、ここではDTNの後にやってみましょう。ちょっとしたことをしてページを更新しましょう。
そこに行く。
私は今これを上に移動し、いくつかのボタンを追加しますが、これはアンカータグになります、これはタグになるか、私たちはHを持っています。
F.
毎日読んでいるDPコロンのスラッシュスラッシュと同じです。ブートストラップドットコムを取得し、テキストは単にブートストラップのdocsと言うでしょう。
これをもう少し大きくして、クラスでクラスに追加してPTENに等しくする必要があり、Deschの情報とそれを大規模なPTENダッシュElgieにしてリフレッシュさせましょう。
今は2つのボタンがあります。
1つは実際のボタン要素です。
もう1つはアンカータグを持っていて、これをクリックするとアンカータグとして見ることができます。
ブートストラップを使用する最初の1分で、まともなボタンを手に入れることができました。
それは私たち自身でCSSAの10〜15行を複製することになりました。
今戻ってみましょう。
このフルスクリーンをもう一度作成して、ボタンについて他にもいくつか紹介します。
だから我々はサイズがあります。
また、ボタンがアクティブであるかのように見せたり、アクティブなクラスを追加するだけで、ボタンを表示させることができる州が異なります。
だから私たちがこれを試してみたら、いくつかのボタンを追加しましょう。私は小さなミニチュアのClick
Meボタンを3回複製し、クラスの中の最後のボタンをアクティブにしてリフレッシュします。この画面がアクティブに見えるだけで十分です。
戻りましょう。また、この属性を追加することでボタンを無効にすることもできます。
無効は無効になります。
戻り、最後のリフレッシュを無効にしましょう。
そして今、このボタンは無効になっています。
私たちはそのすてきな小さなアイコンを手に入れます。
それは色がそれ以上変わるホバー効果を持たない。
これは明らかに無効にされたボタンです。
最後に私はあなたにお見せしますので、色をもう一度変えることができますので、危険な夜は赤みを帯びたオレンジ色になり、ここですべての色を見ることができます。
もちろん、スタイルを上書きすることでそれらを変更することができますので、別のスタイルシートを作成するのではなく、このようなことをすることができます。
私は今ここでそれをやります。
ですから、私たちはただ一つの行を行い、美しさと危険を好きになるでしょう。
私たちは色をオレンジ色に変えることができ、現在はテキサスオレンジを危険にさらしているかもしれません。バックグラウンドを実際に変更したいのであれば、私は背景色をオレンジ色にすることができます。どのブートストラップがあなたを箱から出してくれるかを使ってください。
そしてほとんどの場所はそうしない。
それでボタンはOKだから私はこのビデオでやっていることだ。
私はちょうどあなたにブートストラップがどのように動作するかを本当に素早く知りたいと思っていました。
既存の要素とそのクラスにクラスを追加するこのパターンは、そのブートストラップで定義され、CSSAファイルは次のビデオにあります。フォームや入力を含むブートストラップに付属するその他の重要な部分を強調します。