องค์ประกอบทั่วไปของรูปแบบส่วนใหญ่รวมถึง: กล่องอินพุตข้อความ, กล่องเลือกแบบเลื่อนลง, กล่องวิทยุ, กล่องกาเครื่องหมาย, ฟิลด์ข้อความ, ปุ่ม ฯลฯ นี่คือรุ่น bootstrap ที่แตกต่างกัน:
น้อยลง: แบบฟอร์ม
Sass: _forms.scss
Bootstrap ปรับแต่งแท็ก FieldSet, Legend และ Label ในรูปแบบเฉพาะ
Fieldset {Min-Width: 0; Padding: 0; Margin: 0; Border: 0;} Legend {display: block; Width: 100%; padding: 0; margin-bottom: 20px; font-size: 21px; line-height: สืบทอด; สี: #333; border: 0; Inline-Block; Margin-Bottom: 5px; Font-Weight: Bold;}นอกจากองค์ประกอบเหล่านี้แล้วยังมีอินพุตเลือก Textarea และองค์ประกอบอื่น ๆ ในเฟรมเวิร์ก Bootstrap เอฟเฟกต์ทำได้โดยการปรับแต่งชื่อคลาสการควบคุม
1. ความกว้างกลายเป็น 100%;
2. ตั้งค่าขอบสีเทาอ่อน (#CCC)
3. มุมกลมด้วย 4px
4. ตั้งค่าเอฟเฟกต์เงาและองค์ประกอบได้รับโฟกัสผลกระทบของเงาและเส้นขอบจะเปลี่ยนไป
5. ตั้งค่าสีของ Palceholder เป็น #999
รูปแบบอินไลน์
หากคุณต้องการเพิ่มแท็กป้ายกำกับก่อนอินพุตมันจะทำให้การแบ่งสายอินพุตแสดง หากคุณต้องเพิ่มแท็กฉลากและไม่ต้องการการแบ่งสายอินพุตคุณต้องใส่แท็กป้ายกำกับในคอนเทนเนอร์ฟอร์ฟอร์ม-กลุ่มตัวอย่างเช่น:
<div> <label> ที่อยู่อีเมล </label> </div> <div> <อินพุต type = "อีเมล" placeolder = "โปรดป้อนหมายเลขอีเมลของคุณ"> </div>
ผลกระทบมีดังนี้:
เพื่อให้ได้ผลของการเข้าร่วมฟอร์มเพียงเพิ่มชื่อคลาสฟอร์ฟฟอร์มอินไลน์ไปยังองค์ประกอบฟอร์ม หลักการดำเนินการคือ:
ตั้งค่าการควบคุมแบบฟอร์มเป็นองค์ประกอบบล็อกอินไลน์ (จอแสดงผล: อินไลน์-บล็อก) เพื่อแสดงการควบคุมฟอร์มในหนึ่งบรรทัด
ตัวอย่าง:
<form> <div> <dable> อีเมล </label> <อินพุต type = "อีเมล" placeholder = "โปรดป้อนหมายเลขอีเมล"> </div> <div> <dable> รหัสผ่าน </label> <อินพุตประเภท = "รหัสผ่าน" placeholder = "โปรดป้อนรหัสผ่าน"> </darch> <dable>
ผลกระทบมีดังนี้:
คุณพบว่ารหัสมีแท็กฉลากอย่างชัดเจนและไม่ได้อยู่ในคอนเทนเนอร์ฟอร์ฟฟอร์ม-กลุ่มและอินพุตจะไม่ถูกห่อหุ้ม สิ่งที่แปลกยิ่งกว่าคือเนื้อหาของแท็กฉลากไม่ปรากฏขึ้น! ในความเป็นจริงถ้าคุณดูอย่างระมัดระวังแท็กฉลากได้เพิ่มชื่อคลาส sr-only ซึ่งหมายความว่ามันซ่อนฉลาก มาดูซอร์สโค้ดกันเถอะ:
.SR -ONLY {ตำแหน่ง: Absolute; Width: 1px; ความสูง: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect (0, 0, 0, 0); Border: 0;}เนื่องจากมีการเพิ่มแท็กฉลากแล้วและมีการเพิ่มชื่อคลาส. SR เท่านั้นในการซ่อนฉลากจึงไม่จำเป็นหรือไม่? - - แต่นี่เป็นหนึ่งในข้อดีของเฟรมเวิร์ก Bootstrap หากฉลากไม่ได้ตั้งค่าสำหรับการควบคุมอินพุตตัวอ่านหน้าจอจะไม่ได้รับการยอมรับอย่างถูกต้องและยังมีข้อควรพิจารณาบางประการสำหรับคนพิการ
รูปแนวนอน
การใช้เอฟเฟกต์รูปแบบแนวนอนใน bootstrap ต้องใช้สองเงื่อนไขดังต่อไปนี้:
1. ใช้ชื่อคลาสฟอร์ฟฟอร์ม-ฮอริซัลบนองค์ประกอบฟอร์ม
2. ระบบกริดพร้อมเฟรมเวิร์ก Bootstrap (รายละเอียด: รายละเอียดคำอธิบายของระบบ Bootstrap Grid)
ใช้ชื่อคลาสฟอร์ฟฟอร์-ฮอริซัลในองค์ประกอบฟอร์มส่วนใหญ่มีฟังก์ชั่นต่อไปนี้:
1. ตั้งค่าการขยายและค่ามาร์จิ้นของการควบคุมแบบฟอร์ม
2. เปลี่ยนรูปแบบการแสดงออกของ. จากกลุ่มคล้ายกับแถวของระบบกริด
ซอร์สโค้ด CSS:
.Form-horizontal. control-label, .form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .radio-inline, .form-horizontal .checkbox-inline {padding-top: 7px; {min-height: 27px;}. form-horizontal .form-group {margin-right: -15px; margin-left: -15px;}. form-horizontal .form-control-static {padding-top: 7px;}@media ขวา;}}. Form-Horizontal .Has-Feedback .Form-Form-Control-Feedback {Top: 0; ขวา: 15px;}ตัวอย่าง:
<form> <div> <dlable> อีเมล </label> <div> <อินพุต type = "อีเมล" placeHolder = "โปรดป้อนอีเมลของคุณ"> </div> </div> <dab> <dable> รหัสผ่าน </label> <div> <อินพุต type = "password" preactholder = "โปรดป้อนรหัสผ่านของคุณ"> </div> รหัสผ่าน </label> </div> </div> <div> <div> <button> ป้อนอีเมลของคุณ </button> </div> </form>
ผลกระทบมีดังนี้:
กล่องอินพุตบรรทัดเดียว
เมื่อใช้อินพุตใน bootstrap คุณต้องเพิ่มประเภทประเภท หากคุณไม่ได้ระบุประเภทประเภทคุณจะไม่ได้รับสไตล์ที่ถูกต้องเนื่องจากเฟรมเวิร์ก bootstrap กำหนดรูปแบบผ่านรูปแบบของอินพุต [type = "?"] เช่น: ประเภทข้อความซึ่งสอดคล้องกับอินพุต [type = "text"]
เพื่อให้การควบคุมดูดีในรูปแบบรูปแบบต่าง ๆ คุณต้องเพิ่มชื่อคลาสการควบคุมรูปแบบ
<form role = "form"> <div> <อินพุต type = "email" placeholder = "ป้อนอีเมล"> </div> </form>
PULL DOWN SELECT
การเลือกแบบหลายบรรทัดตั้งค่าของแอตทริบิวต์หลายตัวเป็นหลายตัว
<form role = "form"> <div> <elect> <pontion> 1 </opovie multiple> <pontion> 1 </opovie> <pontion> 2 </opotion> <pontion> 3 </potion> <pontion> 4 </opturb> <pontion> 5 </ection> </select> </div>
ฟิลด์ข้อความข้อความ
ฟิลด์ข้อความเหมือนกับวิธีการใช้งานดั้งเดิม การตั้งค่าแถวสามารถกำหนดความสูงการตั้งค่า Cols สามารถกำหนดความกว้างได้ หากมีการเพิ่มชื่อคลาส. การควบคุมรูปแบบลงในองค์ประกอบ textarea ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์ Cols เนื่องจากความกว้างของพื้นที่ของเป้าหมายรูปแบบ. การควบคุม. ในเฟรมเวิร์ก bootstrap คือ 100% หรืออัตโนมัติ
<form role = "form"> <div> <textarea rows = "3"> </textarea> </div> </form>
ช่องทำเครื่องหมายและวิทยุกล่องวิทยุ
จะมีปัญหาเล็กน้อยเกี่ยวกับช่องทำเครื่องหมายและวิทยุร่วมกับแท็กฉลาก (เช่นปัญหาการจัดตำแหน่ง)
<form> <darm> <dable> <อินพุต type = "ช่องทำเครื่องหมาย"> จดจำรหัสผ่าน </label> </div> <divel- label> <label> <อินพุต type = "Radio" name = "oppinionradios" id = "ตัวเลือก Radios1" ตัวเลือก </label> </div> <dable>
1. ไม่ว่าจะเป็นช่องทำเครื่องหมายหรือวิทยุพวกเขาจะถูกห่อด้วยฉลาก
2. ช่องทำเครื่องหมายและแท็กฉลากถูกวางไว้ในคอนเทนเนอร์ที่เรียกว่า. checkbox
3. วิทยุและฉลากถูกวางไว้ในภาชนะที่มีชื่อว่า. radio Bootstrap ส่วนใหญ่ใช้. checkbox และ. radio styles เพื่อจัดการการจัดตำแหน่งของกล่องกาเครื่องหมายปุ่มวิทยุและฉลาก
.radio, .checkbox {display: block; min-height: 20px; padding-left: 20px; margin-top: 10px; margin-bottom: 10px;}. ฉลากวิทยุ,. checkbox label {display: inline; font-weight: ปกติ; Cursor: Pointer; อินพุต [type = "ช่องทำเครื่องหมาย"],. อินพุตช่องทำเครื่องหมาย-อินพุต [type = "ช่องทำเครื่องหมาย"] {float: ซ้าย; margin-left: -20px;}. วิทยุ + .radio, .checkbox + .checkbox {margin-top: -5px;}กล่องกาเครื่องหมายและปุ่มตัวเลือกในแนวนอน
1. หากช่องทำเครื่องหมายจำเป็นต้องจัดเรียงในแนวนอนคุณจะต้องเพิ่มชื่อคลาสบนป้ายกำกับ Label.CheckBox-Inline
2. หากวิทยุต้องการการจัดเรียงแนวนอนเพียงเพิ่มชื่อคลาส radion-inline บนฉลากฉลาก
นี่คือซอร์สโค้ด CSS:
.radio-inline, .checkbox-inline {display: inline-block; padding-left: 20px; margin-bottom: 0; font-weight: normal; แนวตั้ง-แนวตั้ง: กลาง; เคอร์เซอร์: pointer;}. Radio-inline + .radio-inline, .Checkbox-inline + .checkbox-inline <div> <lable> <อินพุต type = "Radio" name = "sex" value = "ตัวเลือก 1"> ชาย </label> <lable> <อินพุต type = "Radio" name = "sex" value = "optup2"> หญิง </label> <lable>สถานะการควบคุมแบบฟอร์ม
1. สถานะโฟกัส:
สถานะโฟกัสถูกนำไปใช้ผ่านระดับหลอก: โฟกัส สถานะโฟกัสในการควบคุมแบบฟอร์ม bootstrap จะลบสไตล์เริ่มต้นของโครงร่างและเพิ่มเอฟเฟกต์เงาอีกครั้ง ต่อไปนี้คือ
ซอร์สโค้ด CSS:
.Form-Control: โฟกัส {สีชายแดน: #66afe9; Outline: 0; -webkit-box-shadow: inset 0 1px 1pxrgba (0,0,0, .075), 0 0 8px RGBA (102, 175, 233, .6); 0 8PX RGBA (102, 175, 233, .6);}ดังที่เห็นได้จากซอร์สโค้ดเพื่อให้การควบคุมมีเอฟเฟกต์สไตล์ข้างต้นในสถานะโฟกัสคุณต้องเพิ่มชื่อคลาสลงในตัวควบคุมรูปแบบการควบคุม
<form> <div> <div> <อินพุต type = "text" placeholder = "ไม่เอฟเฟกต์ในโฟกัส"> </div> <div> <อินพุต type = "text" placeholder = "เอฟเฟกต์ในโฟกัส"> </div> </div> </form>
เอฟเฟกต์ของไฟล์วิทยุและช่องทำเครื่องหมายในโฟกัสนั้นแตกต่างจากการควบคุมอินพุตทั่วไป ต่อไปนี้เป็นซอร์สโค้ด
อินพุต [type = "file"]: โฟกัส, อินพุต [type = "วิทยุ"]: โฟกัส, อินพุต [type = "ช่องทำเครื่องหมาย"]: โฟกัส {โครงร่าง: dotted บาง ๆ ; โครงร่าง: 5px auto -webkit-focus-ring-color; Outline-Offset: -2px;}}2. ปิดการใช้งานสถานะ:
เพียงเพิ่มคุณสมบัติที่ปิดใช้งานในการควบคุมแบบฟอร์มที่สอดคล้องกันและต่อไปนี้เป็นซอร์สโค้ด CSS:
.Form-control [disabled] ,. การควบคุมแบบฟอร์ม [อ่านอย่างง่าย], fieldset [disabled] .form-control {เคอร์เซอร์: ไม่อนุญาต; อินพุต [type = "Radio"] [ปิดใช้งาน], อินพุต [type = "ช่องทำเครื่องหมาย"] [ปิดใช้งาน],. วิทยุ [ปิดใช้งาน], วิทยุแบบอินไลน์ [ปิดใช้งาน], ช่องทำเครื่องหมาย [ปิดใช้งาน],. ช่องทำเครื่องหมายอินไลน์ [ปิดใช้งาน], fieldset [ปิดใช้งาน] อินพุต .Radio-Inline, FieldSet [disabled] .CheckBox, FieldSet [disabled] .CheckBox-inline {เคอร์เซอร์: ไม่ได้รับอนุญาต;}ตัวอย่าง:
<อินพุต type = "text" placeholder = "form ปิดใช้งาน" ปิดใช้งาน> ปิดใช้งาน>
หาก FieldSet ตั้งค่าคุณสมบัติปิดใช้งานโดเมนทั้งหมดจะถูกปิดใช้งาน
ตัวอย่าง:
<form role = "form"> <fieldset disabled> <div> <dable> กล่องอินพุตถูกปิดใช้งาน </label> <input type = "text" placeholder = "ปิดการใช้งานอินพุต"> </div> <dark> <label> กล่องดรอปดาวน์ถูกปิดใช้งาน </label> <elect> > <อินพุต type = "ช่องทำเครื่องหมาย"> กล่องตัวเลือกถูกปิดใช้งาน </label> </div> <button type = "ส่ง"> ส่ง </button> </fieldset> </form>
เอฟเฟกต์มีดังนี้: (ไอคอนปิดใช้งานจะปรากฏขึ้นเมื่อเมาส์ถูกเลื่อนขึ้นนี่คือภาพหน้าจอโดยตรงที่ไม่สามารถมองเห็นได้)
3. สถานะการตรวจสอบ
Bootstrap ให้เอฟเฟกต์ต่อไปนี้:
1. การเตือน: สถานะคำเตือนสีเหลือง
2. HAS-ERROR: สถานะข้อผิดพลาดสีแดง
3 ..has-success: สถานะความสำเร็จสีเขียว
เมื่อใช้งานเพียงเพิ่มชื่อคลาสสถานะลงในคอนเทนเนอร์แบบฟอร์ม เอฟเฟกต์เหมือนกันในสามสถานะ แต่สีแตกต่างกัน
ตัวอย่าง:
<form> <div> <dable> สถานะความสำเร็จ </label> <อินพุต type = "text" placeholder = "สถานะความสำเร็จ"> </div> <div> <dable> สถานะข้อผิดพลาด </label> <อินพุตประเภท = "text" placeholder = "สถานะข้อผิดพลาด"> </div>
ผลกระทบมีดังนี้:
บางครั้งสถานะที่แตกต่างกันมีไอคอนที่แตกต่างกันเมื่อตรวจสอบแบบฟอร์ม หากคุณต้องการแสดงไอคอนในสถานะที่สอดคล้องกันคุณจะต้องเพิ่มชื่อคลาส HAS-FEEDBACK ในสถานะที่เกี่ยวข้อง โปรดทราบว่าควรใช้กับ. has-error, .has-success, .has-warning
ไอคอนขนาดเล็กของ bootstrap ทำทั้งหมดโดยใช้ @font-face ชอบ:
<span class =” Glyphicon-warning-form-feedback”> </span>
ตัวอย่าง:
<form> <div> <dable> สถานะความสำเร็จ </label> <อินพุต type = "text" placeholder = "สถานะความสำเร็จ"> <span> </span> </div> <divel สถานะ "> <span> </span> </div> </form>
ผลกระทบมีดังนี้:
แบบฟอร์มข้อมูลแจ้งเตือน
โดยทั่วไปเมื่อทำการตรวจสอบแบบฟอร์มจำเป็นต้องมีข้อมูลแจ้งที่แตกต่างกัน ใช้. help-block ในเฟรมเวิร์ก bootstrap เพื่อแสดงข้อมูลพรอมต์ในบล็อกและแสดงที่ด้านล่างของการควบคุม
นี่คือซอร์สโค้ด CSS:
.Help-block {display: block; margin-top: 5px; margin-bottom: 10px; สี: #737373;}ตัวอย่าง:
<form> <div> <dable> สถานะที่ประสบความสำเร็จ </label> <อินพุต type = "text" placeholder = "สถานะที่ประสบความสำเร็จ"> <span> ข้อมูลอินพุตถูกต้อง </span> <span> </pan> </viv> <divel สถานะ </label> <อินพุต type = "text" placeholder = "สถานะการเตือน"> <span> โปรดป้อนข้อมูลที่ถูกต้อง </span> <span> </span> </div>
ผลกระทบมีดังนี้:
หากคุณไม่ต้องการเพิ่มรหัสของคุณเองใน bootstrap.css และการออกแบบต้องการสิ่งนี้คุณสามารถใช้ระบบกริดของ Bootstrap ได้เช่น:
<form role = "form"> <div> <label for = "inputsuccess1"> สถานะความสำเร็จ </label> <div> <div> <อินพุต type = "text" id = "inputsuccess1" placeholder = "สถานะความสำเร็จ"> </div> <pan> ข้อมูลที่คุณป้อนถูกต้อง
ข้างต้นเป็นเนื้อหาที่เกี่ยวข้องขององค์ประกอบฟอร์ม bootstrap ที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ!