В этой статье разделяется код разработки веб -сайтов Bootstrap3 для вашей ссылки. Конкретный контент заключается в следующем
Я впервые использовал Bootstrap3 и обнаружил, что он очень поддерживает мобильные устройства и может быстро разработать веб -сайт, который поддерживает мобильный и ПК.
Ниже приведен пример этой статьи, конкретный код:
Сроки поступают с иностранного веб -сайта, а используемый CSS выглядит следующим образом
.timeline {list-style: нет; Заполнение: 20px 0 20px; Положение: относительно;}. График: до {top: 0; Внизу: 0; позиция: абсолютно; содержание: " "; Ширина: 3PX; фоновый цвет: #eeeeeee; Слева: 50%; Margin-Left: -1,5PX;}. Timeline> li {Margin-Bottom: 20px; позиция: относительно;}. Timeline> li: до, .timeline> li: после {content: ""; дисплей: таблица;}. Timeline> li: After {clear: оба;}. Timeline> li: до, .timeline> li: после {content: ""; дисплей: таблица;}. Timeline> li: After {clear: оба;}. Timeline> li> .timeline-panel {ширина: 46%; Плавание: осталось; Граница: 1PX SOLID #D4D4D4; граница радий: 2PX; Заполнение: 20px; позиция: относительно; -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: до {position: Absolute; Верх: 26px; Справа: -15px; дисплей: встроенный блок; Пограничная топ: 15px сплошной прозрачный; РЕМЕР-ЛЕРФ: 15px Solid #CCC; граница правая: 0 твердое #CCC; пограничный подъем: 15px сплошной прозрачный; содержание: " "; } .timeline> li> .timeline-panel: после {position: Absolute; Верх: 27px; Справа: -14px; дисплей: встроенный блок; Пограничная топ: 14px сплошной прозрачный; РЕМЖА СЛЕДУ: 14px Solid #fff; граница правая: 0 твердое #fff; Пограничный подвод: 14px сплошной прозрачный; Содержание: "";}. Timeline> li> .timeline-badge {color: #fff; Ширина: 50px; Высота: 50px; высота линии: 50px; размер шрифта: 1.4EM; Текст-альбом: Центр; позиция: абсолютно; Верх: 16px; Слева: 50%; Мяглевая маржа: -25px; фоновый цвет: #9999999; Z-Index: 100; Прадис-границы с правом: 50%; пограничная топ-лево-радий: 50%; Прадис-радий с границей: 50%; пограничный левый радис: 50%; пограничный-дно-левый радий: 50%;}. Timeline> li.timeline-инвертирован> .timeline-panel {float: right;}. Timeline> li.timeline Inverted> .timeline-panel: до {пограничной левой ширины: 0; пограничной правой ширины: 15px; Слева: -15px; Справа: Auto;}. Timeline> li.timeline Inverted> .timeline-Panel: After {граница левой шириной: 0; граница правая ширина: 14px; слева: -14px; Справа: Auto;}. Timeline-badge.primary {фоновое цветовое окно: #2e6da4! ! Vative;}. Timeline-badge.info {фоновое цветное: #5bc0de! Цвет: наследство;}. Timeline-Body> P, .timeline-Body> ul {margin-bottom: 0;}. Timeline-body> p + p {margin-top: 5px;}@media (max-width: 767px) {ul.timeline: до {слева: 40px; } ul.timeline> li> .timeline -panel {width: calc (100% - 90px); Ширина: -Moz -Calc (100% -90px); Ширина: -Webkit -calc (100% -90px); } ul.timeline> li> .timeline-badge {left: 15px; Полевая левая: 0; Верх: 16px; } ul.timeline> li> .timeline-panel {float: right; } ul.timeline> li> .timeline-panel: до {пограничной левой ширины: 0; пограничной правой ширины: 15px; Слева: -15px; Справа: Авто; } ul.timeline> li> .timeline-panel: после {пограничной левой ширины: 0; граница правая ширина: 14px; слева: -14px; Справа: Авто; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Энтони Робин ・ Введение </h4> <p> <mall> <i> </i> </small> </p> </div> <d Div> <p> Он является успешным миллиардом из карьеры самостоятельного и является наиболее успешным потенциальным опытом мирового класса сегодня; Он помогает профессиональным командам, корпоративным президентам и главам государств, чтобы стимулировать потенциал и преодолеть различные трудности и падения. Он консультировал много членов королевской семьи и был нанят личными консультантами бывшими президентами США Клинтоном и принцессой Дианой; Он консультировал многих мировых знаменитостей, в том числе президента Южной Африки Манра, бывшего советского президента Горбачева и чемпиона мира по теннису Андре Агасси; </p> </div> </li> <li> ...................................... </li> </ul>Во время процесса я обнаружил, что на Android 4.0, ширина: -Webkit -calc (100% -90px); Поддержка была не очень хорошей, и дисплей сроков не был нормальным. Позже это было решено с помощью JS.
$ (function () {$ (window) .resize (function () {inittimepanelsize ();}); inittimepanelsize (); function inittimepanelsize () {width = $ (this) .width (); // walert (width); if (width <= 767) {$ ('div.timeline-panel'). - 90);Изображение воспроизведения:
Если вы все еще хотите учиться в глубине, вы можете нажать здесь, чтобы узнать и прикрепить к вам две захватывающие темы: учебник по обучению начальной загрузки.
Выше приведено ключевой производственный код ответа на Bootstrap3. Я надеюсь, что это может дать вам ссылку, и я надеюсь, что вы сможете поддержать Wulin.com больше.