シンプルで美しいフロントエンドフレーム-Bootstrap

9797 ワード

Bootstrapの概要:Bootstrapは2011年8月に発表され、HTML 5、CSS 3、JavaScriptに基づくオープンソースフレームワークであり、このフレームワークコードは簡潔で、視覚が優美で、PCおよびモバイル端末装置に基づくWebページのニーズを迅速かつ簡単にフレームワークすることができる.フロントエンド開発タスクにおけるコラボレーション・コラボレーション・統合の問題を解決するために登場した.PC側、PAD側、携帯電話のモバイル側のページアクセスに対応できるように応答レイアウトされています.簡単に言えば、Bootstrapは簡単で、WEBページのHTML、CSS、JavaScriptを構築するためのツールセットです.
Bootstrapのダウンロードとプレゼンテーション:http://www.bootcss.com
Bootstrapの特徴:
端末間、ブラウザ間:現代ブラウザと互換性があります.
応答式レイアウト:pc端の各種解像度の表示をサポートし、モバイル端PAD、携帯電話などの画面の応答式布切替表示もサポートする.
全面的なコンポーネントを提供する:ナビゲーション、ラベル、ツールバー、ボタンなどの実用性の強いコンポーネントを提供し、開発者の呼び出しを便利にする.
内蔵jQueryプラグイン:Bootstraptは多くの実用的なJqueryプラグインを提供し、これらのプラグインは開発者がWebでよく見られる特効を実現するのに便利である.
HTML 5、CSS 3:HTML 5の意味ラベルとCSS 3の属性をサポートし、よくサポートされています.
LESSダイナミックスタイルをサポートする:LESSは変数、ネスト、操作混合符号化を使用し、より速く、より柔軟なCSSを書く.
Bootstrap開発パッケージ:http://V3.bootcss.com
さらにBootstrapには開発者に多くのアイコン(Glyphiconsアイコン機能)が提供されているため、美工によって画像を修正する必要がなく、タグを使用すればページにタグを表示することができ、これらのアイコンは実際にはフォントで実現されるため、ページのロード時にサーバから画像をロードする必要がなく、複雑なページのロード時間を減らすことができる.    
注意:BootstarpのjsプラグインはjQueryに依存するため、jQueryはBootstarpの前に導入され、IE 7以降のブラウザはサポートされません.
Bootstrapの基本テンプレートは次のとおりです.

 lang="zh-CN">
  
  
charset= "utf-8" >
   
http-equiv= "X-UA-Compatible" content= "IE=edge" >
   
name= "viewport" content= "width=device-width, initial-scale=1" > </span> <span style="color:#333333;">Bootstrap 101 Template</span> <span class="nt" style="color:rgb(47,111,159);"/> <span style="color:#333333;"> </span> <span class="c" style="color:rgb(153,153,153);"><!-- Bootstrap css --></span> <span style="color:#333333;"> </span> <span class="nt" style="color:rgb(47,111,159);"><link/> <span style="color:#333333;"> </span> <span class="na" style="color:rgb(79,159,207);">href=</span> <span class="s" style="color:rgb(212,73,80);">"css/bootstrap.min.css"</span> <span style="color:#333333;"> </span> <span class="na" style="color:rgb(79,159,207);">rel=</span> <span class="s" style="color:rgb(212,73,80);">"stylesheet"</span> <span class="nt" style="color:rgb(47,111,159);">></span> <pre><code><span class="nt" style="color:rgb(47,111,159);"><span class="space" style="text-indent:2em;line-height:inherit;"> <span style="color:rgb(153,153,153);"><!-- IE8 media Query,--></span> </span></span> </code></pre> <pre><code><span style="color:#333333;"/><span class="c" style="color:rgb(153,153,153);"/></code></pre> <pre><code> <span class="c" style="color:rgb(153,153,153);"><!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --></span> <span class="c" style="color:rgb(153,153,153);"><!-- WARNING: Respond.js doesn't work if you view the page via file:// --></span> <span class="c" style="color:rgb(153,153,153);"><!--[if lt IE 9]></span></code></pre> <pre><code style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;font-size:13px;margin-left:0px;line-height:1.42857;color:rgb(51,51,51);"><code class="language-html" style="font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;color:rgb(51,51,51);"><span class="c" style="color:rgb(153,153,153);"> <!-- IE8 HTML5 --> <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"/></span></code></pre> <pre><code><span class="c" style="color:rgb(153,153,153);"><span class="space" style="text-indent:2em;line-height:inherit;"> <!-- IE8 media Query--></span> <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"/> </span></code></pre> <pre><code><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"/><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"/><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"><h1/></span><span style="color:#333333;"> , !</span><span class="nt" style="color:rgb(47,111,159);"/></code></pre> <pre><code><span><!-- Jquery Bootstrap, Jquery Bootstrap --> </span><span class="c" style="color:rgb(153,153,153);"><!-- jQuery (necessary for Bootstrap's JavaScript plugins) --></span><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"><script><span class="na" style="color:rgb(79,159,207);">src=</span><span class="s" style="color:rgb(212,73,80);">"https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"</span><span class="nt" style="color:rgb(47,111,159);">></script></span><span style="color:#333333;"> </span><span class="c" style="color:rgb(153,153,153);"><!-- Include all compiled plugins (below), or include individual files as needed --></span><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"><script><span class="na" style="color:rgb(79,159,207);">src=</span><span class="s" style="color:rgb(212,73,80);">"js/bootstrap.min.js"</span><span class="nt" style="color:rgb(47,111,159);">></script></span><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"/><span style="color:#333333;"> </span><span class="nt" style="color:rgb(47,111,159);"/></code></pre> <br/> </span></span></span></span></div> <div style="color:rgb(69,69,69);"> <span style="font-size:14px;"><br/></span> </div> <p style="color:rgb(69,69,69);"/> </div> </div> </div> </div>