communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > js tutoriel > Apprenez à utiliser les contrôles de base bootstarp (table, formulaire, bouton)_compétences javascript

Apprenez à utiliser les contrôles de base bootstarp (table, formulaire, bouton)_compétences javascript

WBOY
Libérer： 2016-05-16 15:05:57
original
1980 Les gens l'ont consulté

Bootstrap définit pour nous des styles simples et faciles à utiliser. Nous n'avons besoin que de quelques spécifications de style pour réaliser un affichage de page simple et élégant.
Cet article présente principalement les contrôles de base suivants :
1. tableau
2. formulaire
3. bouton

1. La table utilise toujours

Il existe les classes suivantes pour contrôler les attributs du tableau. Par défaut, le style du tableau occupera le conteneur parent

. 

 <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <table class="table table-bordered table-striped table-hover">
      <tr>
        <th>标题一</th>
        <th>标题二</th>
        <th>标题三</th>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
      </tr>
    </table>
      </div>
    </div>
  </div>
Copier après la connexion

Enveloppez n'importe quel .table dans .table-responsive pour créer un tableau réactif qui défilera horizontalement sur les appareils à petit écran (moins de 768 px). Lorsque l'écran est plus large de 768 pixels, la barre de défilement horizontale disparaît.

2. Forme, il existe plusieurs définitions de style

Les étiquettes et les contrôles doivent être enveloppés dans des divs de type form-group. Le formulaire par défaut est le suivant
. 

 <div class="container">
    <form>
      <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1"
          placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control"
          id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="checkbox">
        <label> <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
Copier après la connexion

Formulaire en ligne, Spécifiez la catégorie sr uniquement pour l'étiquette, vous pouvez masquer l'étiquette, mais l'étiquette ne doit pas être omise.

  <div class="container">
    <form class="form-inline">
      <div class="form-group">
        <label for="exampleInputEmail1" class="sr-only">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1"
          placeholder="Enter email">
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">Password</label>
        <input type="password" class="form-control"
          id="exampleInputPassword1" placeholder="Password">
      </div>
      <div class="checkbox">
        <label> <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
Copier après la connexion

La forme horizontale nécessite de spécifier la longueur de l'étiquette et du groupe d'étiquettes, et d'adopter une disposition en système de grille. L'étiquette est alignée à droite et le groupe d'étiquettes est aligné à gauche. 

 <div class="container">
    <form class="form-horizontal">
      <div class="form-group">
          <label for="exampleInputEmail1" class="col-md-2 control-label">Email
            address</label>
        <div class="col-md-8">
          <input type="email" class="form-control" id="exampleInputEmail1"
            placeholder="Enter email">
        </div>
      </div>
      <div class="form-group" >
          <label for="exampleInputPassword1" class="col-md-2 control-label">Password</label>
        <div class="col-md-8">
          <input type="password" class="form-control"
            id="exampleInputPassword1" placeholder="Password">
        </div>
      </div>
      <div class="checkbox col-md-offset-2">
        <label> <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
    </form>
  </div>
Copier après la connexion

validation du formulaire, bootstrap3 prend en charge la validation personnalisée des formulaires. L'ajout de requis indique que le formulaire est requis, node.setCustomValidity peut définir la validation personnalisée du formulaire

<div class="container">
    <form class="form-horizontal">
      <div class="form-group">
        <label for="exampleInputEmail1" class="col-md-2 control-label">Email
          address</label>
        <div class="col-md-8">
          <input type="email" class="form-control" id="exampleInputEmail1"
            placeholder="Enter email" required>
        </div>
      </div>
      <div class="form-group">
        <label for="password1" class="col-md-2 control-label">Password</label>
        <div class="col-md-8">
          <input type="password" class="form-control"
            id="password1" placeholder="Password" required onchange="checkPassword()">
        </div>
      </div>
<div class="form-group">
        <label for="password2" class="col-md-2 control-label" onchange="checkPassword()"> Password2</label>
        <div class="col-md-8">
          <input type="password" class="form-control"
            id="password2" placeholder="Password2" required>
        </div>
      </div>
      <div class="checkbox col-md-offset-2">
        <label> <input type="checkbox"> Check me out
        </label>
      </div>
      <button type="submit" class="btn btn-default col-md-offset-2">Submit</button>
    </form>
  </div>
  
  <script>
    function checkPassword() {
      var pwd1 = $("#password1").val();
      var pwd2 = $("#password2").val();
      if (pwd1 != pwd2) {
        document.getElementById("password1").setCustomValidity("两次输入的密码不一致");
      } else {
        document.getElementById("password1").setCustomValidity("");
      }
      
    }
  </script>
Copier après la connexion

3. Style de bouton

Utilisez .btn-lg, .btn-sm, .btn-xs pour obtenir des boutons de différentes tailles. L'ajout de .btn-block au bouton peut lui faire remplir 100 % de la largeur du nœud parent et du bouton. devient également un élément de niveau bloc. L'élément ,