تشارك هذه المقالة رمز تطوير موقع الويب المتجاوب BootStrap3 للرجوع إليه. المحتوى المحدد كما يلي
لقد استخدمت bootstrap3 لأول مرة ووجدت أنه يدعم الأجهزة المحمولة ويمكن أن تطور بسرعة موقع ويب يدعم الأجهزة المحمولة والكمبيوتر.
فيما يلي مثال على هذه المقالة ، الرمز المحدد:
يأتي الجدول الزمني من موقع أجنبي ، و CSS المستخدمة على النحو التالي
.timeline {stylely style: none ؛ Padding: 20px 0 20px ؛ الموضع: قريب ؛}. الجدول الزمني: قبل {TOP: 0 ؛ أسفل: 0 ؛ الموقف: مطلق ؛ محتوى: " "؛ العرض: 3px ؛ خلفية اللون: #EEEEE ؛ اليسار: 50 ٪ ؛ Margin-Left: -1.5px ؛}. الموضع: قريب ؛} العرض: الجدول ؛} Display: Table ؛} تعويم: اليسار. الحدود: 1 بكسل Solid #D4d4d4 ؛ الحدود الراديوس: 2px ؛ الحشو: 20 بكسل ؛ الموقف: قريب -webkit-box-shadow: 0 1px 6px rgba (0 ، 0 ، 0 ، 0.175) ؛ box-shadow: 0 1px 6px rgba (0 ، 0 ، 0 ، 0.175) ؛ . أعلى: 26 بكسل ؛ اليمين: -15 بكسل ؛ العرض: كتلة مضمنة. أعلى الحدود: 15px شفافة صلبة ؛ الحدود اليسرى: 15px الصلبة #CCC ؛ اليمين الحدودي: 0 Solid #CCC ؛ Border-Bottom: 15px شفافة صلبة ؛ محتوى: " "؛ . أعلى: 27 بكسل ؛ اليمين: -14px ؛ العرض: كتلة مضمنة. أعلى الحدود: 14px شفافة صلبة ؛ الحدود اليسرى: 14px الصلبة #FFF ؛ اليمين الحدودي: 0 Solid #FFF ؛ Border-Bottom: 14px شفافة صلبة ؛ المحتوى: "" ؛} العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ ارتفاع الخط: 50 بكسل ؛ حجم الخط: 1.4. محاذاة النص: المركز ؛ الموقف: مطلق ؛ أعلى: 16 بكسل ؛ اليسار: 50 ٪ ؛ الهامش اليساري: -25 بكسل ؛ لون الخلفية: #999999 ؛ Z-index: 100 ؛ راديوس الصرف الحدودي: 50 ٪ ؛ الحدود اليسار-اليسار: 50 ٪ ؛ الحدود مع راديوس الصرف: 50 ٪ ؛ الحدود القاع اليسار-راديوس: 50 ٪ ؛ Border-Bottom-Left-Radius: 50 ٪ ؛}. عرض يمين الحدود: 15 بكسل ؛ اليسار: -15 بكسل ؛ اليمين: Auto ؛}. عرض اليمين الحدودي: 14px ؛ اليسار: -14px ؛ اليمين: Auto ؛}. ! مهم ؛}. اللون: ورث ؛}. } 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 ؛ أعلى: 16 بكسل ؛ } ul.timeline> li> .timeline-panel {float: right ؛ } ul.timeline> li> .timeline-panel: قبل {border-left-width: 0 ؛ عرض يمين الحدود: 15 بكسل ؛ اليسار: -15 بكسل ؛ اليمين: السيارات ؛ } ul.timeline> li> .timeline-panel: بعد {border-left-width: 0 ؛ عرض اليمين الحدودي: 14px ؛ اليسار: -14px ؛ اليمين: السيارات ؛ }} <ul> <li> <iv> <i> </i> </viv> <viv> <h4> Anthony Robin ・ مقدمة </h4> <p> <small> <i> </i> </small> </p> </p div> <p> وهو مليارير ناجح من مهنة ذاتية وذات الخبراء الأكثر نجاحًا في العالم ؛ يساعد الفرق المهنية ورؤساء الشركات ورؤساء الدول لتحفيز الإمكانات والتغلب على الصعوبات والانخفاضات المختلفة. وقد نصح العديد من أفراد العائلة المالكة وتم تعيينه كمستشارين شخصيين من قبل الرؤساء السابقين في الولايات المتحدة كلينتون والأميرة ديانا ؛ وقد نصح العديد من مشاهير العالم ، بمن فيهم رئيس جنوب إفريقيا مانرا ، والرئيس السوفيتي السابق غورباتشوف ، وبطل التنس العالمي أندريه أغاسي ؛ </p> </viv> </li> <li> .................................. </li> </ul>أثناء العملية ، وجدت أنه على Android 4.0 ، العرض: -webkit -Calc (100 ٪ -90 بكسل) ؛ لم يكن الدعم جيدًا جدًا ، ولم يكن عرض الجدول الزمني طبيعيًا. في وقت لاحق ، تم حلها مع JS.
$ (function () {$ (window) .resize (function () {ittimepanelsize () ؛}) ؛ ittimepanelsize () ؛ function ittimepanelsize () {width = $ (this) .width () ؛ // alert (width) ؛ if (width <= 767) 90) ؛صورة التكاثر:
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما ورد أعلاه هو رمز الإنتاج الرئيسي لموقع Bootstrap3 المستجيب. آمل أن يعطيك مرجعًا وآمل أن تتمكن من دعم wulin.com أكثر.