Tip:
Highlight text to annotate it
X
>> ネールMEHTA:だからこんにちはへ ここで見ている誰もが、
またはオンライン見て、またはリモート。
私の名前はネールで、これはCS50です。
そして、今日のセミナーでは、応答します ブートストラップを使用してWebデザイン。
それはだ被験者の 私の心に非常に近いです。
うまくいけば、それは次のようになります あなたの心に近いです
同様に、今日のセミナーの終わりまで。
だから、ブートストラップ。
どのように多くのあなたのは、いずれかを行っています Web開発の一種の前に?
良い量?
若干。
>> だから、ブートストラップは、世界で最もです 人気の、フロントエンドのフレームワーク。
私が選んだby--これは使われています ランダムwebsites--のカップル
Lyft、ニューズウィーク、とヴォーグ。
これは、ウェブサイトの数で使用されています。
これは、そのWebデザインフレームワークです あなたがあなたのウェブサイトを作るようになります
美しいと応答の両方。
そして、私は、これらの上に行きますよ ここでは二つの概念。
美しい。
だから、上の通常のウェブサイトを持っています ただ、HTMLによって行われ、左、。
あなたはクラスでHTMLを学びました と長さでの断面です。
ブートストラップは、作るための方法です あなたのウェブサイトは、美しいです。
あなたは上で何を取ることができます 画面の左側に
とに何にそれを回します とてもで画面の右側に、
非常に、非常に少ないコード。
>> あなたが取得するには、素敵な青いボタンを取得します ファンシーは、画面上のエッジを丸め
あなたが取得し、リストビューを取得 カード、およびので、非常に少ないコードで上。
何のCSSそれは実際にはありません 自分で記述する必要があります。
だから、ブートストラップは、あなたがすることができます これらの事前に構築されたCSSを持っています
あなたが置くことができるコンポーネント あなたのWebページの内部
それはせずに美しく見えるようにします 自分で非常に多くの仕事。
それは本当に、ブートストラップです、 出発点、
あなたのWeb開発の冒険のために。
だからあなただけいるとき ウェブサイトのモックアップ、
それが始めるために非常に良い場所です。
あなたが格好良いウェブサイトを得ることができます 非常に、非常に少ない作業で。
そして実際、我々が行っています これを自分自身を行うには
5のような過程で minutes-- 10分以内です。
だから、に非常に簡単です いくつかの素晴らしいウェブサイトを作ります。
だから、最初の部分です。
>> 二part--応答。
人々は、今日では、ないだけを行います 自分のノートパソコンでWebにアクセスします。
実際、2014年のように、より多くの人々 モバイルデバイスを介してウェブにアクセスし、
携帯電話、または錠剤など、または サービス、またはようにウェブサイトより。
ウェブサイトは、伝統的にされています ラップトップやデスクトップで設計
念頭に置いて。
そしてそうウェブサイトは、多くの場合ではありません 非常によく、あなたの携帯電話に適しています。
あなたは今までに訪れた場合 お使いの携帯電話にharvard.edu、
それは迷惑なのようなものです 経験、右?
それが応答しないだからです。
私たちは、作るしようとしています 応答するウェブサイト、
それは、人々の画面サイズに対応しています。
>> それは携帯電話の場合だから、それはです 電話で行くつもり。
それはタブレットの場合、それはです タブレット上に行くつもり。
これは、一致するように調整します 使用されている画面。
それでブートストラップはまた、いくつかを提供します そのために非常に、非常に便利なユーティリティ。
そして、我々は、同様のことを議論するつもりです。
そこで再び、二つの部分にはあります 美しく責任Bootstrap--。
私たちはそれらについて話をするつもりです。
まず、美しいです。
そして応答。
>> 私たちがしているので、すべてのコード 話をするつもりtoday--
我々は、多くの例を持っているつもりです、 課題の多くは、ので、それon--
すべてはここにこのウェブサイト上で住んでいます。
このスライドは、我々が出て送信したものです。
あなたがここにいるのであれば、あなたは感じることができます 無料のそれを書き留めする必要はないように。
あなたがリモートで監視していた場合や、感じ お使いのコンピュータでこれをプルアップして自由に
同様に。
あなたは、おそらく中にそれをする必要があります このセミナーのコース。
>> だから我々は使用するつもり CodePenと呼ばれるウェブサイト、
これは共同の符号化です 本セミナー中に環境、。
そしてCodePen--と私はよ あなたはここで本当のfast--を表示
それはあなたが書くことができます HTML共同。
私はそれを送信することができ、それを書くことができます あなたたち、あなたたちはそれを編集することができます。
リモートいる場合でも、 まだそのようにアクセスすることができます。
あなたはにHTMLコードを入力することができます トップと、自動的よ
変換すること 下部にあるWebページ。
だから、あなたのための方法です すぐにコードを試してみ
もののどんなことをする必要はありません あなたのIDE、またはあなた自身のウェブサイト上で、
または何でも。
>> だから先に行くと、このプルアップ ウェブサイトには、リモートなら
または、あなたがここにいる場合は、 あなたは、リモートしている場合は特に。
is.gd/cs50boostrap。
いいえキャップなし、アンダースコア、ない何もありません。
あるあなたの人々だから ここでは、ちょうど私の親指を与えます
あなたが引っ張られたときにアップ そのウェブページまで。
良い?
>> 聴衆:はい。
>> ネールMEHTA:だから我々は得るでしょう ちょうど第二のそれに。
したがって、最初に、我々はに取得するつもりだ、どのように あなたのウェブサイトは美しくするのですか?
私たちは、退屈取る方法を学習しようとしています 古いHTML、私は前にお見せしたように、
とにそれを回します 本当にいいコンポーネント、
素敵な素敵なウィジェットのように、着色されました ボタン、ラベル、およびテーブル、
そしてすべて、ブートストラップを使用。
だから我々は、すべてに渡って行くことができれば あなただけのプルアップCodePen。
それはこのように少しになります。
それは皆のためにこのように見えますか?
>> 聴衆:はい。
>> ネールMEHTA:あなたがリモートであれば、それを 同様に、次のようになります。
そうでない場合、私はすぐにどのようにあなたが表示されます あなたはそれが次のようになり得ることができます
映像の未来一部インチ
そこでここでは書かれています 非常に基本的なHTML、
あなたがきたようなもののような 授業で使ってき。
これは非常に基本的です。
フリルがない。ヒダが無い。
そして、我々はいくつかのものを持っています。
我々は非常に設計しました、 非常に基本的な起動
Yalpを呼びます!あなたができると エリアにレストランを見つけ、
そして、レビューを検索し、 それらのすべての指示。
それは非常に良いコンセプトです。
これは、以前に行われたことはないです。
それはあまりにも、非常にユニークな名前です。
>> それでは、私たちがしようとするつもりです 行うには所有者を助けるあります
Yalpの!彼のウェブサイトを作ります 本当に、本当にクールに見えます。
だから、との所有者を開始します Yalp!少し検索をしました
ボックス、および少しボタン、 そして多分少し
以下のためのハイライト領域 その後、レストランを強調し、
他のレストランのリスト エリア内であること。
だから我々はちょうど通過することができます HTMLコード本当に速いです。
あなたは、HTMLとみんなはどのように快適ですか!
私たちは少しやりました クラスでも、セクションと。
まともな?
>> だから要約として、 HTMLはすべて持っていることについてです
教えタグまたは要素 コンピュータがどのようにWebページをレイアウトします。
したがって、このh1はようこそ、H1を開始here-- Yalpに!コンピュータに指示h1--終わり、
大きなヘッダを描くこと Yalpへようこそ、と言います!
そこに内部。
また、フォームを持っています。
我々は、このようなテキスト入力を入力することができ、 テキストボックスとしてレンダリングされます
あなたがで書きます。
また、ボタンがあります。
あなたは素晴らしい、クリック可能なボタンを取得します。
それは右の何もしません 今、あなたがボタンを取得します。
あなたはに、div要素、または仕切りを持つことができます 様々なグループにあなたのページを破ります。
>> あなたは段落を持つことができ、 あなたはボタンがあります。
あなたは段落を持っている場合は、 あなたは、ULを順不同リストを持っています、
その、リチウムの内部リスト。
したがって、これらは、非常に基本的なものです Webページのビルディング・ブロック。
そして実際、かなり あなたが見るすべてのウェブサイト
内蔵されようとしています これらの同じツールを使用して。
もちろん、彼らがすべてではないん 私たちがしているので、この悪いを見ます
少しそれをスパイスに行きます。
それではにこの退屈な古いHTMLとスタートをしましょう 美しいサイトに変換し
私達はちょうど数分前に見たこと。
>> それでは、非常に簡単なオフを開始しましょう。
だから我々はここで、このボタンを持っています。
我々が見たように、ブートストラップでは、我々はできます 素晴らしい、美しい、ブルーのボタンがあります。
そして、それはないカスタムCSSをすることによって行われています。
ここにはカスタムCSSはありません。
それはクラスを追加することによって行うの あなたのHTML要素に。
あなたは、クラス、またはのhrefをしようとした場合、または アンカー、またはinputs--の型= "テキスト"
HTML要素は、これらの属性を持つことができます。
彼らは余分な情報を持つことができます あなたがそれらを与えるかもしれません。
>> だから、この場合には、 クラスは、属性です。
だから、=、ボタンクラスを記述します。 文字列の内部の何か。
そして、その属性が教えてくれます コンピュータは、これは、古いボタンのいずれかではありません。
それはであるボタンです ボタンのこのクラス。
だからブートストラップ、あなたがそれを与える場合 あなたの要素に特定のスタイル、
それはそれを特定の方法で描画します。
だから私は、BTN-主要BTN」の書き込み。
BTNは、ボタンの略語です。
あなたは今ではわかります 私の醜いボタンがオン
素晴らしい、美しい、青いボタンに。
我々はそれをクリックすると、それは非常に良さそうに見えます。
>> そして、私たちが持っている何が起こるかであります BTNクラスとBTN-主要クラス
私たちの要素に。
ブートストラップは、私は、[OK]を、で行くと言うだろう この2つのクラスがあることを知っています。
これら二つを持つすべての要素 クラスは次のように描画する必要があります。
だから、あなたがどのように取り付けるのコアです ブートストラップの要素にスタイル。
あなたがちょうどそれらにクラスを添付し、 それが適当と考える方法でそれを重み付けします。
そこでここでは別の例です。
入力では、追加することができます クラス= "フォームコントロール」。
どこにあなたと私はすぐに表示されます 何のクラスを見つけることができます
要素の種類ごとの利用可能です。
しかし、クラス、我々だけ 追加されました、素敵な、丸みを帯びた角を持っています
それは素敵なパディングを持って、それが持っています それにはすてきな、青い輝き。
>> また、このフォームに行くことができます。
そして、クラス= "フォームインライン」、になります 私たちのフォーム、ご想像の通り、インライン。
だから、もう少し見ています 我々はすでに前に持っていたものなどがあります。
だから我々はの残りの部分をスタイルするために行く前に、 ページ、私たちについてのご質問
やりましたか?
我々だけで付属のクラス 私たちの様々な要素に。
どのようにすることができますそして、私は後でお見せしましょう クラスが用意されていかを把握。
私たちは、そのクラスを添付しました 特定のスタイルを持っています。
そして、それはブラウザに指示 使用してページをレイアウトする方法
ブートストラップの提供スタイル。
観客からのご質問?
>> 良い今のところ?
クール。
課題の多く ブートストラップだけであると
コンポーネントが何であるかを知ること 利用可能とどのようにそれらを使用しています。
そして、それはすべての学習されます 経験を持つとも
ドキュメントを読むを通じて、 これは、我々はすぐに話でしょう。
だから我々は、このdiv要素を持っています。
それはちょうど退屈な、古い物です。
私たちは何とかそれを強調したいです。
そこでブートストラップでは、あります 使用可能なコンポーネントがたくさん。
そして、これはgetbootstrap.comです。
これは非常に便利なリファレンスです。
それは物事が含まれていますlike-- ここでは、ボタン操作を行う方法です。
そして、あなたはあなたができるナビゲーションバーを行うことができます ラベルには、プログレスバーができ、
あなたは、リストのグループを行うことができます。
基本的には、すべての種類です あなたのWebページを参照してください可能性があります。
>> ここでは、今みます一つです。
これは、パネルと呼ばれています。
あなたは今までのGoogleを使用している場合 今、彼らはカードを持っています。
または、任意のAndroidデバイスは、カードを持っています。
彼らは、小さな白い箱を持っています それはそれの内側のものを持っています。
だから、我々は試してみて、やろうとしています 自分はここのものを使用していること
パネルと呼ばれます。
だから我々は、クラスを添付する場合は= "パネル 私たちの外側のdivにパネルデフォルト」、
その後、我々は=のdivクラスを添付 - レッツ ただ、このマニュアルを参照してください。
divクラス= "パネルの見出し」と その後のdivクラス= "パネル・ボディ」。
ここでも、心配しないでください このコードを記憶します。
これは、オンラインで利用可能になります。
>> だから我々はこれをしなかったし、今私たちの退屈な、古いです divがこの素敵な、小さなカードになりました。
それは、素敵なパディングを持っています 国境を接している、それが際立っています
ページの残りの部分から、 これはかなりクールです。
それでは、中に入ってみましょう、これは取得変更 見栄えする方向ボタンを押します。
聴衆の中に誰が教えたいです 私私はボタンに何ができますか
それはブートストラップを使用して、素敵に見えるようにするには?
はい?
>> 観客:我々は、クラスを追加することができます。
そして、我々は= "BTN BTN-プライマリ」クラスを行うことができます。
ネールMEHTA:はい。
他の束があります buttons--のための利用可能な色
か何かのために、そのことについては。
私たちは、BTN-危険を行い、それを赤にすることができます。
そうしよう。
我々は、それが緑にするBTN-成功を行うことができます。
束がありますBTN-info--我々は行うことができます あなたに利用可能なものの。
だから私は今あなたのために少し課題があります。
だから、もう一つあります 私は未スタイルを残していること。
このトップレストラン。
>> そして、私たちはものを使用したいです それのスタイルをリストグループと呼ばれます。
だから、あなたに私の課題であります getbootstrap.com--に進みます
私はここでそれをプルアップします。
getboostrap.com。
見つけ、getbootstrap.comに行きます 彼らはリストのグループの上に進んでください。
そして、あなたはここに表示されます たとえば、右のクラス
あなたが作るために使用することができます これらの素敵なリストグループに一覧表示されます。
これらは、例を働いています コード例のもの
コードあなたは、どのようなHTMLコードを使用します あなたが使用し、どのようなことを出力します。
>> だから私の挑戦はyou--します getbootstrap.comに行きます、
あなたはここや自宅にいるかどうか、および 試してみて、このULにスタイルを追加します
それは素敵に見えるようにします。
そして、リストのグループのスタイルを使用しています。
あなたは、数分を取りたいです そして、、ドキュメントを検索します
この自分自身を試してみてください!
あなたがWeb開発をやっているようだから、 あなたは多くの作業を実現します
読書しようとしています このドキュメント。
だから私はそれを理解するために良いことだと思います ドキュメントの読み方と、
どのようにどこに何があるかを把握するために、 どのようなコードは、使用可能な例は、
何を活用することができます。
>> だからもう一度、getbootstrap.com、 [コンポーネント]タブに移動し、
[グループの一覧を表示するために下にスクロールします。
そして、あなたはそのコードの例を参照してくださいよ あなたは、HTMLがそれを適合させるために使用することができます。
だから、数分かかるし、 試してみて、それを自分で探ります、
あなたはここか自宅にいるかどうか。
あなたが自宅にいる場合は、ビデオを一時停止、 多分、そしてそれを自分で試してみてください。
あなたがここにいる場合は、私たちに行けば ページを更新する場合、website--
あなたはそこでこれを見ることができます。
これは非常に同じコードだけです すぐそこに新しいスタイルを追加。
だから、数分かかります。
あなたが良い感じているとき、私を知ってみましょう それか時についてあなたは完全に失われています。
いいね?
クール。
クイックさておきあなたのそれらのために 自宅で、私たちは待っている間に、
あなたはGitHubのサイトに行けば 私はカップルのスライド前に我慢することを、
ビデオの先頭に向かって、 私はGitHubのレポ、リポジトリを持って、
この講演のために。
私たちはできるでしょうこれらのすべてのコード例 右ここに格納されているの話。
だから、この-1.htmlに挑戦する行けば 我々が今持っているすべてのコードです
私たちのCodePenに。
だから、あなただけ先に行くと、コピーすることができます これは、あなた自身のCodePenに貼り付けます。
そしてそのように、あなたはついていくことができます 私たちはここで何をやっていると。
だから、オープンこのページを持っているだけでなく、我々 セミナーの残りの部分を通過します。
繰り返しますが、あなたはそれが何のように見えるしたいです 画面の一番下にダウンを参照してください。
そこ。
良い感じですか?
固体。
のがの皆を待ってみましょう 彼らがやっていることで仕上げます。
>> はい?
>> 観客は:私が望んでいたと仮定 home--でブートストラップを使用するには
ネールMEHTA:はい。
観客は:私は、ウェブサイト上で、参照してください。 ページをはじめ。
彼らは私に選択肢を与えます ブートストラップ、ソースコード、またはサス。
私はこれらのどれをしたいですか?
>> ネールMEHTA:はい。
そこで問題は、どのように入手できますかさ 自分でブートストラップ使い始めましたか?
それだけではどうなります 魔法の右ここで働きます。
だから、我々は時間を持っている場合 セミナーの最後に、
私はどのようにすることができますを紹介 自分のWebページにそれを得ます。
ここでのように、私は実際にしました そのいくつかの設定に入れます
自動的にそれを持っています ロード、私はよ
あなたからそれを行うことを示しています 自分のWebページの傷。
>> 観客は:ありがとうございます。
>> ネールMEHTA:はい。
良い質問。
良い感じですか?
良い感じですか?
クール。
だから、誰が、彼らが作った方法を教えたいです この事は素晴らしいとBoostrappy見えますか?
我々は、ULに追加する最初のクラスは何ですか?
対象:クラス= "リストグループ」。
ネールMEHTA:はい。リストグループ。
そして、我々は、LISに何を添付していますか?
他の誰か?
聴衆:そして、後 その、クラス= "リストグループ項目」。
>> ネールMEHTA:はい。
>> 聴衆:そして、それはです 次のいずれかの同じ。
>> ネールMEHTA:李クラス= "リストグループ項目」。
そこに行きます。
私たちは素敵なリスト基を有していても、 我々は予想していただけのよう。
だから、そこに行きます。
10分では、我々が行いました この退屈な、古いYalp!ページ
素敵でプロフェッショナルな外観。
そして、それはほんの始まりです。
だから今、あなたが感じています それについての良い、してみましょう
ただ先に行くと話 カップルより多くのコンポーネントこと
あなたのように便利になるかもしれません あなたの冒険を通して行きます。
>> もちろん、ここでは多くのものがあります。
そして今、あなたが学んだこと リスト・グループを実行する方法を、
あなたはかなり教えることができます 自分はどのようにこれらのいずれかを実行します。
しかし、もちろん、ちょうど試してみましょう そして、もっと自分自身をカップルを行います
ちょうどあなたがのための感触をつかみます どのようにあなたがそれらを使用することができます。
私は行くつもりです ここで、この例に。
再び私はちょうど貼り付け、コード ここで右ここにあります。
だから、それをプルアップして自由に感じます。
>> だから我々はすでにを通じて行ってきました これらの例のカップル。
だから我々は我々のボタンを持っています 既に実行する方法を見てきました。
我々は、ボタンを大きくすることができます。
ボタンでBTN-LG BTN、それが行きますclass-- そして、BTN-デフォルトでは、それが白になります。
だから、これは私達のボタンが大きくなります それはそうでないかもしれないより。
あなたが持っている場合は、便利になるかもしれません 大きなボタンか何かを提出します。
我々は、リストのグループの例を見ました 我々は、フォームの例を見ました。
>> 1つの非常に重要なのは、アイコンです。
アイコンは、あなたが追加するための方法です チェックチェックのような面白いもの、
マーク、またはプラス、または友人 アイコンやアイコンを再起動して、
あなたのWebアプリにまたは何でも。
だからもう一度、私たちここにあれば、 コンポーネント、glyphicons、
ブートストラップで使用可能なアイコンがあります。
徹底的ながあります ここにすべてのもののリスト。
だから例として、 それでは、試してみて、1を追加してみましょう。
>> だからFacebookのように、我々はしようとしているに 持っている友達にボタンを追加します。
それでは、最初のいくつかのスタイルを追加してみましょう。
ボタンクラスは、= "BTN-成功BTN」。
そして、そこに私達は行きます。
それでは、ここにアイコンを追加してみましょう。
何アイコン、あなたは思いますか、 ここに置くために意味をなさない可能性がありますか?
おそらく上の見てきました 一部のWebページまたは何、
しかし、そのアイコンの例は何ですか このボタンの内側にうまく行くかもしれませんか?
このビューを閲覧すること自由に感じ、 あなたは、任意のインスピレーションが必要な場合。
便利なのがたくさんあります ここで利用可能なもの。
はい?
>> 聴衆:たぶんglyphiconユーザー1?
ネールMEHTA:[OK]をクリックします。
これです。
これはかなり良いです。
はい。
Facebook上で、私はそれを考えます 少しそのようになります。
だからここに私達は行く方法です 私達のページにアイコンを追加します。
私達はちょうどspan--スパンがある持っています 何かのために中性の容器。
divが何かのコンテナです、 スパンを別の容器です。
div要素は、改行を持っています 彼らの周り、スパンはしないでください。
だから、さまざまな方法があります ジェネリックコンテナを有します。
それは意味がありませんようにそれを置くために 段落か何かの内部。
私たちはそれを置くようになってきました しかし、何かの内側、
私たちはただスパンの内側に置きます。
だからスパンクラス= glyphicon glyphiconユーザー」に近いスパン。
そして、我々は今持っています ボタン内部のアイコン。
>> だから、完全にとは違って見えるものではありません 何をfacebook.comに表示される場合があります。
そしてそれは、これらのことができていることをうれしいです 実際にあなたがしたい任意の場所に配置すること。
あなたのヘッダーバーで、 あなたのリストのグループインチ
なんでも。
それはする必要はありません ボタンの内部。
例として、私ができるように、 ここで同じクラスを置きます。
「glyphiconのglyphiconユーザー」。
そして、それはちょうど同じ表示されます。
したがって、これらは、あなたがスパンを使用することができますicons-- クラス= "glyphiconのglyphicon-何でも」。
そして、それはあなたが追加できるようになります あなたが好きな場所のアイコン。
そしてアイコンが非常に重要です ウェブサイトの外観を作るの一部
専門家とよくやりました。
だから、無理が、それはだはありません 多くの場合、良いことは知っています。
>> パネル、再び。
私は総集編として再度これをやります 彼らは一種の関与しているため。
あなたはその中に気付くでしょう あなたの通常のHTMLを回します
ブートストラップ・afiedへサイト サイト、あなたが持っているでしょう
ウェブサイトに余分な構造を追加します。
たとえば、私たちは余分な持っています ちょうどそれらのために、ここでのdiv
パネルを作るために必要とされます。
だから心の中でそれを維持すること あなたは、余分な構造を持っている必要があります。
だから、「パネルのpanel-default」。
多分それは、パネル・ヘッダーです。
私はそれがパネルの見出しだと思います。
はい。
そうしよう。
だから、もう一度、私たちのパネルがあります。
>> もう一つは、我々 、まだテーブルをカバーしていませんでした。
醜いのデフォルトの外観の種類によってテーブル、。
このような。
しかし、テーブルは、もちろん、あります 非常に重要な部分
あなたがWeb開発に何をするかの。
Pset7で、例えば、CS50 すぐに出てくる金融、
あなたは、テーブルの多くを使用します。
そして、ウェブDEVの多くは、たくさん使います 情報を表示するテーブルの、
株式、またはスコア、または何でものような。
>> だから、テーブルをスタイリングすることは実際には非常に簡単です。
あなたは、あなたのテーブルにテーブルクラスを追加します。
そして、私はそれはかなり良さそうに見え、あえて言います。
あなたは余分なことを行うことができます、 「表table-ストライプ」などがあります。
そして、あなたはここに結果が表示されます。
あなたは、テーブル縁取りを行うことができます。
あなたができる多くのオプションがあります。
しかし、基本的には、追加 テーブル、テーブルクラス、
あなたのテーブルはかなりいいに見えるようになります。
だから、の簡単な要約です より重要なスタイルの一部
コンポーネントあなたがよ ブートストラップのために使用する必要があります。
だから私はラップと思います 私たちの美しい部分アップ。
方法については、今ご質問 あなたのウェブサイトは美しくするには?
あなたはこれらを使用することができますどのように あなたの利点へのコンポーネント?
良い感じですか?
はい?
聴衆:たぶんこの 愚かな質問です、
しかし、あなたはウィキペディアにブートストラップを使用することができますか?
あなたはウィキペディアのページを編集している場合は?
ネールMEHTA:はい。
そこで問題は、私は、でした Wikipediaのページを編集し、
私はそこでのブートストラップのスタイルを含めることができますか?
>> 聴衆:はい。
>> ネールMEHTA:それでブートストラップがあります 基本的には大きなCSSスタイルシート。
CSSスタイルシートだけで、いつでも言います 私はこのクラスを持って、これらのスタイルを添付してください。
ブートストラップ用のCSSスタイルシートだから .btnのようなものになるだろう、
ボタンクラスは、のようになります 丸みを帯びた角のボーダーまたは何でも。
したがって、基本的に、それをブートストラップ クラスの束とスタイルの束
それらのクラスに指定されました。
だから、限り、あなたはそのCSSを持っているとして、 あなたのページのルールのリスト、
あなたは、ブートストラップのスタイルを取得します。
それは、もちろん、次第であります あなたのページにブートストラップスタイルを持ちます
で開始します。
>> だからウィキペディアで、 あなたはおそらくできませんでした
ウィキペディアので、それを行います その中にブートストラップを持っていません。
しかし、それはブートストラップを持っていた場合、 あなたはおそらくそれを行うことができます。
あなたが望むなら、あなたは可能性 これを含むが、それはかもしれません
ページの既存のレイアウトを破ります。
しかし、非常に良い質問。
あなたは、ブートストラップを使用することができます それが含まれているところはどこでも、
それがデフォルトで組み込まれていません。
>> 観客は:ありがとうございます。
>> ネールMEHTA:はい。
これ以上の質問?
はい。
あなたはここか自宅にいるかどうかそう、 ただgetboostrap.com--再び覚えて、
getboostrap.com--はあなたの友達です。
あなたが使用しているときはいつでも ブートストラップは、これはあなたを与えるだろう
取得する方法について 開始、コンポーネントを使用する方法について説明します。
いくつかのクールなJavaScriptがあります 私たちはこっちに行くことはありませんプラグイン、
しかし、彼らは同様にチェックアウトする価値です。
だから、これはあなたの友達です。
これは、取得することだけが重要です これを使用する方法に使用されます。
>> それでは、について少しチャットしましょう 応答のウェブサイトを作ります。
私が前に言ったように、人々が使用します 自分のノートパソコンは、彼らが自分の携帯電話を使用しています。
そして、あなたは十分に想像の通り、これは それよりも非常に異なる画面サイズ。
だから同じWebサイト それは私の携帯電話によさそうです
見栄えのするつもりはありません、 必ずしも、コンピュータ上で。
だから、あなたがしなければならないものです あなたのウェブサイトが適応します。
それは、様々な対応しています 画面は、それが上だとサイズ。
>> それは私が私が知ってる、と言って持っています コンピュータ、大きなラップトップは、私が展開する必要があります。
私は電話でんだけど、私は縮小する必要があります。
それでブートストラップは、いくつかを提供します これを行うには非常に、非常に便利なツール。
そこでブートストラップみましょうあなたのブレーク 12列にウェブサイト。
あなたは行を作成し、12列を持つことができます。
そして、あなたは分割することができ それらは、しかし、あなたが欲しいです。
あなたは1、大きなものを持つことができ、 これは12列幅です。
次の2つのものを持っていることができます 6それぞれであること。
あなたは、4だ一つのことを行うことができます 2の1、または6です1。
あなたは3、3、3、3を行うことができます。
あなたは何でも行うことができます あなたが望む内訳。
>> だから、多分あなたのWebページが持っている必要があります 第1幅のコラムを残しました。
だから、4つの列になります 広く、ページの残りの部分
広い8列になります。
だから、これは一例です。
別の例をプルアップしてみましょう。
>> 観客は:常にそれをしません でも分割する必要がありますか?
それが7、5分割していませんか?
>> ネールMEHTA:はい。
これは、7、5である可能性があります。
はい。
限り、それは12に追加するように、それは大丈夫です。
それでは、ここに戻って行きましょう。
再び、コード ここでは、ここにも利用可能です
応答例の下で。
だから、僕はいくつかのプルアップ ここでの例応答コード。
だから、使用してこれを行います 行というもの。
行は、ちょうど別のクラスです。
それはあなたにあなたが追加し、別のスタイルです それらに彼らの独自のコンポーネントを作成するdiv要素。
>> ですから、DIV、言います クラス= "行"は、行を作ります
自分自身にスペースの12列を得ました。
そして、あなたはその内の列を置きます。
そこでここでは、COL-XS-6。
XS心配しないでください。
私たちは、秒に約話しましょう。
しかし、基本的に、我々は1を持っています 6広いもの。
我々は、それが残って呼び出します。
そして、そのためには、ここで左のボックスです。
私たちは、ある一つのことを持っています ワイド12列の6。
そして、その一つが右側にあります。
>> よくだけの作りを与えます あなたのdivが灰色それを埋めます。
だから、私たちができるのと同じです 彼らは明確なていることを参照してください。
ので、この最初の例。
それはどのようにあなたの非常に単純な例です ここにあなたの行と列を使用します。
あなたは、クラス= "行"を使用して行を定義します。
それから、あなたは、クラス= "COL-XS-6」を行うのですか 残りの半分を行うには半分、「COL-XS-6」。
ここでは、より複雑な例です。
タイニーを見てみましょう、 巨大な、残り1。
>> 私たちは、小さな2列がワイドにすることができ、 我々は広い巨大な6つの列を作ることができ、
残り4つの列広いです。
それは12まで追加されます。
だからこれらのスパニング終わります ページの幅。
繰り返しますが、私たちは外の行を持っています。
その後、我々はのdivクラス= "COL-XS-2」を持っています そしてその後6、及びその後4。
そして、それは提供します 私達のための構造。
そして、私たちは何でも置くことができます いったい私たちはここで内部たいです。
代わりに小型の、我々はボタンを置くことができます。
ボタンクラスは、= "BTN-主要BTN」。
そしてそう私達のボタンことに気付きます すべての幅を取りません、
しかし、少なくともそれは、制限さです その多くのスペースに。
>> だから、すべてが順調と良いです。
だから我々は今、私たちのウェブを破ることができます チャンク、幅賢明にページ。
私たちは左を持つようにしたいと言うことができます 列、右の列、など。
しかし、我々は終わっ行っていません どのようにあなたはそれが応答します。
そしてそうブートストラップのは、同様にそれを行うことができます。
これは、ブレークポイントと呼ばれるこれらのものを持っています。
だから、かどうかを知る方法があります あなたがタブレットにしている、ラップトップにしています、
あなたは携帯電話の横にしています、 または、垂直電話にしています。
これは、画面サイズを知っています。
そして、4 categories--にこれを壊します 通常、ノートパソコンで大規模またはLG、。
タブレットであるMDや媒体。
SM、小さな。
またはxs、小額の追加。
だから、あなたが指定した場合 列、あなたが言います、
それは6つの列幅が必要です 余分な小さなデバイス上。
我々はCOL-XS-6をした理由です。
私たちは、それが必要と言っています 12列の6幅広
余分な小さなデバイス上。
それは何でも大きいですなら、私たちはよ 余分な小さなサイズを使用するデフォルト。
それはより大きなものなら 余分な小さな、それは6広いことでしょう。
そして、私たちは利用することができます 私たちの列のようにするために、これらの
異なる量のを取ります 画面サイズに基づいて列。
それでは、この応答リサイズに行きましょう。
だから我々は我々の列を持っています。
そして、それは「COL-LG-6 COL-XS-12」と言います。
だから、あなたが知っていることを与えられました これまでのところ、あなたは何をすべきか
に起こっていると思います 大画面で起こりますか?
まあ、それは一種のです 道を与えられたが、何をすべきか
あなたはそれが見えるだろうと思います 大画面で好きですか?
それはなぜですか?
>> 観客:それはということです 大画面で、それはです
だけ取るつもり 完全な空間の一部?
それの半分のように、私は推測?
>> ネールMEHTA:はい。
>> 聴衆:小さい上 画面、それが起こっています
画面全体を取るために、12。
ネールMEHTA:はい。
右。
そこで、一例として、してみましょう ちょうどここに見下ろします。
はい。
LGは何にかそこら bigger--ので、私のコンピュータが起こります
それはだからLGします かなりそれが行いますwide--
並んでそれが側にはCOL-LG-6だから。
それは大規模な上だから、それはそれを作るそう 6列、幅6列広いです。
のは、私とどうなるか見てみましょう 小さい方にこれを行います。
私はちょうど非フルスクリーンにこれをつもりです。
そして、私は、画面を縮小するつもりです。
私は、画面を縮小しようとし、それです 私は小さなデバイスの午前のように見えます。
だから私はこのようにそれを縮小するつもりです。
>> 出来上がり。
現在では、積層されています 今私たちが行っているため、
大to--からこれはおそらくです 余分な小さな画面サイズ。
そして今、それは[OK]を、私たちはいないよ、と言います 大規模で、私たちは余分な小さな土地にしています。
だから我々は使用するつもり 余分な小型サイズ。
そして、我々はXS-12、XS-12になるだろう。
だから、積層することになるだろう。
そして、ちょうどがあることに気付きます ブレークポイントというもの。
ブレークポイントはどこにあります あなたが移行しました
余分な小から小へ、 大小規模、というように。
>> だから私はこれをスライドさせていることに気付きます うち、最終的に、あなたがポイントになるでしょう
どこに彼らが横並びになるようにジャンプします。
そこに行きます。
だから、すぐそこにブレークポイントがあります。
だから我々はそれをさらに複雑にすることができます。
今、私たちは言うことができ、これらの 物事は、4つの幅が必要です。
それは彼らが必要であり、 約三分の取ります
非常に大規模なデバイス上で音声の。
媒体装置で、それは取る必要があります 画面の半分までには、MD-6ているため。
非常に小さなデバイスで、 それは12を取る必要があります。
そして、これはかなり自然に見えます。
ちょうど自分自身のためにこれを試してみましょう。
>> だから、大画面で、彼らは4広いです。
それを少し縮小します。
そして、彼らは現在、6広いです。
だから、これは6、6、6です。
さらに、それを縮小 彼らは完全にスタックされます。
これは、例えば、理にかなっています あなたは、ニュースのカードのようなカードを持っています
例えば、WHERE それは、非常に大画面でです
あなたが並んで、いくつかの側面を持っている場合、それは大丈夫です 彼らはすべての十分な部屋を得るからです。
しかし、彼らは十分な余裕を持っている必要があります。
だから、小さい画面上で、 あなたはそれらを与えたいと思います
ページの比例より多くの部屋、。
>> 現実世界の例として、だから、 我々はツイッターを持っているとしましょう。
そして、私たちはそのように、テキストボックスを持っています あなたが側にツイートすることができます。
そして、我々はトレンドのリストを持っています 右側のトピック。
だから、大画面で、我々がすべき 彼らは並んでも持っています、
あなたはガラスでそれらを見ることができます。
しかし、より小さな画面上で、 我々は、12と12を行う必要があり、
そのようにトレンドトピック つぶやき領域の下にあります。
つぶやき領域であるので 主なもの、小さな画面上で、
トレンドトピックはしないでください 問題はかなり同じくらい。
そして、私たちはそのように、右下のそれらを置きます 彼らは両方の十分なスペースを得ることができること。
これまでに意味をなさない?
>> 聴衆:はい。
>> ネールMEHTA:固体。
だから、それは私がここに持っているすべての例です。
それでは、試してみて、挑戦をしましょう。
だから、再び、これはのための課題、2.htmlです 自宅に沿って、次のあなたのそれら。
だから、私の相棒、Mark Zuckerbergが、 先日私のところに来ました。
そして彼は私が持っている、ネール、のようなものです ウェブデザインでかなり良い頂いております。
私は、HTMLを行うことができます。
私は、この小さなをしました フェイスブックに新しい編集。
私はどのようにするための新しいアイデアを持っています 私たちはFacebookを利用してスタイルする必要があります。
そして、ここにあります。
ここ。
ここではいくつかのサンプルコードです。
だから、それがFancybookと呼ばれています。
>> 我々はいくつかのステータスの更新を持っています。
私たちは、ニモ、マイクKosowskiを持っています ***-- 3つのステータスが更新されます。
そして、我々は、のリストを持っています 右のそれ以下のオンラインの友人。
そこで彼は、彼の宿題をやっています。
彼はについて少し知っています ブートストラップ、彼はリストビューを作られています、
彼は、HTMLの少しを行っています。
そこで彼は、Webページを持っています。
しかし、彼はネール、のようなものだ、私はしないでください 全く応答設計を理解しています。
あなたは、任意の専門家を持っていない人 それを私に助けることができますか?
そして幸いにも、あなたは今あります 応答デザインの専門家。
>> 彼ように彼が私に言ったことでした Fancybookは次のようになりたいと考えています。
非常に小さなデバイスで、 携帯電話のように、すべてのもの
ここでのように、積層されるべきです。
だから、タイムラインを持っています 、先行トップアップした後、
お持ちください 一番下のチャットバー。
しかし、錠剤または媒体上 デバイスは、それが半分ずつにする必要があり、
タイムラインのようでなければなりません 半分とチャット友達のリスト
残りの半分にする必要があります。
>> そしてラップトップで、タイムライン 4分の3を取る必要があります
して、チャットヘッジをすべき 別の四分の一を占めます。
そして彼は、私はこれを持って、ネール、のようなものです ここでのコードが、それが応答しないのです。
それはこのように動作する必要があります。
あなたにだから私の挑戦 このコードを与えられていますhere--
あなたをリフレッシュした場合 CodePensは、あなたはこれを参照してくださいよ。
それとも、ただのコードを貼り付けた場合 チャレンジ2に、あなたはこれを参照してくださいよ。
>> ここでは、この例のコードです。
あなたはいくつかのXXXSが表示されます。
私はあなたがそのようなことを、XXXSを変更したいです タイムラインや友人のリスト
ここでこれらの仕様に従っています。
何を心配しないでください 今のタイムラインの内側。
私たちは、次のステップでそれを取得します。
しかし今のところ、我々が得る場合を見てみましょう これらの事は、このようにそれを分割します。
だから、意味を成しているのでしょうか?
だから、あなたが自宅にいる場合は、 ビデオを一時停止してみてください
あなたのWebページを作成します このような応答を見てください。
あなたがここにいる場合は、取り 2個、3分など。
隣人とのチャットしてお気軽に、 そして、してみてください、と氏はザッカーバーグのを修正
応答設計問題。
ご質問があれば、 私に知らせて自由に感じます。
良い感じですか?
完了?
ニース。
>> 聴衆:[聞こえません]。
ネールMEHTA:何?
>> 聴衆:私は良いですよ。
>> ネールMEHTA:ああ、良いです。
ニース。
聴衆:についての事 、それはブートストラップ12であります
12として指定された画面スペースを扱います その後、全体のユニットとはそれをアップ分割しますか?
どのように このため、比例動作しますか?
>> ネールMEHTA:はい。
そこで問題は、どのように 比例しません
右、ブートストラップのために働きますか?
>> 聴衆:はい。
ネールMEHTA:だからいつでも あなたはdivのクラス= "行"を持って、
どんなに大画面であり、 ブートストラップは、あなたに12単位を与えます
同じサイズの そのくらいのサイズを取ります。
だから、COL 1に、それは常に8.33パーセントです 画面の大きさの、
それはこの広いですか またはそれはこの広いです。
だから、もちろん、上の小さいです 画面には、各列が小さくなります。
あなたはまだ12列を持っています 広い、それは小さいです。
だから、確認するのはあなた次第です 物事をより列を取ること、
比例、補償すること 空間の不足のため。
それは理にかなっていますか?
>> 聴衆:はい。
ありがとう。
ネールMEHTA:良い質問。
聴衆:大で 画面、あなたが持つことができます
タイムラインは、4分の3を取りますか?
>> ネールMEHTA:はい。
ネールMEHTA:どのように人が感じていますか?
良い?
クール。
それでは、戻ってきてみましょう。
そして、試してみましょうこの部分を修正 氏ザッカーバーグのウェブサイト。
だから、タイムラインはで、ここにあります トップ、友人のリスト
一番下にあります。
そして、私たちはただ割り当てる必要があります 比例サイジングの列、
これらの各インチ
したがって、この最初の***はタイムラインのためです。
私たちはここで何をクラスに入れますか?
あなたたちはここで何を入れたのですか?
だから、必要があり、大画面で、覚えています 幅の四分の三を取ります。
だからどのようなスタイルはあなたにそれを与えるだろうか?
大画面で、3 幅の4分の3。
我々はそこにどのようなクラスを使用するのですか?
観客は:だから我々だけであることを行っています クラスの最初のインスタンスを編集します。
ネールMEHTA:今のところ。
はい。
>> 聴衆:私たちは、それぞれの編集をしていません タイムラインの個々の特徴?
ネールMEHTA:ない今、少なくとも。
したがって、この全体のことは、ブロックです。
私達はちょうど変更しています ブロックの設計。
そこでここでは、COL-LG-9をください、それはだから 大画面で12ワイドのうち9。
そして、メディア、画面上で、 私はどのように多くの列を取得する必要がありますか?
聴衆:それははずの 半分ずつになるように。
ネールMEHTA:右。
だから、どのように多くのですか?
>> 聴衆:だから6。
ネールMEHTA:6。
そして、余分な小さなは、それならばbe--必要があります 列の幅全体を占め、
それはどのように多くすべきですか?
AUDIENCE:12。
ネールMEHTA:12。
はい。
そして今、我々はに持っています この他のものに変更、
ので、スペースの残りの部分を占めています。
だから、COL-lg--
観客:それはに起こっています 画面全体を取りますか?
ネールMEHTA:それは四半期を占め 大型のデバイスの画面の、
私たちはここに示したよう。
>> 聴衆:三。
>> ネールMEHTA:三。
そしてCOL-MD-6は取ります スペースの残りの部分まで。
COL-XS-12。
だから今、私たちはタイムラインを持っています 四分の三を占め
大画面でのページの 、その後側の四分の一。
そして、画面サイズダウンの場合、 それに応じてサイズを変更する必要があります。
だから、今積み重ねています 非常に小さな画面上で。
そして、我々は少しそれをサイズアップすると、 彼らは正確に半分と半分にする必要があります。
だから我々は、これまで行ってきました。
とてもかっこいい
そして、私たちはしないだろう 課題の他の部分。
あなたは自分で行うことができます。
しかし、基本的に、あなたがする必要はあり 試してみて、これらの応答を行います
well--は、タイムラインを作るよう アイテム自体、応答。
だから今、私たちはを通じて行ってきました あなたが知る必要があるすべて
ブートストラップの応答側について。
応答に関するご質問 ブートストラップとデザイン
どのようにあなたはそれをやって行くのでしょうか?
はい?
>> 観客:それは場合にも、同様です 私たちはビデオを持っていました
私たちは制御したいです スケールで映像was--
ビデオのサイズ ノートパソコンから携帯電話に行きます。
ネールMEHTA:はい。
多かれ少なかれ。
あなたがビデオを伝える必要があるだろう それが与えられていますできるだけ多くの部屋を取ります、
これは時々少し面倒です。
しかし、核となるアイデアは同じです。
他のオブジェクトのようなビデオ、 ページ、ボタンまたは何のような、
限り、あなたが使用するように 列と行、
あなたはそれを与えることができます スペースの一定量。
そしてそれはそれを尊重することです取得 なぜならYouTubeのような別の質問
特定の好ましい大きさを持って埋め込みます。
しかし、理論的に 少なくとも、それが動作します。
クール?
>> 聴衆:私は、と仮定し、 イメージのために、あなたが実際に行います
の異なるバージョンを持っている必要があります 異なるサイズで同じ画像
iPhone対ラップトップのため?
うん質問は、私たちがする必要がありますか 同様に応答するイメージを持っています。
そして実際、あなたはそれを行うことができます。
私はそれは、CSSでだと思います。
しかし、ブートストラップが可能に あなたにもそれをします。
あなたは、応答性のイメージを持つことができます。
あなたはあなたのイメージのサイズを変更することができ ページの大きさに応じて。
そして、非常に新しいものがあります HTML5、HTMLの最新バージョン、
そして、CSS3、最新 CSSのバージョン、どの
あなたは別の画像を要求するようになります 画面サイズに基づいて、あなたがにいます。
通常、それだけには十分良いことです あなたのイメージは、単に縮小またはに成長してい
しかし、大きなそれはする必要があります。
しかし、あなたは、あなたが望むことができる場合 、32ずつ32を有するように
非常に小さな画面のため、および 大画面のための64で64、
して、選択的にそれらを提供しています。
あなたはそれを行うことができます。
これは、何人かの人々によって行われています。
それはまだかなり最先端です。
しかし、短い答え、応答images-- ブートストラップが一日保存することができます。
クール?
>> 観客は:ありがとうございます。
>> ネールMEHTA:だからしてみましょう 方法については、本当に速い話
独自のWebページでこれを取得します。
例えば、あなたが、あなたを作りたいとしましょう ブートストラップを使用して独自のウェブサイト。
そして、これだけだけしてみましょう 一緒に歩きます。
のは、あなただけにするとしましょう 通常のHTMLページ。
に沿って従ってお気軽に どのようなあなたの好きなエディタです。
だから我々はいくつかのHTMLページを持っています。
我々は行うことができます!DOCTYPE htmlのを。
これはまた、HTML、私たちのページです。
何も新しくない。
我々は前にこれをやりました。
そこでここでは、私たちのHTMLを持っており、 ここでは内部のものを置くことができます。
私達は私達のボタンを持つことができます。
そして、私は前に言ったように、この 必ずしも仕事に行くされていません。
なぜこれが動作しない可能性がありますか?
なぜ我々は我々を取得することはありません 素敵な、カラフルなボタン?
>> 観客:我々はそれをリンクしていなかったので、 ブートストラッププロジェクトまたはファイルに?
ネールMEHTA:はい。
正しい。
Bootstrap--からです ただ派手なCSSファイル。
それは、そのスタイルのシリーズです あなたの要素に接続されています。
ここでは、私達ことを指示しました これらのスタイルを使用します。
私はサイズがそれまで少しよ。
我々は、我々が使用したいことを指示しました これらのスタイルが、私たちは決して
スタイルが何であるか、それを語りました。
そして、それはどのようなあなたです 以前から質問がありました。
それがその答えです。
私たちはスタイルを取得する方法を見つける必要があります 何とかページに含めます。
それでブートストラップします それを行う方法を私たちに示しています。
>> だから、一番上に行けば ここでは、はじめに。
それをダウンロードするためのさまざまな方法があります。
これは必ずしも意味を成さない場合があります。
Bootstrap--これができるようになります あなたは、CSSファイル自体をつかみます。
そして、あなたはあなた自身のページにそれが含まれています。
必要に応じてソースコードです 自分でそれをハックします。
あなたは本当にこれを必要としません。
サスは言語であります それは、CSSにコンパイルされます。
プリプロセッサと考えてください。
PHPのような多くはのプリプロセッサです HTMLは、サスはCSSのプリプロセッサです。
だから、あなたはそれをしたい場合 その方法は、あなたがそれを行うことができます。
>> 最も簡単な方法は、CDNを使用しています またはコンテンツ配信ネットワーク。
それはそれだけのウェブサイトです ブートストラップのコピーを提供しています
へのあなたのための非常に高速 あなた自身のページにあります。
そこでここでは例です。
それはあなたにこのリンク要素を与えるでしょう。
link要素は、ブラウザに指示します ここに格納されているものは何でもファイル取ります
私たちのウェブページに含めます。
この場合には、です ブートストラップCSSファイル。
だから我々はそのURLをコピーし、またはちょうどよ そのテキストは、我々は内部にそれをスローされます
私たちの頭の。
>> そして、私はこのページを開始しません、 しかし、あなたは、これが機能することを信頼することができます。
リンクはあなたのCSSを取得します。
あなたにそれを含めます ページと、あなたはなるだろう
ブートストラップのすべてを使用することができます あなたが知っているクラスと愛。
あなたはそれをローカルに保存する場合と 独自のファイルシステム上にそれを持っています
代わりに移動することの インターネットはそれをつかむために、
あなたがしたい場合のように サイトをオフラインで使用、
あなたはダウンロードオプションを使用することができます。
しかし、ほとんどの部分は、使用して CDNはそのようので、かなり速いです、
それは同様にあなたのために更新保っています。
手動のいずれか、それを更新する必要があります。
理にかなって?
>> だから、ツールの多くは、これが組み込まれています デフォルトではインチあなたのPset7とPset8で、
私は、ブートストラップがあると信じて 自動的に含まれています。
そしてCodePenで、用 例えば、それは既にです
私ので、含ま 追加されたその設定を追加します。
だから、あなたは今まで周りを再生したい場合は それを、あなただけCodePenに行くことができ、
またはあなたのID、または何に行きます。
そして、あなたがすることができるかもしれません そこにアクセスブートストラップ、
しかし、それは常に構築されていません デフォルトでは、ウェブに、インチ
理にかなって?
>> はい。
ちょうど私たちが持っているrecap--として 5分のように左。
しかし、要約として、新しいWebページで、 あなたはこのようなブートストラップを含めることができます。
そして、あなた一度それが含まれています、 あなたはここにすべての楽しさのものを行うことができます。
あなたは上に行くことができ、あなただけ閲覧することができます CSSは、あなたはいくつかのクールなスタイルを追加することができ、
次のコンポーネントを持つことができ ボタンのような、
テーブル、リスト 我々が言及したアイテム。
いくつかのクールなJavaScriptのプラグインがあります、 これはあなたが探検することをお勧めします。
彼らはいくつかのクールを追加 Webページへのインタラクティビティ。
このようなモーダル対話を行います。
>> だから、いくつかの楽しいものがあります あなたは、ブートストラップで行うことができます。
だから、あなたに私のアドバイスは、先に行くされています そして独自のプロジェクトでそれを使用し、
指示に従ってください、私たち ただ、それを取得する方法のとおりにしました
ちょうどブートストラップ理由を読みます あなたは何をすべきかについての詳細を学びます。
そして、私たちは行ってきました 今日、オーバー、使用方法
ドキュメント、どのような建物 ブロックがあり、そしてそれは、概念的ですか。
だから今の私の課題であります ブートストラップを使用してウェブサイトを作ります。
ドキュメントに移動します。
そして、私たちがきたツールを使用します 試してみて、それらを解析するために、これまで学びました
それらを理解しています。
そして、それらのスタイルやツールを使用します あなたのウェブサイトにそちらを参照してください。
そして、それは、ただ大きいです 実験的なプロセス。
>> 特定のスタイルを試してみてください。
それは動作しますか?
んではないでしょうか?
一緒にものを入れてみてください。
何が起こるかを参照してください。
それは非常に自己です 案内され、検出プロセス。
しかし、今日、私たちが学んできました ブートストラップが何であるかの非常に基本的な?
なぜそれが動作しますか?
それがどのように動作しますか?
我々は、使用を開始するにはどうすればよいです それ、最初の場所で?
そして今、あなたがしていること そのこぶの上に、あなた
それを行うことができるはずです かなりスムーズに自分で。
>> だからもう一度、すべての 私たちがやったコードはここにあります。
だから、あなたがしたい場合 アップ時にブラシを取得するには、
以下のように、迅速なチートは何ですか すべてのスタイルのためのシート?
あなたはここで、このサンプルに行くことができます。
ここではいくつかの例のスタイルを持っています。
あなたは試してみたい場合 もう一度自分で課題、
あなたはここでそれを試すことができますし、 ソリューションをチェックしてください。
だから、このリンクになります スライドに含まれ、これは
もちろん、あなたに送信されます。
しかし、それはここまでもです。
あなたがしたい場合は、ビデオを一時停止することができます。
あなたが必要とするすべての情報はあります このサイトには、右ここになるだろう。
誰もが任意の質問を持っているのであれば、我々はできます 次のカップル分間それらを取ります。
それ以外の場合は、あなたのすべてに感謝 見ための非常に。