Apprenez à utiliser les compétences system_javascript de la grille bootstrap3-js tutoriel-php.cn

Apprenez à utiliser les compétences system_javascript de la grille bootstrap3

WBOY

Libérer： 2016-05-16 15:06:00

original

1682 Les gens l'ont consulté

1. Configuration de l'environnement de développement bootstrap
1. Téléchargez bootstrap, http://www.bootcss.com/
2. Téléchargez jquery et accédez-y directement via IEhttp://code.jquery.com/jquery-2.0.3.min.js
3. Importez les fichiers js et css de bootstrap et jquery dans la page html, et la balise de .viewport Cette balise peut modifier l'affichage sur la plupart des appareils mobiles. Ajouter si lt IE 9... etc. compatibilité inférieure à ie9.
Le modèle est le suivant

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

Copier après la connexion

2. Système de grille
1. Boostrap divise le bureau en un tableau de 12 lignes * n colonnes pour la mise en page. C'est le cœur de boostrap.
2. .row effectue une division au niveau des lignes et doit être inclus sous .container.
3. col-xx-* effectue une division au niveau des colonnes, comme indiqué ci-dessous

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

Copier après la connexion

4. Le décalage de colonne, est obtenu via 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>

Copier après la connexion

5. Le tri des colonnes, peut réaliser un tri à gauche ou à droite des colonnes via .col-xx-push-* et .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>

Copier après la connexion

6. Imbrication de colonnes , la ligne peut être imbriquée dans la 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>

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.