ซอร์สโค้ดรูปแบบรูปแบบการบูตแบบฟอร์ม

Bootstrap มีรูปแบบสามรูปแบบ: รูปแบบแนวตั้งรูปแบบอินไลน์และรูปแบบแนวนอน

สร้างแบบฟอร์มแนวตั้งหรือพื้นฐาน:

• ・ เพิ่ม role = "ฟอร์ม" ลงในองค์ประกอบหลัก <form>

• ・ ใส่แท็กและตัวควบคุมใน A <div> ด้วยคลาส. ฟอร์แมต-กลุ่ม นี่เป็นสิ่งจำเป็นเพื่อให้ได้ระยะห่างที่ดีที่สุด

• ・ เพิ่มคลาส. การควบคุมฟอร์

แบบฟอร์มแบบอินไลน์:

องค์ประกอบทั้งหมดในรูปแบบอินไลน์นั้นอยู่ในแนวเดียวกันกับด้านซ้ายและฉลากอยู่เคียงข้างกัน ในการสร้างแบบฟอร์มแบบอินไลน์คุณต้องเพิ่ม class.form-inline ในแท็กฟอร์ม

รูปแบบแนวนอน: แตกต่างจากอีกสองรูปแบบคุณต้องทำตามขั้นตอนต่อไปนี้เพื่อสร้างรูปแบบแนวนอน

•เพิ่มคลาส. ฟอร์แมต-ฮอริซัลไปยังองค์ประกอบหลัก <form>

•ใส่แท็กและตัวควบคุมใน <div> ด้วยคลาส. ฟอร์แมต-กลุ่ม

•เพิ่มคลาส. การควบคุม-ป้ายลงในฉลาก

รูปแบบการจัดรูปแบบ bootstrap มีดังนี้

รหัสการใช้งาน:

 <form role = "form"> <fieldset> <gregend> กำหนดค่าแหล่งข้อมูล </legend> <div> <label for = "ds_host"> hostname </label> <div> <อินพุต ID = "ds_host" type = "text" placeName = "192.168.1.161"/> id = "ds_name" type = "text" placeholder = "msh"/> </div> </div> <div> <label for = "ds_username"> ชื่อผู้ใช้ </label> <div> <อินพุต id = "ds_username" type = "text" id = "ds_password" type = "password" placeholder = "123456"/> </div> </dialset> <fieldset> <gelend> เลือกตารางที่เกี่ยวข้อง </legend> <divel <gregend> ชื่อฟิลด์ </legend> <div> <label for = "disabledSelect"> ชื่อตาราง </label> <div> <เลือก id = "disabledSelect"> <pontion> ไม่มีการเลือก </opovie> <potion> ไม่มีการเลือก </ตัวเลือก> </select> </div>

หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อเรียนรู้และแนบหัวข้อที่ยอดเยี่ยมให้คุณ: การสอนการเรียนรู้ bootstrap

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น