เขียนด้านหน้า
ในบทความนี้ฉันจะพูดถึงการใช้ bootstrap ตามหน้าเว็บภูมิทัศน์ที่ฉันทำ ภาพหน้าจอหน้าเว็บมีดังนี้:
เอฟเฟกต์และรหัสของหน้าเว็บที่สมบูรณ์สามารถดูได้ที่นี่หรือดูบน codepen เอฟเฟกต์หลักที่หน้าเว็บจำเป็นต้องบรรลุผลรวมดังต่อไปนี้:
1. ปุ่มเข้าสู่ระบบและการลงทะเบียนในแถบนำทางจะปรากฏขึ้นหลังจากคลิกที่กล่องเข้าสู่ระบบและการลงทะเบียนกล่องโมดัลและหน้าต่างลงชื่อเข้าใช้และหน้าต่างลงทะเบียนสามารถเปลี่ยนได้ แถบเมนูตอบสนอง
2. ตัวเลือกภูมิทัศน์ในแถบการนำทางสามารถดึงลงมาได้ คลิกถ้ำม่านน้ำ Jiuzhaigou Lijiang ในแบบเลื่อนลงเพื่อค้นหาแท็บที่เกี่ยวข้อง
3. สไลด์โชว์สไลด์โชว์ขนาดใหญ่
4. คลิกเพื่อเปิดหน้าแท็บ
ตอนนี้เราเริ่มโอบกอด bootstrap
ฉันเชื่อว่าเพื่อนเคยได้ยินเกี่ยวกับ bootstrap หรือใช้มัน ในหน้าเว็บนี้ฉันใช้ CDN Bootstrap v3.3.4 คลิกที่นี่เพื่อดาวน์โหลด Bootstrap v3.3.5 เวอร์ชันล่าสุดหรือคลิกที่นี่เพื่อดาวน์โหลดบนเว็บไซต์ทางการ ฉันเชื่อว่ามีคนที่เหมาะกับคุณเสมอ ~~~~~~
ในบทความนี้มาพูดถึงแถบการนำทางก่อน
แถบนำทาง
ก่อนที่จะใช้ BS คุณต้องอ้างถึง BS ก่อนรวม CSS และ JS วิธีการอ้างอิงนั้นง่ายมากเช่นเดียวกับการอ้างอิงไฟล์ภายนอกทั่วไป คุณสามารถใช้ลิงก์ CDN หรือวางไว้ในการอ้างอิงท้องถิ่น รหัสได้รับด้านล่าง
<html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "ede = edge"> <meta name = "viewport" content = "ความกว้างของอุปกรณ์ href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> <!-html5 shim และตอบกลับสำหรับ IE8 การสนับสนุนของ html5 9]> <script src = "http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "http://cdn.bootcss.com/responfer <! [endif]-> </head> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js" src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script>
ในตัวอย่างเว็บเพจแนวนอนนี้ฉันใช้ลิงก์ CDN
ในเวลาเดียวกันเนื่องจากปลั๊กอิน BS นั้นใช้ JQ จึงต้องแนะนำ JQ ด้วย
ก่อนอื่นให้รหัสที่สมบูรณ์ของแถบการนำทาง
<av> <div> <!-แบรนด์และสลับได้รับการจัดกลุ่มเพื่อการแสดงผลมือถือที่ดีขึ้น-> <div> <button type = "ปุ่ม" data-toggle = "การยุบ" data-target = "#bs-example-navbar-collapse-1"> <span> การนำทาง href = "#"> กำหนดเครื่องหมายการค้าด้วยตัวคุณเอง </a> </div> <!-การนำทางที่มุมซ้ายบน-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homepage <pan> role = "ปุ่ม" aria-expanded = "false"> ทิวทัศน์ <span> </span> </a> <ul role = "เมนู"> <li> <a href = "#jiuzhaigou"> jiuzhaigou </a> </li> <li> href = "#shuilianong"> ถ้ำ shuijian </a> </li> <li> </li> <li> <a href = "#shuilianandong"> ถ้ำ shuijian </a> </li> <li> </li> <li> data-target = "#เกี่ยวกับ"> <a href = "#"> เกี่ยวกับ </a> </li></ul> <form role = "search"> <div> <อินพุต type = "text" placeholder = "ค้นหาสถานที่ท่องเที่ยว .. "> <button type = "ปุ่ม" id = "signin-button"> <a href = "#"> เข้าสู่ระบบ </a> </li> <li data-toggle = "modal" data-target = "#signin-signup-tab" id = "การลงทะเบียนปุ่ม"> <a href = "#"> ลงทะเบียน </a>
ส่วนประกอบการนำทางของ BS ทั้งหมดขึ้นอยู่กับคลาส. NAV เดียวกันและรหัสถูกอธิบายแยกต่างหาก มาดูย่อหน้านี้ก่อน:
<button type = "button" data-toggle = "Collapse" data-target = "#bs-example-navbar-collapse-1"> <pan> การนำทางสลับ </span> <span> </span> <span> </span> <span>
จุดประสงค์ของรหัสนี้คือการลด Viewport ตัวเลือกเมนูบนแถบการนำทางจะล่มสลายคลิกที่ไอคอนการล่มสลายและตัวเลือกเมนูบนแถบการนำทางจะถูกจัดเรียงในแนวตั้ง คลาส . navbar-inverse ใน NAV เป็นสีผกผัน เพื่อนสามารถลบคลาส . navbar-inverse เพื่อสังเกตเอฟเฟกต์ เพราะฉันเป็นตัวควบคุมสีดำฉันจึงใช้สีคว่ำที่นี่ หากคุณต้องการใช้สีอื่น ๆ ทองคำที่อุดมไปด้วยเพื่อนสามารถจับคู่พวกเขาตามรสนิยมของพวกเขาเอง คลาสแบรนด์ NAVBAR สามารถใช้เพื่อกำหนดเครื่องหมายการค้าของเว็บไซต์ของคุณเอง ฉันจะใช้ข้อความเพื่อกำหนดเครื่องหมายการค้าด้วยตัวเองที่นี่ เพื่อนที่สนใจสามารถเพิ่มโลโก้ของตัวเอง คลาส Dropdown-Toggle สามารถใช้แบบดึงลงได้และคลาส Divider สามารถใช้เส้นแบ่งแสงและมืดได้
ตามชื่อแนะนำคลาส . navbar-right ในช่องค้นหาและเข้าสู่ระบบและการลงทะเบียนคือถูกต้อง
คุณลักษณะข้อมูล
ที่นี่จำเป็นต้องพูดคุยเกี่ยวกับคุณลักษณะข้อมูลของ BS ใน BS นักพัฒนาสามารถใช้ปลั๊กอิน JS ทั้งหมดใน BS ผ่านแอตทริบิวต์ข้อมูลเท่านั้น นี่คือ API ชั้นหนึ่งใน BS และมักจะเป็นวิธีที่เราต้องการในการใช้ปลั๊กอิน JS ตัวอย่างเช่น data-toggle = "ล่มสลาย" และ data-toggle = "ดรอปดาวน์" ในรหัสด้านบนเป็นวิธีการใช้ปลั๊กอิน JS ใน BS
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้แถบการนำทาง bootstrap