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

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

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>

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>

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>

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>

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 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 ou d5fd7aea971a85678ba271703566ebfd ajoute une classe de bouton.

  <div class="container">
    <button type="button" class="btn btn-default btn-block">Default</button>
    <button type="button" class="btn btn-primary btn-block">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">链接</button>
    <a class="btn btn-default" href="#" role="button">Link</a>
    <button class="btn btn-default" type="submit">Button</button>
    <input class="btn btn-default" type="button" value="Input">
    <input class="btn btn-default" type="submit" value="Submit">
  </div>

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.