Gemeinschaft
Lernen
Tools-Bibliothek
KI-Tools
Freizeit
suchen
Deutsch
Heim Web-Frontend js-Tutorial Erlernen Sie die Verwendung grundlegender Bootstarp-Steuerelemente (Tabelle, Formular, Schaltfläche) und Javascript-Kenntnisse

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:05 PM
button form table

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

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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