การควบคุมแบบฟอร์มที่สนับสนุนโดย bootstrap มีดังนี้:
Bootstrap รองรับการควบคุมแบบฟอร์มที่พบมากที่สุดส่วนใหญ่อินพุต, textarea, ช่องทำเครื่องหมาย, วิทยุและเลือก
กล่องป้อนเข้า
ฟิลด์ข้อความแบบฟอร์มที่พบมากที่สุดคืออินพุตกล่องอินพุต ผู้ใช้สามารถป้อนข้อมูลแบบฟอร์มที่จำเป็นส่วนใหญ่ได้ Bootstrap ให้การสนับสนุนสำหรับประเภทอินพุต HTML5 ดั้งเดิมทั้งหมดรวมถึง: ข้อความ, รหัสผ่าน, DateTime, DateTime-Local, วันที่, เดือน, เวลา, สัปดาห์, หมายเลข, อีเมล, URL, การค้นหา, โทรและสี ต้องมีการประกาศประเภทที่เหมาะสมเพื่อให้อินพุตสามารถจัดสไตล์ได้อย่างสมบูรณ์
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - กล่องอินพุต </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form Role = "Form"> <velable สำหรับ = "ชื่อ"> แท็ก </label>
ผลลัพธ์มีดังนี้:
textarea
เมื่อคุณต้องการสร้างอินพุตหลายบรรทัดคุณสามารถใช้ Textarea กล่องข้อความ คุณสมบัติแถวสามารถเปลี่ยนแปลงได้หากจำเป็น
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - กล่องข้อความ </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form Role = "Form"> <dable for = "ชื่อ"> กล่องข้อความ </label> <textarea rows = "3"> </textarea> </div> </form> </body> </html>
ผลลัพธ์มีดังนี้:
ช่องทำเครื่องหมาย ((ช่องทำเครื่องหมาย) และกล่องวิทยุ (วิทยุ)
กล่องกาเครื่องหมายและปุ่มตัวเลือกใช้เพื่ออนุญาตให้ผู้ใช้เลือกจากชุดตัวเลือกที่ตั้งไว้ล่วงหน้า
เมื่อสร้างแบบฟอร์มให้ใช้ช่องทำเครื่องหมายหากคุณต้องการให้ผู้ใช้เลือกตัวเลือกหลายตัวจากรายการ หากคุณ จำกัด ผู้ใช้จากการเลือกตัวเลือกเดียวให้ใช้วิทยุ
ใช้. checkbox-inline หรือ. radio-inline คลาสสำหรับชุดกล่องกาเครื่องหมายและกล่องวิทยุเพื่อควบคุมให้ปรากฏในบรรทัดเดียวกัน
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสองประเภทนี้ (ค่าเริ่มต้นและแบบอินไลน์):
<! doctype html> <html> <head> <title> อินสแตนซ์ bootstrap - กล่องกาเครื่องหมายและปุ่มตัวเลือก </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3 src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <label for = "name"> Instances ของช่องทำเครื่องหมายเริ่มต้น 1 </label> </div> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = ""> ตัวเลือก 2 </label> </div> <div> <dable> <อินพุต type = "Radio" name = "opotionradios" id = "ตัวเลือก" ตัวเลือก "ตัวเลือก" value = "ตัวเลือก 2"> ตัวเลือก 2 - การเลือกจะยกเลิกการเลือกตัวเลือก 1 </label> </div> <label for = "name"> ช่องทำเครื่องหมายที่ Inlined และปุ่มตัวเลือกอินสแตนซ์ </label> <dable> <darable> <อินพุต Type = "Copbox" ID = "InlineCheckBox1" ตัวเลือก "ตัวเลือก" ตัวเลือก 1 2 </label> <label> <อินพุต type = "ช่องทำเครื่องหมาย" id = "inlineCheckBox3" value = "ตัวเลือก 3"> ตัวเลือก 3 </label> <label> <อินพุต type = "Radio" name = "ตัวเลือก RadiosInline" id = "optuptionradiosinline" idestionladi -
ผลลัพธ์มีดังนี้:
กล่องกาเครื่องหมายและปุ่มตัวเลือก
ใช้กล่องการเลือกเมื่อคุณต้องการให้ผู้ใช้เลือกจากตัวเลือกหลายตัวเลือก แต่สามารถเลือกตัวเลือกเดียวได้ตามค่าเริ่มต้น
ใช้ตัวเลือกรายการ <elect> รายการแสดงผลซึ่งโดยปกติจะเป็นรายการตัวเลือกที่คุ้นเคยกับผู้ใช้เช่นสถานะหรือหมายเลข
ใช้ multiple = "หลาย" เพื่ออนุญาตให้ผู้ใช้เลือกตัวเลือกหลายตัวเลือก
ตัวอย่างต่อไปนี้แสดงให้เห็นถึงสองประเภทนี้ (เลือกและหลายรายการ):
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - เลือกกล่อง </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3 Role = "Form"> <div> <label for = "name"> เลือกรายการ </label> <elect> <petion> 1 </petion> <pontion> 2 </petion> <pontion> 3 </opovie> <ption> <pontion> 4 </optup> multiple> <pontion> 1 </opovie> <pontion> 2 </opotion> <pontion> 3 </opturb> <pontion> 4 </opturb> <pontion> 5 </pot> </select> </div> </dhorm> </body> </html>
ผลลัพธ์มีดังนี้:
การควบคุมแบบคงที่
เมื่อคุณต้องการวางข้อความธรรมดาไว้ด้านหลังแท็กฟอร์มภายในรูปแบบแนวนอนให้ใช้คลาส. ฟอร์แมต-ควบคุม-สแตติกบน <p>
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - การควบคุมแบบคงที่ </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3 role = "form"> <div> <dable> อีเมล </label> <p> <p> [email protected] </p> </div> </div> <div> <dable for = "inputpassword"> รหัสผ่าน </label> <div> <อินพุตประเภท = "รหัสผ่าน" id = "password
ผลลัพธ์มีดังนี้:
สถานะการควบคุมแบบฟอร์ม
นอกเหนือจาก: สถานะโฟกัส (เช่นผู้ใช้คลิกอินพุตหรือใช้คีย์แท็บเพื่อมุ่งเน้นไปที่อินพุต), bootstrap กำหนดรูปแบบสำหรับกล่องอินพุตที่ปิดใช้งานและให้คลาสสำหรับการตรวจสอบความถูกต้องของฟอร์ม
โฟกัสเฟรมอินพุต
เมื่ออินพุตรับอินพุต: โฟกัสโครงร่างของกล่องอินพุตจะถูกลบออกและใช้งานกล่อง
ปิดใช้งานอินพุตกล่องอินพุต
หากคุณต้องการปิดใช้งานอินพุตอินพุตเพียงเพิ่มแอตทริบิวต์ที่ปิดการใช้งานซึ่งไม่เพียง แต่ปิดใช้งานกล่องอินพุต แต่ยังเปลี่ยนรูปแบบของกล่องอินพุตและสไตล์ของตัวชี้เมาส์เมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบ
ปิดการใช้งาน fieldset fieldset
เพิ่มแอตทริบิวต์ที่ปิดการใช้งานไปยัง <fieldset> เพื่อปิดใช้งานการควบคุมทั้งหมดภายใน <sfieldet>
สถานะการตรวจสอบ
Bootstrap มีรูปแบบการตรวจสอบสำหรับข้อผิดพลาดคำเตือนและข้อความความสำเร็จ เพียงเพิ่มคลาสที่เหมาะสม (.has-warning, .has-error หรือ .has-success) ลงในองค์ประกอบหลักเพื่อใช้สถานะการตรวจสอบ
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - สถานะการควบคุมรูปแบบ </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form Role = "Form"> <dable> โฟกัส ... "> </div> </div> <div> <label for =" inputPassword "> ปิดใช้งาน </label> <div> <อินพุต id =" disabledInput "type =" text "placeholder =" กล่องอินพุตนี้ห้ามอินพุต ... id = "disabletTextInput" placeHolder = "ปิดการใช้งาน"> </div> <div> <label for = "disabledSelect"> ปิดใช้งานเมนูการเลือก (ปิดการใช้งาน FieldSet) </label> <div> <select id = "disabledSelect"> <potion> ปิดการเลือก type = "text" id = "inputsuccess"> </div> </div> <div> <label for = "inputwarning"> คำเตือนอินพุต </label> <div> <อินพุต type = "text" id = "inputwarning"> </div> </div> id = "inputerror"> </div> </form> </body> </html>
ผลลัพธ์มีดังนี้:
ขนาดการควบคุมแบบฟอร์ม
คุณสามารถใช้คลาส. input-LG และ. col-lg-* เพื่อตั้งค่าความสูงและความกว้างของแบบฟอร์มตามลำดับ ตัวอย่างต่อไปนี้แสดงสิ่งนี้:
<! doctype html> <html> <head> <dite> อินสแตนซ์ bootstrap - ขนาดการควบคุมแบบฟอร์ม </title> <link rel = "stylesheet" href = "http://apps.bdimg.com/libs/bootstrap/3.0/cs/bootstrap.min.css src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script> </head> <body> <form Role = "Form"> <div> อินพุต "> </div> <div> <อินพุต type =" text "placeholder =". input-sm "> </div> <div> </div> <div> <elect> <select> <select> <select value =" ">. input-lg </opotion> </select> </div> <elect> <elect> value = ">. input-sm </potion> </select> </div> <div> <div> <อินพุต type =" text "placeholder =". col-lg-2 "> </div> <div> <อินพุต type =" text "placeholder =". col-lg-3 "> </div> placeholder = ". col-lg-4"> </div> </div> </form> </body> </html>
ผลลัพธ์มีดังนี้:
บรรณาธิการของ Wulin.com แนะนำหัวข้อที่เกี่ยวข้องกับคุณ:
ทักษะการใช้งานส่วนประกอบ bootstrap
สรุปความรู้ที่เกี่ยวข้องกับ bootstrap
ข้างต้นเป็นตัวควบคุมแบบฟอร์มที่สนับสนุนโดย bootstrap ทุกคนเข้าใจมัน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับทุกคนในเวลา ในเวลาเดียวกันฉันขอขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ Wulin.com