การใช้ bootstrap เพื่อเขียนม้าหมุนภาพม้าหมุนสามารถประหยัดเวลาได้มาก Image Carousel เป็นเทคโนโลยีทั่วไปในหน้าเว็บ แต่ถ้าเขียนโดยตรงมันต้องใช้การเข้ารหัส JavaScript ยาวและมันไม่ง่ายที่จะควบคุมขนาด
ให้ฉันบอกด้วยว่าความหมายดั้งเดิมของคำว่า Carousel เป็นม้าที่มีความสุข
1. วัตถุประสงค์พื้นฐาน
ม้าหมุนสำหรับการเขียนรูปภาพหลายภาพบนหน้าเว็บเมาส์จะถูกวางไว้และคำอธิบายภาพมีให้ด้านล่างแต่ละภาพ
เนื่องจากซอฟต์แวร์บันทึกวิดีโอคอมพิวเตอร์ของผู้เขียนค่อนข้างแย่เขาจึงรู้สึกว่าไม่จำเป็นต้องใช้เวลามากเกินไป เขาคิดว่าตราบใดที่มันสามารถอธิบายปัญหาได้ GIF ด้านล่างคือการสูญเสียสีมากขึ้น แต่เอฟเฟกต์พื้นฐานยังคงปรากฏอยู่
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 หลังจากดาวน์โหลดแล้วให้กำหนดค่าไดเรกทอรีไซต์ DECOMPRESS BOOTSTRAP3 โดยตรงไปยังไดเรกทอรีไซต์และวาง jQuery-1.11.1.JS ในไดเรกทอรี JS นั่นคือไดเรกทอรีเดียวกับ bootstrap.js โครงสร้างของโฟลเดอร์ไซต์มีดังนี้:
2. ต่อไปนี้เป็นรหัสเต็มของหน้าเว็บและส่วนต่อไปนี้จะถูกอธิบาย:
<! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> href = "css/bootstrap.css" rel = "stylesheet" media = "screen"> <script type = "text/javascript" src = "js/jgery-1.11.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap.js <body> <div> <div> <h1> ม้าหมุนภาพ </h1> </div> <div> <div id = "Carousel" data-ride = "Carousel" data-interval = "1000"> <ol> <li data-target = "#carousel-example-generic data-slide-to = "1"> </li> <li data-target = "#carousel-example-generic" datalide-to = "2"> </li> </lo> <div role = "ListBox"> <div> <a href = "images/img0.jpg"> <img src = "img0.jpg </h3> <p> คำอธิบายภาพของ I img0 </p> </div> </div> <div> <a href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> <h3> img10 href = "images/img2.jpg"> <img src = "images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> คำอธิบายภาพของ I img2 </p> </div> </a> <a href = "#carousel-example-generic" role = "button" data-slide = "next"> <span> </span> </a> </div> </div> </div> </body> </html>
(1) <head> ส่วนหนึ่ง
<head> <!-ประกาศการเข้ารหัสเว็บปรับให้เข้ากับขนาดเบราว์เซอร์โดยอัตโนมัติ ในการใช้ CSS ของ Bootstrap จำเป็นต้องมีการสนับสนุน jQuery หากต้องการใช้ JS ของ Bootstrap ชื่อ-> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta name = "viewport" content = "width = device-width media = "screen"> <script type = "text/javascript" src = "js/jquery-1.11.1.js"> </script> <script type = "text/javascript" src = "js/bootstrap.js"> </script> <title>
(2) <body> ส่วนหนึ่ง
ก่อนอื่นประกาศคอนเทนเนอร์คอนเทนเนอร์ซึ่งสามารถทำให้องค์ประกอบทั้งหมดของหน้าเว็บเป็นของศูนย์กลางของหน้าเว็บโดยอัตโนมัติจากนั้นเขียนองค์ประกอบในคอนเทนเนอร์นี้
ก่อนอื่นเขียนส่วนหัวประกาศส่วนหัวแล้วเขียนข้อความข้างใน
<div> <h1> ม้าหมุนภาพ </h1> </div>
จากนั้นกำหนด Div Layer ที่ไม่มีชื่อซึ่งส่วนใหญ่จะใช้เพื่อสร้างมาตรฐานส่วนประกอบม้าหมุนภาพ ไม่สามารถระบุขนาดของส่วนประกอบ bootstrap ภาพม้าหมุนสำหรับองค์ประกอบภายในและเพิ่มพารามิเตอร์ความกว้างและความสูง วิธีนี้ส่วนประกอบของภาพม้าหมุนจะบิดเบี้ยว ในเวลาเดียวกันเพื่อจัดกึ่งกลางส่วนประกอบนี้คุณต้องใช้มาร์จิ้น-ขวา: อัตโนมัติ; ขอบซ้าย: อัตโนมัติ; ในคุณสมบัติสไตล์ของ div เพื่อ จำกัด การจัดเรียงเพิ่มเติม = "ศูนย์" ไม่มีผลเลย
ในที่สุดก็มีคำอธิบายโดยละเอียดของแต่ละส่วนของส่วนประกอบรูปภาพ:
<div> <!-ชื่อของส่วนประกอบม้าหมุนเป็นม้าหมุนและองค์ประกอบของข้อมูลการขับขี่เป็นสิ่งจำเป็นโดย bootstrap ค่าของข้อมูลระหว่างข้อมูลคือการเปลี่ยนภาพทุก ๆ 1,000 มิลลิวินาทีนั่นคือ 1 วินาที หากค่านี้มากเกินไปส่วนประกอบจะถูกบิดเบือน-> <div id = "Carousel" data-ride = "Carousel" data-interval = "1000"> <!-มีรูปภาพหลายภาพที่กำหนดไว้ที่นี่ หากมีอีกหนึ่งภาพเพิ่มอีกหนึ่งรายการด้านล่าง ค่าของสไลด์ข้อมูลจะถูกเพิ่มหนึ่ง ภาพแรกนั่นคือภาพที่ 0 ต้องมี class = "ใช้งาน" มิฉะนั้นส่วนประกอบจะไม่ทำงาน-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> <li data-target = "carousel-example data-slide-to = "2"> </li> </ol> <div role = "listbox"> <!-ต่อไปนี้คือการแก้ไขโดยละเอียดของแต่ละภาพ ค่าคลาสของภาพแรกจะต้องใช้งานรายการและส่วนที่เหลือเป็นรายการ-> <div> <!-หมายความว่าคลิกที่ภาพ img0.jpg เพื่อเปิดไฮเปอร์ลิงก์ของ IMG0.jpg หากไม่มีไฮเปอร์ลิงก์ให้ลบแท็ก <a>-> <a href = "images/img0.jpg"> <img src = "images/img0.jpg"> </a> <div> <! href = "images/img10.jpg"> <img src = "images/img10.jpg"> </a> <div> <h3> img10 </h3> <p> คำอธิบายภาพของฉัน IMG10 </p> </div> src = "images/img2.jpg"> </a> <div> <h3> img2 </h3> <p> คำอธิบายภาพของฉัน img2 </p> </div> </div> </div> <! <span> </span> </a> <a href = "#carousel-example-generic" role = "ปุ่ม" slide = "next"> <span> </span> </div> </div>
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น