多くの企業は現在、開発中のブートストラップのフレームワークを使用しています。 BootstrapはTwitterチームの仕事であり、フロントエンドの開発を大幅に簡素化します。 （後でいくつかの使用量を要約します）
APIを使用することを学ぶ私は、公式ウェブサイトのAPIを直接表示することをお勧めします。アドレス：http：//www.bootcss.com/
ここにいくつかのターゲットレンダリングがあります：
以下に、小さなデモのテクニックと原則を要約します。
最初のステップは、 http://www.bootcss.com/でブートストラップの圧縮パッケージをダウンロードし、新しいindex.htmlを作成し、崇高または他のエディターを使用してインデックスページを開き、減圧後のディレクトリは
ステップ2 ：公式ウェブサイトhttp://v3.bootcss.com/getting-started/から基本的なテンプレートをコピーして、その後の開発を容易にします。
<！doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua互換" content = "ie = edge"> <meta name = "viewport" content = "width =" width = bed "他のコンテンツは *それらに従う必要があります！ - > <title> bootstrap 101テンプレート</title> <！ - bootstrap-> <link href = "css/bootstrap.min.css" rel = "styleSheet"> <！ - html5 shim and respons.js html5要素のサポートとメディアの場合： <！ - [lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </scrip> <Src = "// cdn.bootcss.com/respond.js/1.4.2.2/respond.min.js"> </head> <body> <h1>こんにちは、世界！ </h1> <！ - jquery（ブートストラップのJavaScriptプラグインに必要） - > <スクリプトsrc = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <！ src = "js/bootstrap.min.js"> </script> </body> </html>
1）注： jquery.jsへの参照はbootstrap.min.jsの前にある必要があり、jquery.jsを手動でダウンロードしてjsパスに配置することが最善です。
後でエミュレートしたとき、ドロップダウンとカルーセルのアニメーション効果がなくなったことがわかりました。基本テンプレートのjQueryファイルがダウンロードされ、インターネットに接続されていない可能性があることがわかりました。地元のものを一人で引用するのが最善です。
2）注： CSSの参照はページの上に配置され、JSリファレンスはページの下に配置されます。これは、CSSが最初にレンダリングされたページをロードする必要があり、JSがページレンダリングが完了した後にロードおよび実行する必要があるためです。モバイルデバイスのメタステートメントは次のように適合しています。
ステップ3、ナビゲーションバー
1）センタリング効果：コンテナ燃料を容器に変更する必要があります
2）コントラスト効果で白から黒に変化します： <nav>
3）ナビゲーションバーは上部に固定され、時間クラスの属性を追加します： Navbar-Fixed-Top
<nav> <！ - より良いモバイルディスプレイのためにブランドとトグルがグループ化されます - > <div> <ボタンタイプ= "button" data-toggle = "collapse" data-target = "＃bs-example-navbar-collapse-1" aria-expanded = "false"> <span <span>トグルナビゲーション</span> <スパン</> </span> </> < href = "＃"> zootopia </a> </div> <！ - 切り替えのためのNAVリンク、フォーム、およびその他のコンテンツを収集します - > <div id = "bs-example-navbar-collapse-1"> <ul> <li>説明</a> </li> <li> <a href = "＃"> feature </a> </li> <li> <a href = "＃"> bout </a> </li> </div> <！ - /.navbar-collaps-> </div> <！ - /.container-fluid-> </</</<
4）ナビゲーションバーが体の上部を覆うので、スタイルを追加します
<style type = "text/css"> body {padding-top：50px; } </style>5）注目のナビゲーションアイテムは、ドロップダウンメニューを追加します
<li> <a href = "＃" data-toggle = "ドロップダウン">機能</a> <ul> <li> <a href = "＃">動物1 </a> </li> <li> <a href = "＃">動物2 </a> </li> <li> <a href = "＃"＃ " 4 </a> </li> </li> </li>
サブメニューの内容は最も外側のLIタグにネストされており、LIタグにはクラスドロップダウンがあり、サブメニューもULタグであり、クラスはドロップダウンメニューです。特定のマッピング関係については、上記を参照してください。
ステップ4：回転効果を増やし、ブートストラップコンポーネントのカルーセルモジュールをコピーして変更します。
<div id = "carousel-example-generic" data-ride = "carousel"> <！ - indicators-> <ol> <li data-target = "＃carousel-example-generic" data-slide-to = "0"> </li> data-target = "＃carousel-example-generic" data-slide-to = "2"> </li> </ol> <！ - スライドのラッパー - > <div role = "listbox"> <divg> <img src = "image/1.jpg"> <div> <h1> zootopia 1 </h1 <posed views the postess position posed the fige the pemople sited position postess postess position esbiwing postes国内で発生する2つの数字を開く女性の家の視聴位置</p> </div> </div> <div> <img src = "image/2.jpg"> <div> <div> <div> <img src = "impg =" impg "> <div> <h1> zootopia 1 </h1 </h1 </h1 </h1 </h1 <国内で発生する数</p> </div> </div> <div> <img src = "image/3.jpg"> <div> <h1> zootopia 1 </h1> <p>女性の家の視聴位置の訪問は、女性の家の視聴位置の訪問を拡大します。 href = "＃carousel-example-generic" role = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span>前のページ</span> </a> <a href = "＃carousel-example-generic" role = " </div>
1）写真を回転させるときに空白のスペースやギャップが残っていないため、スタイルを追加する
.carousel {height：500px;バックグラウンドカラー：＃000; } .carousel .item {height：500px;バックグラウンドカラー：＃000; } .carousel img {width：100％; }2）テキストをより美しくするためにスタイルを設定する
.casousel-caption p {margin-bottom：20px;フォントサイズ：20px;ラインハイト：1.8; }現在の効果は次のとおりです
続けましょう：（コーディングが更新されています...）
2番目の部分が更新され、ブートストラップ（II）に基づくフロントエンド開発ケースのデモ
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。
まだ詳細に勉強したい場合は、ここをクリックして素晴らしいトピックを学び、添付してください：Bootstrap Learningチュートリアル