ブートストラップとは何ですか？
Bootstrapは、WebアプリケーションとWebサイトの迅速な開発のためのフロントエンドフレームワークです。 Bootstrapは、HTML、CSS、およびJavaScriptに基づいています。
歴史
ブートストラップは、TwitterのMark OttoとJacob Thorntonによって開発されました。 Bootstrapは、2011年8月にGitHubでリリースされたオープンソース製品です。
この記事では、Bootstrapのゼロ基底導入チュートリアル（2）の導入に焦点を当てています。具体的な詳細は次のとおりです。
プロセス中に情報を頻繁に確認するWebサイト：
http://www.w3school.com.cn/これは、W3C標準を広めるためにW3C Allianceによって確立されたWebサイトです。 Web側には多くのテクノロジーがあり、Webテクノロジーの百科事典と見なすことができます。
http://v3.bootcss.com/言うまでもなく、公式のbootstrap3ドキュメント
http://www.runoob.com/これは実際にはw3schoolに似ていますが、w3schoolよりも少し複雑です。多くのコンテンツは、元のW3C英語のWebサイトと元のブートストラップの公式英語文書から翻訳されていますが、その翻訳の品質はより高いと感じています（最初の2つのWebサイトも鈍く翻訳されていたため）。
これ以上苦労せずに、始めましょう：
（1）明確に目標を達成します
下の図に示すように、これは私たちが実装したい簡単なWebサイトです。レイアウトは簡単で、まばゆい効果はありません。ただし、関数を実装する必要があります。JSONファイル（上記のWebサイトでJSONに関する知識を確認できます）から関連情報を読み取り、Webサイトに表示します。
JSONファイルコンテンツ：
{"class 001"：{"xiao wang"：{"gender"： "male"、 "age"： "18"、 "football"、 "hometown"： "shanghai"}、 "xiao li"：{"jender"： "male"、 "age"： "" "" baijtown "" "" "beijet 002 "：{" Xiao cai "：{" gender "：" femall "、" age "：" 19 "、" ant "：" dance "、" hometown "：" gaoxiong "}}}}}}、" class 003 "：{" xiao ma "：{" gender "：" male "、" age "：" "" "：" ""： "" "：" "" "：" "hometown"： "" hometown "：" hometown " "Taibei"}}、 "class 005"：{"xiao zhang"：{"gender"： "male"、 "age"： "20"、 "関心"： "running"、 "hometown"： "guangzhou"}}}}}今すぐ：
レイアウト：
3つの主要なブロックがあります。最初の行の左側はクラスリスト、最初の行の右側はクラスメートの名前リスト、2行目はクラスメートの関連情報です。
関数：
1.クラスリストのクラスをクリックして、クラスのクラスリストに動的に動的であり、クラスを選択できるかを更新します。
2。クラスメートリストのクラスメートをクリックし、2行目のクラスメートの情報を動的に表示します。一度に表示できるクラスメートの情報は1つだけです。
（2）分析に必要な手法
レイアウト：
Bootstrap：このシンプルな2列レイアウトとクラス列のチェック、スクロールバーのチェックに使用されます（Bootstrapで直接実装しやすいものもありますが、知ることはできません。
関数：
JavaScriptとAjaxを使用して、データ収集と動的な相互作用を実現します（ローカル更新方法）。
（3）技術選択分析
1.レイアウトを実装します。
ドキュメント（http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html）を調べることで、ブートストラップがラスターシステムを使用してレイアウトされることがわかりました。 DIVの特定のクラス属性を設定することにより、私が望むレイアウト効果を達成することができます。また、携帯電話、タブレット、デスクトップコンピューターにさまざまな効果を設定できます。 HTMLタグのクラス属性とHTMLタグは、w3schoolで見つけることができます。
要素のクラス属性には複数のクラス属性を持つことができることは注目に値します。
EG：<div role = "group" aria-label = "..." id = "btn-group-vertical-classes">
異なる属性間の「スペース」間隔を使用してください、私を信じてください。これにより、JavaScriptスクリプトを簡単に記述してCSSを調整できます。
2.クラス番号と複数の選択の垂直方向の配置を実現します。
http://www.runoob.com/bootstrap/bootstrap-button-groups.htmlを確認して、垂直ボタングループをセットアップする方法を知ります。つまり、ボタングループがbtn-group-verticalに配置されているDivのクラスを設定して、ボタングループを保存するためのコンテナになります。
http://www.runoob.com/bootstrap/bootstrap-button-plugin.htmlを確認し、ボタングループをチェックする方法を知っています。実装は、data属性data-toggle = "ボタン"をBTN-Groupにクラス属性のdivに追加することによって行われます。
3.丸い角から直角に再定義するボタンのコーナーを実装し、ボタングループにスクロールバーを追加し、ボタンに表示されるテキストに制限を追加して、ボタンを超えないようにします。過剰な部分は「...」として表示され、マウスがボタンの上で移動して停止すると、すべてのテキストが表示されます。
小さな部分（丸い角が直角になり、マウスがホバリングしてテキストを表示する）をHTMLタグに直接設定する必要があります。
ほとんどの実装は、CSSで書かれています。
<style type = "text/css">＃btn-group-vertical-classes {anuverflow-y：overflow-x：auto; height：150px;}＃btn-group-vertical-classmates {overflow-y：auto; overflow-x：height;隠された;ボーダーラジウス：0px;} </style>コードの<style>部分は、ヘッドに、つまり<head>と</head>の間に配置されます。
一般的な方法は、最初にCSSセレクターを使用してタグを選択してCSSを設定し、次に対応するスタイルをCurlyブレースに設定することです。
いわゆるCSSセレクターは、上記のコードの「＃btn-group-vertical-vertical-classes」と「button」、つまり巻き毛装具のコードの行です。 CSSセレクターを使用するには複数の方法があり、W3School Webサイトから関連する方法を見つけることができます。
CSSスタイルシートには3つのロード方法（CSSファイル; <head>タグ、HTML要素のスタイル属性、および効果的な優先順位順序は「要素のスタイル」>「ファイルヘッダーのスタイル要素」>「外部スタイルファイル」であるため、BootstrapのCSを参照しているため、CSスタイルの順になります。上記のボタンのボタンの設定は、「必要」と「最低のカップリングの程度（つまり、最も便利な変更）」の視点から、2つの方法を推奨しています。
<1>要素タグにスタイル属性を直接書き込みます。これが最も好まれているため、間違いなく機能します。
<2>リンクされたブートストラップCSSファイルを完全に変更し、スタイル属性を1つずつ書き換えることなく、将来新しい要素を追加します。これには、リンクを参照する代わりに、CSSファイルをダウンロードする必要があります。
私たちのページは非常に小さいので、私は方法を取りました。
4. AJAXを使用して、データ収集、相互作用、動的荷重を実現します。
ajaxの使用方法を聞いてください。 Baiduを検索するか、フロントエンドテクノロジーを知っている人に尋ねてください。
Ajaxの最も核心は、ページ全体を更新せずに部分的にリフレッシュできることです。ここでは、最初にAJAXテクノロジーに関する関連ドキュメント（上記の3つのWebサイト、およびさまざまなBaidu）を確認する必要があります。 JSONファイルからデータを取得したいので、AJAXマニュアルを参照してくださいhttp://www.w3school.com.cn/jquery/jquery_ref_ajax.aspをjqueryのjstrapのJSはjqueryに基づいており、すべてのjquery方法が機能しているためです。 GetJson関数が選択されました。さらに、http：//www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html分析方法として各関数を選択してください。
コードの実装では、主にトラバーサル（ステートメントの場合）、判断（IFステートメント）、HTML要素の操作、子要素の追加、属性値の変更などが含まれます。
特定のページの書き方については、詳細に書くのは退屈なので、コードを貼り付けました。
デモを実行するときに注意を払うためのいくつかのポイント：Chromeはファイルコンテンツの直接読み取りをローカルに制限しているようであるため、ApacheのHTDOCSフォルダーにプロジェクト全体を配置する必要があります。その後、実行します。 Apacheのインストール方法については、以前のブログには非常に詳細な紹介があります。使い方、Baiduをお願いします。
<！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：自動;高さ：150px;}＃btn-group-vertical-classmates {overflow-y：auto;オーバーフローX：自動;高さ：150px;} button {text-overflow：ellipsis; overflow：hidden; border-radius：0px;} </style> </head> <body> <div> <br> </br> <div1-classes-classmates "> <div role =" aria-label = "... show-> </div> <div id = "btn-group-vertical-classmates" role = "group" aria-label = "..."> <！ - where classmates show-> <button type = "button" style = "border-radius：0px;" id = "Context_div"> <p>クラスメートをクリックして詳細を表示します。</p> </div> </div> < src="js/bootstrap.min.js"></script><script>$(document).ready(function(){$.getJSON("resource/classmates.json",function(result){$.each(result, function(i, field){var tmp_button=$('<button type="button" style="border-radius: 0px;" data-toggle="button" chosen_state = 0> </button> '） tmp_chosen = number（$（this）.attr（ "chesen_state"））^1; $（this）.attr（ "chesen_state"、string（tmp_chosen））; $（ "＃btn-group-vertical-classmates"） 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; "chesen_state = 0> </button> '） selected_classmate = $（this）.text（）; var classmate_context_item; $（ "＃context_div"）。empty（）; $。; $ field3; var tmp_p = $（ '<p> </p>'）。text（classmate_context_item）; $（ "＃context_div"）。append（tmp_p）;}）;}）;}）;}）;}）;}）;}）;}