ブートストラップとは何ですか？
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
歴史
ブートストラップは、TwitterのMark OttoとJacob Thorntonによって開発されました。 Bootstrapは、2011年8月にGitHubでリリースされたオープンソース製品です。
この記事を書いて、この記事の次の内容を書きたいと思います。
1.ブートストラップの理解に基づいて、私は小さな要約をします。
2.主に私が望んでいた効果をどのように作ったかについて話すために、ブートストラップ（2）をゼロから学習する例については、UIとコードを美化し、最適化します。
3.釣り方を教えるよりも、釣り方を教える方が良いです。独自の例を使用して（あなたも初心者であり、書いたものが初心者に適している可能性があるため）、コード作成プロセスで遭遇した落とし穴と注意が必要なポイントについて話してください。
これ以上苦労せずに、始めましょう：
1.ブートストラップのちょっとした要約
Bootstrapの公式ドキュメント（http://v3.bootcss.com/）の説明に基づいて、BootstrapはCSSスタイル、コンポーネント、JavaScriptプラグインの3つの大きなブロックに分割されます。
まず第一に、ブートストラップがフレームワークであることは明らかです。つまり、他の人が車輪を作る場合は、自分で車輪を構築しないように直接使用できます。したがって、2つのポイントを明確にする必要があります。これらのホイールはどのようなホイールと使用するかです。
1。CSSスタイル：主にラスターシステムとブートストラップのグローバルスタイルを紹介します。クラスの値を設定することにより実装されます。
1.1グリッドシステム：
これにより、HTMLページ（http://v3.bootcss.com/css/#grid）のレイアウトを簡単に実装できます。
グリッドシステムは非常に重要だと思います。 HTMLページのレイアウトは重要で面倒なタスクであるためです（w3school http://www.w3school.com.cn/html/html/html_layout.aspのレイアウトの紹介を見ることができます。例のコードを見てください。
ラスターシステムはこれを大幅に簡素化しました。グリッドシステムに関する上記の接続を開くと、達成したい効果に従って、対応する値をHTML要素クラス属性に割り当てるだけが必要であることがわかります。また、異なる画面サイズのデバイスに異なる効果を設定することもできます。
1.2ブートストラップグローバルスタイル：
それが、ブートストラップが一般的に使用されるHTML要素（例：div、button、p、table、imgなど）の美しさです。 HTML要素のクラス属性に対応する値を割り当てることにより、目的の効果を得ることができます。
最も簡単な例を示しましょう。
上記の図に示すように、Bootstrapを使用すると、ボタン要素のクラス値を変更して、CSSファイルの変更や要素のスタイル値を埋め込むことなくボタンのサイズを変更できます。
2。コンポーネント：コンポーネントは、いくつかの要素（HTML要素とJavaScriptコード）をコンポーネントに組み合わせたブートストラップであり、多くの非常に優れた見栄えのある実用的なアイコンを提供すると思います。これらのコンポーネントは、基本的にHTML開発で一般的に使用されています。クラスの値を設定することにより実装されます。 （http://v3.bootcss.com/components/）
最も簡単な例を示しましょう。
上の図に示すように、ナビゲーション関数を実装する必要がある場合。 BooStrapで対応するコンポーネントを見つけ、あなた自身のニーズに応じて、対応するクラス、ULおよびLIの値を割り当てます。
3。JavaScriptプラグイン：BootstrapのJavaScriptプラグインは、一般的なWebインタラクション関数をカプセル化する「ホイール」だと思います。クラス属性とデータ属性を設定して、一般的に使用されるWebインタラクション関数を多くのJavaScriptコードを自分で作成することなく実装する必要があります。
まず第一に、小さなエピソードについて話しましょう。初心者は、「JavaScript」と「Java」には深いつながりがあると誤って考えるかもしれませんし、JavaScriptはJavaのバリアントであるとさえ考えるかもしれません。実際、そうではありません。 JavaScriptは、Netscapeがインターネット用に開発したスクリプト言語です。実際、その名は「Livescript」です。その後、NetscapeはSunと協力しました（つまり、Javaを発明した会社であり、後にOracleに買収されました）。当時、Java言語はピークに達し、非常に有名でした。乗車するために、その名前をJavaScriptに変更しました。何人かの人々が冗談を言ったので、「Java」と「JavaScript」の違いは、「Lei Feng」と「Lei Feng Tower」の違いと同じです。
トピックに戻ると、JavaScriptが存在してWebページの相互作用機能を提供することがわかります。したがって、bootsriptのリッチなJavaScriptプラグインは、「ホイールの作成」に集中することなく、一般的に使用されるWebインタラクション機能を便利に実装することができます。
上の図に示すように、BootstrapのCarouselプラグインを使用して（http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.htmlを使用して、公式のブートストラップドキュメントはここで中国語に翻訳されていませんが、Runoobで非常に詳細な中国語翻訳があります。多くのWebサイトが現在使用している画像Carousel機能を簡単に実装できます。ここでは、上記のリンクのチュートリアルに従って、対応するクラスと画像のSRC値を割り当てるだけで、データ値を設定する必要さえありません。
2.ゼロから学習ブートストラップ（2）の例については、UIとコードを美化して最適化します
次の図は、前のチュートリアルで達成された効果を示しています。
修正する必要がある次の欠点があることがわかります。
（1）特定のクラスメートをクリックして情報を表示すると、選択されていません。 （最初にクリックすると、選択された状態になりますが、それがボタンのクリック効果です。空白スペースをクリックすると、選択された状態が消えます）
（2）色は単調で、あまり美しくありません。
（3）レイアウトを調整する必要があります。情報ボックスは、情報が必要な場所であり、できるだけ大きくする必要があります。不要なボックスが表示されるときに非表示にするのが最善です。
（4）コードの場合、Bootstrap（2）のJavaScriptコードはゼロからHTMLページに記述されており、重複したコードセグメントがあります。重複コードセグメントは関数に書き込まれ、コードサイズを削減できます。コードを変更するとき、一度に1つの場所を探すことなく、対応する関数を直接変更することができます。 JavaScriptコードはJSファイルに書き込み、HTMLページとJavaScriptコードを分離できます。
技術的な選択（傾斜して言えば、既にBootstrapフレームワークにあるものを使用して、望ましい効果を実現する方法を考えることです）：
1.最初にレイアウトを調整し、情報ボックスとクラスボックスを一緒に調整し、上部にクラスボックスを表示します。
明らかに、情報ボックスがある場所にDIVとクラスボックスのDIVをDIVの同じ行に配置し、グリッドシステムに関連するクラス属性値「COL-MD」を変更するだけです。たとえば、2：1の比率を表示したい場合は、情報ボックスのクラス属性にはCOL-MD-8が必要ですが、クラスボックスはCOL-MD-4である必要があります。
フロントエンドがワンステップ開発になることは決してないことは注目に値します。多くの場合、初期コードは私たちが望む完全な結果ではなく、慎重に調整する必要があります。例として、誰もが自分で検索することを学び、継続的な調整を試みる必要があります（その後の調整は特定のプロセスで説明されません）：
コードを変更した後、提示される効果は次のとおりです。
明らかに、上の各線に1つのクラスのみが表示されますが、これは少しの宇宙の無駄です。以下の2つの部分は整列していません。
上記のdivコンポーネントのクラス属性の「BTN-Group-vertical」を削除し、JSコードのTMP_BUTTONのクラス属性にCOL-MD-6を追加します。さらに、これを設定した後、最初の行には2行目と比較して奇妙なインデンテーションがあることが観察されています。
この種の外観とレイアウトの変更がCSSに関連していることは間違いありません。この時点で、要素の特定のCSSを見ることができます。
例としてクロムを取ります：
この要素を右クリックして、検査を選択します。これは、レビューを意味します。右側のボックスに対応するコードがあります。比較を通じて、それがマージン左の問題であることがわかりました。このプロパティは、ブートストラップフレームワークのデフォルトであり、上部要素から継承されます。一部は-1px、一部は0pxです。たとえば、すべてが0pxに変更されます。
JSコードのTMP_BUTTONで、スタイル属性を変更し、「マージン左：0px;」を追加します。一部の人々は、フォントが中央を見るのが良くないと考えているので、テキストアライインを追加できます。左にテキストを設定して、左から開始します。
修正された効果：
2.折りたたみボタンを追加して、ユーザーがこのボタンを介してクラスボックスを非表示/開くことができるようにします。クラスメートをクリックして詳細情報を表示すると、情報ボックスが表示されるための多くのスペースを保存するために自動的に非表示になります。
フォールドボタンを追加するには、http：//www.runoob.com/bootstrap/bootstrap-collaps-plugin.htmlを参照できます。
さらに、折り畳みボタンに見栄えの良いアイコンを追加できます。チュートリアルhttp://v3.bootcss.com/components/#glyphiconsを参照することで簡単に実現できます。
クラスメートをクリックして詳細情報を表示すると、自動的に非表示になります。クラスメートボタンのクリックイベント、つまり対応するJSコードを変更する必要があります。
Bootstrap折りたたみプラグインの使用法を確認しましたhttp://www.runoob.com/boottrap/bootstrap-collaps-plugin.html（これはより良いです、公式部分はまだ翻訳されていません）、次の内容を見つけました。
クラス属性のclapseと値は、非表示関数と表示関数を制御することがわかります。次に、HTML要素の対応するクラス属性を変更して、ボタンのクリックイベントJSコードで「show/hide」操作を実行する必要があります。したがって、クラスメートボタンのクリック関数に次のステートメントを追加します。
$（ "＃collapseone"）。
3.「特定の学生をクリックして情報を表示すると、選択された状態がない」というバグを修正しました。
ドキュメントをチェックすることにより、http：//www.runoob.com/bootstrap/bootstrap-button-plugin.htmlでは、[ボタン]の[ボタン]に[ボタン]のデータ - トグルプロパティを設定します。
したがって、クラスメートのボタンに属性data-toggle = "ボタン"を追加します。
この時点で、別の問題が発生しました。次に他のクラスメートをクリックすると、元のクリックはまだアクティブ状態にあったと思います。どうすればいいですか？
http://www.runoob.com/bootstrap/bootstrap-buttons.htmlを確認することにより、ボタンのクラス割り当てがアクティブになったときに選択された状態が表示されます。つまり、上記の設定、つまりBootstrapは次のようなことを行います。ボタンData-Toggle =”ボタン "がクリックされると、アクティブがクラスに自動的に追加され、選択された状態が存在します。再びクリックすると、アクティブがクラスから自動的に削除され、選択されていない状態が表示されます。
言い換えれば、私たちは自分でこの操作を行う必要があります。たとえば、クラスメートをクリックすると、クラス属性からすべてのアクティブなクラスメートボタンを削除できます。クリックが完了すると、クリックしたボタンのみがアクティブ状態にあります。
したがって、クラスメートボタンのクリック関数にそのようなステートメントを追加する必要があります。
コードコピーは次のとおりです。
$（ "。btn-classmate"）。
効果は次のとおりです。
4.ボタンの外観を美しくします
ブートストラップでCSSボタンセクションを見つけます：
http://www.runoob.com/bootstrap/bootstrap-buttons.html
チュートリアルを変更するためのチュートリアルに従って、ここでボタンの色を変更するだけで、ニーズに応じて自分で変更できます。効果は次のとおりです。
5。HTMLページとJavaScriptコードの分離
実際、それは2つのステップに分かれています。
ステップ1：JavaScriptコードをJSファイルに入れて、HTMLファイルにリンクします。
ステップ2：JavaScriptまたはCLEAR関数を使用してコードブロックを関数に書き込み、関数を直接呼び出します。
両方の手順は比較的単純なので、プログラミング言語を学んだ人なら誰でもそれを行う必要があります。私は拡張して書きません。
JSファイルをリンクする場合、注文に注意を払うことは注目に値します。
たとえば、BootstrapのJSファイルはjQueryに基づいており、多くのjQuery関数を使用するため、jQuery JSファイルはbootstrapのJSファイルの前にリンクを宣言する必要があります。
同様に、JSファイルはBootstrapに基づいているため、Bootstrapの後である必要があります。そうしないと、コードが機能しません。
最後に、関連するコードを投稿しましょう。
getClassMate.html：
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" wittth =！ - get-1 " - > <link href = "css/bootstrap.min.css" rel = "styleSheet"> <！ - html5 shim and respons.js html5要素とメディアクエリのサポートのためのサポート - > <！ - 警告：respons.jsが動作しない場合：ファイルを介してページを表示する場合：//- src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src =" // cdn.bootcss.com/respond.js/1.4.2/respond.min.jsruqut type = "text/css"> ＃btn-group-vertical-classes {overflow-y：auto;オーバーフローX：自動;高さ：100px;}＃btn-group-vertical-classmates {overflow-y：auto;オーバーフローX：自動;高さ：500px;} button {text-overflow：ellipsis; overflow：hidden; border-radius：0px;}＃context_div {overflow-y：auto;オーバーフローX：自動;高さ：500px;} </style> </head> <body> <div> <div> <div> <h4 style = "text-align：right;"> <a id = "data-toggle =" collapse "data-parent =" </h4> </div> <div id = "collapsone"> <div id = "div1-classes-classmates"> <div role = "group" aria-label = "..." id = "btn-group-vertical-classes"> <！ - クラスが表示される場所 - > </div> </div> </div ID = "BTN-GROUP-vertical-Classmates" role = "group" aria-label = "..."> <！ - where classmates show-> <button type = "button" style = "border-radius：0px;">クラスメートをクリックしてクラスを表示します。詳細。</p> </div> </div> </div> <！ - jquery（bootstrapのjavascriptプラグインに必要） - > <スクリプトsrc = "js/jquery-3.0.0.0.min.js"> </script> <！ src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </scrip> </body> </html>script_getclassmate.js：
$（document）.ready（function（）{$。getJson（ "resource/classmates.json"、function（result）{$。（result、function（i、field）{var tmp_button = $（ '<button type = "button" style = "border-radius：0px; text-align：left; magne-left：0px" data-toggle = "botun chosen_state = 0> </button> '） tmp_chosen = number（$（this）.attr（ "chesen_state"））^1; $（this）.attr（ "chesen_state"、string（tmp_chosen））; showcla ssmates（result）; $（ "。btn.btn-default.btn-classmate"） btn-default btn-classmate btn-info "）; $（"＃collapsone "） showclassmates（result）{$（ "＃btn-group-vertical-classmates"）。empt（）; var chosen_list = new array（）; $（ "。btn.btn-default.btn-class"）。filter（function（）{judgflag = false; if（$（this）.attr（ "chesen_state"）== "1"）{judgeflag = true; chosen_list.push（$（this）.text（）;} return judgflag; } ）; $ 0px; "data-toggle =" button "chosen_state = 0> </button> '） classmate_context_item; $（ "＃context_div"） field3; var tmp_p = $（ '<p> </p>'）。text（classmate_context_item）; $（ "＃context_div"）。append（tmp_p）;}）;}）;}）;}）;}）;}）;}classsmates.json：
{"class 001"：{"xiao wang"：{"gender"： "male"、 "age"： "18"、 "football"、 "hometown"： "shanghai"、 "bishen"： "78"、 "Math"： "90"、 "English"： "66"、 "" 81 "69"、 "地理"： "92"}、 "xiao li"：{"gender"： "male"、 "age"： "20"、 "関心"： "バスケットボール"、 "故郷の"： "中国語"： "98"、 "Math"： "77"、 "歴史"： "73"： "" "：" "73" "：" "73" " "88"、 "地理"： "81"}}}、 "class 002"：{"xiao cai"：{"gender"： "female"、 "age"： "19"、 "dance"： "dance"、 "hometown"： "gaoxiong"、 "chinese"： "93"、 "" 82 ""： "" "82"、 "" 82 "：" "82"： " "77"、 "history"： "89"、 "地理"： "83"}}、 "class 003"：{"xiao ma"：{"gender"： "male"、 "age"： "18"、 "reading"： "reading"、 "hometown"： "taibei"、 "" "" "" "" "" "Inglish"： "" "" "" 91 "：" 91 "：" 91 "：" 91 "：" 91 "：" 91 "：" 91 " "97"、 "化学"： "100"、 "history"： "94"、 "地理"： "92"}、 "class 005"：{"xiao zhang"：{"Male"： "Male"、 "age"： "20"、 "lund"、 "hometown"： "" "" 7 "66"、 "Physics"： "80"、 "Chemistry"：68、 "History"： "79"、 "地理"： "93"}}}}上記は、編集者が紹介したBootstrap Zero-Basic Introduction（iii）の紹介チュートリアルです。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！