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, ,
<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>
Nach dem Login kopieren Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Vorheriger Artikel：So verhindern Sie die SQL-Injection in JS-Code (supereinfach)_Javascript-Kenntnisse
Nächster Artikel：So entfernen Sie doppelte Elemente effizient aus dem JS-Array
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
|
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
