Dieser Artikel teilt den Codestrap3 Responsive Website -Entwicklungscode für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Ich habe zum ersten Mal Bootstrap3 verwendet und festgestellt, dass es Mobilgeräte sehr unterstützt und schnell eine Website entwickeln konnte, die Mobile und PC unterstützt.
Das Folgende ist ein Beispiel für diesen Artikel, den spezifischen Code:
Die Zeitleiste stammt von einer fremden Website, und das verwendete CSS lautet wie folgt
.Timeline {Listenstil: Keine; Polsterung: 20px 0 20px; Position: relativ;}. Timeline: Vor {Top: 0; unten: 0; Position: absolut; Inhalt: " "; Breite: 3px; Hintergrundfarbe: #eeeeeee; Links: 50%; Rand-Links: -1,5px;}. Timeline> li {Margin-Bottom: 20px; Position: relativ;}. Timeline> li: vor, .timeline> li: After {Inhalt: ""; Anzeige: Tabelle;}. Timeline> li: After {Clear: Beide;}. Timeline> li: vor, .timeline> li: After {Inhalt: ""; Anzeige: Tabelle;}. Timeline> li: After {Clear: Beide;}. Timeline> li> .timeline-panel {width: 46%; float: links; Grenze: 1PX Solid #D4D4D4; Border-Radius: 2PX; Polsterung: 20px; Position: Relativ; -Webkit-box-shadow: 0 1px 6px rgba (0, 0, 0, 0,175); Box-Shadow: 0 1PX 6PX RGBA (0, 0, 0, 0,175); } .timeline> li> .timeline-panel: vor {Position: absolut; Oben: 26px; Rechts: -15px; Anzeige: Inline-Block; Grenze: 15px fest transparent; Border-Links: 15px Solid #CCC; Grenzrechte: 0 Solid #CCC; Grenzboden: 15px fest transparent; Inhalt: " "; } .timeline> li> .timeline-panel: nach {Position: absolut; Top: 27px; Rechts: -14px; Anzeige: Inline-Block; Grenze: 14px fest transparent; Border-Links: 14px Solid #fff; Grenzrechte: 0 solide #fff; Grenzboden: 14px fest transparent; Inhalt: "";}. Timeline> li> .timeline-badge {color: #fff; Breite: 50px; Höhe: 50px; Zeilenhöhe: 50px; Schriftgröße: 1.4EM; Text-Align: Mitte; Position: absolut; Top: 16px; Links: 50%; Rand -Links: -25px; Hintergrundfarbe: #999999; Z-Index: 100; Grenze-rechte Radius: 50%; Grenztop-Links-Radius: 50%; Grenz-Bottom-Right-Radius: 50%; Grenz-Bottom-Links-Radius: 50%; Border-Bottom-Left-Radius: 50%;}. Timeline> Li.Timeline-inverted> .timeline-panel {float: rechts;}. Timeline> li.timeline-inverted> .timeline-panel: vor {Border-links-Width: 0; Grenzrechtsbreite: 15px; links: -15px; Rechts: Auto;}. Timeline> Li.Timeline-inverted> .timeline-Panel: Nach {Border-Links-Breite: 0; Grenzrechte Breite: 14px; links: -14px; Rechts: auto;}. Timeline-badge.primary {Hintergrundfarbe: #2e6da4! Wichtig;}. Timeline-badge.success {Hintergrundfarbe: #3f903f! ! Farbe: Inherit;}. Timeline-Körper> p, .timeline-körper> ul {margin-bottom: 0;}. Timeline-Körper> p + p {margin-top: 5px;}@media (max-width: 767px) {ul.timeline: vor {links: 40px; } ul.timeline> li> .timeline -panel {width: calc (100% - 90px); Breite: -moz -calc (100% -90px); Breite: -webkit -calc (100% -90px); } ul.timeline> li> .timeline-badge {links: 15px; Rand-Links: 0; Top: 16px; } ul.timeline> li> .timeline-panel {float: rechts; } ul.timeline> li> .timeline-panel: vor {Border-links-Width: 0; Grenzrechtsbreite: 15px; links: -15px; Rechts: Auto; } ul.timeline> li> .timeline-panel: nach {Border-links-Width: 0; Grenzrechte Breite: 14px; links: -14px; Rechts: Auto; }} <ul> <li> <IV> <i> </i> </div> <div> <h4> Anthony Robin ・ Einführung </h4> <p> <i> </i> </small> </p> </div> <p> <p> <p> <p> <p> <p> <p> <p> ist heute ein erfolgreicher Billionaire von einer selbstgemachen Karriere und ist heute der potenzielle potenzielle Entwicklungspotenzieller. Er unterstützt professionelle Teams, Unternehmenspräsidenten und Staatsoberhäupter, um das Potenzial zu fördern und verschiedene Schwierigkeiten und Tiefen zu überwinden. Er hat viele königliche Familienmitglieder beraten und wurde von den ehemaligen US -Präsidenten Clinton und Prinzessin Diana als persönliche Berater eingestellt. Er hat vielen Prominenten der Welt beraten, darunter der südafrikanische Präsident Manra, der ehemalige sowjetische Präsident Gorbatschow und der Welt -Tennis -Champion Andre Agassi. </p> </div> </li> <li> .............................. </li> </ul>Während des Prozesses fand ich das auf Android 4.0, Breite: -Webkit -calc (100% -90px); Die Unterstützung war nicht sehr gut und die Timeline -Anzeige war nicht normal. Später wurde es mit JS gelöst.
$ (function () {$ (Fenster) .Resize (function () {InittimepanelSize ();}); Inittimepanelsize (); Funktion Inittimepanelsize () {width = $ (this) .width (); // alert (width); - 90);} else {$ ('Div.Timeline -Panel').Reproduktionsbild:
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
Das obige ist der wichtigste Produktionscode der Bootstrap3 Responsive -Website. Ich hoffe, es kann Ihnen eine Referenz geben und ich hoffe, Sie können Wulin.com mehr unterstützen.