Bootstrap von Twitter ist derzeit das beliebteste Front-End-Frontwork. Bootstrap basiert auf HTML, CSS und JavaScript. Es ist einfach und flexibel und macht die Webentwicklung schneller.
Die Hauptfunktion der Panel -Komponente besteht darin, einige Funktionen zu behandeln, die andere Komponenten nicht ausfüllen können, mit unterschiedlichen Quellcodes in verschiedenen Versionen:
Weniger: Panels
SASS: _panels.scss
Das Basispanel ist sehr einfach. Es verwendet den Stil der Klassenpanel in einem DIV -Behälter, um einen Textanzeigenblock mit Rändern zu erzeugen. Da das Panel die Themenfarbe nicht steuert, wird eine Klasse.
.
. 15px;}
Anwendung grundlegender Panels:
<h1> Basic -Panel </h1> <div> <div> Dies ist ein Basispanel mit Standard -Themenstil </div> </div>
Panel mit Kopf und Schwanz
Um die Funktionen des Panels anzubereiten, fügt Bootstrap die Auswirkungen des Panelkopfes und des Schwanzes des Panels dem Panel speziell hinzu.
.Panel-Heading: Stellen Sie den Panel Head-Stil ein
.Panel-Footer: Setzen Sie den Schwanzstil des Panels
.Panel-Headingh- und .panel-Footer nur Stile wie Abstand und abgerundete Ecken.
.Panel-Heading {Padding: 10px 15px; Border-Bottom: 1PX Solid Transparent; Border-Top-Links-Radius: 3px; Border-te-arr-right-radius: 3px;}. Panel-Heading> .dropdown. 16px; color: erben;}.Beispiel:
<h1> Panel mit Kopf und Schwanz </h1> <div> <div> Hier ist der Kopftitel des Panels </div> <div> Hier ist der Panel -Inhalt Parther der Panel -Inhalt Parther. Teil </div> </div> Hier ist der Panel Tail -Teil </div> </div>
Farbpaneele
Da der Panel-Stil die Themenfarbe nicht stymt, behandelt die Panel-Komponente im Bootstrap-Framework das Standardthema (.Panel-Default) -Stil und enthält auch die folgenden Themenstile:
.Panel-Primary: Blau
.Panel-success: Erfolg grün
.Panel-info: Information Blue (Licht)
.Panel-Warnung: Warnung gelb
.Panel-danger: gefährlich rot
Diese Stile ändern einfach die Hintergrundfarbe, den Text und die Grenzfarbe des Panels
Die Verwendungsmethode ist sehr einfach. Fügen Sie einfach den Namen der erforderlichen Themenklassen zum Namen der .panel -Klasse hinzu
Beispiel:
<h1> Buntes Panel </h1> <div> <div> Weißköpfiger Chant </div> <div> Capric als Schnee auf dem Berg, so hell wie der Mond unter den Wolken. Ich habe gehört, dass Sie zwei Absichten haben, also kam ich, um eine Entscheidung zu treffen. Die heutige Getränkeparty, Mingdangou Water Head. Das Wasser fließt nach Osten und Westen auf den Gräben. Es ist traurig und traurig und es besteht kein Grund zu weinen, wenn Sie heiraten. Ich möchte das Herz einer Person gewinnen und uns nie für immer verlassen. Was ist der Bambus -Pol schwankt, was ist der Fischschwanz? Männer schätzen Impulse, warum also Geldmesser verwenden? </div> <div> Autor: Zhuo Wenjun </div> </div> <div> <div> unt title </div> <div> Letzte Nacht, die Sterne letzte Nacht, der Wind letzte Nacht und die Westseite des Malgebäudes war der Osten des Guitang. Die beiden fliegenden Flügel des Phönix ohne farbenfrohe Phönixe stehen im Einklang miteinander. Der Frühlingswein ist über den Sitz warm und die Wachslichter sind rot. Leider hörte ich die Trommel und antwortete auf den Beamten, ging auf den Malantai und verwandelte sich in eine Tunika. </div> <div> Autor: Li Shangyin </div> </div> <div> <div> qingyu Fall ・ yuanxi </div> <div> Der Ostwind blüht nachts Tausende von Blumen und Bäumen, und die Sterne sind wie Regen. BMW -Autowagen sind voller Duft. Das Geräusch der Phoenix -Flöte bewegt sich, das Licht des Jade -Topfes dreht sich und der Fisch und Drachen tanzen über Nacht. Die Motten und Weiden sind goldene Wispen, und das Lächeln ist mit Duft gefüllt. Ich suchte tausend Male in der Menge nach ihm, aber als ich zurückblickte, war der Mann dort im schwachen Licht. </div> <div> Autor: xin qiji </div> </div> <div> <div> li si </div> <div> Das Meer war einst ein schreckliches Meeresmeer, aber Wushan war nicht bewölkt. Ich werde auf die Blumen zurückblicken und die Hälfte meines Lebens, die Hälfte meines Lebens, die Hälfte meines Lebens sehen. </div> <div> Autor: Yuan Zhen </div> </div> <div> <div> Malte Pflaumenblüten </div> <div> Leichter Schnee ist gerade aus der Hälfte des Teiches verschwunden, und zwei oder drei Zweige werden aus der Ferne durch den Zaun gesehen. Der Duft breitet sich bis zum Herzen des Himmels aus, und die unbekannten Pflanzen und Bäume sind bekannt. </div> <div> Autor: Fang Xiaoru </div> </div> <div> <div> chrysanthemen </div> <div> Herbstbüsche umgeben die Häuser wie Taos Häuser, und die Sonne schrägt allmählich um den Zaun um. Es ist nicht so, dass ich Chrysanthemen zwischen den Blumen bevorzuge, und es gibt keine Blumen, wenn die Blumen blühen. </div> <div> Autor: Yuan Zhen </div> </div>
Die Effekte sind wie folgt:
Verschachtelte Tische in Panels
Im Allgemeinen kann das Panel als Bereich verstanden werden. Bei der Verwendung des Panels werden der erforderliche Inhalt im .panel-Körper-Container platziert, und der Inhalt kann Bilder, Tabellen, Listen usw. sein; Schauen wir uns die Auswirkungen von verschachtelten Tabellen und Listengruppen im Panel an. Hier ist ein Beispiel für verschachtelte Tabellen:
<h1> verschachtelte Tabellen im Panel </h1> <div> <div> Gedichte, die Blumen beschreiben, liebt Chrysanthemen aufrichtig: Cluster aus blühenden Chrysanthemen werden rund um das Haus verbreitet. Er ging den Bambuszaun entlang und bewunderte diese Herbst -Chrysanthemen, die alleine gepflanzt wurden, und bevor er erkennen konnte, dass die Sonne im Westen untergeht. </p> <table> <thead> <tr> <Th> Es ist nicht so, dass die Blumen Chrysanthemen bevorzugen, und es gibt keine Blumen, wenn die Blumen blühen. "Chrysanthemen" </th> <th> Ich möchte das Herz einer Person gewinnen, und mein Kopf ist nicht voneinander getrennt. "Song of White Head" </th> <th> Das helle Mondlicht vor dem Bett wird vermutet, dass er auf dem Boden Frost ist. "Ruhige Nachtgedanken" </th> </tr> </thead> <tbody> <td> Sorgen um die Welt, bevor sie sich Sorgen machen, und dann die Welt nach Freude. "Yueyang Tower Notes" </td> <td> Ich möchte dich kennen, und mein Leben wird niemals enden. "Shangxie" </td> <td> Das Gesicht des menschlichen Gesichts ist unbekannt und die Pfirsichblüten lächeln immer noch in der Frühlingsbrise. "Inschrift auf dem Nanzhuang der Hauptstadt" </td> </tr> </tbody> </table> </div> <div> Dieses Gedicht nimmt die künstlerische Konzeption von Taos Gedichten auf und ist auch in eleganter und einfacher Sprache gesungen, die nicht wie Tao Gong verwendet wird, indem er alle Bilder verwendet und beunruhigt ist; Aber nachdem es den Beton dargestellt hat, zeigt es den Grund, Chrysanthemen selbst beschrieben zu lieben, ohne es in einem Wort zu sagen, und hinterlässt einen Fantasieraum für die Menschen, die es genießen und kauen können, was seine künstlerische Anziehungskraft verbessert. Daher wurde es immer von Menschen geliebt </div> </div>
Im tatsächlichen Gebrauch müssen möglicherweise keinen Abstand zwischen den Kanten der Tabelle und dem Panel bestehen, aber der Panel-Körper legt eine Polsterung fest: 15px-Wert. Um diesen Effekt zu erzielen, kann die Tabelle während der tatsächlichen Verwendung außerhalb des Panelkörpers extrahiert werden:
Zum Beispiel:
<div> <div> Gedichte, die Blumen beschreiben </div> <div> <p> Der Dichter liebt Chrysanthemen aufrichtig: Cluster aus blühenden Chrysanthemen sind rundum im Haus verteilt. Er ging den Bambuszaun entlang und bewunderte diese Herbst -Chrysanthemen, die alleine gepflanzt wurden, und bevor er erkennen konnte, dass die Sonne im Westen untergeht. </p></div><table><thead><tr><th>"Yueyang Tower Notes"</th><th>"Shangxie"</th><th>"Inscription on the capital city's Nanzhuang"</th></tr></thead><tbody><tr><td>Worry about the world before worrying, and then enjoying the world after joy</td><td>I want to know Sie und mein Leben wird niemals verblassen. Nachdem er konkrete Bilder dargestellt hatte, erklärt er den Grund, Chrysanthemen selbst beschrieben zu lieben, und hinterlässt einen Fantasieraum für die Menschen, die seine künstlerische Attraktivität verbessert. Daher wurde es immer von Menschen geliebt </div> </div>
Verschachtelte Listengruppen im Gremium
Beispiel:
<h1> verschachtelte Listengruppe im Panel </h1> <div> <div> Gedichte, die Blumen beschreiben, </div> <p. Panel verschachtelte Listengruppe </p> <ul> <li> Listelement 1 </li> <li> Listelement Item 2 </li> <li> Listelement 3 </li> <li> LISTE ITEM </li> <li> LIGE: Shangyin </div> </div>
Gleiches gilt für verschachtelte Verschachtel von Panel Nested List Combination. Wenn kein solcher Abstand erforderlich ist, können Sie die Listengruppe aus dem Panel-Körper extrahieren.
Beispiel:
<h1> verschachtelte Listengruppe im Panel </h1> <div> <div> Gedichte, die Blumen beschreiben, </div> <p. Panel verschachtelte Listengruppe </p> </div> <ul> <li> Listelementelement 1 </lil> <li> Listelement 2 </li> <li> LISTE ITEM </ul> <li>. Shangyin </div> </div>
Die Effekte sind wie folgt:
Das obige ist die Panelkomponente der vom Editor vorgestellten Bootstrap -Komponente. Ich hoffe, es wird für alle hilfreich sein!