ฟอรั่ม | ล่าสุดการพัฒนาเว็บบทเรียน
×

Bootstrap เกี่ยวกับการสอน

BS บ้าน BS เริ่ม BS กินกัน BS การเรียงพิมพ์ BS ตาราง BS ภาพ BS jumbotron BS Wells BS การแจ้งเตือน BS ปุ่ม BS กลุ่มปุ่ม BS Glyphicons BS ป้าย / ป้าย BS แถบความคืบหน้า BS การให้เลขหน้า BS Pager BS กลุ่มรายการ BS แผง BS เมนูแบบเลื่อนลง BS Collapse BS แท็บ / ยา BS Navbar BS ฟอร์ม BS Inputs BS Inputs 2 BS Input Sizing BS ม้าหมุน BS เป็นกิริยาช่วย BS เคล็ดลับ BS Popover BS Scrollspy BS ติด

Bootstrap ระบบกริด

BS ระบบกริด BS ซ้อนกัน / แนวนอน BS ตารางขนาดเล็ก BS ตารางขนาดกลาง BS ตารางขนาดใหญ่ BS ตัวอย่างตาราง

Bootstrap ธีม

BS แม่แบบ BS กระทู้ "Simply Me" BS กระทู้ "Company" BS กระทู้ "Band"

Bootstrap Exam

BS ทดสอบ

Bootstrap CSS Ref

CSS การเรียงพิมพ์ CSS ปุ่ม CSS ฟอร์ม CSS ผู้ช่วย CSS ภาพ CSS ตาราง CSS เมนูแบบเลื่อนลง CSS Navs Glyphicons

Bootstrap JS Ref

JS ติด JS เตือนภัย JS ปุ่ม JS Carousel JS Collapse JS เลื่อนลง JS Modal JS Popover JS Scrollspy JS แถบ JS เคล็ดลับ

 

Bootstrap Carousel Plugin


ปลั๊กอินม้าหมุน

ปลั๊กอินม้าหมุนเป็นส่วนประกอบสำหรับการขี่จักรยานผ่านองค์ประกอบเช่นม้าหมุน (สไลด์โชว์)

เคล็ดลับ: ปลั๊กอินสามารถรวมเป็นรายบุคคล (โดยใช้ Bootstrap's แต่ละบุคคล "carousel.js" ไฟล์) หรือทั้งหมดในครั้งเดียว (โดยใช้ "bootstrap.js" หรือ "bootstrap.min.js" )


ตัวอย่างม้าหมุน



หมายเหตุ: Carousels ยังไม่ได้รับการสนับสนุนอย่างถูกต้องใน Internet Explorer 9 และก่อนหน้านี้ (เพราะพวกเขาใช้การเปลี่ยน CSS3 และภาพเคลื่อนไหวเพื่อให้บรรลุผลภาพนิ่ง)


วิธีการสร้างม้าหมุน

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างม้าหมุนพื้นฐาน

ตัวอย่าง

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
ลองตัวเอง»

ตัวอย่างอธิบาย

สุด <div> :

คิวต้องใช้รหัส (ในกรณีนี้ id="myCarousel" ) สำหรับการควบคุมม้าหมุนทำงานอย่างถูกต้อง

class="carousel" ระบุว่านี้ <div> มีม้าหมุน

.slide ชั้นเพิ่มการเปลี่ยนแปลง CSS และภาพเคลื่อนไหวที่มีผลบังคับใช้ซึ่งจะทำให้รายการที่เลื่อนเมื่อแสดงรายการใหม่ งดระดับนี้หากคุณไม่ต้องการผลกระทบนี้

data-ride="carousel" แอตทริบิวต์บอกเงินทุนเพื่อเริ่มต้นการเคลื่อนไหวม้าหมุนทันทีเมื่อมีการโหลดหน้าเว็บ

ว่า "ตัวชี้วัด" ส่วนหนึ่ง:

ตัวชี้วัดที่เป็นจุดเล็ก ๆ ที่ด้านล่างของแต่ละสไลด์ (ซึ่งแสดงจำนวนภาพนิ่งที่มีอยู่ในม้าหมุนและเลื่อนที่ผู้ใช้กำลังดู)

ตัวชี้วัดที่ระบุไว้ในรายการสั่งซื้อที่มีระดับ .carousel-indicators

data-target แอตทริบิวต์ชี้ไปยัง ID ของม้าหมุนที่

data-slide-to แสดงที่มาระบุว่าเลื่อนไปถึงเมื่อคลิกที่จุดที่เฉพาะเจาะจง

"การ Wrapper สำหรับภาพนิ่ง" ส่วนหนึ่ง:

สไลด์ที่ระบุไว้ใน <div> กับชั้น .carousel-inner

เนื้อหาของแต่ละสไลด์ถูกกำหนดไว้ใน <div> กับชั้น .item นี้จะมีข้อความหรือภาพ

.active ระดับความต้องการที่จะเพิ่มให้เป็นหนึ่งในภาพนิ่ง มิฉะนั้นม้าหมุนจะมองไม่เห็น

"ซ้ายขวาและการควบคุม" ส่วนหนึ่ง:

รหัสนี้จะเพิ่ม "ซ้าย" และปุ่ม "สิทธิ" ที่ช่วยให้ผู้ใช้สามารถกลับไปมาระหว่างภาพนิ่งด้วยตนเอง

data-slide แอตทริบิวต์ยอมรับคำหลัก "prev" หรือ "next" ซึ่งจะเปลี่ยนแปลงตำแหน่งสไลด์เทียบกับตำแหน่งปัจจุบัน


เพิ่มคำอธิบายภาพสไลด์

เพิ่ม <div class="carousel-caption"> ในแต่ละ <div class="item"> การสร้างคำบรรยายใต้ภาพสำหรับแต่ละภาพนิ่ง:

ตัวอย่าง

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
    <li data-target="#myCarousel" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="img_chania.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_chania2.jpg" alt="Chania">
      <div class="carousel-caption">
        <h3>Chania</h3>
        <p>The atmosphere in Chania has a touch of Florence and Venice.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>

    <div class="item">
      <img src="img_flower2.jpg" alt="Flower">
      <div class="carousel-caption">
        <h3>Flowers</h3>
        <p>Beatiful flowers in Kolymbari, Crete.</p>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>
ลองตัวเอง»

กรอก Bootstrap หมุนอ้างอิง

สำหรับการอ้างอิงสมบูรณ์ของตัวเลือกม้าหมุนทุกวิธีการและเหตุการณ์ที่เกิดขึ้นไปที่เรา Bootstrap JS Carousel อ้างอิง