Este artículo comparte el código de desarrollo del sitio web receptivo de Bootstrap3 para su referencia. El contenido específico es el siguiente
Utilicé Bootstrap3 por primera vez y descubrí que era mucho que apoyara los dispositivos móviles y podría desarrollar rápidamente un sitio web que admite móviles y PC.
El siguiente es un ejemplo de este artículo, el código específico:
La línea de tiempo proviene de un sitio web extranjero, y el CSS utilizado es el siguiente
.timeline {list-style: none; relleno: 20px 0 20px; posición: relativa;}. Timeline: antes {superior: 0; Abajo: 0; Posición: Absoluto; contenido: " "; Ancho: 3px; Color de fondo: #EEEEEE; Izquierda: 50%; margen-izquierda: -1.5px;}. timeline> li {margen-bottom: 20px; posición: relativa;}. timeline> li: antes, .Timeline> li: después de {content: ""; visualización: tabla;}. Timeline> li: After {clare: ambos;}. timeline> li: antes, .Timeline> li: después de {content: ""; visualización: tabla;}. Timeline> li: After {clare: ambos;}. Timeline> li> .Timeline-panel {ancho: 46%; flotante: izquierda; borde: 1px sólido #d4d4d4; Border-Radius: 2px; relleno: 20px; Posición: relativo; -webkit-box-shadow: 0 1px 6px rgba (0, 0, 0, 0.175); Shadow de caja: 0 1PX 6PX RGBA (0, 0, 0, 0.175); } .timeline> li> .timeline-panel: antes {posición: absoluto; arriba: 26px; Derecha: -15px; Pantalla: bloque en línea; Top de borde: 15px sólido transparente; Border-izquierda: 15px Solid #CCC; Border-Right: 0 Solid #CCC; Border-fondo: 15px sólido transparente; contenido: " "; } .timeline> li> .timeline-panel: después de {posición: absoluto; arriba: 27px; Derecha: -14px; Pantalla: bloque en línea; Top de borde: 14px sólido transparente; Border-izquierda: 14px sólido #fff; border-right: 0 sólido #fff; Border-Bottom: 14px sólido transparente; Contenido: "";}. Timeline> li> .Timeline-Badge {color: #fff; Ancho: 50px; Altura: 50px; Línea de altura: 50px; tamaño de fuente: 1.4em; Text-Align: Center; Posición: Absoluto; arriba: 16px; Izquierda: 50%; margen -izquierda: -25px; Color de fondo: #999999; Índice Z: 100; Border-Top-Right-Radius: 50%; Border-Top-Left-Madius: 50%; fronterizo-fondo-mandato: 50%; Border-fondo-izquierda-radio: 50%; Border-Bottom-Left-Radius: 50%;}. Timeline> Li.timeline-invertido> .Timeline-panel {float: right;}. timeline> li.timeline-inverted> .timeline-panel: antes de {border-left-width: 0; Border-Rewright-Width: 15px; Izquierda: -15px; Derecho: Auto;}. Timeline> Li.timeline-invertido> .TiMeline-panel: After {border-izquierda-width: 0; ancho de derecho fronterizo: 14px; Izquierda: -14px; Derecho: Auto;}. Timeline-Badge.Primary {Background-Color: #2E6DA4! IMPORTANTE;}. TIMELLINE-BADGE.Success {Background-Color: #3F903F! IMPORTANTE; ! IMPORTANTE;}. TIMELLINE-BADGE.Info {Background-Color: #5BC0DE! IMPORTANTE;}. TIMINE TITLE {Margin-top: 0; color: herhherit;}. timeline-body> P, .Timeline-Body> Ul {margin-bottom: 0;}. Timeline-Body> P + P {Margin-top: 5px;}@media (max-width: 767px) {ul.timeline: antes {izquierda: 40px; } ul.timeline> li> .timeline -panel {ancho: calc (100% - 90px); Ancho: -Moz -Calc (100% -90px); Ancho: -webkit -calc (100% -90px); } ul.timeline> li> .timeline-badge {izquierda: 15px; margen-izquierda: 0; arriba: 16px; } ul.timeline> li> .timeline-panel {float: right; } ul.timeline> li> .timeline-panel: antes de {border-izquierda-width: 0; Border-Rewright-Width: 15px; Izquierda: -15px; Derecha: Auto; } ul.timeline> li> .timeline-panel: después de {border-izquierda-width: 0; ancho de derecho fronterizo: 14px; Izquierda: -14px; Derecha: Auto; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Anthony Robin ・ Introducción </h4> <p> <small> <i> </i> </small> </p> </div> <iv> <p> Es un billionaire exitoso de una carrera a sí misma y es el experto en desarrollo mundial más exitoso hoy; Ayuda a equipos profesionales, presidentes corporativos y jefes de estado para estimular el potencial y superar diversas dificultades y mínimos. Ha aconsejado a muchos miembros de la familia real y fue contratado como consultores personales por los ex presidentes estadounidenses Clinton y la princesa Diana; Ha asesorado a muchas celebridades mundiales, incluido el presidente sudafricano Manra, el ex presidente soviético Gorbachev y el campeón mundial de tenis Andre Agassi; </p> </div> </li> <li> .................................. </li> </ul>Durante el proceso, descubrí que en Android 4.0, ancho: -webkit -calc (100% -90px); El soporte no fue muy bueno y la pantalla de la línea de tiempo no era normal. Más tarde, se resolvió con JS.
$ (function () {$ (Window) .Resize (function () {inItTimePanelSize ();}); initTImePanelSize (); function initTImePanelSize () {width = $ (this) .width (); // alerta (width); if (width <= 767) {$ ('div.timeline -panel').). 90);Imagen de reproducción:
Si aún desea aprender en profundidad, puede hacer clic aquí para aprender y adjuntar dos temas emocionantes a usted: Tutorial de aprendizaje Bootstrap Bootstrap Tutorial práctico
Lo anterior es el código de producción clave del sitio web receptivo de Bootstrap3. Espero que pueda darle una referencia y espero que pueda apoyar más a Wulin.com.