ก่อนอื่นคุณต้องแนะนำ bootstrap และ jQuery
แนะนำ cdn: http://cdn.gbtags.com/index.html
จากนั้นเริ่มเขียนรหัส HTML หากคุณไม่ต้องการเปลี่ยนเอฟเฟกต์การแสดงผลจริง ๆ แล้ว CSS ไม่ได้รับอนุญาตให้เขียน 2333
เนื่องจากมีรหัส HTML จำนวนมากที่นี่แบ่งออกเป็นสามส่วนจากนั้นรหัส HTML โดยรวมจะเป็นล่าสุด
ก่อนอื่นดังที่แสดงในรูปด้านบนคุณต้องเข้าใจส่วนประกอบของ bootstrap ต่อไปนี้
•แถบการนำทาง
•ปุ่ม
•รูปร่าง
•เมนูแบบหล่นลง
ในความเป็นจริงมีหลายรูปแบบของส่วนประกอบข้างต้น เราเพียงแค่ต้องรู้ส่วนหนึ่งของมัน หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดดูที่ http://www.gbtags.com/api/bootstrap3.2/bootstrap-doc/components/index.html สำหรับข้อมูลเพิ่มเติม
PS: คลาส {} นี่เป็นเพียงความคิดเห็นไม่ใช่รหัส HTML
PS2: จัดเตรียมไฟล์ HTML ด้วยการดีบักเคสออนไลน์
โครงโลโก้แถบนำทางและแถบนำทาง
<!-สร้างแถบการนำทาง bootstarp และเลย์เอาต์โลโก้การนำทาง-> <av> <v> // do sth </div> </av>
ปุ่มนำทาง
<!-สร้างปุ่ม-> <!-คลาส {navbar-toggle: การส่งปุ่มนี้ไปยัง JS สามารถคลิกได้: ถ้าคุณไม่รวมการล่มสลายของ Navbar มันเป็นคลาสเริ่มต้น .. ถ้าคุณไม่เพิ่มคุณจะไม่พบข้อบกพร่องใด ๆ aria-expanded = "false": ฟังก์ชั่นการอ่านที่ได้รับความช่วยเหลือ .. การตั้งค่าสำหรับกลุ่มพิเศษ-> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#navbar-gbtag" aria-expaided = "false"> <! ลอง}-> <span> คลิกฉัน </span> <span> </span> <span> </span> <span> </span> <span> </span> </pution>รูปร่าง
<div> <!-คลาส {form-control: ตั้งค่าความกว้างเป็น % แต่เราตั้งค่าฟอร์ม navbar-form ในรูปแบบองค์ประกอบหลักดังนั้นความกว้างจะถูกควบคุมด้วยจำนวนหนึ่ง}-> <อินพุตประเภท = "ข้อความ" plessholder = "ค้นหา"/> </div> <!เมนูแบบดึงลง
<li> <!-คลาส {dropdown-toggle: ประกาศว่านี่คือรายการที่สามารถลดลงได้ ที่จริงแล้วฉันไม่พบจุดประสงค์เฉพาะของคลาสนี้ ยกเลิกและไม่พบ bugspan.caret {รูปแบบรูปภาพไอคอนสำหรับสามเหลี่ยมเล็ก ๆ }} data-toggle = "dropdown": แนะนำแอตทริบิวต์ที่จำเป็นของส่วนประกอบเมนูแบบเลื่อนลง = "ปุ่ม": ทำหน้าที่เป็นประกาศเสริม ประกาศว่านี่คือปุ่ม-> <a href = "#" data-toggle = "dropdown" role = "ปุ่ม" Aria-Haspopup = "true" Aria-expanded = "false"> ชื่อเมนูแบบเลื่อนลง </span> </a> <ul> <li> องค์ประกอบเป็นตัวแบ่ง-> <li role = "ตัวแยก"> </li> <li> <a href = ""> โปรดติดตามฉลาก geek </a> </li></ul> <!-เมนูแบบเลื่อนลง->การใช้ HTML โดยรวม
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> แถบการนำทางที่ตอบสนองได้ </title> <link rel = "stylesheet" type = "text/css" href = "../ css/bootstrap.min.css"/> type = "text/javascript" charset = "utf-8"> </script> <script src = "../ js/bootstrap.min.js" type = "text/javascript" charset = "utf-8"> </script> </head> <body> <!-สร้างเค้าโครง bootstraPlogo-> <!-หมายเหตุ: คุณต้องสร้าง header navbar, ห่อโลโก้และปุ่มตอบสนองเข้ามามิฉะนั้น ... ทุกคนจะลบหัวนาวีบาร์และแคบลงบนหน้าจอ JS เป็นสิ่งที่คลิกได้ที่คลิกได้: หากคุณไม่รวม Navbar-collapse มันเป็นคลาสเริ่มต้น ดูเหมือนว่าไม่พบข้อบกพร่องโดยไม่ต้องเพิ่ม } data-toggle = "การล่มสลาย": แนะนำการยุบปลั๊กอิน data-target = "#navbar-gbtag": เมื่อคลิกปุ่มซึ่งแท็กใดที่ถูกเปลี่ยนเส้นทาง/เปิด Aria-expanded = "False": ฟังก์ชั่นการอ่านที่ได้รับการช่วยเหลือ ไอคอนและคำแนะนำบางอย่างในคลาสปุ่ม {sr-only: ซ่อนแท็กนี้ไม่ได้-บาร์: เปลี่ยนสไตล์ไอคอนและเปลี่ยนสไตล์ไอคอนเป็น glyphicon-star try}-> <span> คลิกฉัน </span> <span> </span> <span> </span> หากการล่มสลายถูกยกเลิกปุ่มจะถูกขยายโดยค่าเริ่มต้น Navbar-collapse: คลาสที่ต้องการสำหรับเค้าโครงองค์ประกอบแถบการนำทาง} id: สอดคล้องกับข้อมูล-targe ของปุ่ม-> <div id = "navbar-gbtag"> <!-สร้างแถบการนำทางคลาสองค์ประกอบภายใน {NAV: สร้างคลาสฐานที่จำเป็นสำหรับองค์ประกอบภายในของแถบนำทาง NAVBAR-NAV: นี่ไม่ใช่เรื่องง่ายที่จะอธิบาย เพราะฉันดูเอกสารอย่างเป็นทางการและไม่ได้พูดอย่างละเอียด ที่นี่ฉันจะอธิบายสั้น ๆ : ทำให้ UL เป็นศูนย์กลางในแนวนอนและแนวนอน ในเวลาเดียวกันความกว้างคือความกว้างของเนื้อหาและจะไม่บีบองค์ประกอบที่อยู่เบื้องหลังเช่นรูปแบบ และในที่สุดคุณสามารถลบคลาสนี้และพยายามที่จะรู้ว่ามันถูกใช้ Navbar-Right: คลาสที่จัดเรียงโดยแถบการนำทาง}-> <ul> <!-คลาส {ใช้งาน: เริ่มต้นการคลิก, แบบเลื่อนลง: คลาสพื้นฐานที่จำเป็นสำหรับการสร้างเมนูดรอปดาวน์}-> <li> <a href = ""> relsoul </a> </li> <li> รายการที่สามารถลดลงได้ ที่จริงแล้วฉันไม่พบจุดประสงค์เฉพาะของคลาสนี้ ฉันยกเลิกและไม่พบข้อบกพร่อง span .caret {รูปแบบภาพไอคอนของสามเหลี่ยมเล็ก ๆ }} data-toggle = "Dropdown": แนะนำแอตทริบิวต์ที่จำเป็นของส่วนประกอบเมนูแบบเลื่อนลง = "ปุ่ม": ทำหน้าที่เป็นประกาศเสริม ประกาศว่านี่คือปุ่ม-> <a href = "#" data-toggle = "dropdown" role = "ปุ่ม" Aria-Haspopup = "true" Aria-expanded = "false"> ชื่อเมนูแบบเลื่อนลง </span> </a> <ul> <li> องค์ประกอบเป็นตัวแบ่ง-> <li role = "ตัวแยก"> </li> <li> <a href = ""> โปรดให้ความสนใจกับแท็กเกินบรรยาย </a> </li></ul> <!-เมนูแบบดรอปดาวน์-> </li> <! http://v3.bootcss.com/components/#navbar-forms navbar-left: ใช้เพื่อระบุการจัดตำแหน่งขององค์ประกอบในแถบนำทาง http://v3.bootcss.com/components/#navbar- องค์ประกอบ-- BTN: รูปแบบปุ่มขึ้นอยู่กับการอ้างอิงเฉพาะคลาสฐาน BTN http://v3.bootcss.com/css/#buttons กลุ่ม: คลาสพื้นฐานสำหรับรายการองค์ประกอบเดียวเฉพาะ http://v3.bootcss.com/css/#forms}-> <! รูปแบบองค์ประกอบหลักดังนั้นความกว้างจะถูกควบคุมด้วยจำนวนหนึ่ง}-> <อินพุตประเภท = "text" placeholder = "search"/> </div> <!-กลุ่มฟอร์ม-> <button type = "ส่ง"> ค้นหา </button> </form> <!-form-> <ul> <li> role = "ปุ่ม" aria-haspopup = "true" aria-expanded = "false"> ชื่อเมนูแบบดรอปดาวน์ <span> </span> </a> <ul> <li> <a href = ""> bootstrap </a> </li> <! HREF = ""> โปรดติดตามแท็ก geek </a> </li></ul> <!-เมนูแบบเลื่อนลง-> </li> <!-การนำทางองค์ประกอบย่อย 2-> </ul> <!-องค์ประกอบการนำทาง 2-> </div> <!เนื้อหาข้างต้นเป็นรหัสตัวอย่างสำหรับการสร้างแถบการนำทางที่ตอบสนองโดยตัวแก้ไขให้คุณ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดให้ความสนใจกับเว็บไซต์ Wulin.com ขอบคุณ!