Viele Unternehmen verwenden jetzt den Rahmen von Bootstrap in der Entwicklung. Bootstrap ist die Arbeit eines Twitter-Teams, das unsere Front-End-Entwicklung erheblich vereinfacht. (Ich werde später weniger Verwendung zusammenfassen)
Lernen, API zu verwenden. Ich schlage vor, Sie sehen die API der offiziellen Website direkt an: http://www.bootcss.com/
Hier sind einige Zielrenderings:
Im Folgenden werde ich die Techniken und Prinzipien in einer kleinen Demo zusammenfassen:
Der erste Schritt ist das Herunterladen des komprimierten Bootstrap -Pakets unter http://www.bootcss.com/, erstellen Sie einen neuen Index.html, verwenden Sie Sublime oder einen anderen Editor, um die Indexseite zu öffnen, und das Verzeichnis nach der Dekompression ist
Schritt 2 : Kopieren Sie eine grundlegende Vorlage von der offiziellen Website http://v3.bootcss.com/getting-started/, um die nachfolgende Entwicklung zu erleichtern.
<! 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 Template </title> <!-Bootstrap-> <link href = "css <!-[wenn lt ie 9]> <script src = "// cdn.bootcs.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <src = "// cdn.bootcs.com/reatt </head> <body> <h1> Hallo, Welt! </h1> <!-jQuery (notwendig für die JavaScript-Plugins von Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min src = "js/bootstrap.min.js"> </script> </body> </html>
1) Hinweis: Der Verweis auf jQuery.js muss vor Bootstrap.min.js stehen, und es ist am besten, ein jQuery.js manuell herunterzuladen und in den JS -Pfad zu platzieren, <script src = "js/jquery.min.js"> </script>
Denn später, als ich emulierte, stellte ich fest, dass die Dropdown- und Karussellanimationseffekte verschwunden waren, und ich stellte fest, dass die JQuery-Datei der grundlegenden Vorlage heruntergeladen wurde und möglicherweise nicht mit dem Internet verbunden war, sodass ich sie nicht heruntergeladen habe. Es ist am besten, den lokalen alleine zu zitieren.
2) Hinweis: Die CSS -Referenz befindet sich über der Seite und die JS -Referenz befindet sich unter der Seite, da CSS zuerst die gerenderte Seite laden muss und JS nach Abschluss der Seite der Seite geladen und ausgeführt werden muss. und die Meta-Anweisungen für mobile Geräte sind angepasst an: <meta name = "viewport" content = "width = Gerätebreite, initial scale = 1">
Schritt 3, Navigationsleiste
1) Zentrierungseffekt: Container-Fluent muss in den Container geändert werden
2) Wechseln Sie weiß zu Schwarz mit Kontrasteffekt: <NAV>
3) Die Navigationsleiste ist an die Spitze festgelegt und fügen Sie Zeitklassenattribute hinzu: Navigabfixed-Top
<nav> <!-- Brand and toggle get grouped for better mobile display --> <div> <button type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> <span></span> </button> <a href="#">Zootopia</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div id="bs-example-navbar-collapse-1"> <ul> <li><a href="#">Homepage<span>(current)</span></a></li> <li><a href="#">Brief Beschreibung </a> </li> <li> <a href = "#"> Funktionen </a> </li> <li> <a href = "#"> über </a> </li> </div> <!-/.navbar-collapse-> </div> <!
4) Die Navigationsleiste bedeckt die Oberseite des Körpers, fügen Sie also Stil hinzu
<style type = "text/css"> body {padding-top: 50px; } </style>5) Navigationselemente Fügen Sie Dropdown-Menüs hinzu
<li><a href="#" data-toggle="dropdown">Features</a> <ul> <li><a href="#">Animal 1</a></li> <li><a href="#">Animal 2</a></li> <li><a href="#">Animal 3</a></li> <li><a href="#">Animal 4 </a> </li> </li> </li>
Beachten Sie, dass der Inhalt des Untermenüs im äußersten Li-Tag verschachtelt ist und das Li-Tag eine Unterbrechung des Unterrichts hat, und das Untermenü ist ebenfalls ein UL-Tag, und die Klasse ist Dropdown-Menu. Siehe oben für die spezifische Zuordnungsbeziehung.
Schritt 4: Erhöhen Sie den Rotationseffekt und kopieren Sie das Karussellmodul der Bootstrap -Komponente:
<div id = "carousel-example-generic" data-ride = "carousel"> <!-Indikatoren-> <ol> <li data-target = "#carousel-example-generic" data-klide-to = "0"> </li> <li data-target = "#carousel-exam-generic" data-Sslside "1" 1 "> </li> </li li li lilside" data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div role="listbox"> <div> <img src="image/1.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the female house viewing position that expands the experience of Die weibliche Hausbeobachtungsposition, die die beiden Zahlen öffnet, die im Land auftreten. that occur in the country</p> </div> </div> <div> <img src="image/3.jpg"> <div> <h1>Zootopia 1</h1> <p>The visiting of the female house viewing position that expands the experience of the female house viewing position that opens the two numbers that occur in the country</p> </div> </div> <!-- Controls --> <a href = "#carousel-example-generic" rollen = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> Vorherige Seite </span> </a> <a href = "#carousel-exam-gen" rolle </a> </div>
1) Um beim Drehen des Bildes keinen leeren Platz oder keine Lücken zu haben, fügen Sie den Stil hinzu
.Carousel {Höhe: 500px; Hintergrundfarbe: #000; } .Carousel .Item {Höhe: 500px; Hintergrundfarbe: #000; } .Carousel img {Breite: 100%; }2) Setzen Sie den Stil für Text, um ihn schöner zu machen
.Casousel-Kapion P {Rand-Bottom: 20px; Schriftgröße: 20px; Zeilenhöhe: 1,8; }Die aktuellen Effekte sind wie folgt
Lassen Sie uns weitermachen: (Codierung wird aktualisiert ...)
Der zweite Teil wurde aktualisiert, Demo im Front-End-Entwicklungsfall basierend auf Bootstrap (II)
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 noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -Tutorial