รูปร่าง
รูปแบบพื้นฐาน
สำหรับอินพุต textarea และเลือกในรูปแบบฉันมักจะเพิ่มคลาส "Form-Control" ซึ่งตั้งค่าความกว้างเริ่มต้นขององค์ประกอบเป็น 100% (ไม่ใช่สัมบูรณ์เช่นแบบฟอร์มอินไลน์ที่กล่าวถึงด้านล่าง) และแต่ละองค์ประกอบ (รวมถึงฉลากและองค์ประกอบที่จะป้อน) จะถูกเพิ่มด้วย "กลุ่มฟอร์ม" มันมีเพียงสไตล์เดียว มาร์จิ้น-ก้น: 15px
<form action = ""> <div> <label for = ""> ชื่อผู้ใช้: </label> <input type = "text"/> </div> <div> <label for = "" รหัสผ่าน: </label> <อินพุต type = "password"/> </div> </div>
รูปแบบอินไลน์
โดยการเพิ่ม "form-inline" ลงในองค์ประกอบด้านนอกสุด (องค์ประกอบหลักของกลุ่มฟอร์ม) บ่งชี้ว่าองค์ประกอบแบบฟอร์มทั้งหมดจะแสดงในหนึ่งบรรทัด (มีความกว้างเพียงพอ) และ ".Form-Inline .Form-Group" จะแสดงเป็นบล็อกแบบอินไลน์ และความกว้างของ ".Form-inline .Form-Control" คืออัตโนมัติ สิ่งนี้ทำให้มั่นใจได้ว่าจะแสดงในบรรทัดเดียว
<form action = ""> <div> <label for = ""> ชื่อผู้ใช้: </label> <input type = "text"/> </div> <div> <label for = "" รหัสผ่าน: </label> <อินพุต type = "password"/> </div> </div>
รูปแนวนอน
แตกต่างจากรูปแบบปกติและแบบอินไลน์ หากคุณต้องการแสดงองค์ประกอบฉลากและอินพุตในบรรทัดเดียวคุณต้องใช้ "ฟอร์ม-ฮอร์รินัน" "ฟอร์มฟอร์ม" ร่วมนี้เทียบเท่ากับ "แถว" ในระบบกริด ดังนั้นคลาสย่อยของมันจึงมี "COL-MD-*" และ "การควบคุมฉลาก" ของฉลาก-". รูปแบบการควบคุม. การควบคุม-label" มีผลของข้อความที่จัดแนวขวา หากคุณไม่เพิ่มสิ่งนี้ฉลากและอินพุตจะไม่เข้ากัน
<form action = ""> <div> <label for = ""> ชื่อผู้ใช้: </label> <div> <input type = "text"/> </div> </div> </div> <label for = ""> รหัสผ่าน: </label> <div> <อินพุตประเภท = "รหัสผ่าน"/> </div>
ขนาดของรูปแบบ
คนที่ควบคุมขนาดอินพุตคือ "อินพุต SM" และ "อินพุต LG" ซึ่งทำให้กล่องอินพุตอินพุตดูเล็กลงหรือใหญ่กว่าปกติ สอดคล้องกับสิ่งนี้คือขนาดของข้อความในฉลาก คุณต้องเพิ่ม "Form-Group-SM" และ "Form-Group-LG" ลงใน "Form-Form-Form-group" ในเวลาเดียวกัน เช่นเดียวกับในกล่องป้อนรหัสผ่านของการสาธิตด้านบน
กล่องป้อนเข้า
ใน HTML5 ประเภทในแท็กกล่องอินพุตรองรับประเภทเพิ่มเติม มีข้อความ, รหัสผ่าน, Datatime, Datatime-Local, วันที่, เดือน, เวลา, สัปดาห์, หมายเลข, อีเมล, URL, การค้นหา, โทรและสี สไตล์ที่ถูกต้องสามารถแสดงบนฉลาก <put> หากมีการกำหนดประเภทเฉพาะ องค์ประกอบบางอย่างสามารถแสดงเอฟเฟกต์ของพวกเขาบนโทรศัพท์ของคุณเท่านั้น
เลือกกล่องแบบเลื่อนลง
คล้ายกับกล่องอินพุต มันเพิ่งเปลี่ยนอินพุตเพื่อเลือกและเพิ่มคลาส "Form-Control"
<form action = ""> <div> <label for = ""> โปรดเลือก: </label> <div> <select name = "" id = ""> <ตัวเลือก value = ""> html </opption> <ตัวเลือกค่า = "" css </optopt> <ตัวเลือก value = ""> nodejs </opotion> </select> </div> </form>
col-md-pull-* คือการชดเชยซ้าย
ฟิลด์ข้อความ
คล้ายกับข้างต้น
<form action = ""> <div> <label for = ""> textarea: </label> <div> <textarea name = "" id = "" rows = "3"> สวัสดี </textarea> </div> </div> </form>
กล่องวิทยุหลายกล่อง
เพื่อให้องค์ประกอบวิทยุและช่องทำเครื่องหมายปรากฏในแถวเดียวและจัดแนวกับฉลาก Bootstrap เสนอสองตัวเลือก หนึ่ง:
<div> <label for = ""> <input type = "Radio" name = "sex"/> male <input type = "Radio" name = "sex"/> ผู้หญิง <อินพุต type = "Radio" name = "sex"/> ความลับ </label> <label for = ""> <อินพุตประเภท = "
ฉลากนั้นเป็นบล็อกแบบอินไลน์ แต่. radio, .checkbox ถูกบล็อก
ดังนั้นห่อวิทยุหรือกล่องกาเครื่องหมายหลายกล่องด้วยป้ายเดียวซึ่งจะไม่เป็นมืออาชีพ (ฮ่าฮ่า) นอกจากนี้หลายคนก็ไม่น่าดูมาก ดังนั้นวิธีการเขียนที่สองอยู่ที่นี่
<div> <label for = ""> <input type = "Radio" name = "sex"/> male </label> <label for = ""> <อินพุต type = "Radio" name = "sex"/> หญิง </label> <label for = ""> <อินพุตประเภท = "Radio" Name = "Sex"/> สำหรับ = ""> <อินพุต type = "ช่องทำเครื่องหมาย"/> css </label> <label for = ""> <input type = "ช่องทำเครื่องหมาย"/> javascript </label> </div>
รูปแบบการยืนยัน
ประสบความสำเร็จ: ความสำเร็จสีเขียว
มีการเตือน: คำเตือนสีเหลือง
มีข้อผิดพลาด: ข้อผิดพลาดสีแดง
เพียงเพิ่มสไตล์ที่สอดคล้องกันใน "กลุ่มฟอร์ม" เพื่อการตรวจสอบที่ดีขึ้นเราสามารถเพิ่ม "Have Feedback" ต่อไป จากนั้นเพิ่ม "Form-Control-Feedback" ในระดับองค์ประกอบหลังจากอินพุต ("Form-Control") ความหมายมีความชัดเจนและชัดเจน รหัสมีดังนี้:
<form action = ""> <div> <label for = ""> ชื่อผู้ใช้: </label> <div> <input type = "text"/> <span> </span> </div> </div> <divel type = "text"/> <span> </span> </span> </form>
ปุ่ม
รูปแบบหลายปุ่มและปุ่ม
มีรูปแบบปุ่มต่าง ๆ ใน bootstrap ปุ่ม, A, input, span, div ฯลฯ สามารถกลายเป็นปุ่มได้ตราบเท่าที่มี "BTN BTN-style" อย่างไรก็ตามเพื่อความเข้ากันได้และความสามารถในการอ่านที่ดีกว่านั้นเป็นการดีที่สุดที่จะไม่ใช้วิธีนี้ลองใช้แท็กปุ่ม
<button> ปุ่ม </putton> <button> ปุ่ม </putton> <button> ปุ่ม </button> <button> ปุ่ม </putton> <button> ปุ่ม </button> <button> ปุ่ม </button> <!-btn-block ทำให้ปุ่มพิเศษเป็นหนึ่งเดียว ROW-> <Button> ปุ่ม </putton> <pution> ปุ่ม </putton> <button> ปุ่ม </ปุ่ม> <button> ปุ่ม </ปุ่ม> <button> ปุ่ม </putton> <button> ปุ่ม </button> <button> ปุ่ม </ปุ่ม> <ปุ่ม> ปุ่ม </button> <button> ปุ่ม </ปุ่ม>
ขนาดปุ่ม
ดังที่ได้กล่าวไว้ข้างต้นใช้ "BTN-XS", "BTN-SM", "BTN-LG" เพื่อตั้งค่าขนาดปุ่ม
สถานะปุ่ม
ดังที่ได้กล่าวมาแล้วสิ่งที่มีประสิทธิภาพคือ "ใช้งาน" และ "โฟกัส"
รูปภาพ
IMG-Responsive: รูปภาพที่ตอบสนองส่วนใหญ่มุ่งเป้าไปที่การออกแบบที่ตอบสนอง
IMG-rounded: มุมโค้งมน
IMG-Circle: รอบ
IMG-thumbnail: รูปขนาดย่อแสดงโดยชายแดนที่เพิ่มเข้ามาในชั้นนอก
ไอคอน
Bootstart มีไอคอนขนาดเล็กจำนวนมากในตัววิธีการใช้งานมีดังนี้ ในความเป็นจริงมันถูกนำมาใช้ใน "การควบคุมแบบฟอร์มการควบคุม" ข้างต้น ในหมู่พวกเขา "glyphicon" เป็นสิ่งจำเป็น
<span> </span>
กลุ่มกล่องอินพุต
กลุ่มกล่องอินพุตเป็น "กลุ่มอินพุต" เราจำเป็นต้องเพิ่มคำต่อท้าย (เช่นคำต่อท้ายทางอีเมล) และคำนำหน้า (สัญลักษณ์เงิน ￥, $ ฯลฯ ) เพื่อใช้ "อินพุต-กลุ่มอากอน" หรือ "กลุ่มอินพุต-กลุ่ม" ความหมายที่เรียบง่ายและชัดเจน ดังนี้:
<!-email-box-> <div> <อินพุต type = "text" /><span>@gmail.com</span></div><!-สกุลเงิน-> <div><span>$</span> <input type = "Text"> <span> type = "text"/> </div> <!-ตัวเลือกหลายอย่าง-> <div> <pan> <อินพุต type = "ช่องทำเครื่องหมาย"/> </span> <อินพุต type = "text"/> </div> <! href = "javascript: void (0)"> baby </a> </li> <li> <a href = "JavaScript: void (0)"> Shop </a> </li>
สรุป
"Form-Horizontal" และ "Form-inline" เป็นทั้งฉลากนอกสุดของกลุ่มฟอร์ม
กลุ่มแบบฟอร์มใช้ "ฟอร์ม-กลุ่ม" เป็นองค์ประกอบหลัก สิ่งที่คล้ายกันคือ "กลุ่มอินพุต" และ "กลุ่ม" ที่อาจใช้ในอนาคต พวกเขาทั้งหมดสามารถมีขนาด
"Form-Group-LG", "Input-LG", "Input-Group-LG", "BTN-LG" ฯลฯ
รูปแบบการตรวจสอบมี "Has-error", "ประสบความสำเร็จ", "Hast Warning" "Have-Feedback" สามารถเพิ่มเข้ากับองค์ประกอบเดียวกัน เพื่อให้การตรวจสอบเสร็จสมบูรณ์มากขึ้น
มีหลายสไตล์สำหรับปุ่มและขนาดสามารถตั้งค่าได้
สี่สไตล์ทั่วไปสำหรับรูปภาพ
BootStarp มีไอคอนมากมายในตัว
กลุ่มกล่องอินพุตเริ่มต้นด้วย "กลุ่มอินพุต" และองค์ประกอบของเด็กรวมถึง "อินพุต-กลุ่มอาดอน", "อินพุท-กลุ่ม-BTN" ฯลฯ
ด้านบนเป็นคอลเลกชันที่สมบูรณ์ของแบบฟอร์มใน bootstrap แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!