1.ブートストラップ開発環境を構築します
1。bootstrap、http：//www.bootcss.com/をダウンロード
2。JQUERYをダウンロードし、http://code.jquery.com/jquery-2.0.3.min.jsをIEで直接ダウンロードします
3. HTMLページにBootstrapとJQueryのJS、CSSファイル、.Viewportの<Meta>タグをインポートします。このタグは、IE9以下の互換性のために、LT IE 9 ...などのほとんどのモバイルデバイスに表示するように変更できます。
テンプレートは次のとおりです
<！doctype html> <html> <head> <meta charset = "utf-8"> <meta content = "width = device-width、initial-scale = 1.0" name = "viewport"/> <title>挿入</title> <link href = "css/boottrap.min.cs" rel = "lt" 9]> <スクリプトsrc = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> <！[endif] - > <script src = "js/jquery-2.0.3.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </head> <body> <div> </div> </body> </html>
ii。グリッドシステム
1.ブースストラップは、デスクトップを12行 * n列のレイアウト用のテーブルに分離します。
2。.rowは、行レベルの分割に使用され、.containerに含まれる必要があります。
3。COL-XX-*下の図に示すように、列レベルの分割を実行します
<div> <div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div>
4。col-xx-offset-*を介して実装された列のオフセット*
<div> <div> <div> 1 </div> <div> div> div> <div> 3 </div> <div> 4 </div> </div> <div> 5 </div> <div> 6 </div> <div> 7 </div>
5。列の並べ替えは、.col-xx-push-*および.col-xx-pull-*によって実現できます。
<div> <div> <div> 1 </div> <div> div> div> <div> 3 </div> </div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> </div>
6。colの営巣柱と巣の列。
<div> <div> 1 </div> <div> 2 </div> <div> 3 </div> <div> <div> <div> 5 </div> <div> 6 </div> <div> 7 </div> </div> </div> </div> </div> </div> div> div> </div> </div> </div> </div> </div> </div>
まだ詳細に学びたい場合は、ここをクリックして2つのエキサイティングなトピックを学び、添付できます。BootstrapLearning Tutorial Bootstrap Practical Tutorial
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。