ホームページ >ウェブフロントエンド >jsチュートリアル >bootstrap3 グリッド システム_JavaScript スキルの使用方法を学ぶ
bootstrap3 グリッド システム_JavaScript スキルの使用方法を学ぶ
- WBOYオリジナル
- 2016-05-16 15:06:001669ブラウズ
1. ブートストラップ開発環境のセットアップ
1. ブートストラップをダウンロードします。http://www.bootcss.com/
2. jquery をダウンロードし、IE から直接アクセスしますhttp://code.jquery.com/jquery-2.0.3.min.js
3. bootstrap と jquery の js ファイルと css ファイルを HTML ページにインポートし、.viewport の タグを追加すると、IE 9 などの場合に表示を変更できます。 ie9以下の互換性。
テンプレートは以下の通りです
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Insert title here</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<!--[if lt IE 9]>
<script 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"></script>
<![endif]-->
<script src="js/jquery-2.0.3.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
</div>
</body>
</html>
2. グリッドシステム
1. Boostrap はデスクトップを 12 行 * n 列のテーブルに分割します。これが boostrap の核心です。
2. .row は行レベルの分割を実行し、.container の下に含める必要があります。
3. 以下に示すように、col-xx-* は列レベルの除算を実行します
<div class="container">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
<div class="row">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3">7</div>
<div class="col-md-3">8</div>
</div>
</div>
4. 列オフセット は、col-xx-offset-*
によって実現されます。
<div class="container">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">4</div>
</div>
<div class="row">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3 col-md-offset-3">7</div>
</div>
</div>
5. 列の並べ替え、 は .col-xx-push-* および .col-xx-pull-*
を通じて列の左または右の並べ替えを実現できます。
<div class="container">
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3 col-md-push-3">3</div>
</div>
<div class="row">
<div class="col-md-3">5</div>
<div class="col-md-3">6</div>
<div class="col-md-3 col-md-pull-2">7</div>
</div>
</div>
6. 列のネスト 、行はcolにネストできます。
<div class="row">
<div class="col-md-3">1</div>
<div class="col-md-3">2</div>
<div class="col-md-3">3</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-1">5</div>
<div class="col-md-1">6</div>
<div class="col-md-1">7</div>
</div>
</div>
</div>
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。