Artikel ini berbagi kode pengembangan situs web responsif Bootstrap3 untuk referensi Anda. Konten spesifiknya adalah sebagai berikut
Saya menggunakan Bootstrap3 untuk pertama kalinya dan menemukan bahwa itu sangat mendukung seluler dan dapat dengan cepat mengembangkan situs web yang mendukung seluler dan PC.
Berikut ini adalah contoh dari artikel ini, kode spesifik:
Garis waktu berasal dari situs web asing, dan CSS yang digunakan adalah sebagai berikut
.Timeline {List-style: None; padding: 20px 0 20px; Posisi: relatif;}. Timeline: Sebelum {atas: 0; Bawah: 0; Posisi: Absolute; isi: " "; Lebar: 3px; latar belakang-warna: #eeeeee; Kiri: 50%; margin-left: -1.5px;}. Timeline> li {margin-bottom: 20px; Posisi: relatif;}. Timeline> li: Sebelum, .Timeline> li: After {Content: ""; Tampilan: Table;}. Timeline> li: After {clear: keduanya;}. Timeline> li: Sebelum, .Timeline> li: After {Content: ""; Tampilan: Table;}. Timeline> li: After {clear: keduanya;}. Timeline> li> .Timeline-Panel {width: 46%; float: kiri; Perbatasan: 1px solid #d4d4d4; Border-Radius: 2px; padding: 20px; Posisi: kerabat; -webkit-box-shadow: 0 1px 6px rgba (0, 0, 0, 0.175); Kotak-Shadow: 0 1px 6px RGBA (0, 0, 0, 0.175); } .Timeline> li> .Timeline-panel: sebelum {position: absolute; Atas: 26px; Kanan: -15px; Tampilan: blok inline; Border-Top: 15px Solid Transparent; Border-left: 15px solid #ccc; Border-Right: 0 Solid #CCC; Border-Bottom: 15px Solid Transparent; isi: " "; } .Timeline> li> .Timeline-panel: After {Position: Absolute; Atas: 27px; Kanan: -14px; Tampilan: blok inline; Border-Top: 14px Solid Transparent; Border-left: 14px solid #FFF; Border-Right: 0 Solid #FFF; Border-Bottom: 14px Solid Transparent; Konten: "";}. Timeline> li> .Timeline-badge {color: #fff; Lebar: 50px; Tinggi: 50px; Line-Height: 50px; Ukuran font: 1.4em; Teks-Align: tengah; Posisi: Absolute; Atas: 16px; Kiri: 50%; margin -kiri: -25px; Latar Belakang-Color: #999999; z-index: 100; Border-top-right-Radius: 50%; Border-top-left-radius: 50%; Border-Bottom-Right-Radius: 50%; Border-bottom-left-Radius: 50%; Border-Bottom-left-Radius: 50%;}. Timeline> li.Timeline-Inverted> .Timeline-panel {float: right;}. Timeline> li.Timeline-Inverted> .Timeline-panel: sebelum {border-left-lebar: 0; Batas-kanan-lebar: 15px; Kiri: -15px; Kanan: auto;}. Timeline> li.Timeline-Inverted> .Timeline-Panel: After {border-left-width: 0; Batas-lebar-lebar: 14px; Kiri: -14px; Kanan: auto;}. Timeline-badge.primary {latar belakang-color: #2e6da4! Penting;}. Timeline-badge.success {latar belakang-color: #3f903f! Penting;}. Timeline-badge.warning {latar belakang-color: #f0ad4e! penting;}. ! penting;}. Timeline-badge.info {latar belakang-color: #5bc0de! PENTING;}. Timeline-title {margin-top: 0; Warna: warisan;}. Timeline-Body> p, .Timeline-Body> ul {margin-bottom: 0;}. Timeline-Body> p + p {margin-top: 5px;}@media (max-width: 767px) {ul.timeline: sebelum {kiri: 40px; } UL.Timeline> li> .Timeline -panel {width: calc (100% - 90px); Lebar: -Moz -Calc (100% -90px); Lebar: -webkit -Calc (100% -90px); } ul.timeline> li> .Timeline-badge {kiri: 15px; margin-kiri: 0; Atas: 16px; } ul.timeline> li> .Timeline-panel {float: right; } UL.Timeline> li> .Timeline-panel: Sebelum {border-left-width: 0; Batas-kanan-lebar: 15px; Kiri: -15px; Kanan: otomatis; } UL.Timeline> li> .Timeline-panel: After {border-left-width: 0; Batas-lebar-lebar: 14px; Kiri: -14px; Kanan: otomatis; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Anthony Robin ・ PENDAHULUAN </h4> <p> <small> <i> </i> </small> </p> </div> <v> <p> Dia adalah miliarder yang sukses dari miliarder dari karier yang dibuat sendiri dan adalah yang paling sukses di dunia, miliarder yang paling sukses dari dunia yang paling sukses dan paling sukses dari dunia yang paling sukses dan paling sukses Dia membantu tim profesional, presiden perusahaan, dan kepala negara untuk merangsang potensi dan mengatasi berbagai kesulitan dan rendah. Dia telah menasihati banyak anggota keluarga kerajaan dan dipekerjakan sebagai konsultan pribadi oleh mantan presiden AS Clinton dan Princess Diana; Dia telah menasihati banyak selebriti dunia, termasuk Presiden Afrika Selatan Manra, mantan presiden Soviet Gorbachev, dan juara tenis dunia Andre Agassi; </p> </div> </li> <li> .................................. </li> </ul>Selama proses, saya menemukan bahwa di Android 4.0, lebar: -webkit -calc (100% -90px); Dukungannya tidak terlalu bagus, dan tampilan timeline tidak normal. Kemudian, itu diselesaikan dengan JS.
$ (function () {$ (window) .resize (function () {inittimepanelsize ();}); inittimepanelsize (); function inittimepanelsize () {width = $ (this) .width (); // well (width); if (lebar <= 767) {$ ('). - 90);} else {$ ('Div.Timeline -Panel'). CSS ('Width', '46%');Gambar reproduksi:
Jika Anda masih ingin belajar secara mendalam, Anda dapat mengklik di sini untuk mempelajari dan melampirkan dua topik menarik kepada Anda: Tutorial Pembelajaran Bootstrap Bootstrap Tutorial Praktis
Di atas adalah kode produksi utama dari situs web responsif Bootstrap3. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.