Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
เมื่อแก้ไขพื้นหลังของตัวเองฉันใช้ bootstrap ในรูปแบบทั่วไปและไม่มีเหตุผลที่จะไม่ใช้ส่วนฟอร์มที่เหลือ สำหรับความสวยงามและการจัดวางของแบบฟอร์ม Bootstrap ก็ดีมากด้วยเส้นขอบบรรยากาศปุ่มหลายฟังก์ชันและรูปแบบรูปแบบมาโครทุกอย่างสมบูรณ์และสมบูรณ์แบบ!
รูปแบบปกติ
เราจำเป็นต้องห่อองค์ประกอบแบบฟอร์มลงในคลาสแบบฟอร์มกลุ่มซึ่งโดยทั่วไปจะถูกเก็บไว้ใน <div> ... </div> และเนื้อหาของชื่อองค์ประกอบฟอร์มจะถูกวางไว้ในฉลากฉลากและชื่อคลาสเลเบลอินพุตคือการควบคุมแบบฟอร์ม เป็นที่น่าสังเกตว่าช่องทำเครื่องหมายและองค์ประกอบวิทยุของคุณจำเป็นต้องเขียนใน div ของคุณเอง
ตัวอย่างเช่นแบบฟอร์มต่อไปนี้
<form> <div> <label for = "exampleinputemail1"> ที่อยู่อีเมล </label> <อินพุตประเภท = "อีเมล" id = "ตัวอย่างอินเตอร์บิวต์เดโมเมิล" placeholder = "อีเมล"> </div> <div> <label for = "password remapternputpassword1> </label> <อินพุต สำหรับ = "exampleinputfile"> อินพุตไฟล์ </label> <อินพุต type = "รหัสผ่าน" id = "exampleinputpassword1" placeholder = "รหัสผ่าน"> </div> <div> <label for = "exampleinputfile"> อินพุตไฟล์ </label> <อินพุต = "ไฟล์" Me Out </label> </div> <button type = "ส่ง"> ส่ง </button> </form>
เอฟเฟกต์หลังจากวิ่ง
รูปแบบการปล่อยแนวนอน
หากองค์ประกอบแบบฟอร์มของคุณจำเป็นต้องถูกปล่อยออกมาในแนวนอนคุณสามารถเพิ่ม class.form-inline ลงในแบบฟอร์ม แบบฟอร์มนี้มักจะเหมาะสมกว่าเมื่อมีองค์ประกอบน้อยลง
ตัวอย่างเช่น
<form> <div> <label for = "exampleinputemail3"> ที่อยู่อีเมล </label> <อินพุตประเภท = "อีเมล" id = "ตัวอย่างอินเตอร์บิวต์เมียล 3" placeholder = "อีเมล"> </div> <div> <label for = "passwordlownpassword> </label> <อินพุต type = "ช่องทำเครื่องหมาย"> จดจำฉัน </label> </div> <button type = "ส่ง"> ลงชื่อเข้าใช้ </button> </form>
รูปแบบสามัญ + การปล่อยแสงแนวนอน
แบบฟอร์มนี้เป็นแบบที่ใช้กันมากที่สุด เมื่อผู้ใช้ทั่วไปลงทะเบียนและกรอกข้อมูลพวกเขามักจะเห็นเอฟเฟกต์ฟอร์มต่อไปนี้
การใช้แบบฟอร์มนี้ใช้คลาส. horizontal และแต่ละแถวขององค์ประกอบจะถูกห่อหุ้มด้วย <div> ... </div>
แบบฟอร์ม> <div> <label for = "inputemail3"> อีเมล </label> <div> <อินพุต type = "อีเมล" id = "inputemail3" placeholder = "อีเมล"> </div> </div> <div> <label for = "password 3"> </label> <div> <อินพุต type = "ช่องทำเครื่องหมาย"> จดจำฉัน </label> </div> </div> </div> </div> <div> <div> <button type = "ส่ง"> ลงชื่อเข้าใช้ </button> </div> </div> </div>
นอกจากนี้เรายังสามารถดูรหัสที่เมื่อทำรูปแบบฟอร์มคุณสามารถใช้ COL-SM และ COL-SM-OFFSET สำหรับเค้าโครงกริด !
ข้างต้นเป็นการวิเคราะห์แบบฟอร์มแบบฟอร์ม bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!