ก่อนอื่นฉันขอขอบคุณเพื่อน ๆ ทุกคนที่ให้การสนับสนุน ฉันจะอัปเดตสรุปการศึกษาของฉันเกี่ยวกับ bootstrap ต่อไป หากมีบางอย่างผิดปกติกับการเขียนโปรดแก้ไขฉัน เกี่ยวกับบทความก่อนหน้านี้เค้าโครงคงที่และโครงร่างการสตรีมมีความสำคัญมาก หากคุณยังไม่ชัดเจนเกี่ยวกับเรื่องนี้คุณสามารถดูสิ่งที่ฉันเขียน: Bootstrap Study Notes: การออกแบบสไตล์ CSS (1)
เวลานี้มาดูคลาสที่เฉพาะเจาะจงและคีย์เกี่ยวกับสไตล์ใน bootstrap และวิธีการใช้คลาสเหล่านี้ความแตกต่างระหว่างคลาสและคลาสที่เกี่ยวข้องบางอย่างที่เกี่ยวข้องซึ่งอธิบายเมื่อแสดงรายการ
1. แบบฟอร์ม
1. รูปแบบการควบคุมคลาส: ความกว้างของแท็ก <put> <elect> <pelectarea> ที่มีคลาสนี้จะกลายเป็นความกว้าง: 100%และในรูปแบบการควบคุมมักจะรวมอยู่ในกลุ่มฟอร์มที่มีแท็กฉลาก
<form role = "form"> <!-อินพุตทั้งหมด, textarea, เลือกองค์ประกอบที่มีชุดคลาสการควบคุมแบบฟอร์มจะเริ่มต้นถึงความกว้าง: 100%-> <div>-ฟอร์ม-กลุ่ม: โดยทั่วไปการพูดฉลากและการห่อพื้นที่จะใช้ในฟอร์ม-กลุ่มสำหรับ = "ตัวอย่าง" สำหรับ = "ExampleInputEmail"> ชื่ออีเมล </label> <TextArea> 11111 </TextArea> </div> <div> <label for = "เลือก"> เลือกแบบฟอร์ม </label> <elect> <petion> 111 </opturf>
ตามรหัสข้างต้นเราสามารถดูได้ทีละคน เพิ่มคลาส Form-Inline (ใส่ตัวควบคุมในบรรทัดเดียว) | คลาสแบบฟอร์ม horizontal (ฉลากอยู่ทางด้านซ้ายและตัวควบคุมอยู่ทางด้านขวา) ซึ่งใช้ความช่วยเหลือของฉลาก
<!-คลาส Form-inline ทำให้รูปแบบในแนวนอน-> <form>--วินาทีมีการตรวจสอบ, วิทยุอินไลน์, ฯลฯ <div> <label for = "extreaminputamount"> จำนวนเงิน </label> <div>-กลุ่มอินพุต: กลุ่มอินพุต <div>@</div> <div>@</div> </div> </div> <button type = "ส่ง"> ค้นหา </button> </form>
ผลกระทบมีดังนี้:
หากไม่ได้เพิ่มปุ่มจะถูกบีบไปยังบรรทัดถัดไป ไม่มีการโพสต์รูปภาพเพิ่มเติมที่นี่คุณสามารถวางรหัสและทดสอบด้วยตัวเอง
<!-การควบคุมแบบฟอร์มการควบคุมแบบฟอร์ม: หมายความว่าข้อความได้รับการจัดตำแหน่งขวา-> <form> <div> <label for = "inputemail"> อีเมล: </label> <div> <อินพุตประเภท = "อีเมล" id = "อินพุต" placeHolder = "รหัสผ่าน"> </div> </div> </div> </diff>
ผลกระทบมีดังนี้:
( หมายเหตุ: กล่องข้อความอินพุตที่นี่ควรบัญชีสำหรับ 5/6 ฉันปรับความกว้างเป็น 20%)
ที่นี่เกี่ยวกับรูปแบบการจัดสรร-ควรดำเนินการร่วมกับระบบกริดของ Bootstrap
การใช้ชื่อคลาส "form-horizontal" บนองค์ประกอบ <form> มีฟังก์ชั่นต่อไปนี้:
1: ตั้งค่าการขยายและค่ามาร์จิ้นของการควบคุมแบบฟอร์ม รหัสข้างต้นสามารถเห็นได้ในคอนโซลดีบั๊ก, Padding-Left: 50px
2: เปลี่ยนการแสดงออกของ "กลุ่มฟอร์ม" คล้ายกับ "แถว" ของระบบกริด
2. ฟังก์ชั่นของฉลาก
<label for = "hello1"> hello </label> <input type = "text" id = "hello"> <br> --- รัศมีสีน้ำเงินถูกสร้างขึ้น <label for = "1111"> hello </label> <อินพุต type = "text" id = "Jiang"> <br> เฉพาะเมื่อเมาส์ถูกวางไว้ในการควบคุมจะมีรัศมีสีน้ำเงิน
ขึ้นอยู่กับรหัสด้านบนโปรดดู: แอตทริบิวต์สำหรับในฉลากควรสอดคล้องกับ ID ในการควบคุม ฟังก์ชั่น: ตรวจสอบให้แน่ใจว่าเมื่อเมาส์ถูกวางไว้บนฉลากการควบคุมที่สอดคล้องกันจะสร้างรัศมีสีน้ำเงิน
3. บทบาทของบทบาท
คุณพบว่ามันแปลกหรือไม่ว่าทำไมคุณต้องเพิ่มบทบาทเมื่อเขียนแบบฟอร์มหรือการควบคุมบางอย่าง?
ฟังก์ชั่น: ตรวจสอบให้แน่ใจว่าซอฟต์แวร์การอ่านหน้าจอสามารถรับรู้ได้ ซอฟต์แวร์การอ่านหน้าจอเป็นซอฟต์แวร์ที่ช่วยให้คนปัญญาอ่อนสามารถเข้าถึงอินเทอร์เน็ตได้ มันบ่งบอกถึงรูปภาพข้อความ ฯลฯ ไปยังผู้คนปัญญาอ่อนในรูปแบบของเสียง ดังนั้นเพื่อให้แน่ใจว่าซอฟต์แวร์การอ่านหน้าจอสามารถรับรู้ได้มักจะไม่มีแท็กความหมายหรือแท็กที่มีฟังก์ชั่นพิเศษที่ต้องเขียนไว้ ตัวอย่างเช่น:
<a href = "#" role = "ปุ่ม"> ลิงค์ </a> <!-ถ้าลิงก์ A ใช้เป็นปุ่มและใช้เพื่อเรียกใช้ฟังก์ชั่นบางอย่างในหน้าปัจจุบันแทนที่จะเชื่อมต่อกับหน้าอื่น ๆ ซอฟต์แวร์การอ่านหน้าจอไม่สามารถจดจำได้ดังนั้น Role = "ปุ่ม" จะต้องเพิ่มเพื่อให้ซอฟต์แวร์การอ่านหน้าจอรู้ว่านี่เป็นปุ่มปุ่ม
4. ความแตกต่างระหว่างฉลาก, Aria-Label, Aria-labeled คืออะไร?
<div> <อินพุต type = "text" id = "idcard" aria-label = "บัตรประจำตัวบัตร"> <p> ตัวอย่างบล็อกระดับ </p>--help-block: ข้อความที่ใช้เพื่อแจ้งคำอธิบาย </div> <div> <label for = "idcard"> card </label> <อินพุตประเภท =
ผลกระทบมีดังนี้:
อดีตไม่มีคำว่า "บัตรประจำตัวบัตรรหัส" ซึ่งทั้งสองอย่างนี้มีไว้เพื่อความสะดวกของซอฟต์แวร์การอ่านหน้าจอเพื่อระบุ มันเป็นเพียงการซ่อนเรีย-ป้าย
มาดูวิธีใช้ Aria-labelled โดยปกติเมื่อข้อความฉลากมีอยู่แล้วในองค์ประกอบบางอย่างให้ใช้ Aria-labelled และค่าของมันคือ ID ขององค์ประกอบการอ่านทั้งหมด มาดู subs ต่อไปนี้:
<div> <button type = "button" id = "dropdownMenu1" data-toggle = "dropdown"> เลือกตัวเลือกต่อไปนี้ <span> </pan> </button> <ul role = "เมนู" aria-labelledby = "dropdownMenu1"> <li role = "การนำเสนอ"> role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> </li> <li role = "การนำเสนอ"> <a role = "menuitem" tabindex = "-1" href = "#"> 22222 </a> href = "#"> 33333 </a> </li> </ul> </div>
ในเวลานี้ UL มี LI และถูกควบคุมในปุ่มดังนั้นจึงเหมาะสมกว่าที่จะใช้ Aria-Labelledby ในเวลานี้ พูดง่ายๆคือขอบเขตของการใช้งานระหว่างทั้งสามนั้นแตกต่างกันและฟังก์ชั่นพื้นฐานนั้นเหมือนกันทั้งหมดเพื่อความสะดวกในการรับรู้ซอฟต์แวร์การอ่านหน้าจอ เมื่อพูดถึงชั้นเรียนที่ซ่อนอยู่เราต้องพูดถึงคลาส SR เท่านั้น มาดูกันเถอะ
<label for = "inputemail"> อีเมล: </lable>
<label for = "inputemail"> อีเมล: </lable>
เอฟเฟกต์ในเวลานี้คือ: ข้อความด้านบนถูกซ่อนไว้และความแตกต่างนี้จะยังคงไม่เปลี่ยนแปลง
5. ชั้นเรียนปิดใช้งาน
ในรูปแบบคุณต้องให้ความสนใจกับชั้นเรียนนี้มาเปรียบเทียบที่นี่
<!-แนะนำฟอร์มด้วย FieldSet, ฟังก์ชั่น: รวมรูปแบบในบล็อก-> <form role = "form"> <fieldset ปิดการใช้งาน> <div> <label for = "disabledTextInput"> ปิดใช้งานกล่องอินพุต </label> <อินพุต type = "text" id = "disabletTextInput id = "disablelect"> <pontion> ปิดการใช้งานที่ไม่ได้เลือก </opotion> </select> </div> <divel
หากคุณเพิ่มคลาสที่ปิดใช้งานลงในชุดไฟล์แบบฟอร์มปิดใช้งานจะถูกปิดใช้งานเฉพาะสำหรับการเลือกปุ่มอินพุต ฯลฯ และจะไม่ทำงานสำหรับแอตทริบิวต์ของรายการรายการอื่น ๆ ในการเปรียบเทียบ Add Adgend Attribute
<!-เพิ่มคุณสมบัติความยาว-> <form role = "form"> <fieldset disabled> <legend> <input type = "text" placeholder = "สีกลายเป็นสีเทาออก แต่ไม่ปิดใช้งาน"> </Legend>-ที่นี่เมาส์สามารถวางไว้ในกล่องอินพุต " </div> <div> <label for = "disabledSelect"> ปิดการปิดใช้งานกล่องแบบเลื่อนลง </label> <select id = "disabledSelect"> <pontion> ไม่สามารถเลือก </optup> </select> </div> <darm> <label> <อินพุตประเภท = "CHECKBOX"> ไม่สามารถเลือก </label> เลือกอินพุต ฯลฯ และไม่ทำงานสำหรับตำนานรายการอื่น ๆ->
6. ข้อมูลแอตทริบิวต์ข้อมูลข้อมูลเป้าหมายข้อมูลเป้าหมาย
HTML5 ช่วยให้นักพัฒนาสามารถเพิ่มแอตทริบิวต์ลงในแท็กได้อย่างอิสระและแอตทริบิวต์ที่กำหนดเองนี้โดยทั่วไปจะเริ่มต้นด้วย "data-"
Data-Toggle: ระบุการโต้ตอบข้อมูล คลิกปุ่มในคอลัมน์ด้านบนเพื่อสลับไปที่เมนูแบบเลื่อนลง
Data-Spy ระบุว่า: การตรวจสอบ
Data-Traget: เป้าหมาย
สิ่งนี้เกี่ยวข้องกับเหตุการณ์ใน JS และฉันจะไม่อธิบายรายละเอียด ฉันจะดูปัญหาเหล่านี้เมื่อฉันเข้าสู่การเรียนรู้ JS ใน bootstrap ยังมีอีกหลายสิ่งที่เกี่ยวข้องในรูปแบบและมีบทสรุปเกือบมากมาย นอกจากนี้ยังมีเพิ่มเติม กรุณาฝากข้อความไว้ด้านล่าง
2. คลาสปุ่ม
นี่ไม่ใช่เรื่องยากเพียงจำคลาสแอตทริบิวต์มันเป็นเรื่องง่ายที่จะเข้าใจ
<a href = "#" role = "ปุ่ม"> ลิงก์ </a> <button type = "ส่ง" disabled = "ปิดใช้งาน"> ค่าเริ่มต้น </putous> <button type = "ส่ง"> หลัก </button> <button type = "ส่ง"> ความสำเร็จ </button> <button type = "ส่ง" value = "input"> <input type = "button" value = "ส่ง">
ผลกระทบมีดังนี้:
3. หมวดหมู่รูปภาพ
<!-กึ่งกลางภาพศูนย์กลางของภาพ: ตรงกลางเนื้อหาเพื่อแสดง img-rounded: ด้วยมุมโค้งมน IMG-circle: Ring img-thumbnail: เพิ่มเส้นขอบด้านนอกลงในรูปภาพ->
<img src = "111.png">
<img src = "111.png">
<img src = "111.png">
ผลกระทบมีดังนี้:
โดยสรุปแล้วฉันรู้สึกว่าบทบาทของรูปแบบยังคงสำคัญมาก มันง่ายกว่าที่จะอธิบายหมวดหมู่พื้นฐานอื่น ๆ ที่นี่ บทความถัดไปจะถูกถ่ายโอนไปยังการเรียนรู้ขององค์ประกอบ CSS: Bootstrap Nearning Notes Component CSS (3)
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น