Bootstrap ist ein einfaches und flexibles HTML5- und CSS3-basierte HTML5- und CSS3-basierte HTML-, CSS- und JavaScript-Toolset zum Erstellen von Web-Front-End-Seiten. Es verfügt über eine freundliche Lernkurve, eine hervorragende Kompatibilität, reaktionsschnelles Design, 12 Gittergitter, Style Assistent-Dokumentation, benutzerdefiniertes JQuery-Plug-In, vollständige Klassenbibliothek, basierend auf weniger und anderen Funktionen. Bootstrap erleichtert die Webentwicklung schneller und einfacher.
1. Bootstrap Download
Offizielle Website: http://getbootstrap.com/; Erste Schritte mit Anfängern: http://getbootstrap.com/getting-started/
Wir können Bootstrap- und Bootstrap -Quellcode von der offiziellen Website herunterladen. Wenn Sie nicht herunterladen möchten, können Sie auch die von Bootstrap bereitgestellte CDN verwenden.
2.Bootstrap -Dateistruktur
Bootstrap/
├── CSS/
│ ├── Bootstrap.css
│ ├── Bootstrap.cs.map
│ ├── Bootstrap.min.css
│ ├── Bootstrap.min.css.map
│ ├── Bootstrap-themen.css
│ ├── Bootstrap-theMe.css.map
│ ├── Bootstrap-theMe.min.css
│ └── Bootstrap-theMe.min.css.map
├── js/
│ ├── Bootstrap.js
│ └── Bootstrap.min.js
└── Schriftarten/
├── Glyphicons-Halflings-Regular.eot
├── Glyphicons-Halflings-Regular.svg
├── Glyphicons-Halflings-Regular.ttf
├── Glyphicons-Halflings-Regular.woff
└── Glyphik-Halflings-Regular.WOFF2
3. HTML -Standardvorlage der HTML
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <! Initial-Scale = 1 Setzen Sie die Skalierungsskala-> <meta name = "viewPort" content = "width = Gerätebreite, initial-scale = 1"> <title> bootstraps html Standard-Vorlage </title> <! href = "http://netdna.bootstrapcdn.com/bootstrap/3.1/css/bootstrap.min.css"> <!-Ihre eigene Style-Datei-> <link href = "CSS/Your-Style.css" Rel = "StylesHeet"> <!-Die folgenden zwei-Plugs. Unterbrowser. Wenn Sie es nicht benötigen, können Sie es entfernen-> <!-[Wenn LT IE 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/resprespespy.js/1.4.2/responspecus Muss zuerst jQuery-> <script src = "http://libs.baidu.com/jquery/1.9.0/jquery.min.js"> </script> <!-einschließlich aller JS-Plugins für Bootstrap- oder JS-Plugins, die nach Bedarf verwendet werden, anrufen. src = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"> </script> </body> </html>
4. Bootstrap -Titel
Wie bei normalen HTML -Seiten definiert Bootstrap Titel mit Tags H1 bis H6, aber Bootstrap überschreibt seinen Standardstil, so dass der Effekt, den es in allen Browsern anzeigt, gleich ist. Die spezifischen Regeln der Definition sind in der folgenden Tabelle angezeigt:
<!--Title in Bootstrap --><h1>Title 1</h1><h2>Title 2</h2><!--Bootstrap uses the <small> tag to create subtitles --><h1>Title 1<small>Subtitle </small></h1><h2>Title 2<small>Subtitle </small></h2><!--Bootstrap allows non-title elements and titles to use the Gleicher Stil -> <div> Titel 1 </div> <div> Titel 2 </div> <div> Titel 3 </div>
Hinweis: Die Untertitellinienhöhen sind 1, Schriftgewicht ist nicht fett, die Farbe ist grau (#999); Die Untertitel von H1 ~ H3 sind 65% des Titels, und die Untertitel von H4 ~ H6 beträgt 75% des Titels; Weitere Informationen finden Sie in den Zeilen 407 ~ 443 in der Datei bootstrap.css.
5. Inhalte der Stiefelstrap
1) Inhalt betonen
In den tatsächlichen Projekten werden für einige wichtige Texte die Teile, die voraussichtlich hervorgehoben werden, in einem anderen Stil behandelt werden. Bootstrap hat in diesem Teil auch eine leichte Verarbeitung vorgenommen.
Durch Hinzufügen des Klassennamens ". Die Verwendung ist wie folgt:
<p> Normaler Text </p>
<p> Kaisertext </p>
2) Ausdrücken Sie den Schwerpunkt durch Farbe
Zum Beispiel:
<!-Der normale Text unten ist braun->
<p> Normaler Text </p>
3) mutig und Kursivschrift
Fett wird verwendet, um B-Label oder starkes Etikett zu verwenden. ITALIC wird verwendet, um EM-Label oder I-Label zu verwenden.
<!--Bold--><p>Normal text<b>Bold</b>Normal text</p><p>Normal text<strong>Bold</strong>Normal text</p><!--Italic--><p>Normal text<em>Italic</em>Normal text</p><p>Normal text<i>Italic</i>Normal text</p>Normal text</p>
4) Textausrichtung
Bootstrap steuert den Ausrichtungsstil des Textes, indem Sie vier Klassennamen definieren:
<p> Ich bin links </p> <p> Ich bin in der Mitte </p> <p> Ich bin rechts </p> <p> Ich bin an beiden Enden ausgerichtet </p>
6. Bootstrap -Liste
Bootstrap enthält sechs Auflistungsformen gemäß seiner üblichen Verwendung: Ordinary List, Ordered List, Point-Decription List, Inline-Liste, Definitionsliste und horizontale Definitionsliste.
1) Normale Liste
<!-Normale Liste-> <ul> <li> Normale Liste 1 </li> <li> Normale Liste 2 </li> </ul>
2) Bestellte Liste
<!--Sorted List--><ol> <li>Sorted List 1</li> <li>Sorted List 2</li></ol><!--Sorted List Nested--><ol> <li>Sorted List 1</li> <li>Sorted List 2 <ol> <li>Sorted List 2.1</li> <li>Sorted List 2.2</li> </li> </li> <li>Sorted List 3</li></ol>
3) Gehen Sie zur Liste
Fügen Sie der nicht ordnungsgemäßen Liste einen Klassennamen ". List-Unstyled" hinzu, damit der Standardlistenstil entfernt werden kann.
<ol> <li> sortierte Liste 1 </li> <li> Sortierte Liste 2 </li> </ol>
4) Inline -Liste (geboren für die horizontale Navigation)
Genau wie die bestimmte Liste wird die Inline-Liste durch Hinzufügen des Klassennamens ".Liste-Inline" implementiert, die vertikale Liste mit einer horizontalen Liste auszutauschen und die Kugeln (Nummern) zu entfernen, um die horizontale Anzeige zu verwalten.
<ul> <li> Navigationsleisteneintrag 1 </li> <li> Navigationsleisteneintrag 2 </li> </ul>
5) Definitionsliste
Die Bootstrap -Definitionsliste passt einfach den Leitungsabstand, die Ränder und die Schriftart für fettgedruckte Effekte an.
<dl> <dt> Peking </dt> <dd> Die Hauptstadt Chinas. </dd> <dt> shanghai </dt> <dd> National Central City, Megacity. </dd> </dl>
6) Liste der horizontalen Definition
Die Liste der horizontalen Definition ist wie eine Inline -Liste. Bootstrap kann dem DL-Tag den Klassennamen ".dl-horizontal" hinzufügen, um einen horizontalen Display-Effekt zu erzielen.
<dl> <dt> Peking </dt> <dd> Die Hauptstadt Chinas. </dd> <dt> shanghai </dt> <dd> National Central City, Megacity. </dd> </dl>
7. Tisch von Bootstrap
Bootstrap bietet Tabellen 1 grundlegende Stil und 4 zusätzliche Stile und eine Reaktionstabelle. Die Details sind wie folgt:
<! DocType html> <html> <head> <meta charset = "utf-8"> <title> Grundlegende Tabelle </title> <link rel = "styleSheet" href = "http://netDNA.bootstrapcdn.com/bootstrap/3.1.1/CSS/Bootstrap.Min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.c ,css,"> </heads> <ds. Table</h3> <!-- Main source code to view bootstrap.css file line 1402~line 1441--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Zelle </td> </tr> <tr> <td> Tabellenzelle </td> <td> Tabellenzelle </td> <td> Tabellenzelle </td> </tr> </tbody> </table> <h3> Zebra-Übergangstabelle </H3> <! Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </tbody> <tbody> <tr><td>Table Cell</td><td>Table Zelle </td> <td> Tabellenzelle </td> <td> Tabellenzelle </td> </tr> <tr> <td> Tabellenzelle </td> <td> Tabellenzelle </td> <td> Tabellenzelle </td> </tol> </tbody> </table> <h3> Tabelle mit Grenze </H3> <!- Hauptquellencodes zum Aussehen bootstrap.s-tabl. 1464--> <table> <thead> <tr><th>Table Title</th><th>Table Title</th><th>Table Title</th></tr> </thead> <tbody> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tr> </tbody> </tbody> <tr><td>Table Cell</td><td>Table Cell</td></tr> <tr><td>Table Cell</td><td>Table Cell</td></tr> </tbody> </table> <h3>Mouse suspends the highlighted table</h3> <!-- Main source code to view bootstrap.css file line 1469~line 1472--> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th><th>Table title</th></tr> </tbody> <tbody> <tr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table cell</td><td>Table cell</td></tr> </tbody> </table> <h3>Compact table</h3> <!-- The main source code sees the bootstrap.css file line 1442~line 1449--> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th></tr> </thead> <tbody> <ttr><td>Table cell</td><td>Table Zelle </td> <td> Tabellenzelle </td> </tr> <tr> <td> Tabellenzelle </td> <td> Tabellenzelle </td> <td> Tabellenzelle </td> </tr> </tbody> </table> <h3> table </h3> <!-Bootstrap bietet einen Contentern mit dem Klassennamen. The table placed in this container has a responsive effect--> <div> <table> <thead> <tr><th>Table title</th><th>Table title</th><th>Table title</th></tr> </thead> <tbody> <ttr><td>Table cell</td><td>Table cell</td><td>Table cell</td></tr> <tr><td>Table Zelle </td> <td> Tabellenzelle </td> </tr> </tbody> </table> </div> </body> </html>
Dieser Teil des Codes enthält die häufig verwendeten Tabellen in Bootstrap, und die Renderings sind wie folgt:
Bootstrap enthält außerdem fünf verschiedene Klassennamen für das Zeilenelement TR der Tabelle (für den entsprechenden Quellcode überprüfen Sie die Zeile 1484 auf Zeile 1583 in der Datei stootstrap.css). Jeder Klassenname steuert die verschiedenen Hintergrundfarben der Zeilen. Die spezifische Beschreibung ist in der folgenden Tabelle angezeigt:
Es ist sehr einfach zu bedienen. Sie müssen dem Element nur den entsprechenden Klassennamen der obigen Tabelle hinzufügen, um den Effekt zu erzielen:
<tr> <td>… </td> </tr>
Beachten:
1. Um einen suspendierten Zustand zu erreichen, müssen Sie die Tabellen-Hover-Klasse zum <table> -Tag hinzufügen.
2. Bei Verwendung der anderen vier Klassennamen und ".table-Hover" verwendet Bootstrap zusätzlich zu ".aktiv" entsprechende Stileinstellungen für diese Stile im schwimmenden Zustand. Wenn Sie dem TR-Element andere Farbstile hinzufügen müssen, müssen Sie daher auch entsprechende Anpassungen in der Tabelle ".table-Hover" vornehmen.
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
Artikelserie:
Das erste Mal, als ich mit dem magischen Bootstrap -Gittersystem in Kontakt kam //www.vevb.com/article/893333.htm
Das erste Mal, dass ich mit dem magischen Bootstrap -Formular in Kontakt kam //www.vevb.com/article/89330.htm
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.