suchen

Heim >Web-Frontend >js-Tutorial >Erfahren Sie, wie Sie Bootstrap3-Grid-System_Javascript-Kenntnisse nutzen

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

WBOY
WBOYOriginal
2016-05-16 15:06:001704Durchsuche

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

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>

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>

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>

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>

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

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführungs-Tutorial zur Verwendung der zTree-Plug-in-Dropdown-Tree_Javascript-KenntnisseNächster Artikel：Einführungs-Tutorial zur Verwendung der zTree-Plug-in-Dropdown-Tree_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen