Bootstrap จัดเตรียมรูปแบบรูปแบบประเภทต่อไปนี้:
•รูปแบบแนวตั้ง (ค่าเริ่มต้น)-> อันนี้ดูไม่ดีมันเป็นรุ่นมือถือทั้งหมดและเวอร์ชันพีซีใช้แถวและมันก็ดูไม่ดี
•แบบฟอร์มแบบอินไลน์-> ฉันเชื่อว่านี่คือสิ่งที่คุณต้องการเวอร์ชันพีซีตอบสนองต่อแถวแนวนอนและเวอร์ชันมือถือตอบกลับแถวแนวตั้ง
•รูปแบบแนวนอน-> จอแสดงผลควบคุมด้วยระบบกริด
1. รูปแบบแนวตั้ง
ขั้นตอนมาตรฐานสำหรับการใช้แบบฟอร์มแนวตั้ง
1. เพิ่ม role = "ฟอร์ม" ในองค์ประกอบ <form>
2. วางแท็กและควบคุมใน A <div> ด้วย "Form-Group" เพื่อให้ได้ระยะห่างที่ดีที่สุด
3. เพิ่มสไตล์ "Form-Control" ให้กับองค์ประกอบข้อความทั้งหมด <put>, <PelectArea> และ <elect>
<form role = "form"> <div> <label for = "name"> ชื่อ </label> <input type = "text" id = "name" placeholder = "โปรดป้อนชื่อ"> </div> <div> <label for = "name"> อายุ </label>
2. เค้าโครงแบบอินไลน์
เลย์เอาต์แบบอินไลน์เหมือนกับเค้าโครงแนวตั้ง แต่คุณต้องเพิ่ม class = form-inline เป็น <form role = "form">
<Form Role = "Form">
หลังจากใช้เค้าโครงแบบอินไลน์ดังกล่าวหน้าจอขนาดใหญ่จะปรากฏขึ้นในแนวนอนและหน้าจอขนาดเล็กจะปรากฏขึ้นในแนวตั้ง
หน้าจอขนาดเล็ก:
หน้าจอขนาดใหญ่:
3. รูปแบบแนวนอน
รูปแบบแนวนอนหมายถึงระดับระหว่างแท็กฉลากและตัวควบคุม (ปุ่มอินพุต)
ขั้นตอนการใช้งานมีดังนี้:
•เพิ่มคลาส. ฟอร์แมต-ฮอริซัลไปยังองค์ประกอบหลัก <form>
•ใส่แท็กและตัวควบคุมใน <div> ด้วยคลาส. ฟอร์แมต-กลุ่ม
•เพิ่มคลาส. การควบคุม-ป้ายลงในฉลาก
<form role = "form"> <div> <label for = "name"> ชื่อ </label> <div> <อินพุตประเภท = "ข้อความ" id = "ชื่อ" placeholder = "โปรดป้อนชื่อ"> </div> </div> <div> <label for = "name"> age </label> </div>
หลังจากใช้รูปแบบการควบคุมอินพุตจะถูกตั้งค่าเป็น DIV และ DIV ยังสามารถใช้ระบบกริดได้ รูปแบบรูปแบบการเปลี่ยนแปลงพฤติกรรมของ. ฟอร์แมต-กลุ่มทำหน้าที่เหมือนแถวในแรสเตอร์
4. ช่องทำเครื่องหมายและวิทยุ
การควบคุมทั้งสองนี้มีความพิเศษใน bootstrap บางครั้งพวกเขาจำเป็นต้องจัดเรียงในแนวนอนและบางครั้งพวกเขาจำเป็นต้องจัดเรียงในแนวตั้ง
มันก็เหมือนรูปแบบและมันก็มีความหมายเช่นกัน
•หากจำเป็นต้องมีการแสดงผลแบบอินไลน์ให้ตั้งค่าคลาสของฉลากที่ล้อมรอบด้วยเลเยอร์ด้านนอกเพื่อทำเครื่องหมายในช่อง
•หากจำเป็นต้องมีการแสดงผลแนวตั้งเริ่มต้นให้ตั้งค่าคลาสของฉลากที่ล้อมรอบด้วยเลเยอร์ด้านนอกเป็น Heckbox
<form role = "form"> <!-ตรวจสอบ-> <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย" value = ""> Banana </label> </div> <dable> <dable> <อินพุตประเภท = "ช่องทำเครื่องหมาย" value = "> Apple </label> </div> value = ""> Banana </label> </div> <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย" value = ""> Apple </label> </div> <dable> <dable> <อินพุตประเภท = "ช่องทำเครื่องหมาย" value = "> watermelon </label> </div> <! ชาย </label> </div> <div> <label> <อินพุต type = "Radio" name = "ตัวเลือก Radios" value = "ตัวเลือก 2" ตรวจสอบ> ตัวเมีย </label> </div> <divel เพศหญิง </label> </div> </form>
เอฟเฟกต์การแสดงผลมีดังนี้:
5. การควบคุมแบบคงที่
การควบคุมแบบคงที่หมายถึงผู้ที่ไม่สามารถเปลี่ยนค่าได้ ใน bootstrap เมื่อคุณต้องการวางข้อความธรรมดาไว้เบื้องหลังแท็กฟอร์มภายในรูปแบบแนวนอนให้ใช้ class = "รูปแบบการควบคุม-คงที่" บน <p>
<form role = "form"> <div> <label> ชื่อ </label> <div> <p> liu xuande </p> </div> </div> </form>
เอฟเฟกต์การแสดงผลมีดังนี้:
6. ข้อความช่วยเหลือแบบฟอร์ม
โดยทั่วไปรูปแบบแบบฟอร์ม Bootstrap หมายถึงพรอมต์อินพุตมักจะตามด้วยองค์ประกอบ HTML ของ. help-block
<form role = "form"> <div> <input type = "text"> <span> การเตือนความจำพิเศษหากคุณไม่มีอะไรเลยอย่าพิมพ์ </span> </div> </form>
เอฟเฟกต์การแสดงผลมีดังนี้:
นอกจากนี้ Bootstrap ยังมีคอลัมน์หลายรูปแบบที่ใช้ในการควบคุมความสูงของอินพุตไม่ว่าจะเป็นอินพุตที่ประสบความสำเร็จ ฯลฯ เพียงตรวจสอบเหล่านี้และค้นหาคำหลักที่เกี่ยวข้องและบันทึกในภายหลัง
ด้านบนเป็นเค้าโครงแบบฟอร์ม bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!