設計と開発のためにブートストラップフレームワークを使用することは、世界で比較的人気のある傾向です。新製品を最適化するとき、多くのソフトウェア企業は、JSとコントロールでの包括的な利点のために、この開発フレームワークを選択します。
ブートストラップフレームワークは、フロントエンドのUIデザインフレームワークです。統一されたUIインターフェイスを提供し、インターフェイスUIを設計するプロセスを簡素化します（不利な点は、インターフェイスがカスタマイズされているため、調整の余地はあまりないことです）。特に現在の応答時間レイアウト（私の理解では、ページはさまざまな解像度に応じて異なるページ要素のレイアウトを採用していることです）。これはブートストラップでよくサポートされています。プロパティが単純に設定されている限り、応答時間レイアウトを自動的に実装して、プログラマーのインターフェイスのプロセスを大幅に簡素化できます。
したがって、Bootstrapフレームワークを使用して、次のインターフェイスを実装します。それは簡単ですが、それは並外れたものです（あなたが本当に自分でそれを実装したいなら、それが猿と馬の月の年かどうかはわかりません）
ページ全体はいくつかの部分に分割され、Bootstrapの公式Webサイトのサンプルコードを使用して実装され、最終的にページに形成されます。各部分の概略図は、次の図に示されています
次に、各部分のコードを順番に説明します
まず、空白のページを作成します。コードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width =" width = ""> content = ""> <title> bootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <！ - [if lt ie 9]> <スクリプトsrc = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <！[endif] - > <！ - [if lt ie 9]> <scric = "../../ docs-assets/js/js/ie8-responsponsponsive-farning.js"> < IE 9]> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </scrip> <スクリプトsrc = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <！[endif] - > <style> .bs-docs-home {background-color：＃1b31b1;背景画像：url（line.png）; } </style> </head> <body> <スクリプトsrc = "https://code.jquery.com/jquery-10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>Bootstrapフレームワークを使用するには、ページのBootstrapフレームワークファイルを参照する必要があります。合計4つあります。Bootstrap.min.css、bootstrap-theme.min.css、jquery-1.10.2.min.js、bootstrap.min.js
これらのファイルを参照することによってのみ、ブートストラップフレームワークによって提供されるさまざまなUI要素を使用できます。
次に、上記の図に示すように、各部分のコードを順番に説明します
一番の説明：
ページ全体を設計するというアイデアは、ページ全体をパネルに配置することであり、上のテキストはパネルヘッダーです
Bootstrapフレームワークのページは、12列のグリッドレイアウトです。そこで、ページ全体を3つの部分に分割しました。左右に3つの列が幅の幅のブランクがあり、6つの列が1つのパネル（パネル）を広げます。
コードは次のとおりです。コードの残りの部分は<div> </div>に順番にあります
<body><div><h1 style=" line-height:2em;"> </h1><br /><div><div></div> <div><div><h3><strong>Vocational Skills Examination Score Query</strong></h3></div><div> </div> </div> </div> </div> <div></div> </div> <script src = "https://code.jquery.com/jquery-10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/boottrap.min.js
プロンプトテキスト
プロンプトのテキストは、ブートストラップフレームワークでアラートコンポーネントを使用し、コードは次のとおりです。
<div> <button type = "button" data-dismiss = "alert" aria-hidden = "true">×</button> <strong> note！</strong>このサイトのスコアは12333の公式ウェブサイトからのものです。詳細については、公式ウェブサイト</div>
IDカードフォームとクエリボタン
IDカードフォームと後続のアカウントフォームは、1つのフォームである必要があります。 IDフォームとクエリボタンは、ブートストラップフレームワークを利用するフォーム要素のグループ化です。入力グループを使用して、テキストボックスとボタンを組み合わせます。ブートストラップフレームワークは、透かしやハイライトなどの効果を提供します。フォームにたくさんの色を追加します
<form role = "form" name = "form1"> <div> <label for = "idcard">入力してください</label> <div> <入力タイプ= "text =" idcard "placeholder =" idcard number "> <span> <button type =" button "onclick =" form1.submit（）; " >クエリ</button> </span> </div> </form>
主題形式
アカウントフォームは、ブートストラップフレームワークを利用するフォーム要素のグループでもあります。入力グループを使用して、テキストボックス（入力）、ボタン（ボタン）、ドロップダウンリスト（UL）を組み合わせます。
テキストボックスに直接件名を入力するか、ドロップダウンメニューで件名を選択できます。特定の実装は、$（ '＃subject'）。val（ 'Computer operator'）およびその他のコードを使用して、ハイパーリンク（a）のクリックイベント（クリック）のテキストボックスのコンテンツを変更することです。アカウントフォームは、フォーム内のIDフォームの下にあります（フォーム）
コードは次のとおりです。
<div> <label for = "subject">探している件名を入力してください</label> <div> <input "input" id "subject name =" subject "placeholder =" account、flankはすべての件名を照会することを意味します "> <div> <button" button "button" data-toggle = "dropdown">アカウント<スパン</span> < onclick = "$（ '＃subject'）。val（ 'Computer operator'）;">コンピューターオペレーター</a> </li> <li> <a href = "＃" onclick = "$（ '＃subject'）。 onclick = "$（ '＃subject'）。val（ 'multimedia'）;"> multimedia </a> </li> </ul> </div> </div> </div>
クエリエラー情報
クエリボタンがクリックされ、レコードが見つからないと、クエリエラーメッセージが表示されます。前のプロンプトテキストと同様に、ブートストラップフレームワークでアラートコンポーネントを使用します。
この情報が表示されているかどうかには、バックグラウンドダイナミックコードの協力も必要です。動的コードは、クエリの結果に基づいて情報を表示するかどうかを決定します（レコードがない場合、情報が表示されます）。この記事では動的コードについては説明していません。
場所はフォームの背後にあり、コードは次のとおりです。
<div> <ボタンタイプ= "button" data-dismiss = "alert" aria-hidden = "true">×</button> <strong> note！
グレードフォーム
クエリボタンがクリックされると、レコードが見つかったときにスコアフォームが表示されます。同様に、それを表示するかどうかには、バックグラウンドでの動的コードの協力も必要です。
エラーメッセージとスコアフォームのみが同時に表示される可能性があります
コードは次のとおりです。
<div> <table cellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "color：white">被験者</span> </th> <th scope = "col"> <span style = "color：white"> score </span> </th> </td> </td> </td> </td> <tr> <td>コンピューターオペレーター</td> <td>優れた</td> </tr> <tr> <td>マルチメディアオペレーター</td> <td> good </td> </tr> <tr> <td>
このページは、Bootstrapフレームワークを使用して実装されています。ブートストラップフレームワークのパワーのおかげで、UIを設計することはもはや難しいタスクではありません。しかし、BootstrapはUIフレームワークであり、その卓越性はバックグラウンドでの動的コードの協力に依存します。
次のURLは、上記のインターフェイスプラスバックエンドダイナミックコード（PHP）を使用して、職業スキルテストスコア（上海のみ）のクエリを実現する著者の関数です。あなたは行って見て、貴重なコメント（1か月間有効）を与えることができます。
http://bertin.sturgeon.mopaas.com/
完全なUIコードは次のとおりです。
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-compatible" content = "ie = edge"> <meta name = "viewport" content = "width =" width = ""> content = ""> <title> bootstrap </title> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css"> <link rel = "styleSheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <！ - [if lt ie 9]> <スクリプトsrc = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <！[endif] - > <！ - [if lt ie 9]> <scric = "../../ docs-assets/js/js/ie8-responsponsponsive-farning.js"> < IE 9]> <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </scrip> <スクリプトsrc = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <！[endif] - > <style> .bs-docs-home {background-color：＃1b31b1;背景画像：url（line.png）; } </style> </head> <body> <div> <h1 style = "line-height：2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <strong>職業スキル試験スコアクエリ</strong> </h3> </div> <div> <button <button <button <div> aria-hidden = "true">×</button> <strong> note！</strong>このサイトで問い合わせたスコアは、12333の公式ウェブサイトからのものです。詳細については、公式ウェブサイト</div> <form form "name =" form1 "> <div> <label =" idcard "> PlaceHolder = "id number"> <span> <button type = "button" onclick = "form1.submit（）;" > query </button> </span> </div> <div> <label for = "subject"> Query </label> <div> <入力タイプ= "Text" id = "name =" subject "placeholder =" accounts、flankはすべての件名をクエリを意味します "> <div> <button type =" button ">>> </>>>>> href = "＃" onclick = "$（ '＃subject'）。val（ 'Computer operator'）;">コンピューターオペレーター</a> </li> <li> <a href = "＃" onclick = "$（ '＃subject'）。 onclick = "$（ '＃subject'）。val（ 'multimedia'）;"> multimedia </a> </li> </ul> </div> </div> </form> <div> <button type = "button" data-dismiss = "arert" aria-hidden = "true">×</button> <div> <テーブルCellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "color：white">被験者</span> </th> <th scope = "col"> <span style = "color：white"> score </span> </th> </td>コンピュータオペレーター</td>オペレーター</td> <td>優れた</td> </tr> <td>マルチメディアオペレーター</td> <td> good </td> </tr> <td> webデザイン</td> <td>失敗src = "https://code.jquery.com/jquery-10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/boottrap.min.min.js上記は、Bootstrapフレームワークを使用して、紹介されたクエリページのインターフェイス例コードを作成することに関する関連する知識です。それがあなたに役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！