シンプルで美しいフロントエンドフレーム-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>

Mysql VS 2015呼び出し

shellスクリプト(6)B計画