บทความนี้แบ่งปันรหัสการพัฒนาเว็บไซต์ Bootstrap3 ที่ตอบสนองสำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
ฉันใช้ Bootstrap3 เป็นครั้งแรกและพบว่ามันสนับสนุนมือถือเป็นอย่างมากและสามารถพัฒนาเว็บไซต์ที่รองรับมือถือและพีซีได้อย่างรวดเร็ว
ต่อไปนี้เป็นตัวอย่างของบทความนี้รหัสเฉพาะ:
ไทม์ไลน์มาจากเว็บไซต์ต่างประเทศและ CSS ที่ใช้มีดังนี้
.Timeline {รายการสไตล์: ไม่มี; Padding: 20px 0 20px; ตำแหน่ง: ญาติ;}. ไทม์ไลน์: ก่อน {top: 0; ด้านล่าง: 0; ตำแหน่ง: สัมบูรณ์; เนื้อหา: " "; ความกว้าง: 3px; พื้นหลังสี: #eeeeee; ซ้าย: 50%; ระยะขอบซ้าย: -1.5px;}. ไทม์ไลน์> li {มาร์จิ้น-ล่าง: 20px; ตำแหน่ง: ญาติ;}. ไทม์ไลน์> li: ก่อนหน้า, .timeline> li: หลังจาก {เนื้อหา: ""; แสดง: table;}. timeline> li: หลังจาก {clear: ทั้งสอง;}. timeline> li: ก่อนหน้า, .timeline> li: หลังจาก {เนื้อหา: ""; แสดง: table;}. timeline> li: หลังจาก {clear: ทั้งสอง;}. timeline> li> .timeline-panel {width: 46%; ลอย: ซ้าย; ชายแดน: 1px Solid #D4D4D4; แนวชายแดน: 2px; Padding: 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: ก่อน {ตำแหน่ง: สัมบูรณ์; ด้านบน: 26px; ขวา: -15px; แสดง: Inline-Block; ชายแดนด้านบน: 15px ของแข็งโปร่งใส; ชายแดนซ้าย: 15px Solid #CCC; ชายแดนขวา: 0 Solid #CCC; ด้านล่างด้านล่าง: 15px ของแข็งโปร่งใส; เนื้อหา: " "; } .timeline> li> .timeline-panel: หลังจาก {ตำแหน่ง: สัมบูรณ์; ด้านบน: 27px; ขวา: -14px; แสดง: Inline-Block; ชายแดนด้านบน: 14px ของแข็งโปร่งใส; ชายแดนซ้าย: 14px Solid #FFF; ชายแดนขวา: 0 Solid #FFF; ขอบด้านล่าง: 14px ของแข็งโปร่งใส; เนื้อหา: "";}. ไทม์ไลน์> li> .timeline-badge {color: #fff; ความกว้าง: 50px; ความสูง: 50px; ระดับความสูง: 50px; ขนาดตัวอักษร: 1.4EM; TEXT-ALIGN: CENTER; ตำแหน่ง: สัมบูรณ์; ด้านบน: 16px; ซ้าย: 50%; ขอบซ้าย: -25px; พื้นหลังสี: #999999; z-index: 100; แนวชายแดนขวา-ขวา: 50%; ชายแดนด้านซ้าย-ซ้าย-ราดอุดิ: 50%; ชายแดนด้านล่างขวา-ขวา: 50%; ชายแดนด้านล่างซ้าย-ไรเดอัส: 50%; ชายแดนด้านล่างซ้าย-ราดอุดิ: 50%;}. ไทม์ไลน์> li.timeline-inverted> .Timeline-Panel {float: ขวา;}. ไทม์ไลน์> li.timeline-inverted> .timeline-Panel: ก่อน {Border-Left-Width: 0; ความกว้างของชายแดนขวา: 15px; ซ้าย: -15px; ขวา: auto;}. timeline> li.timeline-inverted> .timeline-panel: หลังจาก {border-left-width: 0; ความกว้างของชายแดนขวา: 14px; ซ้าย: -14px; ขวา: auto;}. timeline-badge.primary {พื้นหลังสี: #2e6da4! สำคัญ;}. timeline-badge.success {พื้นหลัง-สี: #3f903f! สำคัญ; ! สำคัญ;}. timeline-badge.info {พื้นหลัง-สี: #5BC0DE! สำคัญ;}. Timeline-title {margin-top: 0; สี: สืบทอด;}. timeline-body> p, .timeline-body> ul {margin-bottom: 0;}. timeline-body> p + p {margin-top: 5px;}@media } ul.timeline> li> .timeline -panel {width: calc (100% - 90px); ความกว้าง: -moz -calc (100% -90px); ความกว้าง: -webkit -calc (100% -90px); } ul.timeline> li> .timeline-badge {ซ้าย: 15px; ขอบซ้าย: 0; ด้านบน: 16px; } ul.timeline> li> .timeline-panel {float: ขวา; } ul.timeline> li> .timeline-panel: ก่อน {ชายแดนซ้าย-ซ้าย: 0; ความกว้างของชายแดนขวา: 15px; ซ้าย: -15px; ขวา: อัตโนมัติ; } ul.timeline> li> .timeline-panel: หลังจาก {ชายแดนซ้าย-ซ้าย: 0; ความกว้างของชายแดนขวา: 14px; ซ้าย: -14px; ขวา: อัตโนมัติ; }} <ul> <li> <div> <i> </i> </div> <div> <h4> Anthony Robin ・ บทนำ </h4> <p> <small> <i> </i> </small> </p> </vid> <p> <p> เขาช่วยทีมงานระดับมืออาชีพประธานาธิบดีองค์กรและประมุขแห่งรัฐเพื่อกระตุ้นศักยภาพและเอาชนะความยากลำบากและระดับต่ำสุดที่หลากหลาย เขาได้ให้คำปรึกษาแก่สมาชิกราชวงศ์หลายคนและได้รับการว่าจ้างให้เป็นที่ปรึกษาส่วนตัวโดยอดีตประธานาธิบดีสหรัฐฯคลินตันและเจ้าหญิงไดอาน่า; เขาได้แนะนำคนดังระดับโลกมากมายรวมถึงประธานาธิบดีแอฟริกาใต้มานราอดีตประธานาธิบดีโซเวียตกอร์บาชอฟและแชมป์เทนนิสโลก Andre Agassi; </p> </div> </li> <li> .................................. </li></ul>ในระหว่างกระบวนการฉันพบว่าบน Android 4.0, ความกว้าง: -webkit -Calc (100% -90px); การสนับสนุนไม่ค่อยดีและการแสดงไทม์ไลน์ไม่ปกติ ต่อมามันได้รับการแก้ไขด้วย JS
$ (function () {$ (window) .resize (function () {inittimepanelsize ();}); inittimepanelsize (); ฟังก์ชั่น inittimepanelsize () {width = $ (นี้) .width (); $ ('div.timeline-panel'). ความกว้าง ($ (นี่) .width ()-90);ภาพการทำซ้ำ:
หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นรหัสการผลิตที่สำคัญของเว็บไซต์ตอบสนอง Bootstrap3 ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น