Bootstrap ist wie ein Front-End-Framework. Es hat bereits viele CSS arrangiert und kann direkt aufgerufen werden, wenn es für die Front-End-Entwicklung erforderlich ist. Die Website -Adresse lautet http://www.bootcss.com. Die Verwendung von Bootstrap kann die Layoutzeit in CSS während der Front-End-Entwicklung verkürzen
Sie müssen Bootstrap verwenden, um die Komponenten auf der offiziellen Website herunterzuladen (Klicken Sie hier, um den Link zu öffnen). Die in der Produktionsumgebung verwendete Bootstrap -Version (klicken Sie, um den Link zu öffnen). Bootstrap3 ist nicht mit 2. kompatibel. Es wird empfohlen, Bootstrap3 direkt gemäß seinen Entwicklungsdokumenten zu verwenden.
Kopieren Sie nach dem Dekomprimieren von Bootstrap die erhaltenen 3 Ordner CSS, Schriftarten und JS in das Site -Verzeichnis. Wenn es sich um das JSP -Webprojekt von Eclipse handelt, stellen Sie es unter den Weber -Ordner.
Danach können Sie Bootstrap anrufen, um die Front-End-Seite in dieser Site-Verzeichnis schnell zu modellieren.
Es ist jedoch erwähnenswert, dass verschiedene Browser unterschiedliche Erklärungen für Bootstrap haben. IE kann einige Stile nicht lesen, aber die grundlegenden Funktionen sind nicht betroffen, und die Seite ist nur ein bisschen hässlich.
Hier ist ein Vergleich zwischen IE und Google Chrome auf derselben Seite:
1. Grundziele
Verwenden Sie Bootstrap, um eine schöne Zielseite für PC, Tablet und Mobiltelefon zu schreiben.
Wenn Sie auf dem PC gedehnt werden, passen sich verschiedene Elemente automatisch an den Bildschirm an.
Wenn Sie solche Seiten auf Ihrem Telefon öffnen, passen Sie sich direkt an den Telefonbildschirm an, ohne dass die automatische Einstellung des Benutzers erforderlich ist.
2. Grundlegende Ideen
Das Layout der Seite ist wie folgt nach dem inhärenten Bootstrap -Stil konzipiert:
3. Produktionsprozess
Der spezifische Code der gesamten Seite ist wie folgt, und das Folgende analysiert die Tags nacheinander:
<! DocType html public "-// w3c // dtd html 4.01 transitional // en"> <html> <head> <titels> login-Seite </title> <meta name = "viewPort" content = "width = Geräte-Width, initial-scale = 1.0, user-scalable rel = "styleSheet" media = "screen"> </head> <body> <div> <div> <table Fram = "void"> <tr> <td> <img src = "Images/img0.jpg"/> </td> <td> Willkommen. Bitte melden Sie sich zuerst an. </td> </tr> </table> </div> <div> <form role="form" action="1.html" method="post"> <div> <label for="username"> Username: </label> <div> <input type="text" name="username" placeholder="username" id="username" /> </div> </div> <div> <label for="password"> Kennwort: </Label> <div> <Eingabe type = "Passwort" name = "password" placeholder = "password" id = "password"/> </div> </div> <div> <div> <button type = "enden"> Anmeldung in </button> <klein> hat kein Konto? <a href = "http://2.com"> klicken, um zu registrieren </a> </small> </div> </div> </form> </div> </div> </div> </body> </html>
1. <Head> Tag
Geben Sie zunächst die folgenden zwei Codezeilen in das <kopf> -Tag:
<Head> <title> Login-Seite </title> <!-Erfordern Sie die Seite, um sich automatisch an den Bildschirm des Browsers anzupassen-> <meta name = "Ansichtsfenster" content = "width = Gerätebreite, initial-scale = 1.0, Benutzer scalable = no"> <!-Declare Ich möchte Bootstrap-> <link href = "css/bootstrap.css" "rel =" csshose "css/" css/bootstrap.cs "" "css" cs </head>
2. <Body> Tag
(1) Schreiben Sie zuerst <div> </div> und setzen Sie den Code hinein. Die grundlegende Beschreibung lautet wie folgt:
(2) <Div> Tag
<Div> <!-Stellen Sie die Tabelle ein, um diese CSS-Schicht zu layout. Es ist nicht einfach, dem IMG -Tag Align = "links" hinzuzufügen. Das Bild überfließt zur Ebene-> <!-Wie <table>-> <table Frame = "void"> <tr> <td> <img src = "Images/img0.jpg"/> </td> <td> Willkommen. Bitte melden Sie sich zuerst an. </td> </tr> </table> </div>
(3) Setzen Sie unter dem <Div> -Tag zuerst eine Formelement -Formrolle = "Form" action = "1.html" methode = "post">. Im Vergleich zu gewöhnlichen HTML -Formen hat dieses Formular mehr Klassenattribute und Rollenattribute. Es ist nicht erforderlich, viel über das Klassenattribut zu sagen. Wenn der Wert ist, auch wenn das Formular genügend Speicherort hat, befindet sich das äußere Etikett und das Eingabefeld nicht in derselben Zeile. Wenn der Wert der aktuelle Form-Horizontal ist, ist er wie im Effekt der Abbildung dargestellt. Das Rollenattribut zeigt keinen Effekt und wird nur nach dem chinesischen Dokument von Bootstrap hinzugefügt.
Als nächstes sind die Elemente unter jeder Form Form wie folgt:
<div> <Formrolle = "Form" action = "1.html" method = "post"> <!-Die äußere Beschriftung jeder Eigenschaft bildet ein Form-Gruppen-Tupel mit dem Eingabefeld-> <div> <!-Das folgende Klassenattribut ist, dass es automatisch nach der Größe des Bildschirms gestreckt wird. Alles, was natürlich nicht in IE8 erklärt werden kann. Ich kann keine Funktion der ID sehen, es wird nur gemäß den Anforderungen der chinesischen Bootstrap -Dokumente hinzugefügt. </div> <div> <!-Die Schaltfläche unterscheidet sich hier von der HTML-ordentlichen Sendetaste, wirkt sich jedoch nicht auf die Formulareingabe aus-> <Schaltflächen-Typ = "Senden"> Login </button> <!-<klein> Tag stellt sicher, dass dieser Text die gleiche Zeile wie die Schaltfläche "Senden" ist. <a href = "http://2.com"> klicken, um zu registrieren </a> </small> </div> </div> </form> </div> </div>
Zu diesem Zeitpunkt wurde die Entwicklung dieser Seite abgeschlossen.
Wenn Sie weiterhin ausführlich studieren möchten, können Sie hier klicken, um Ihnen zu studieren und 3 aufregende Themen anzuhängen:
Bootstrap -Lern -Tutorial
Bootstrap Practical Tutorial
Bootstrap-Plug-in-Nutzungs-Tutorial
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.