يمكن أن يؤدي استخدام Bootstrap لكتابة صورة carousel carousel إلى توفير الكثير من الوقت. Image Carousel هي تقنية شائعة في صفحات الويب ، ولكن إذا تم كتابتها مباشرةً ، فإنها تتطلب ترميز JavaScript طويل ، وليس من السهل التحكم في الحجم.
اسمحوا لي أيضًا أن أقول إن المعنى الأصلي لكلمة Carousel هو حصان مرح.
1. الأهداف الأساسية
Carousel لكتابة صور متعددة على صفحة الويب ، يتم وضع الماوس عليها ويتم توفير وصف الصورة أدناه كل صورة.
نظرًا لأن برنامج تسجيل فيديو الكمبيوتر الخاص بالمؤلف سيء للغاية ، فإنه يشعر أيضًا أنه لا توجد حاجة لجذب الكثير من الوقت عليه. إنه يعتقد أنه طالما أنه يمكن أن يفسر المشكلة ، فإن GIF أدناه هو المزيد من فقدان الألوان ، ولكن لا يزال التأثير الأساسي معروضًا.
لا يتوافق Carousel ، وهو مكون Picture Carousel في Bootstrap ، مع IE6 و 7. إذا كان دعم IE6 مطلوبًا ، فأنت بحاجة إلى تنزيل دعم مكون IE6 الخاص بـ Bootstrap من هذا الموقع (انقر لفتح الرابط). في الوقت نفسه ، سوف يتسرب وصف ملف الصورة في Google Chrome قليلاً ، لكنه لن يؤثر على التصفح:
تختلف مواقف العرض في متصفحات مختلفة. تأثير IE8 مثل هذا:
2. الأفكار الأساسية
راجع تخطيط الصفحة للصورة التالية:
3. عملية الإنتاج
1. الخطوة الأولى في "Bootstrap لكتابة مربع حوار يمكن إغلاقها على صفحة الويب الحالية" (انقر لفتح الرابط)
نظرًا لأنك تحتاج إلى استخدام Bootstrap ، يمكنك تنزيل المكونات على الموقع الرسمي (انقر لفتح الرابط). إصدار bootstrap المستخدم في بيئة الإنتاج غير متوافق مع 2. يوصى باستخدام bootstrap3 مباشرة وفقًا لمستندات التطوير. تم تصنيع هذه المقالة أيضًا على أساس bootstrap3. في الوقت نفسه ، يجب دعم تأثير JavaScript الذي توفره Bootstrap3 في JQuery 1.11 (انقر لفتح الرابط). يمكنك تنزيل JQuery 1.11 متوافق مع المتصفح القديم IE6 من الموقع الرسمي لـ JQuery ، بدلاً من JQuery2 غير متوافق مع المتصفح القديم IE6. بعد التنزيل ، قم بتكوين دليل الموقع. فك ضغط Bootstrap3 مباشرة إلى دليل الموقع ، ووضع jQuery-1.11.1.js في دليل JS ، أي نفس الدليل مثل bootstrap.js. هيكل مجلد الموقع تقريبًا على النحو التالي:
2. ما يلي هو الكود الكامل لصفحة الويب ، وسيتم شرح الجزء التالي:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3 xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <meta name = "content =" width = device-width = inial-scale = HREF = "CSS/BOOTSTRAP.CSS" rel = "stylesheet" media = "screen"> <script type = "text/javaScript" src = "js/jQuery-1.11.1.js"> </cript> <script type = "text/javascript" src = </head> <body> <viv> <viv> <h1> صورة carousel </h1> </viv> <viv> <div id = "carousel" data ride = "carousel" data-interval = "1000"> <ol> <li data-target = "#carousel-example-generic-generic-slide-to =" 0 " data-slide-to = "1"> </li> <li data-target = "#carousel-example-generic" data-slide-to = "2"> </li> </ol> <div reb = "listbox"> <viv> <a href = "images/img0.jpg </h3> <p> وصف الصورة لـ I am img0 </p> </viv> </viv> <viv> <a href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> <div> href = "Images/img2.jpg"> <img src = "images/img2.jpg"> </a> <viv> <h3> img2 </h3> <p> وصف صورة I Img2 </p> </p> </p div> </viv> <a href = carousel-example-generic " <a href = "#carousel-example-generic" rob = "button" data-slide = "next"> </span> </a> </viv> </viv> </viv> </body> </html>
(1) <الرأس> جزء
<head> <!-إعلان ترميز الويب ، يتكيف تلقائيًا مع حجم المتصفح. لاستخدام CSS في Bootstrap ، يلزم دعم jQuery. لاستخدام Bootstrap's JS ، العنوان-> <meta http-equiv = "content-type" content = "text/html ؛ charset = utf-8"/> <meta name = "viewport" content = "width = width ، ideth ، scale = 1.0 ، user-scalable = no"> <link href = " media = "screen"> <script type = "text/javaScript" src = "js/jQuery-1.1.1.1.js"> </script> <script type = "text/javaScript" src = "js/bootstrap.js
(2) <body> جزء
قم أولاً بإعلان حاوية حاوية ، والتي يمكن أن تجعل جميع عناصر صفحة الويب تلقائيًا تنتمي إلى مركز صفحة الويب ، ثم كتابة عناصر في هذه الحاوية.
أولاً اكتب الرأس ، أعلن رأسًا ، ثم اكتب نصًا من النص بداخله.
<viv> <h1> صورة carousel </h1> </viv>
ثم حدد طبقة غير مسموعة ، والتي تُستخدم بشكل أساسي لتوحيد مكونات Carousel الصورة. لا يمكن تحديد حجم مكون carousel صورة bootstrap للعناصر الموجودة بداخله ، ويتم إضافة معلمات العرض والارتفاع. وبهذه الطريقة ، سيتم تشويه مكون الصورة carousel. في الوقت نفسه ، لتوسيط هذا المكون ، يجب عليك استخدام يمين الهامش: Auto ؛ الهامش اليساري: السيارات ؛ في سمة نمط div لتقييد. المحاذاة الإضافية = "المركز" ليس له أي تأثير على الإطلاق.
أخيرًا ، هناك أوصاف مفصلة لكل جزء من مكون الصورة:
<viv> <!-اسم مكون الصورة carousel هو carousel ، وعنصر ركوب البيانات مطلوب بواسطة bootstrap. تتمثل قيمة فاصل البيانات في تغيير الصورة كل 1000 مللي ثانية ، أي ثانية واحدة. إذا كانت هذه القيمة أكثر من اللازم ، فسيتم تشويه المكون-> <div id = "carousel" data ride = "carousel" data-interval = "1000"> <!-هناك العديد من الصور المحددة هنا. إذا كانت هناك صورة أخرى ، أضف عنصرًا آخر أدناه. تتم إضافة قيمة انقطاع البيانات إلى واحدة. الصورة الأولى ، أي أن الصورة 0 يجب أن تحتوي على class = "نشطة" وإلا فلن يعمل المكون-> <ol> <li target = "#carousel-example-generic" data-slide-to = "0"> </li> <li-target = "#carousel-example-generic"-slid data-slide-to = "2"> </li> </ol> <div rom = "listbox"> <!-فيما يلي تحريرات مفصلة لكل صورة. يجب أن تكون قيمة الفصل للصورة الأولى نشطة ، والباقي عنصر-> <viv> <!-فهذا يعني أن النقر على الصورة img0.jpg لفتح الارتباط التشعبي لـ img0.jpg. إذا لم يكن هناك ارتباط تشعبي ، فقم بإزالة العلامة <a>-> <a href = "images/img0.jpg"> <img src = "images/img0.jpg"> </a> <viv> <!-وصف النص تحت الصورة-> <h3> img0 </h3> href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> <viv> <h3> img10 </h3> <p> وصف صورة I Img10 </p> </fiv> </viv> <div> src = "الصور/img2.jpg"> </a> <viv> <h3> img2 </h3> <p> وصف صورة I am amg2 </p> </viv> </viv> </viv> <! <span> </span> </a> <a href = "#carousel-example-generic" rob = "button" data-slide = "next"> <span> </span> </viv> </viv>
إذا كنت لا تزال ترغب في الدراسة بعمق ، فيمكنك النقر هنا لدراسة وإرفاق 3 مواضيع مثيرة لك:
Bootstrap التعلم البرنامج التعليمي
Bootstrap البرنامج التعليمي العملي
تعليمي استخدام المكونات الإضافية Bootstrap
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.