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

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 Affix Plugin (Advanced)


ปลั๊กอินติด

ปลั๊กอินช่วยให้ติดเป็นองค์ประกอบที่จะกลายเป็นติด (ล็อค) ไปยังพื้นที่บนหน้าเว็บ นี้มักจะใช้กับเมนูนำทางหรือปุ่มไอคอนทางสังคมเพื่อให้พวกเขา "stick" ที่บริเวณขณะที่เลื่อนขึ้นและลงหน้า

ปลั๊กอินสลับพฤติกรรมนี้และปิด (เปลี่ยนค่าของตำแหน่ง CSS จากคงที่คงที่) ขึ้นอยู่กับการเลื่อนตำแหน่ง

ตัวอย่างเช่น 1) แถบนำทางติดอยู่:

ตัวอย่าง 2) แถบด้านข้างติดอยู่:

ด้วยการติดเมื่อเราเลื่อนขึ้นและลงหน้าเมนูอยู่เสมอที่มองเห็นและถูกขังอยู่ในตำแหน่ง


วิธีการสร้างเมนูติดนำร่อง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างเมนูนำทางแนวนอนติดอยู่:

ตัวอย่าง

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
ลองตัวเอง»

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีการสร้างเมนูนำทางแนวตั้งติดอยู่:

ตัวอย่าง

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
ลองตัวเอง»

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

เพิ่ม data-spy="affix" กับองค์ประกอบที่คุณต้องการติด

เลือกเพิ่ม data-offset-top|bottom แอตทริบิวต์การคำนวณตำแหน่งของเลื่อน

มันทำงานอย่างไร

ประทับปลั๊กอินสลับระหว่างสามชั้นเรียน: .affix , .affix-top และ .affix-bottom แต่ละชั้นเป็นตัวแทนของรัฐโดยเฉพาะ คุณต้องเพิ่มคุณสมบัติ CSS เพื่อจัดการกับตำแหน่งที่เกิดขึ้นจริงมีข้อยกเว้นของ position:fixed ใน .affix ระดับ

  • ปลั๊กอินเพิ่ม .affix-top หรือ .affix-bottom ชั้นเพื่อบ่งชี้องค์ประกอบอยู่ในบนสุดหรือล่างสุดตำแหน่ง การวางตำแหน่งด้วย CSS ไม่จำเป็นต้องที่จุดนี้

  • เลื่อนที่ผ่านมาก่อให้เกิดองค์ประกอบที่ติดพิมพ์ตัวหนังสือลงจริง - นี่คือที่ปลั๊กอินแทนที่ .affix-top หรือ .affix-bottom ชั้นกับ .affix ระดับ (ชุด position:fixed ) ณ จุดนี้คุณต้องเพิ่ม CSS top หรือ bottom คุณสมบัติการวางตำแหน่งขององค์ประกอบที่ติดอยู่ในหน้า

  • ถ้าด้านล่างชดเชยที่ถูกกำหนดให้เลื่อนที่ผ่านมาแทนที่ .affix ชั้นเรียนกับ .affix-bottom ตั้งแต่การชดเชยเป็นตัวเลือกการตั้งค่าหนึ่งที่คุณต้องมีการตั้งค่าที่เหมาะสม CSS ในกรณีนี้เพิ่ม position:absolute เมื่อมีความจำเป็น

ในตัวอย่างแรกข้างต้น, ปลั๊กอินติดเพิ่ม .affix ระดับ (ตำแหน่ง: คงที่) ไป <nav> องค์ประกอบเมื่อเราได้เลื่อน 197 พิกเซลจากด้านบน ถ้าคุณเปิดตัวอย่างคุณยังจะเห็นว่าเราได้เพิ่มแบบ CSS top ทรัพย์สินที่มีค่าเป็น 0 ไป .affix ระดับ นี้คือการทำให้แน่ใจว่า Navbar อยู่ที่ด้านบนของหน้าตลอดเวลาเมื่อเราได้เลื่อน 197 พิกเซลจากด้านบน


Scrollspy และติด

ใช้ติดปลั๊กอินร่วมกับ Scrollspy ปลั๊กอิน:

เมนูแนวนอน (Navbar)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
ลองตัวเอง»

เมนูแนวตั้ง (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
ลองตัวเอง»

กรอก Bootstrap ติดอ้างอิง

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