ประโยชน์ที่ใหญ่ที่สุดของ Bootstrap สำหรับนักพัฒนาคือเค้าโครงที่ตอบสนองและสไตล์ที่ยอดเยี่ยม
ตอนนี้ฉันจะแนะนำขั้นตอนบางอย่างและบางสิ่งที่ใช้กันทั่วไปเพื่อใช้ bootstrap
1. เขียนส่วนหัว
<head> <meta charset = "utf-8"> <!-เพื่อให้ IE ใช้โหมดการเรนเดอร์ล่าสุดเพิ่มแท็กนี้-> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหาที่ใช้งานได้ดีกว่า name = "viewport" content = "width = ความกว้างของอุปกรณ์, ระดับเริ่มต้น = 1"> <title> LearnBootstrap </title> <!-อ้างถึงไฟล์โดยตรง-> <link rel = "Stylesheet" type = "text/css" href = "css/bootstrap.min.css" href = "// cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css"> <!-เพื่อรองรับ IE9 หรือต่ำกว่าให้เพิ่มสิ่งเหล่านี้-> <!-[ถ้า LT IE 9]> <! src = "https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"> </script> <!-ให้เขาสนับสนุนการสืบค้นสื่อนั่นคือตอบสนอง-> <script src = "htts: htts: <!-[endif]-> </head>
2. แนะนำ JS
สามารถเขียนได้ในร่างกาย
<!- ไฟล์ jQuery อย่าลืมแนะนำ-> <script src = "// cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script><!-ไฟล์ bootstrap ล่าสุด JavaScript-> <script src =" cdn.bootcss.com/bootstrap/33
3. ใช้คลาสคอนเทนเนอร์
คลาสคอนเทนเนอร์เป็นคลาส Div ที่ใช้กันทั่วไป
ส่วนใหญ่ใช้ฟังก์ชั่นศูนย์กลาง
<div> สวัสดี </div>
4. ใช้ระบบที่แรสเตอร์
ระบบ Rasterized เป็นระบบเลย์เอาต์ที่ใช้กันทั่วไปสำหรับ bootstrap
การใช้งานง่าย ๆ ดังนี้
<div> <!-XS หมายถึงโทรศัพท์ SM หมายถึงแท็บเล็ตและ MD หมายถึงบนเดสก์ท็อป ตัวเลขต่อไปนี้แสดงจำนวนคอลัมน์ที่ถูกครอบครอง เต็มหน้าจอคือ 12 คอลัมน์-> <!-เนื้อหาเกินความสูงของกริดและความสูงจะเพิ่มขึ้นและความกว้างจะไม่เพิ่มขึ้น-> <!-ออฟเซ็ตหมายถึงจำนวนคอลัมน์ที่จะย้ายไปทางขวา-> <div> .COL-XS-12 .COL-SM-6 .COL-MD-8 .COL-SM-6 .COL-MD-4 </div> </div> <div> <!-ผลักดันไปข้างหลังดึงการเคลื่อนที่ไปข้างหน้า-> <div> .COL-XS-12 .COL-SM-6 .COL-MD-8 </div>
คุณจะเห็นว่าระบบแรสเตอร์สามารถปรับความกว้างที่แตกต่างกันตามอุปกรณ์ต่าง ๆ
5. ใช้แบบฟอร์ม
<div> <!-ตารางตอบสนองเนื้อหายาวเกินไปที่จะย้ายไปทางซ้ายและขวา-> <div> <!-ตารางสองสามอันสุดท้ายคือตารางที่มีเส้นขอบ เมื่อเมาส์ผ่านแถว tbody สีเข้มขึ้นและตารางจะถูกอัดแน่น-> <table> <thead> <tr> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> <th> ชื่อตาราง </th> <th> </th> </tr> </tbody> <tbody> เนื้อหา </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> th> th> th> th <th th> th> th <th th> th> th> <!-สีของแถวเป็นสีเบจ-> <tr> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> th <th> th> th <th> th> เนื้อหาตาราง <th> เนื้อหาตาราง </th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th> <th> เนื้อหาตาราง </th>
หากคุณต้องการเปลี่ยนสีของกริดบางอย่างคุณสามารถเพิ่มคลาสเช่น TR ในแท็ก th
6. ใช้แบบฟอร์ม
การใช้งานขั้นพื้นฐานที่สุดมีดังนี้
<div> <form> <!-ส่วนหนึ่งของรายการคือเค้าโครงหลักของกลุ่มแบบฟอร์มที่มีป้ายกำกับและอินพุต-> <div> <!-ฉลากเพื่อให้สอดคล้องกับ ID อินพุต-> <label for = "ExampleInputEmail1"> ที่อยู่อีเมล </label> <! สำหรับ = "exampleinputpassword1"> รหัสผ่าน </label> <อินพุต type = "รหัสผ่าน" id = "ตัวอย่างอินเตอร์บัทพาสพอร์ต" placeholder = "รหัสผ่าน"> </div> <div> <label for = "exampleinputfile"> file input </label> <input type = "file" id = "ตัวอย่าง type = "ช่องทำเครื่องหมาย"> ตรวจสอบฉัน </label> </div> <button type = "ส่ง"> ส่ง </pution> </form> </div>
หากคุณตั้งค่าคลาสฟอร์มเป็นแบบฟอร์มอินไลน์องค์ประกอบทั้งหมดจะแสดงในบรรทัดเดียวกัน
หากคุณตั้งค่าคลาสฟอร์มเป็นแบบฟอร์ม horizontal แต่ละกลุ่มจะแสดงหนึ่งบรรทัด แต่คุณต้องตั้งค่าความกว้างด้วยตัวเอง
ชอบ
<div> <!-ปล่อยให้แต่ละกลุ่มแสดงผลหนึ่งบรรทัด แต่เด็กแต่ละกลุ่มจะต้องระบุความกว้าง-> <form> <div> <label for = "emai"> อีเมล </label> <!-กลุ่มอินพุตให้พร้อมแจ้งและอาหารเสริมในบรรทัดเดียวกัน-> <div> สำหรับ = "passwor"> รหัสผ่าน </label> <div> <อินพุต type = "รหัสผ่าน" placeholder = "รหัสผ่าน" id = "passwor"> </div> </div> <button type = "ส่ง"> การประชุมสุดยอด </button> </form> </div>
โดยปกติเมื่อเราลงทะเบียนบัญชีหากข้อมูลไม่ถูกต้องหรือถูกต้องมันจะแจ้งให้ทราบถัดไปและสีของกล่องอินพุตจะแตกต่างกัน
Bootstrap ช่วยให้เรามีฟังก์ชั่นที่ใช้งานได้จริงนี้
<div> <form> <!-ควรเพิ่มสองรายการควรเพิ่มลงในคลาสของ Parent Div-> <!-สถานะความสำเร็จ-> <div> <label for = "inputsuccess2"> อินพุตที่ประสบความสำเร็จ </label> <อินพุต type = "text" id = "inputsuccess2" <!-ข้อมูลนี้ถูกซ่อนเพิ่มความสามารถในการอ่านรหัส-> <span id = "inputsuccess2status"> (ความสำเร็จ) </span> </div> <!-สถานะการเตือน-> <div> <label for = "inputwarning2"> อินพุตคำเตือน </label> <อินพุต aria-hidden = "true"> </span> <span id = "inputwarning2status"> (คำเตือน) </span> </div> <!-สถานะข้อผิดพลาด-> <div> <label for = "inputerRor2"> อินพุตที่มีข้อผิดพลาด </label> <อินพุตประเภท = "text" id = "inputerror2" id = "inputerRor2Status"> (ข้อผิดพลาด) </span> </div> </form> </div>
7. ปุ่ม
ปุ่มเป็นสิ่งจำเป็น
<!-พื้นหลังสีขาว-> <button type = "ปุ่ม"> (สไตล์เริ่มต้น) ค่าเริ่มต้น </ปุ่ม> <!-พื้นหลังสีน้ำเงิน-> <ปุ่มประเภท = "ปุ่ม"> (การตั้งค่า) หลัก </ปุ่ม> <!-พื้นหลังสีเขียว-> <ปุ่มประเภท = "ปุ่ม"> (ความสำเร็จ) คำเตือน </button> <!-พื้นหลังสีแดง-> <button type = "ปุ่ม"> (อันตราย) อันตราย </button>
คุณยังสามารถเพิ่มมิติในชั้นเรียน
<button type = "ปุ่ม"> (ปุ่มขนาดใหญ่) ปุ่มขนาดใหญ่ </button> <button type = "ปุ่ม"> (ขนาดเริ่มต้น) ปุ่มเริ่มต้น </button> <button type = "ปุ่ม"> (ปุ่มเล็ก ๆ ) ปุ่มเล็ก ๆ
ข้างต้นคือขั้นตอนและการใช้งานร่วมกันของ bootstrap
หลังจากใช้เฟรมเวิร์กนี้ไม่เพียง แต่ความเร็วในการพัฒนาจะเพิ่มขึ้น แต่คุณภาพก็ดีขึ้นเช่นกัน
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น