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

Maison

interface Web

js tutoriel

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

May 16, 2016 pm 03:06 PM

système de grille

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

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;meta content="width=device-width, initial-scale=1.0" name="viewport" /&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link href="css/bootstrap.min.css" rel="stylesheet" media="screen"&gt;
&lt;!--[if lt IE 9]&gt;
   &lt;script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"&gt;&lt;/script&gt;
   &lt;script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
&lt;script src="js/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
&lt;script src="js/bootstrap.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div class="container"&gt;
    
  &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;1&lt;/div&gt;
      &lt;div class="col-md-3"&gt;2&lt;/div&gt;
      &lt;div class="col-md-3"&gt;3&lt;/div&gt;
      &lt;div class="col-md-3"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;5&lt;/div&gt;
      &lt;div class="col-md-3"&gt;6&lt;/div&gt;
      &lt;div class="col-md-3"&gt;7&lt;/div&gt;
      &lt;div class="col-md-3"&gt;8&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

Copier après la connexion

4. Le décalage de colonne, est obtenu via col-xx-offset-*

  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;1&lt;/div&gt;
      &lt;div class="col-md-3"&gt;2&lt;/div&gt;
      &lt;div class="col-md-3"&gt;3&lt;/div&gt;
      &lt;div class="col-md-3"&gt;4&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;5&lt;/div&gt;
      &lt;div class="col-md-3"&gt;6&lt;/div&gt;
      &lt;div class="col-md-3 col-md-offset-3"&gt;7&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

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

  &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;1&lt;/div&gt;
      &lt;div class="col-md-3"&gt;2&lt;/div&gt;
      &lt;div class="col-md-3 col-md-push-3"&gt;3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;5&lt;/div&gt;
      &lt;div class="col-md-3"&gt;6&lt;/div&gt;
      &lt;div class="col-md-3 col-md-pull-2"&gt;7&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;

Copier après la connexion

6. Imbrication de colonnes , la ligne peut être imbriquée dans la col.

    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;1&lt;/div&gt;
      &lt;div class="col-md-3"&gt;2&lt;/div&gt;
      &lt;div class="col-md-3"&gt;3&lt;/div&gt;
      &lt;div class="col-md-3"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-md-1"&gt;5&lt;/div&gt;
          &lt;div class="col-md-1"&gt;6&lt;/div&gt;
          &lt;div class="col-md-1"&gt;7&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;

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.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn