1: Einführung in Bootstrap
Boostrap ist ein sehr beliebtes Front-End-Entwicklungsrahmen, das die Entwicklungseffizienz von Front-End-Teams erheblich verbessert. Bootstrap vervollständigt die gängigen CSS -Layoutkomponenten und JavaScript -Plugins, sodass Entwickler die Verwendung einfach werden können. Verwenden Sie Bootstrap, um schnell ansprechende Seiten zu erstellen, und sind mit mobilen Geräten kompatibel.
Zwei: Bootstrap -Funktionen
Geben Sie einen vollständigen Satz von CSS-Plug-Ins an, reichhaltige vordefinierte Stilblätter, einen Satz von JQuery-basierten JS-Plug-in-Tischen. Flexible Responsive Grid -Löschensystem. Mobile erstklassige Entwicklung basierend auf weniger und SASS.
Drei: Verwenden Sie Bootstrap
1. Schritt 1:
Laden Sie den neuesten Bootstrap unter http://www.bootcss.com/ herunter. Nach der Dekompression gibt es drei Ordner, die CSS, JS bzw. Schriftarten platzieren. Es gibt eine komprimierte Version von CSS- und JavaScript -Dateien, und Sie können eine Version entsprechend Ihren Anforderungen auswählen. Die unkomprimierte Version wird während der Entwicklung verwendet und die komprimierte Version wird während der Veröffentlichung verwendet.
2. Die Anzeige des Code -Codes festgelegt.
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "IE = Edge, Chrome = 1"> <! name = "Ansichtsplätze" content = "width = Gerätebreite, initiale scale = 1"> <!-Die obigen drei Meta-Tags * müssen * vorne platziert werden, und jeder andere Inhalt * muss ihnen folgen! -> <title> Bootstrap-Vorlagenstil </title> <!-Startstrap einführen-> <link href = "css/bootstrap.min IE 8 erfordert die Zusammenarbeit von reagieren.js, um Unterstützung für Medienanfragen zu erhalten. Response.js können nicht mehr unter der Datei ausgeführt: // Path-Datei: //-> <!-[Wenn LT IE 9] bedeutet, dass sie in Browsern unter IE9-> <!-[wenn lt 9]> <script src = "// cdn.bootcss.com/html5shiv/3.2/html5shiv.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Sfol. src = "// cdn.bootcs.com/respect.js/1.4.2/respect.min.js"> </script> <! [endif]-> </head> <body> <h1> Hallo, Welt! </h1><!--Cite the jquery plugin at the bottom to achieve bootstrap dynamic effects --><script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!--Introducing bootsrp scripts --><script src = "js/bootstrap.min.js"> </script> </body> </html>
3. Grundnutzung:
3.1 Gesamtrahmen-12-Gittersystem
Der Kern von Bootstrap ist ein 12-stöckiges System. Das 12 -Grid -System unterteilt den Inhaltsbereich der Webseite in 12 Kopien gemäß der Breite. Webentwickler können es frei in Portionen kombinieren, was das Layout der Webseite erleichtert und das Layout ordentlich und standardisiert aussieht.
BootStarp bietet einen Style Container namens Container. Der Container ist ein automatisch zentrierter, sehr adaptiver Stil. Die Verwendung von .container als äußerste Div -Stil von Webseiteninhalten kann problemlos 12 Grid -Webseitenlayout implementieren. Darüber hinaus ist dieses 12-Gitter-System an die Bildschirmgröße anpassend, und der .Container passt automatisch die Gesamtbreite und die durchschnittliche Breite des Netzes entsprechend der Bildschirmgröße an.
col-lg-n maximale Säulenbreite 95px Bei> = 1200px-Pixeln, dividieren Sie. Die Breite des Restes beträgt 100%
Col-MD-N Maximale Breite 78px; Divide .Container12 gleichermaßen mit> = 992px -Pixeln, die 100% verbleiben
col-sm-n maximale Säulenbreite 60px Bei> = 768px Pixel, dividieren
Die Spaltenbreite col-xs-n entspricht der Ansichtsfenstergröße 12. Container 12 entspricht dem Bildschirm jeder Größe
3.2 Grundstile
(1) Der H1-H6-Stil von Bootstrap wurde kühn abgesagt, und die oberen und unteren Ränder werden neu definiert H1-H3 Margin-Top: 20px; Rand-Bottom-10PX; H3-H6 Margin-Top: 10px; Rand-Bottom-10PX;
.
(3) Bootstrap bietet fünf Standard -Farbstile, -primary Key Blue, -success -Erfolg grün, -info -Informationen Blue -Warning Orange, -Danger gefährlich rot
3.3BTN-Komponente +BTN-Gruppe
<button type = "button" class = "btn btn-primary"> Taste Taste </button> Alarmkomponente <div class = "alert" class = "alert-alert-danger"> Danger Warning </div>
Allgemeine Komponenten haben vier Größen: Ultra-kleiner XS, kleiner SM, gewöhnlicher und großer LG. Verwenden Sie die Methode IS Komponentenname-Größe <Taste type = "button" class = "btn btn-lg"> Ultra-Large-Taste </button> verschiedene Arten von Schaltflächen derselben Komponente können in Kombination verwendet werden.
<Button type = "Button" class = "btn btn-primary btn-lg"> Ultra-large-Taste-Taste </button> <!-Btn-Gruppe-> <div> <button> Home </button> <button> zweite Seite. Liste <span> </span> </button> <ul> <li> lenovo </li> <li> ASUS </li> <li> Apfel </li> </ul> </div>
3.4Table Tischstil:
Fügen Sie dem Tabellenelement ein DIV-übergeordnetes Element hinzu. Fügen Sie dieser DIV eine entsprechende Tabelle hinzu. Wenn das Ansichtsfenster -Pixel weniger als 768px ist, wird eine horizontale Bildlaufleiste angezeigt.
<!-Tabelle, es gibt Abstandsfarben zwischen Tabellenstreifenlisten, tabellasive Tabelle adaptiv-> <div> <table> <tr> <td> 1 </td> <td> 1 </td> <td> 1 </td> <td> 1 </td> </tr> <tr> <td> 2 </td> <td> 2 </td> <td> 2 </td> </tr> <tr> <td> 2 </td> </tr> <tr> <td> 3 </td> <td> 3 </td> <td> 3 </td> </tr> </table> </div> </div>
3.5Badge Abzeichen
<!-Abzeichen Abzeichen-> <br/> <a href = "#"> Special Care <Pan> 42 </span> </a> <br/>
3.6 Navigationsleiste
(1) Kapselnavigationsleiste
<ul> <li> <a href = "#"> dynamic <span> 42 </span> </a> </li> <li> <a href = "#"> profile </a> </li> <li> <a href = "#"> private Nachricht <span> 3 </span> </a> </li> </ul>
(2) Labelnavigationsleiste
<!-Tag Navigationmenü-> <ul> <li> <a href = "#news1" data-toggle = "tab"> Firmennachrichten </a> </li> <li> <a href = "#news2" data-toggle = "tab"> Branchennachrichten </a> </li> <li> <a href = "#news3". data-toggle="tab">Notices</a></li></ul><div><div id="news1"><ul><li>Company News</li></ul></div><div id="news2"><ul><li>Industry News</li></li></div><div id="news3"><ul><li>Notice Announcement</li><li>Notice Ankündigung </li> <li> Bekanntmachung Ankündigung </li> </ul> </div> </div>
3.7 Eingangsgruppe
<!-Eingabe+Tastekombination-> <div> <Eingabe type = "text"> <span> <button> Suche </schaltet> </span> </div>
3.8 Karussell
<! DocType html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-äquiv = "x-ua-compatible" content = "IE = Edge, Chrome = 1"> <meta name = "viewport" content = "width = apinrapt temth = apital-Width, initial-scale = 1" 1 "> -Stitel", "width =" width = "rate-width, initial-scale = 1" 1 "> -Stitel"> -Stitel "width =" width = "apital-width, initial-scale = 1" 1 ">"> ">" Widthth = "). style </title> <link href = "../ CSS/bootstrap.min.css" rel = "stylesheet"> <style> body {Hintergrund: #eee} .Item {Position: relativ; Höhe: 400px} .Item img {Position: Relativ; Breite: 100%; Höhe: 400px} .Item p {Position: absolut; Top: 40%; Breite: 100%; Farbe: #fff; } .Item H1 {Position: absolut; Top: 20%; Breite: 100%; Farbe: #fff; text-align: center} @media (max-width: 768px) {.slide {width: 100%}} </style> <!-[wenn src = "../ js/reaging.min.js"> </script> <! [endif]-> <script src = "../ js/jQuery.min.js"> </script> <script src = "../ js/bootstrap.min ><!--Slide Navigation--><ol><li data-target="#myCarousel" data-slide-to="0"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" Data-Slide-to = "2"> </li> </ol> <div style = "height: 400px"> <!-Erster Folie-> <div style = "height: 400px"> <img dateninhalter-rendered = "true" src = "../ Images/icon1.png"> <H1> Titel-Inhalt </h1> <p> </p> </p> </p> paragraph content </p> </h1> </h1> </p> </p> </p> </p> paragraph content </p> </h1> </h1> </p> </p> </p> </p> paragraph content </p> </h1> </h1> </h1> </h1> </<p. 1 </div> </div> <!-Zweite Folie-> <div> <img dataolder-rendered = "true" src = "../ Bilder/icon2.png"> <div> title2 </div> </div> <!-dritte Folie-> <div> <img dataolder-rendered = "true" true ". src="../images/icon3.png"><div>Title3</div></div><!--Live-right navigation--><a href="#myCarousel" data-slide="prev"><span aria-hidden="true"></span><span>Previous</span></a><a href="#myCarousel" data-slide="next"><span aria-hidden = "true"> </span> <span> Weiter </span> </a> </div> </div> <script> $ (function () {$ ('#mycarousel'). on ('slide.bs.bs.carousel', function () {// alert ("Callback-Funktion");});});3.9 Panel-Gruppen
<! DocType html> <html> <Head> <meta charset = "utf-8"> <title> bootstrapinstance- tab-Seite (Tab) Plugin </title> <link rel = "styleSheet" href = "../ CSS/bootstrap.min.css"> < src = "../ js/bootstrap.min.js"> </script> <body> <div id = "panel-gruppe"> <!-Panel-Inhalt schließen-> <div> <h4> <a data-toggle = "collapse" data-parent = "#panel-gruppen" href = "#collapseone"> Panel "> Panel"> Panel "> Panel"> "> Panel"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> "#/h4> </h4> </h4> </h4> </h4> </h4> </h4> </h4> < id="collapseOne"><div>panel content</div></div><!--panel content open--><div><div><h4><a data-toggle="collapse" data-parent="#panel-group" href="#collapseTwo">panel title</a></h4></div><div id="collapseTwo"><div>panel Inhalt </div> </div> </div> </body>
3.10 Medienabfrage
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/><title>Media query</title><style>div {width: 100%; Höhe: 200px; Hintergrundfarbe: rot;}/*Wenn die maximale schmackhafte Breite 980px beträgt, nimmt der packbare <= 980px-Stil wirksam*/@Media (max-Width: 320px) {div {font-Größe: 10px; Hintergrund: gelöscht; Abfrage </div> </body> <script> window.onResize = function () {var mydiv = document.getElementsByTagName ("div") [0];Vier: Dinge zu beachten
1. Container, COL - - (Raster), muss in eine separate DIV eingewickelt werden und dann andere Inhalte darin definieren.
2. Wenn Sie die Klasse oder ID festlegen möchten, die nicht für die Medienabfrage definiert werden kann
Medio ist der Weg, Klassenfehler für die Definition von Medienabfragen zu schreiben <div> aa </div>
Die richtige Art zu schreiben ist es
<div> <div> aa </div> </div>
3. Wenn Sie den Container verwenden, um eine Höhenanpassung zu erreichen, können Sie dem Element keine Höhe hinzufügen, und Sie sollten überlaufen für sein übergeordnetes Element einstellen.
4. Nachdem die Positionierung der Position für das Element festgelegt wurde, beträgt die Breite des Elements 0. Wenn Sie möchten, dass das Element zentriert wird, müssen Sie Breite hinzufügen: 100%; Text-Align: Mitte;
5. Bei der Verwendung des Eingabetags ist Col - - (Raster) für seine übergeordnete Klasse definiert, und können Sie die Eingabeformular -Kontroll hinzufügen, um die Größe der Eingabe so groß wie die übergeordnete Klasse festzulegen.