Erlernen Sie die Verwendung grundlegender Bootstarp-Steuerelemente (Tabelle, Formular, Schaltfläche) und Javascript-Kenntnisse

Bootstrap definiert für uns einfache und benutzerfreundliche Stile. Wir benötigen nur wenige Stilspezifikationen, um eine einfache und elegante Seitenanzeige zu vervollständigen.
In diesem Artikel werden hauptsächlich die folgenden grundlegenden Steuerelemente vorgestellt:
1. Tabelle
2. Formular
3. Schaltfläche

1. Tabelle verwendet weiterhin f5d188ed2c074f8b944552db028f98a1ae20bdd317918ca68efdc799512a9b3992cee25da80fac49f6fb6eec5fd2c22aa34de1251f0d9fe1e645927f19a896e8b4d429308760b6c2d20d6300079ed38eb6c5a531a458a2e790c1fd6421739d1c Es gibt die folgenden Klassen zur Steuerung von Tabellenattributen. Standardmäßig belegt der Tabellenstil den übergeordneten Container

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

Umschließen Sie jede .table mit .table-responsive, um eine reaktionsfähige Tabelle zu erstellen, die auf Geräten mit kleinem Bildschirm (weniger als 768 Pixel) horizontal scrollt. Wenn der Bildschirm 768 Pixel breiter ist, verschwindet die horizontale Bildlaufleiste.

2. Form, es gibt mehrere Stildefinitionen

Labels und Steuerelemente sollten in Divs vom Typ „Formulargruppe“ eingeschlossen werden. Das Standardformular lautet wie folgt

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

Inline-Formular, Geben Sie die Nur-SR-Kategorie für die Beschriftung an. Sie können die Beschriftung ausblenden, die Beschriftung darf jedoch nicht weggelassen werden.

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

Für die horizontale Form müssen Sie die Länge für das Etikett und die Etikettengruppe angeben und ein Rastersystemlayout übernehmen. Die Beschriftung wird nach rechts ausgerichtet und die Beschriftungsgruppe wird nach links ausgerichtet.

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

Formularvalidierung, bootstrap3 unterstützt die benutzerdefinierte Validierung von Formularen. Das Hinzufügen von „required“ gibt an, dass das Formular erforderlich ist. node.setCustomValidity kann die benutzerdefinierte Validierung des Formulars festlegen

<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. Schaltflächenstil

Verwenden Sie .btn-lg, .btn-sm, .btn-xs, um Schaltflächen unterschiedlicher Größe zu erhalten. Durch Hinzufügen von .btn-block zur Schaltfläche kann diese 100 % der Breite des übergeordneten Knotens und der Schaltfläche ausfüllen wird auch zum Blockebenenelement, 3499910bf9dac5ae3c52d5ede7383485, bb9345e55eb71822850ff156dfde57c8 oder d5fd7aea971a85678ba271703566ebfd

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

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