ตัวอย่างข้อความช่วยเหลือ Bootstrap Block

Tawxyang Khxkhwam Chwy Helux Bootstrap Block



ในขณะที่สร้างแอปพลิเคชันใด ๆ นักพัฒนาพยายามทำให้เป็นมิตรกับผู้ใช้เสมอ โดยเฉพาะอย่างยิ่ง เว็บไซต์ที่เป็นมิตรต่อผู้ใช้มีหลายปัจจัย รวมถึงการนำทางที่มีประสิทธิภาพ ความเข้ากันได้ของอุปกรณ์ การจัดการข้อผิดพลาด เป็นต้น ตัวอย่างเช่น การเพิ่มข้อความช่วยเหลือด้วยส่วนประกอบต่างๆ เป็นคุณสมบัติหนึ่งที่ช่วยผู้ใช้ในกระบวนการเพิ่มข้อความในช่องป้อนข้อมูล .

โพสต์นี้จะแนะนำคุณเกี่ยวกับตัวอย่างข้อความช่วยเหลือการบล็อกใน Bootstrap

Bootstrap Block Help Text คืออะไร?

ข้อความวิธีใช้บล็อก Bootstrap สามารถสร้างได้โดยใช้ ' .form-ข้อความ ' ระดับ. ในเวอร์ชัน Bootstrap 3 นั้น “ ช่วยบล็อก ” คลาสถูกใช้เพื่อเพิ่มข้อความช่วยเหลือ







ประเภทของ Bootstrap Block Help Text

องค์ประกอบประเภทที่สมัครเหล่านี้สามารถใช้เพื่อระบุข้อความช่วยเหลือ:



จะเพิ่มข้อความช่วยเหลือ Bootstrap Block โดยใช้องค์ประกอบบล็อกได้อย่างไร

องค์ประกอบระดับบล็อก เช่น “

”, “

” หรือมากกว่านั้นสามารถใช้เพื่อเพิ่มข้อความช่วยเหลือได้ เพื่อจุดประสงค์นี้ ' แบบฟอร์มข้อความ ” คลาสถูกใช้ คลาสนี้มี “ จอแสดงผล: บล็อก ' คุณสมบัติ. นอกจากนี้ยังมีคุณสมบัติระยะขอบด้านบนที่ช่วยให้ข้อความแสดงในบางพื้นที่จากช่องป้อนข้อมูลอื่นๆ



ตัวอย่าง

ตรวจสอบตัวอย่างด้านล่าง:





  • เพิ่ม ' <รูปแบบ> ” องค์ประกอบเพื่อสร้างฟอร์ม
  • หากต้องการใส่คำบรรยายในช่องป้อนข้อมูล ให้เพิ่ม ' ' องค์ประกอบ.
  • หลังจากนั้นให้เพิ่ม “ <อินพุต> ” องค์ประกอบที่มี “ แบบฟอร์มการควบคุม ' และ ' ช่องใส่ข้อมูล ” เพื่อสร้างช่องป้อนข้อมูล
  • จากนั้นเพิ่ม “ <เล็ก> ” องค์ประกอบกับคลาส “ แบบฟอร์มข้อความ ' และ ' ปิดเสียงข้อความ ” เพื่อเพิ่มข้อความช่วยเหลือ:
< รูปร่าง >

< ช่วง > ใส่รหัสผ่าน < / ช่วง >

< ป้อนข้อมูล ระดับ = 'ฟิลด์อินพุตควบคุมฟอร์ม' พิมพ์ = 'รหัสผ่าน' >

< แผนก ระดับ = 'form-text text-muted' > รหัสผ่านของคุณต้องมีความยาว 8 ตัวอักษร < / แผนก >

< / รูปร่าง >

คลาสที่ใช้ในข้อมูลโค้ดด้านบนอธิบายไว้ที่นี่:

  • แบบฟอร์มการควบคุม คลาส ” มีสไตล์ส่วนกลางสำหรับองค์ประกอบอินพุต
  • แบบฟอร์มข้อความ ” คลาสเพิ่มสไตล์ให้กับข้อความช่วยเหลือ
  • ปิดเสียงข้อความ ” เพิ่มสไตล์ทั่วไปให้กับข้อความช่วยเหลือ

เอาต์พุต



จะเพิ่มข้อความช่วยเหลือบล็อก Bootstrap โดยใช้องค์ประกอบแบบอินไลน์ได้อย่างไร

องค์ประกอบแบบอินไลน์ เช่น “ ' หรือ ' <เล็ก> ” สามารถใช้เพื่อเพิ่มข้อความช่วยเหลือในหน้าเว็บ

ตัวอย่าง

ตัวอย่างด้านล่างแสดงให้เห็นถึงการใช้ “ <เล็ก> ” องค์ประกอบแบบอินไลน์เพื่อระบุข้อความช่วยเหลือ:

< รูปร่าง ระดับ = 'แบบฟอร์มอินไลน์' >

< แผนก ระดับ = 'แบบฟอร์มกลุ่ม' >

< ช่วง >ใส่ชื่อของคุณ< / ช่วง >

< ป้อนข้อมูล ระดับ = 'ฟิลด์อินพุตควบคุมฟอร์ม' พิมพ์ = 'รหัสผ่าน' >

< เล็ก ระดับ = 'ปิดเสียงข้อความ' >ต้องกรอก< / เล็ก >

< / แผนก >

< / รูปร่าง >

สังเกตได้ว่าเพิ่มข้อความช่วยเหลือสำเร็จแล้ว:

นี่คือทั้งหมดที่เกี่ยวกับข้อความช่วยเหลือบล็อก Bootstrap

บทสรุป

หากต้องการเพิ่มข้อความช่วยเหลือใน Bootstrap ให้ใช้ปุ่ม “ แบบฟอร์มข้อความ ” คลาสใช้เพื่อเพิ่มข้อความช่วยเหลือระดับบล็อก “ ปิดเสียงข้อความ คลาส ” ใช้เพื่อสร้างข้อความช่วยเหลือแบบอินไลน์ ใน Bootstrap 3, the “ ช่วยบล็อก ” คลาสถูกใช้ โดยเฉพาะอย่างยิ่ง สามารถระบุข้อความช่วยเหลือด้วยองค์ประกอบแบบอินไลน์หรือระดับบล็อก โพสต์นี้ได้อธิบายวิธีเพิ่มข้อความช่วยเหลือใน Bootstrap ด้วยความช่วยเหลือของตัวอย่าง