บทความก่อนหน้าได้พูดคุยกันแล้วเกี่ยวกับขั้นตอนบางอย่างและการใช้งานขั้นพื้นฐานของ bootstrap คลิกเพื่อดู
บล็อกนี้ยังคงแนะนำเอฟเฟกต์ทั่วไปบางอย่างให้คุณรู้จักส่วนใหญ่รวมถึงส่วนประกอบต่อไปนี้
1. เมนูดึงลง
2. แถบการนำทาง
3. ความคืบหน้าบาร์
4. วัตถุสื่อ
5. การแบ่งหน้า
6. รายการ
ขั้นแรกให้นำเข้า CSS และ JS ของ bootstrap
<link rel = "stylesheet" href = "css/bootstrap.min.css"> <!-เป็นการดีที่สุดที่จะอ้างถึง CSS ของ CDN ไฟล์บางรูปแบบไม่-> <link rel = "stylesheet" href = "// cdn.bootcss.com/bootstrap/33 src = "js/jQuery-3.1.0.min.js"> </script> <script src = "js/bootstrap.min.js"> </script>
1. เมนูดึงลง
ประกอบด้วยปุ่มและ UL เป็นหลักและสามารถเพิ่มคำบรรยายและเส้นแยก
<div> <button type = "button" data-toggle = "Dropdown" Aria-expanded = "False"> สายรถไฟใต้ดิน <!-นี่คือสัญลักษณ์สามเหลี่ยมด้านหุก href = "#"> บรรทัดที่ 2 </a> </li> <li> <a href = "#"> บรรทัดที่ 3 </a> </li> <li> <a href = "#"> บรรทัด 4 </a> </li> <!
2. แถบการนำทาง
แถบการนำทางเป็นมาตรฐานสำหรับเกือบทุกหน้าเว็บดังนั้นจึงเป็นสิ่งที่ถูกต้องในการเรียนรู้วิธีการใช้งาน
นี่คือแถบการนำทางที่ด้านบนของหน้า
<!-ตั้งค่าคลาส NAV ให้เป็นระดับไฮเอนด์มากขึ้นตั้งค่าเป็น Navbar-static-top เพื่อลบมุมโค้งมนของ Navbar และแก้ไขที่ด้านบน-> <nav role = "การนำทาง"> <div> <!-จุดเริ่มต้นของแถบนำทางมักจะเป็นข้อความหรือรูปภาพ data-target = "#bs-example-navbar-collase-1"> <span> การนำทางสลับ </span> <span> </span> <span> </span> <span> </span> <span> </span> ที่จะหดกลับและคลิกที่-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#"> การจัดการสมาชิก </a> </li> <li> <a href = "#"> การจัดการสมาชิก </a> </li> <li> <li> การจัดการ </a> </li> <li> <a href = "#"> การจัดการสมาชิก </a> </li> <li> <a href = "#"> การจัดการสมาชิก </a> </li> <li> <a href = "#"> การจัดการสมาชิก </a> </li> <li> <li> <a href = "#" data-toggle = "dropdown" role = "ปุ่ม" Aria-expanded = "false"> การบำรุงรักษาระบบ <span> </span> </a> <ul role = "เมนู"> <li> <a href = "#"> กู้คืนระบบ </a> </li> href = "#"> disconnect </a> </li> <li> <a href = "#"> ลบผู้ใช้ </a> </li> </li> </li> </ul> <!-เขียน navbar-right ก่อนและขวา-> <! <div> <อินพุต type = "text" placeholder = "ป้อนเนื้อหาการค้นหา"> </div> <button type = "Summit"> Search </button> </dom> </div> </viv> </av> </av>
เมื่อเราใช้หน้าเว็บเพื่อเรียกดูบล็อกหรือไฟล์เรามีระดับ ในเวลานี้หากเราต้องการกลับไปที่ระดับก่อนหน้าหรือหลายระดับเราต้องการแถบการนำทางที่ตั้ง
<!-แถบการนำทาง-> <ol> <li> <a href = "#"> แบ็กเอนด์ของฉัน </a> </li> <li> <a href = "#"> การวิเคราะห์ระบบ </a> </li> <!-ไม่สามารถคลิกตำแหน่งปัจจุบันเพื่อกระโดด-> <li> สถิติการเข้าถึง </li> </ol>
3. ความคืบหน้าบาร์
<div> <!-แถบความคืบหน้าแถบตั้งค่าลายเส้นและชุดแอนิเมชั่นที่ใช้งานอยู่-> <!-แสดงเปอร์เซ็นต์ของแถบความคืบหน้าตามเปอร์เซ็นต์ของความกว้างสไตล์-> <div role = "progressbar" Aria-valuenow = "60" Aria-Valuemin = "0" Aria-Valuemax = "100" บาร์-> 30% </div> </div>
4. วัตถุสื่อ
นี่เป็นข้อความเดียวกันใน Weibo หรือ Twitter
อวตารทางด้านซ้ายชื่อและข้อความทางด้านขวา
<div> <div> <img src = "images/1.jpg"> </div> <div> <h4> หัวเรื่องสื่อ </h4> <p> cras sit amet nibh libero ใน Gravida nulla nulla vel metus sclerisque ante sollicitudin Commodo cras purus odio, vestibulum ใน vututate at, tempus viverra turpis fusce condimentum nunc ac nisi vulputate fringilla Donec Lacinia Congue Felis ใน Faucibus. </p> </div> </div>
5. การแบ่งหน้า
นี่คือหลายหน้า
<ul> <li> <a href = "#" aria-label = "previous"> <!-ลูกศรสองครั้งไปทางซ้าย-> <span aria-hidden = "true"> « </span> </a> </li> <!-ตัวเลือกแรกถูกเปิดใช้งาน-> <li> <a href = "#"> 1 </a> <li> <a href = "#"> 3 </a> </li> <li> <a href = "#"> 4 </a> </li> <li> <a href = "#"> 5 </a> </li> <li> <a href = "#"> 6 </a> href = "#"> 7 </a> </li> <li> <a href = "#"> aria-label = "next"> <!-ลูกศรสองครั้งไปทางขวา-> <span aria-hidden = "true"> » </span> </a> </li></ul>
นี่เป็นเพียงหน้าก่อนหน้าและหน้าถัดไป
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> หน้าก่อนหน้า </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> หน้าถัดไป </a> </li>
ด้านบนเขียนด้วยสองปุ่มเชื่อมต่อกัน
ต่อไปนี้เขียนเป็นสองปุ่มกระจายทั้งสองด้าน
<ul> <li> <a href = "#"> <span aria-hidden = "true"> ← </span> หน้าก่อนหน้า </a> </li> <li> <a href = "#"> <span aria-hidden = "true"> → </span> หน้าถัดไป </a> </li>
6. รายการ
ผลของรายการเป็นเรื่องธรรมดาและใช้งานง่ายมาก
<div> <!-รายการแรกถูกเลือก-> <a href = "#"> สถิติการเข้าถึง </a> <a href = "#"> สถิติข้อมูล </a> <a href = "#"> บันทึกสถิติ </a> <a href = "#"> สถิติข้อมูล </a> href = "#"> สถิติข้อมูล </a> <a href = "#"> สถิติข้อมูล </a> </div>
ฉันใช้องค์ประกอบด้านบนเพื่อสร้างหน้าเว็บคงที่แบ็กเอนด์
เอฟเฟกต์ดังแสดงในภาพ
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น