Bootstrap เสนอรูปแบบสามรูปแบบ: รูปแบบแนวตั้งรูปแบบอินไลน์และรูปแบบแนวนอน ให้ฉันแนะนำให้คุณทีละคน เพื่อนที่สนใจจะเรียนรู้ร่วมกัน
สร้างแบบฟอร์มแนวตั้งหรือพื้นฐาน:
• ・ เพิ่ม role = "ฟอร์ม" ลงในองค์ประกอบหลัก <form>
• ・ ใส่แท็กและตัวควบคุมใน A <div> ด้วยคลาส. ฟอร์แมต-กลุ่ม นี่เป็นสิ่งจำเป็นเพื่อให้ได้ระยะห่างที่ดีที่สุด
• ・ เพิ่มคลาส. การควบคุมฟอร์
<form role = "form"> <div> <label for = "name"> ชื่อ </label> <input type = "text" id = "name" placeholder = "โปรดป้อนชื่อ"> </div> <div> <label for = "inputfile"> file text </p> </div> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย"> โปรดตรวจสอบ </label> </div> <button type = "ส่ง"> ส่ง </button> </form>
แบบฟอร์มแบบอินไลน์:
องค์ประกอบทั้งหมดในรูปแบบอินไลน์นั้นอยู่ในแนวเดียวกันกับด้านซ้ายและฉลากอยู่เคียงข้างกัน ในการสร้างแบบฟอร์มแบบอินไลน์คุณต้องเพิ่มคลาสลงในแท็กฟอร์ม
. ฟอร์แมต-อินไลน์
<form role = "form"> <div> <label for = "name"> ชื่อ </label> <input type = "text" id = "name" placeholder = "โปรดป้อนชื่อ"> </div> <div> <label for = "อินพุตอินพุต> </label> <อินพุต type = "ส่ง"> ส่ง </button> </form>
เอฟเฟกต์การแสดงผลมีดังนี้:
หมายเหตุ: โดยค่าเริ่มต้นอินพุตเลือกและ textarea ใน bootstrap มีความกว้าง 100% เมื่อใช้แบบฟอร์มแบบอินไลน์คุณต้องตั้งค่าความกว้างในการควบคุมแบบฟอร์ม
รูปแบบแนวนอน: แตกต่างจากอีกสองรูปแบบคุณต้องทำตามขั้นตอนต่อไปนี้เพื่อสร้างรูปแบบแนวนอน
•เพิ่มคลาส. ฟอร์แมต-ฮอริซัลไปยังองค์ประกอบหลัก <form>
•ใส่แท็กและตัวควบคุมใน <div> ด้วยคลาส. ฟอร์แมต-กลุ่ม
•เพิ่มคลาส. การควบคุม-ป้ายลงในฉลาก
ตัวอย่างเช่น:
<form role = "form"> <div> <label for = "firstName"> ชื่อ </label> <div> <อินพุต type = "text" id = "firstName" placeHolder = "โปรดป้อนชื่อแรก"> </div> </div> <div> <label for "LastName" ชื่อ "> </div> </div> <div> <dable> <อินพุต type =" ช่องทำเครื่องหมาย "> จดจำฉัน </label> </div> </div> <div> <div> <div> <diving type =" ส่ง "> เข้าสู่ระบบ </button> </div> </div> </div>
ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของรูปแบบการบูตสแตรปที่เจ็ดตัวอย่างรหัสคำอธิบายรายละเอียด (เลย์เอาต์สามรูปแบบ) แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!