การเรียนรู้ของ bootstrap นั้นง่ายมากและสไตล์ที่ให้นั้นสวยงามมาก การศึกษาง่ายๆเพียงเล็กน้อยสามารถสร้างหน้าสวยได้
เว็บไซต์ bootstrap ภาษาจีน: http://v3.bootcss.com/
Bootstrap ให้การดาวน์โหลดสามประเภท:
bootstrap สำหรับสภาพแวดล้อมการผลิต
คอมไพล์และบีบอัด CSS, JavaScript และไฟล์ FONT ไม่มีเอกสารและไฟล์ต้นฉบับ
ซอร์สโค้ด bootstrap
น้อยกว่าซอร์สโค้ดไฟล์ JavaScript และ Font และด้วยเอกสาร ต้องใช้คอมไพเลอร์น้อยลงและการตั้งค่าบางอย่าง
เขี้ยว
นี่คือโครงการพอร์ตแหล่งที่มาจากน้อยไปจนถึง SASS สำหรับการแนะนำอย่างรวดเร็วใน Rails, Compass หรือโครงการ SASS เท่านั้น
อันที่จริงเราสามารถใช้งานได้โดยไม่ต้องดาวน์โหลด bootstrap:
เว็บไซต์ Bootstrap Chinese ได้สร้างบริการเร่งความเร็ว CDN ฟรีเป็นพิเศษสำหรับ Bootstrap จากบริการ CDN ของผู้ผลิตคลาวด์ในประเทศความเร็วในการเข้าถึงจะเร็วขึ้นเอฟเฟกต์การเร่งความเร็วจะชัดเจนยิ่งขึ้นไม่มีความเร็วและข้อ จำกัด แบนด์วิดท์และฟรีอย่างถาวร
base.html
<! 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 rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css" </h1> <!-jQuery (จำเป็นสำหรับปลั๊กอิน JavaScript ของ Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <! src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
Bootstrap ได้รับการแนะนำใน base.html บันทึกและเราสามารถใช้สไตล์ที่จัดทำโดย bootstrap
ไอคอนตัวอักษร
Bootstrap ให้ไอคอนมากกว่า 200 ไอคอนโดยค่าเริ่มต้น เราสามารถใช้ไอคอนเหล่านี้ผ่านแท็ก Span:
<h3> ไอคอน </h3> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span> </span> <span>
ปุ่ม
แท็ก <button> </button> ใช้เพื่อสร้างปุ่มและ Bootstrap มีสไตล์ปุ่มที่หลากหลาย <h3> ปุ่ม </h3> <button type = "ปุ่ม"> ปุ่ม </button> <button type = "ปุ่ม"> หลัก </ปุ่ม> <button type = "ปุ่ม"> ความสำเร็จ </button> <button type = "ปุ่ม"> ข้อมูล </button> <button type = "ปุ่ม" type = "ปุ่ม"> ปุ่ม </button> <button type = "ปุ่ม"> หลัก </ปุ่ม> <button type = "ปุ่ม"> ประสบความสำเร็จ </button> <button type = "ปุ่ม"> ข้อมูล </button> <h3> แสดงไอคอนในปุ่ม </h3> <button type = "ปุ่ม"> <pan> </pan>
นอกเหนือจากขนาดเริ่มต้นของปุ่ม Bootstrap ยังมีพารามิเตอร์สามตัวเพื่อปรับขนาดของปุ่มคือ: BTN-LG, BTN-SM และ BTN-XS
เมนูแบบดึงลง
เมนูแบบเลื่อนลงเป็นหนึ่งในการโต้ตอบที่พบบ่อยที่สุดและ Bootstrap มีสไตล์ที่สวยงาม
<h3> เมนูแบบเลื่อนลง </h3> <div> <button type = "ปุ่ม" id = "dropdownMenu1" data-toggle = "Dropdown" Aria-expanded = "true"> Dropdown <span> </pan> href = "#"> แอ็คชั่น </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> การกระทำอื่น </a> </li> <li role = "การนำเสนอ" role = "menuitem" tabindex = "-1" href = "#"> ลิงค์คั่นด้วย </a> </li> </ul> </div>
กล่องป้อนเข้า
ใช้แท็ก <put> </อินพุต> เพื่อสร้างกล่องอินพุต
<h3> กล่องอินพุต </h3> <div> <span> </span> <อินพุต type = "text" placeholder = "ชื่อผู้ใช้"> </div> <div> <span> </span> <อินพุตประเภท = "รหัสผ่าน" ตำแหน่ง
แถบนำทาง
แถบการนำทางเป็นสิ่งจำเป็นในการเป็นแนวทางไปยังเว็บไซต์ทั้งหมด
<H3> แถบการนำทาง </h3> <av> <div id = "navbar"> <ul> <li> <a href = "#"> บ้าน </a> </li> <li> <a href = "#เกี่ยวกับ"> เกี่ยวกับ </a> </li> <li> role = "ปุ่ม" aria-expanded = "false"> dropdown <span> </span> </a> <ul role = "เมนู"> <li> <a href = "#"> แอ็คชั่น </a> </li> <li> <a href = "#"> การกระทำอื่น </a> </li> <li> <li> <li> ลิงค์ </a> </li> </li> </li></ul> </div> <!-/. Nav-Collapse-> </div> </av>
รูปร่าง
การถ่ายโอนข้อมูลระหว่างผู้คนและระบบจะต้องกรอกแบบฟอร์ม ตัวอย่างเช่นการส่งข้อมูลการลงทะเบียน/เข้าสู่ระบบการส่งเงื่อนไขการสืบค้น ฯลฯ ใช้แท็ก <form> </form> เพื่อสร้างแบบฟอร์ม
<h3> ฟอร์ม </h3> <form> <div> <span> </span> <อินพุตประเภท = "อีเมล" id = "ตัวอย่างอินพุทเมล 1" placeholder = "ป้อนอีเมล"> </div> <div> <span> </span> <อินพุตประเภท = "รหัสผ่าน" type = "file" id = "exampleinputfile"> <p> ตัวอย่างข้อความวิธีใช้บล็อกระดับบล็อกที่นี่ </p> </div> <divel
กล่องคำเตือน
กล่องคำเตือนเป็นวิธีที่สำคัญสำหรับระบบในการถ่ายทอดข้อมูลและให้คำแนะนำแก่ผู้ใช้ ไม่มีฉลากสำหรับกล่องเตือนและสไตล์ที่จัดทำโดย Bootstrap สามารถสร้างกล่องเตือนที่สวยงามได้ทันที
<H3> กล่องเตือน </h3> <div role = "Alert"> <button type = "ปุ่ม" data-dismiss = "Alert" Aria-label = "Close"> <span aria-hidden = "true"> × </span> </div> <div role = "Alert"> <a href = "#"> ความสำเร็จ! </a> </div> <div role = "Alert"> <a href = "#"> ข้อมูล! </a> </div> <div role = "Alert"> </div>
แถบความคืบหน้า
กระบวนการประมวลผลของระบบมักจะต้องการให้ผู้ใช้รอและแถบความคืบหน้าช่วยให้ผู้ใช้รับรู้กระบวนการประมวลผลของระบบซึ่งจะเป็นการเพิ่มความอดทน
<H3> ความคืบหน้าแถบ </h3> <div> <div role = "progressbar" aria-valuenow = "70" aria-valuemin = "0" aria-valuemax = "100"> 70% </div> </div>
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น
หากคุณยังต้องการเรียนรู้อย่างลึก