หลาย บริษัท ใช้กรอบการทำงานของ Bootstrap ในการพัฒนา Bootstrap เป็นผลงานของทีม Twitter ซึ่งทำให้การพัฒนาส่วนหน้าของเราง่ายขึ้นอย่างมาก (ฉันจะสรุปการใช้งานน้อยลงในภายหลัง)
การเรียนรู้ที่จะใช้ API ฉันขอแนะนำให้คุณดู API ของเว็บไซต์อย่างเป็นทางการที่อยู่: http://www.bootcss.com/
นี่คือการเรนเดอร์เป้าหมายบางส่วน:
ด้านล่างนี้ฉันจะสรุปเทคนิคและหลักการในการสาธิตเล็ก ๆ :
ขั้นตอนแรกคือ การดาวน์โหลดแพ็คเกจบีบอัดของ bootstrap ที่ http://www.bootcss.com/ สร้าง index.html ใหม่ใช้ Sublime หรือ Editor อื่น ๆ เพื่อเปิดหน้าดัชนี
ขั้นตอนที่ 2 : คัดลอกเทมเพลตพื้นฐานจากเว็บไซต์อย่างเป็นทางการ
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua content =" ede = edge "> และเนื้อหาอื่น ๆ * ต้อง * ติดตามพวกเขา! -> <title> bootstrap 101 เทมเพลต </title> <!-bootstrap-> <link href = "css/bootstrap.min.css" rel = "stylesheet"> <! <!-[ถ้า lt ie 9]> <script src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <script src = "// cdn.bootcss.com/respondes.js/1.4. </head> <body> <h1> สวัสดีโลก! </h1> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"> </script> <! src = "js/bootstrap.min.js"> </script> </body> </html>
1) หมายเหตุ: การอ้างอิงถึง jQuery.js ต้องอยู่หน้า bootstrap.min.js และเป็นการดีที่สุดที่จะดาวน์โหลด jQuery.js ด้วยตนเองและวางไว้ในเส้นทาง JS <script src = "js/jQuery.min.js"> </script>
เพราะต่อมาเมื่อฉันเลียนแบบฉันพบว่าเอฟเฟกต์แอนิเมชั่นแบบเลื่อนลงและม้าหมุนได้หายไปและฉันพบว่าไฟล์ jQuery ของเทมเพลตพื้นฐานถูกดาวน์โหลดและอาจไม่เชื่อมต่อกับอินเทอร์เน็ตดังนั้นฉันจึงไม่ได้ดาวน์โหลด เป็นการดีที่สุดที่จะอ้างถึงท้องถิ่นด้วยตัวเอง
2) หมายเหตุ: การอ้างอิง CSS ถูกวางไว้เหนือหน้าและการอ้างอิง JS อยู่ด้านล่างหน้าเนื่องจาก CSS จำเป็นต้องโหลดหน้าการแสดงผลก่อนและ JS จำเป็นต้องโหลดและดำเนินการหลังจากการแสดงหน้าเสร็จสมบูรณ์ และคำสั่ง meta สำหรับอุปกรณ์มือถือได้รับการปรับให้เข้ากับ: <meta name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1">
ขั้นตอนที่ 3 แถบการนำทาง
1) เอฟเฟกต์ศูนย์กลาง: ต้องเปลี่ยนตู้คอนเทนเนอร์เป็นคอนเทนเนอร์
2) เปลี่ยนสีขาวเป็นสีดำโดยมีเอฟเฟกต์ความคมชัด: <av>
3) แถบการนำทางได้รับการแก้ไขไปด้านบนและเพิ่มแอตทริบิวต์คลาสเวลา: Navbar-fixed-top
<av> <!-แบรนด์และสลับได้รับการจัดกลุ่มเพื่อการแสดงผลมือถือที่ดีขึ้น-> <div> <button type = "ปุ่ม" data-toggle = "การล่มสลาย" data-target = "#bs-example-navbar-collapse-1" Aria-expanded = "False"> <span> href = "#"> zootopia </a> </div> <!-รวบรวมลิงก์ NAV แบบฟอร์มและเนื้อหาอื่น ๆ สำหรับการสลับ-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> homepage คำอธิบาย </a> </li> <li> <a href = "#"> คุณสมบัติ </a> </li> <li> <a href = "#"> เกี่ยวกับ </a> </li> </div> <!-/.navbar-collapse-> </div> <!
4) แถบการนำทางจะครอบคลุมด้านบนของร่างกายดังนั้นเพิ่มสไตล์
<style type = "text/css"> body {padding-top: 50px; } </style>5) รายการการนำทางที่โดดเด่นเพิ่มเมนูแบบดรอปดาวน์
<li> <a href = "#" data-toggle = "dropdown"> คุณสมบัติ </a> <ul> <li> <a href = "#"> สัตว์ 1 </a> </li> <li> <a href = "#"> สัตว์ </a> </li> <li> 4 </a> </li> </li> </li>
โปรดทราบว่าเนื้อหาของเมนูย่อยนั้นซ้อนกันในแท็ก LI ด้านนอกสุดและแท็ก LI มีคลาสแบบเลื่อนลงและเมนูย่อยก็เป็นแท็ก UL และคลาสคือ Dropdown-Menu ดูด้านบนสำหรับความสัมพันธ์การทำแผนที่เฉพาะ
ขั้นตอนที่ 4: เพิ่มเอฟเฟกต์การหมุนและคัดลอกและแก้ไขโมดูลม้าหมุนของส่วนประกอบ bootstrap:
<div id = "carousel-example-generic" data-ride = "Carousel"> <!-ตัวบ่งชี้-> <ol> <li data-target = "#carousel-example-generic" data-slide-to = "0"> </li> data-target = "#carousel-example-generic" data slide-to = "2"> </li> </ol> <!-wrapper สำหรับสไลด์-> <div role = "listbox"> <div> <img src = "การดูตำแหน่งหญิง ประสบการณ์ของตำแหน่งการรับชมบ้านหญิงที่เปิดตัวเลขสองตัวที่เกิดขึ้นในประเทศ </p> </div> </div> <div> <img src = "image/2.jpg"> <div> <div> <img src = "ภาพ/2.JPG" ตัวเลขสองตัวที่เกิดขึ้นในประเทศ </p> </div> </div> <div> <img src = "image/3.jpg"> <div> <h1> zootopia 1 </h1> <p> การเยี่ยมชมบ้านหญิง </div> href = "#carousel-example-generic" role = "button" data-slide = "prev"> <span aria-hidden = "true"> </span> <span> หน้าก่อนหน้า </span> </a> <a href = "#carousel-example-generic" </a> </div>
1) เพื่อให้ไม่มีพื้นที่ว่างหรือช่องว่างเหลืออยู่เมื่อหมุนภาพให้เพิ่มสไตล์
.Carousel {ความสูง: 500px; พื้นหลังสี: #000; } .carousel .item {ความสูง: 500px; พื้นหลังสี: #000; } .Carousel img {width: 100%; -2) ตั้งค่าสไตล์สำหรับข้อความเพื่อให้สวยงามยิ่งขึ้น
.Casousel-Caption P {มาร์จิ้นด้านล่าง: 20px; ขนาดตัวอักษร: 20px; ความสูงของสาย: 1.8; -เอฟเฟกต์ปัจจุบันมีดังนี้
มาดำเนินการต่อ: (กำลังอัปเดตการเข้ารหัส ... )
ส่วนที่สองได้รับการปรับปรุงการสาธิตในกรณีการพัฒนาส่วนหน้าตาม bootstrap (II)
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap