bootstrap3 グリッドシステム_JavaScript スキルの使用方法を学ぶ-jsチュートリアル-php.cn

bootstrap3 グリッドシステム_JavaScript スキルの使用方法を学ぶ

WBOY

リリース： 2016-05-16 15:06:00

オリジナル

1682 人が閲覧しました

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>

ログイン後にコピー

以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。