Warum Bootstrap verwenden?
- Bootstap ist das beliebteste Framework am Frontend (alle großen Lernwebsites sagen es so ... emmm),
da es das beliebteste ist, das natürlich gelernt werden muss, kann es uns helfen, Webprojekte schnell
und auf verschiedenen Geräten zu entwickeln Es gibt ein gutes flexibles Layout ohne ein Set auf der PC-Seite, ein Set auf der mobilen Seite, ein Set auf dem Gesicht und ein Set auf der Rückseite. Dies ist nicht gut und zu müde, daher ist ein flexibles Layout erforderlich
Was sind die Vorteile ?
- Zuvor haben wir eine Navigationsleiste geschrieben. Erstens verwendet ul Floating, Positioning und eine lange Liste. Dies ist für uns Faulen nicht akzeptabel! ! ! Also kam er, Bootsrtap hat viele gängige Komponenten für uns definiert, wie eine Blackbox, wie die Navigationsleiste, einfach ablegen, einfach gut aussehen Schaltfläche i, Dropdown-Menü, Sie können direkt den entsprechenden Klassennamen hinzufügen Nachdem wir es gelesen haben, kann es immer noch verwirrend sein, dann werden wir verstehen, was wir unter Experimentieren verstehen
Vorbereitung:
- Laden Sie die Ressourcenbibliothek von der offiziellen Website herunter. Verwenden Sie nach dem Herunterladen den Linkimport als CSS-Datei, JS-Datei, Notizimport
<srcipt>, Download und Import. Es ist ein Ärger. Ich bin eine faule Person. Sie haben mich gebeten, diese zu erhalten? ? ? Keine Sorge, der Faule importiert die Ressourcenbibliothek, er ist hier - Es wird empfohlen, die Bibliothek auf dem CDN für statische Dateien in China zu verwenden. Dies ist etwas verwirrend. Es ist in Ordnung, den Linkimport zu verwenden und den folgenden Link direkt in den Kopf der Seite zu kopieren.
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
- Plug-Ins herunterladen
Öffnen Sie den vscode (ich habe vsc verwendet, verschiedene Plug-in-Funktionen, bequem zu bedienen), wählen Sie erweiterte Funktionen (Strg + Scheiße + x) aus, suchen Sie nach Bootstrap 3-Snippets und Bootstrap 4-Snippets, laden Sie sie nach der Installation neu. Dieses Plugin ist eine Erinnerungsfunktion. Mal sehen, wie man es benutzt! ! !
Fangen Sie an zu üben:
- Beginnen wir mit bs3- oder Schlüsselwörtern und nehmen wir die häufig verwendeten Komponenten der Seite
- bs3-form oder form, es werden automatisch mehrere Stile angezeigt, die Sie auswählen können. Klicken Sie einfach auf einen, um den entsprechenden Stil anzuzeigen. Es gibt Radio, Kontrollkästchen, Dropdown-Auswahlmenü, Eingabefeld usw. Lassen Sie uns einen kurzen Blick darauf werfen
- Das Auswahl-Dropdown-Menü wird mit einem Klick generiert und der Text und die Breite können von Ihnen selbst geändert werden.
Generieren Sie schöne Optionsfelder mit einem Klick
- Jemand fragte, Sie sagten, dass es mit einem Klick generiert werden kann, wo es so einfach ist, richtig ist so einfach, wenn wir das Formular eingeben, wird eine Eingabeaufforderung generiert, wir kennen immer das Kontrollkästchen, finden das Schlüsselwort, ja, es gibt viele Wenn Sie nicht damit vertraut sind, können Sie es ausprobieren. Welches ist das, was wir am meisten wollen? Andere Schaltflächen, Navigationsleisten und Webseiten-Rotationskarten sind ähnlich. Geben Sie Schlüsselwörter ein und finden Sie dann den gewünschten Stil. OK !!!
- Es gibt auch einen wichtigen Wissenspunkt: Obwohl es einfach zu bedienen ist, was soll ich tun, wenn ich es auf dieser Basis ändern möchte? Es ist wie das Kopieren von Hausaufgaben, es ist nicht immer dasselbe, ich bin faul, aber nicht dumm, hhh. Sorgfältige Personen stellen möglicherweise fest, dass sein Stil im Wesentlichen durch den Klassennamen festgelegt wird. Wenn das Dropdown-Menü oben nicht die blaue Berührung der Maus als blauen Hintergrund anzeigen soll, können wir die Priorität auf dieser Grundlage festlegen Höhere Selektoren wie der ID-Selektor können, solange das Gewicht höher ist als er (die Kette der Probleme mit Gewichten ist unten ), seinen ursprünglichen Stil abdecken (natürlich nicht zu viel Ärger, oder Sie möchten in Zukunft nicht blau sein Hintergrund, Sie können die von der offiziellen Website heruntergeladene Quelldatei direkt ändern. Schauen Sie sich also auch den Einführungsartikel der faulen Person genau an. Hhh )
Wie man das Gewicht einfach versteht und berechnet
Es kann jederzeit für die zukünftige Verwendung gesammelt werden! ! !
