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>
แบบฟอร์มแบบอินไลน์:
องค์ประกอบทั้งหมดในรูปแบบอินไลน์นั้นอยู่ในแนวเดียวกันกับด้านซ้ายและฉลากอยู่เคียงข้างกัน ในการสร้างแบบฟอร์มแบบอินไลน์คุณต้องเพิ่ม class.form-inline ในแท็กฟอร์ม
<form role = "form"> <div> <label for = "name"> ชื่อ </label> <input type = "text" id = "name" placeholder = "โปรดป้อนชื่อ"> </div> <div> <label for = "input file"> </label> <อินพุต type = "id =" อินพุต 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> <div> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย"> จดจำฉัน </label> </div> </div> </div> <div> <div> <div> <button type = "ส่ง"> เข้าสู่ระบบ </duck> </div> </div>
เอฟเฟกต์การแสดงผลมีดังนี้:
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น