บทความนี้ส่วนใหญ่แนะนำความรู้เกี่ยวกับการใช้สไตล์ฟอร์ม bootstrap ให้คุณ มันดีมากมาดูกันเถอะ!
รูปร่าง
<form role = "form"> <div> <label for = "exampleinputemail1"> อีเมล: </label> <อินพุต type = "อีเมล" id = "exampleinputemail1" placeholder = "โปรดป้อนที่อยู่อีเมลของคุณ"> </div> <div> รหัสผ่าน "> </div> <label> <อินพุต type =" ช่องทำเครื่องหมาย "> จดจำรหัสผ่านของคุณ </label> </div> <button type =" ส่ง "> ป้อนอีเมล </pution> </form>
ภาพการทำซ้ำ:
คลาส: การควบคุมแบบฟอร์ม
1. ความกว้างได้กลายเป็น 100%, 2. มีการตั้งค่าเส้นขอบสีเทาอ่อน (#CCC), 3. มุมโค้งมนที่มี 4px, 4. มีการตั้งค่าเอฟเฟกต์เงาและเมื่อองค์ประกอบได้รับโฟกัสเงาและเส้นขอบจะเปลี่ยนไป 5. สีของตัวยึดตำแหน่งถูกตั้งค่าเป็น #999
2. รูปแบบแนวนอน:
รูปแบบเริ่มต้นของเฟรมเวิร์ก Bootstrap เป็นรูปแบบการแสดงแนวตั้ง แต่บ่อยครั้งที่เราต้องการสไตล์รูปแบบแนวนอน (ฉลากอยู่ทางด้านซ้ายและตัวควบคุมฟอร์มอยู่ทางขวา)
<form role = "form"> <div> <label for = "inputemail3"> อีเมล </label> <div> <อินพุต type = "อีเมล" id = "inputemail3" placeholder = "โปรดป้อนที่อยู่อีเมลของคุณ"> </div> </div> รหัสผ่าน "> </div> </div> <div> <div> <dable> <อินพุต type =" ช่องทำเครื่องหมาย "> จดจำรหัสผ่าน </label> </div> </div> </div> </div> </div> <div> <div> <button type =" ส่ง "
ภาพการทำซ้ำ:
เพื่อให้ได้เอฟเฟกต์รูปแบบแนวนอนในกรอบ bootstrap ต้องปฏิบัติตามเงื่อนไขสองข้อต่อไปนี้:
1. ชื่อคลาส "Form-Horizontal" ใช้ในองค์ประกอบ
2. ระบบตาข่ายสอดคล้องกับเฟรมเวิร์ก bootstrap
การใช้ชื่อคลาส "Form-Horizontal" ในองค์ประกอบมีฟังก์ชั่นต่อไปนี้:
- ตั้งค่าฟอร์มควบคุมช่องว่างและค่ามาร์จิ้น
- เปลี่ยนการแสดงออกของ "กลุ่มฟอร์ม" คล้ายกับ "แถว" ของระบบกริด
3. รูปแบบแนวนอน:
การใช้เอฟเฟกต์ฟอร์มดังกล่าวในเฟรมเวิร์ก Bootstrap นั้นเป็นเรื่องง่ายคุณเพียงแค่ต้องเพิ่มชื่อคลาส "Form-Inline" ลงในองค์ประกอบ
หลักการดำเนินการของแบบฟอร์มแบบอินไลน์นั้นง่ายมาก ในการแสดงการควบคุมแบบฟอร์มในบรรทัดเดียวคุณต้องตั้งค่าการควบคุมแบบฟอร์มเป็นองค์ประกอบบล็อกอินไลน์ (แสดง: อินไลน์บล็อก)
<form role = "form"> <div> <label for = "exampleinputemail2"> อีเมล </label> <อินพุตประเภท = "อีเมล" id = "ตัวอย่างอินเตอร์บิวต์ 2" placeholder = "โปรดป้อนที่อยู่อีเมลของคุณ"> </div> <div> รหัสผ่าน "> </div> <label> <อินพุต type =" ช่องทำเครื่องหมาย "> จดจำรหัสผ่านของคุณ </label> </div> <button type =" ส่ง "> ป้อนอีเมล </pution> </form>
ภาพการทำซ้ำ:
4. อินพุตกล่องอินพุต
กล่องอินพุตบรรทัดเดียวกล่องอินพุตข้อความทั่วไปนั่นคือค่าแอตทริบิวต์ประเภทของอินพุตคือข้อความ เมื่อใช้อินพุตใน bootstrap คุณต้องเพิ่มประเภทประเภท หากคุณไม่ได้ระบุประเภทประเภทคุณจะไม่ได้รับสไตล์ที่ถูกต้อง
<form role = "form"> <div> <input type = "email" placeholder = "ป้อนอีเมล"> </div> <div> <อินพุต type = "text" placeholder = "โปรดป้อนชื่อผู้ใช้"/> </div> </form>
ภาพการทำซ้ำ:
5. PULL DOWN SELECT
กล่องการเลือกแบบเลื่อนลงในเฟรมเวิร์ก Bootstrap นั้นสอดคล้องกับการใช้งานดั้งเดิมและการเลือกแบบหลายบรรทัดจะกำหนดค่าของแอตทริบิวต์หลายตัวเป็นหลายรายการ เฟรมเวิร์ก Bootstrap ให้สไตล์แบบครบวงจรสำหรับองค์ประกอบเหล่านี้
<form role = "form"> <div> <elect> <pontion> 1 </optup> <pontion> 2 </opturb> <pontion> 3 </optup> <pontion> 4 </petion> <pontion> 5 </petion> </select> </div> <cillet Multiple> </select> </div> </form>
ภาพการทำซ้ำ:
6. ฟิลด์ข้อความ textarea
ฟิลด์ข้อความเหมือนกับวิธีการใช้งานดั้งเดิมการตั้งค่าแถวสามารถกำหนดความสูงและการตั้งค่า Cols สามารถตั้งค่าความกว้างได้ แต่ถ้าชื่อคลาส "Form-Control" ถูกเพิ่มเข้าไปในองค์ประกอบ Textarea ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์ Cols เนื่องจากการควบคุมรูปแบบสไตล์ "แบบฟอร์มควบคุม" ในเฟรมเวิร์กบูตสแตรปคือ 100% หรืออัตโนมัติ
<form role = "form"> <div> <textarea rows = "3"> </textarea> </div> </form>
ภาพการทำซ้ำ:
7. ช่องทำเครื่องหมายช่องทำเครื่องหมายและปุ่มเลือกปุ่มเดียว
ช่องทำเครื่องหมายและวิทยุในเฟรมเวิร์ก Bootstrap นั้นค่อนข้างพิเศษ Bootstrap ได้ทำการรักษาพิเศษสำหรับพวกเขา เหตุผลหลักคือช่องทำเครื่องหมายและวิทยุจะมีปัญหาเล็กน้อยเมื่อใช้กับฉลากฉลาก (ปวดหัวมากที่สุดคือปัญหาการจัดตำแหน่ง) ด้วยเฟรมเวิร์ก Bootstrap นักพัฒนาไม่จำเป็นต้องคิดมากเกินไปพวกเขาเพียงแค่ต้องทำตามวิธีการต่อไปนี้
<form role = "form"> <h3> กรณีที่ 1 </h3> <val> <dable> <อินพุตประเภท = "ช่องทำเครื่องหมาย" value = ""> จดจำรหัสผ่าน </label> </div> <darm> <label> <อินพุต type = "Radio" Name = "ตัวเลือก" ideporionradios1 " id = "opotionradios2" value = "hate"> ไม่ชอบ </label> </div> </form>
ภาพการทำซ้ำ:
8. กล่องกาเครื่องหมายและปุ่มตัวเลือกในแนวนอน
บางครั้งเพื่อจุดประสงค์ในการจัดวางกล่องกาเครื่องหมายและปุ่มตัวเลือกจะต้องจัดเรียงในแนวนอน เฟรมเวิร์ก Bootstrap ยังพิจารณาในเรื่องนี้:
1. หากช่องทำเครื่องหมายจำเป็นต้องจัดเรียงในแนวนอนคุณจะต้องเพิ่มชื่อคลาส "ช่องทำเครื่องหมายอินไลน์" ลงในฉลากฉลาก
2. หากต้องจัดวิทยุในแนวนอนคุณจะต้องเพิ่มชื่อคลาส "Radio-Inline" ลงในฉลากฉลากเท่านั้น
<form role = "form"> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = "ตัวเลือก 1"> เกม </label> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = "ตัวเลือก 2"> การถ่ายภาพ </label> <label> <อินพุต type = "checkbox" value = "ตัวเลือก" type = "Radio" value = "optip2" name = "sex"> หญิง </label> <label> <อินพุต type = "Radio" value = "optive3" name = "sex"> neutral </label> </div> </form>
ภาพการทำซ้ำ:
9. ปุ่ม
ปุ่มในกรอบ bootstrap ถูกนำไปใช้ทั้งหมด
<table> <thead> <tr> <th> ปุ่ม </th> <th> class = "" </th> <th> คำอธิบาย </th> </tr> </tbody> <tr> <td> <button href = "#"> ปุ่มเริ่มต้น </td> <td> <td> <td> การไล่ระดับสี </td> </tr> <td> <td> <button href = "#"> หลัก </ปุ่ม> </td> <td> <code> btn btn-primary </code> </td> <td> ให้น้ำหนักพิเศษ href = "#"> info </button> </td> <td> <code> btn btn-info </td> </td> <td> ใช้เป็นทางเลือกในรูปแบบเริ่มต้น </td> </tr> <td> <td> btn-success </code> </td> <td> หมายถึงการกระทำที่ประสบความสำเร็จหรือเป็นบวก </td> </tr> <tr> <td> <button href = "#"> คำเตือน </button> </td> <td> <td> การกระทำ </td> </tr> <td> <td> <button href = "#"> อันตราย </button> </td> <td> <code> btn btn-danger </code> </td> <td> บ่งชี้ว่าการกระทำที่เป็นอันตราย HREF = "#"> Inverse </button> </td> <td> <code> btn </verse </button> </td> <td> <td> <code> btn btn-inverse </der> </td> <td> ปุ่มสีเทาดำสลับ
ภาพการทำซ้ำ:
10. ขนาดการควบคุมแบบฟอร์ม
การควบคุมแบบฟอร์มที่เห็นก่อนหน้านี้มีขนาดปกติ คุณสามารถตั้งค่าความสูงของการควบคุมได้โดยการตั้งค่าความสูงของตัวควบคุมความสูงของเส้นการขยายและคุณสมบัติขนาดตัวอักษร อย่างไรก็ตามเฟรมเวิร์ก Bootstrap ยังมีชื่อคลาสที่แตกต่างกันสองชื่อเพื่อควบคุมความสูงของการควบคุมแบบฟอร์ม ชื่อสองคลาสนี้คือ:
1. Input-SM: ทำให้การควบคุมเล็กกว่าขนาดปกติ
2. อินพุต LG: ทำให้การควบคุมมีขนาดใหญ่กว่าขนาดปกติ
คลาสทั้งสองนี้เหมาะสำหรับอินพุต textarea และเลือกการควบคุมในรูปแบบ
<form role = "form"> <div> <label> การควบคุมมีขนาดใหญ่ขึ้น </label> <อินพุต type = "text" placeholder = "add.input-lg, การควบคุมมีขนาดใหญ่ขึ้น"> </div> <darm> <label> ขนาดปกติ </label> <อินพุตประเภท = "ข้อความ" เล็กกว่า "> </div> </form>
ภาพการทำซ้ำ:
11. สถานะการควบคุมแบบฟอร์ม (สถานะปิดใช้งาน)
สถานะปิดใช้งานของการควบคุมแบบฟอร์มในเฟรมเวิร์กบูตสแตรปนั้นเหมือนกับวิธีการใช้งานสถานะการปิดใช้งานแบบฟอร์มปกติการเพิ่มแอตทริบิวต์ "ปิดใช้งาน" ลงในการควบคุมแบบฟอร์มที่สอดคล้องกัน ดูรหัสต่อไปนี้สำหรับรายละเอียด
ปิดใช้งานแท็กแบบฟอร์มเดียวเพียงเพิ่มปิดใช้งานแอตทริบิวต์ของแท็ก
<form role = "form"> <div> <div> <อินพุต id = "disabledInput" type = "text" placeholder = "ถูกปิดใช้งานและไม่สามารถป้อนได้
ภาพการทำซ้ำ:
ในเฟรมเวิร์ก Bootstrap หากชุดฟิลด์มีการปิดใช้งานชุดคุณสมบัติทั้งโดเมนจะถูกปิดใช้งาน
<form role = "form"> <fieldset disabled> <div> <label for = "disabledTextInput"> ปิดใช้งานกล่องอินพุตที่ปิดใช้งาน </label> <อินพุต type = "text" id = "disabledTextInput" placeolder = "disabled input"> </div> <div> <label for = "disabledSelect เลือก </ตัวเลือก> </select> </div> <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย"> ไม่สามารถเลือก </label> </div> <button type = "ส่ง"> ส่ง </button> </fieldset> </form>
ภาพการทำซ้ำ:
มีการกล่าวกันว่าสำหรับฟิลด์ที่ปิดการใช้งานทั้งหมดหากมีกล่องอินพุตในตำนานกล่องอินพุตนี้จะไม่สามารถปิดใช้งานได้
form role = "form"> <fieldset disabled> <legend> <อินพุต type = "text" placeholder = "เห็นได้ชัดว่าสีของฉันเปลี่ยนเป็นสีเทา แต่ฉันไม่ได้ปิดการใช้งานอย่าเชื่อหรือไม่คลิกเพื่อลอง"/> </legend> <div> <label for = "disabletTextInput" สำหรับ = "disabledSelect"> ปิดการปิดใช้งานกล่องเลื่อนลง </label> <เลือก id = "disabledSelect"> <pontion> ไม่สามารถเลือก </optup> </select> </div> <darm> <label> <อินพุต type = "copbox"> ไม่สามารถเลือก </label> </div> <button type = "ส่ง"
ภาพการทำซ้ำ:
รูปแบบสถานะการตรวจสอบ
เมื่อสร้างแบบฟอร์มคุณต้องทำการตรวจสอบแบบฟอร์ม นอกจากนี้ยังจำเป็นต้องจัดเตรียมรูปแบบสถานะการตรวจสอบและเอฟเฟกต์เหล่านี้ยังมีอยู่ในกรอบ Bootstrap
1. การเตือน: สถานะเตือน (สีเหลือง)
2. HAS-ERROR: สถานะข้อผิดพลาด (สีแดง)
3 ..has-success: สถานะความสำเร็จ (สีเขียว)
หลายครั้งเมื่อตรวจสอบแบบฟอร์มสถานะที่แตกต่างกันจะให้ไอคอนที่แตกต่างกันเช่นความสำเร็จคือเครื่องหมายตรวจสอบ (√) ข้อผิดพลาดคือเครื่องหมายข้าม (×) ฯลฯ เอฟเฟกต์นี้ยังมีอยู่ในกล่อง bootstrap หากคุณต้องการให้แบบฟอร์มแสดงไอคอนในสถานะที่สอดคล้องกันคุณจะต้องเพิ่มชื่อคลาส "Has-Feedback" ในสถานะที่เกี่ยวข้อง โปรดทราบว่าชื่อดังกล่าวจะต้องอยู่กับ "Has-error", "Have Warning" และ "ประสบความสำเร็จ":
<form role = "form"> <div> <label for = "inputsuccess1"> สถานะความสำเร็จ </label> <อินพุต type = "text" id = "inputsuccess1" placeholder = "ความสำเร็จ"> </div> <div> <label for = "inputwarning1" สำหรับ = "inputerRor1"> สถานะข้อผิดพลาด </label> <อินพุต type = "text" id = "inputerror1" placeholder = "สถานะข้อผิดพลาด"> </div> </form> <br> <br> <br> <form role = "form"> <dable for "inputsuccess1" สถานะ "> <span> </span> </div> <div> <label for =" inputwarning1 "> สถานะการเตือน </label> <อินพุต type =" text "id =" inputwarning1 "placeholder =" สถานะการเตือน "> <span> สถานะ "> <span> </span> </div> </form>
ภาพการทำซ้ำ:
แบบฟอร์มข้อมูลแจ้งเตือน
โดยปกติควรให้ข้อมูลแจ้งที่แตกต่างกันเมื่อทำการตรวจสอบแบบฟอร์ม เอฟเฟกต์นี้ยังมีอยู่ในเฟรมเวิร์ก Bootstrap มีการใช้รูปแบบ "block block" และข้อความพรอมต์จะแสดงในบล็อกและแสดงที่ด้านล่างของตัวควบคุม
<form role = "form"> <div> <label for = "inputsuccess1"> สถานะความสำเร็จ </label> <input type = "text" id = "inputsuccess1" placeholder = "ความสำเร็จ"> <pan> ข้อมูลที่คุณป้อนนั้นถูกต้อง </span> <span> placeHolder = "สถานะการเตือน"> <span> โปรดป้อนข้อมูลที่ถูกต้อง </span> <span> </span> </div> <div> <label for = "inputerRor1"> สถานะข้อผิดพลาด </label> <อินพุต type = "text" id = "InputerRor1" สถานะข้อผิดพลาด "
ภาพการทำซ้ำ:
ด้านบนคือการใช้รูปแบบฟอร์ม bootstrap แนะนำให้คุณรู้จักโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!