Erfahren Sie, wie Sie Bootstrap3-Grid-System_Javascript-Kenntnisse nutzen-js-Tutorial-php.cn

Erfahren Sie, wie Sie Bootstrap3-Grid-System_Javascript-Kenntnisse nutzen

WBOY

Freigeben： 2016-05-16 15:06:00

Original

1668 Leute haben es durchsucht

1. Einrichten der Bootstrap-Entwicklungsumgebung
1. Laden Sie Bootstrap herunter, http://www.bootcss.com/
2. Laden Sie jquery herunter und greifen Sie direkt über den IE zuhttp://code.jquery.com/jquery-2.0.3.min.js
3. Importieren Sie die JS- und CSS-Dateien von Bootstrap und JQuery in die HTML-Seite und das -Tag kann die Anzeige auf den meisten mobilen Geräten ändern Kompatibilität unter IE9.
Die Vorlage lautet wie folgt

<!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>

Nach dem Login kopieren

2. Rastersystem
1. Boostrap unterteilt den Desktop für das Layout in eine Tabelle mit 12 Zeilen * n Spalten. Dies ist der Kern von Boostrap.
2. .row führt eine Division auf Zeilenebene durch und muss unter .container enthalten sein.
3. col-xx-* führt eine Division auf Spaltenebene durch, wie unten gezeigt

<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>

Nach dem Login kopieren

4. Spaltenversatz, wird durch col-xx-offset-*
erreicht

  <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>

Nach dem Login kopieren

5. Spaltensortierung, kann eine Links- oder Rechtssortierung der Spalten durch .col-xx-push-* und .col-xx-pull-* erreichen

  <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>

Nach dem Login kopieren

6. Spaltenverschachtelung , Zeile kann in Spalte verschachtelt werden.

    <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>

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.