Das Lernen von Bootstrap ist sehr einfach und der Stil, den es bietet, ist sehr schön. Nur ein kleines einfaches Studium kann schöne Seiten schaffen.
Bootstrap Chinesische Website: http://v3.bootcss.com/
Bootstrap enthält drei Arten von Downloads:
Bootstrap für Produktionsumgebungen
Kompilieren und komprimierte CSS, JavaScript und Schriftart Dateien. Enthalten keine Dokumente und Quelldateien.
Bootstrap -Quellcode
Weniger, Quellcode von JavaScript und Schriftdateien und mit Dokumentation. Benötigt den weniger Compiler und einige Setup -Arbeiten.
Sass
Dies ist ein Quellporting-Projekt von weniger bis SASS, um eine schnelle Einführung in Rails, Compass oder Sass-Nur-Sass-Projekte zu erhalten.
Tatsächlich können wir es verwenden, ohne Bootstrap herunterzuladen:
Die chinesische Website von Bootstrap hat speziell ihren eigenen kostenlosen CDN -Beschleunigungsdienst für Bootstrap erstellt. Basierend auf dem CDN -Service inländischen Cloud -Herstellern ist die Zugangsgeschwindigkeit schneller, der Beschleunigungseffekt ist offensichtlicher, es gibt keine Geschwindigkeit und Bandbreitenbeschränkung und dauerhaft frei.
Base.html
<! DocType html> <html Lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "ie = edge"> <meta name = "adveport" content = "width = toy-widdh, initial-mough, initial-scale = 1" 1 "1"> <; Und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap 101 Vorlage </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcs.com/bootstrap/3.3.4/css/bootstrap.min </h1> <!-jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "http://cdn.bootcs.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcs.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrap wurde in Base.html eingeführt. Speichern Sie es und wir können die von Bootstrap bereitgestellten Stile verwenden.
Schriftartikone
Bootstrap bietet standardmäßig mehr als 200 Symbole. Wir können diese Symbole über das Span -Tag verwenden:
<h3> Symbol </h3> <span> </span> <span> </span> </span> </span> <span> </span> </span> <span> </span> </span> <pan> </span> </span>
Taste
Mit dem <Tasten </button> wird zum Erstellen von Schaltflächen verwendet, und Bootstrap bietet eine Reiche -Schaltflächenstile. <h3>Button</h3> <button type="button">Button</button> <button type="button">primary</button> <button type="button">success</button> <button type="button">info</button> <button type="button">warning</button> <button type="button">warning</button> <button type="button">danger</button> <h3>Button size</h3> <button type = "button"> button </button> <button type = "button"> primär </button> <button type = "button"> Erfolg </button> <button type = "button"> info </button> <h3> Das Symbol in der Taste </h3> <button type = "button"> </span> Taste </button> button> button> button> button> button
Zusätzlich zur Standardgröße der Taste bietet Bootstrap auch drei Parameter, um die Größe der Taste anzupassen, nämlich: BTN-LG, BTN-SM und BTN-XS.
Pulldown-Menü
Das Dropdown-Menü ist eine der häufigsten Interaktionen, und Bootstrap bietet schöne Stile.
<h3> Dropdown-Menü </h3> <div> <button type = "button" id = "dropdownMenu1" data-toggle = "Dropdown" aria-expanded = "true"> Dropdown <span> </span> </button> <ul rollen = "Menü" Aria-labelledby = "DropdownMenu1"> <li-Rollen "-" <li li li) = "> <"> <"> <a. href = "#"> action </a> </li> <li rollen = "Präsentation"> <a rollen = "Menuitem" tabindex = "-1" href = "#"> Eine andere Aktion </a> </li> <li rollen = "Präsentation"> <a rollen rollen = "Menuitem" tabindex = "-1" href = "#"> getrennter Link </a> </li> </ul> </div>
Eingabefeld
Verwenden Sie das Tag <Seingus> </input>, um ein Eingabefeld zu erstellen.
<h3> Eingabefeld </h3> <div> <span> </span> <Eingabe type = "text" placeholder = "userername"> </div> <div> <span> </span> <input type = "password" placeholder = "Passwort"> </div>
Navigationsleiste
Die Navigationsleiste ist als Leitfaden für die gesamte Website unerlässlich.
<h3>Navigation Bar</h3> <nav> <div id="navbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> <li> <a href="#">data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span></span></a> <ul role="menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li></li> <li>Nav header</li> <li><a href="#">Separated Link </a> </li> </li> </li> </ul> </div> <!-/. nave-collapse-> </div> </nav>
Bilden
Die Datenübertragung zwischen Personen und Systemen muss durch Formulare abgeschlossen werden. Zum Beispiel die Einreichung von Registrierungs-/Anmeldeinformationen, die Einreichung von Abfragebedingungen usw. Verwenden Sie das Tag <form> </form>, um ein Formular zu erstellen.
<h3>Form</h3> <form> <div> <span></span> <input type="email" id="exampleInputEmail1" placeholder="Enter email"> </div> <div> <span></span> <input type="password" id="exampleInputPassword1" placeholder="Password"> </div> <div> <label for="exampleInputFile">File input</label> <input type = "Datei" id = "exampleInputFile"> <p> Block-Level-Hilfe-Text hier.
Warnbox
Warnboxen sind ein wichtiges Mittel für das System, um Informationen zu vermitteln und den Benutzern Anleitung zu geben. Es gibt kein Etikett für Warnboxen, und der von Bootstrap bereitgestellte Stil kann sofort schöne Warnboxen erstellen.
<h3> Warnbox </h3> <div rollen = "alert"> <button type = "button" data-dismiss = "alert" aria-label = "close"> <span aria-hidden = "true"> × </span> </button> <strong> Warnung! </div> <div rollen = "alert"> <a href = "#"> Erfolg! </a> </div> <div rollen = "alert"> <a href = "#"> info! </div>
Fortschrittsbalken
Im Verarbeitungsprozess des Systems müssen Benutzer häufig warten, und in der Fortschrittsleiste können Benutzer den Verarbeitungsprozess des Systems wahrnehmen und so die Toleranz erhöhen.
<h3> Fortschrittsbalken </h3> <div> <div rollen = "progreshingBar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100"> 70% </div> </div>
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.
Wenn Sie weiterhin ausführlich lernen möchten, können Sie hier klicken, um Ihnen zu lernen und Ihnen zwei aufregende Themen anzuhängen: Bootstrap -Lern -Tutorial Bootstrap Practical Tutorial