บทความนี้ส่วนใหญ่จะแนะนำทักษะของการใช้แบบฟอร์ม bootstrap
1. bootstrap รูปแบบพื้นฐาน
องค์ประกอบทั่วไปในรูปแบบส่วนใหญ่ประกอบด้วย: กล่องป้อนข้อความ, กล่องเลือกแบบเลื่อนลง, ปุ่มตัวเลือก, ปุ่มตรวจสอบ, ฟิลด์ข้อความและปุ่ม ฯลฯ
ก่อนอื่นดูรูปแบบพื้นฐาน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> ฟอร์มพื้นฐาน </title> <link rel = "stylesheet" href = "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> </head> <body> <form role = "form"> <divel ที่อยู่ "> </div> <div> <label for =" exampleinputpassword1 "> รหัสผ่าน: </label> <อินพุตประเภท =" รหัสผ่าน "id =" ตัวอย่าง Passward1 "placeholder =" โปรดป้อนรหัสผ่านของคุณ "> </div> <dab> <label>
การเรนเดอร์มีดังนี้:
นอกจากนี้เรายังสามารถบรรลุเอฟเฟกต์ที่แตกต่างกันโดยการเพิ่มชื่อคลาสที่แตกต่างกันในรูปแบบ กฎเฉพาะของแบบฟอร์มจะแสดงในตารางต่อไปนี้:
ตัวอย่างเช่น:
<form role = "form"> ... </form>
2. การควบคุมแบบฟอร์ม bootstrap
1) อินพุตกล่องอินพุต
<form role = "form"> <div> <!-ประเภทประเภทจะต้องเพิ่ม หากประเภทประเภทไม่ได้ระบุรูปแบบที่ถูกต้องจะไม่ได้รับ -> <อินพุต type = "อีเมล" placeolder = "ป้อนอีเมล"> </div> </form>
2) PULL DOWN SELECT
<form role = "form"> <div> <!-กล่องการเลือกแบบดรอปดาวน์บรรทัดเดียว-> <elect> <petion> 1 </ตัวเลือก> <pontion> 2 </ตัวเลือก> </select> </div> <div> <!
3) ฟิลด์ข้อความ textarea
ฟิลด์ข้อความเหมือนกับวิธีการใช้งานดั้งเดิมการตั้งค่าแถวสามารถกำหนดความสูงและการตั้งค่า Cols สามารถตั้งค่าความกว้างได้ แต่ถ้าชื่อคลาส "Form-Control" ถูกเพิ่มเข้าไปในองค์ประกอบ Textarea ไม่จำเป็นต้องตั้งค่าแอตทริบิวต์ Cols เนื่องจากการควบคุมรูปแบบสไตล์ "แบบฟอร์มควบคุม" ในเฟรมเวิร์กบูตสแตรปคือ 100% หรืออัตโนมัติ
<form role = "form"> <div> <!-rows = "3" ตั้งค่าความสูงสามบรรทัด-> <textarea rows = "3"> </textarea> </div> </form>
4) ช่องทำเครื่องหมาย
การจัดแนวตั้ง:
<form role = "form"> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = ""> ช่องทำเครื่องหมาย </label> </div> </dom>
การจัดเรียงแนวนอน:
<form role = "form"> <div> <label> <อินพุต type = "ช่องทำเครื่องหมาย" value = "ตัวเลือก 1"> CheckBox1 </label> <label> <อินพุต Type = "Cuptbox" value = "Option2"> CheckBox2 </label> </div>
5) วิทยุเลือกปุ่มเดี่ยว
การจัดแนวตั้ง:
<form role = "form"> <div> <label> <อินพุต type = "Radio" name = "ตัวเลือก Radios" id = "ตัวเลือก Radios1" value = "love" ตรวจสอบ> a </label> </div> <div> <!-ไม่ว่าจะเป็นช่องทำเครื่องหมายหรือวิทยุ </div> </form>
การจัดเรียงแนวนอน:
<form role = "form"> <div> <label> <อินพุต type = "Radio" value = "ตัวเลือก 1" name = "sex"> a </label> <label> <input type = "Radio" value = "optup2" name = "sex"> b </label> </div> </form>
หมายเหตุ: ช่องทำเครื่องหมายและฉลากถูกวางไว้ในคอนเทนเนอร์ที่เรียกว่า ".CheckBox"; วิทยุและฉลากถูกวางไว้ในภาชนะที่เรียกว่า ".radio"
3. สถานะการควบคุมแบบฟอร์ม bootstrap
1) สถานะโฟกัส
สถานะโฟกัสทำได้โดยการเพิ่มชื่อคลาสการควบคุมรูปแบบลงในอินพุต สถานะโฟกัสของการควบคุมแบบฟอร์มในเฟรมเวิร์กบูตสแตรปจะลบสไตล์เริ่มต้นของโครงร่างและเพิ่มเอฟเฟกต์เงาอีกครั้ง
<!-Form-horizontal บรรลุเอฟเฟกต์รูปแบบแนวนอน-> <form role = "form"> <div> <div> <อินพุต type = "text" placeholder = "สถานะโฟกัส"> </div> </div> </form>
2) ปิดการใช้งานสถานะ
เพียงเพิ่ม "ปิดใช้งาน" ลงในตัวควบคุมแบบฟอร์มที่ต้องปิดใช้งาน:
<input type = "text" placeholder = "ถูกปิดใช้งานไม่สามารถป้อนไม่ได้" ปิดใช้งาน>> ปิดใช้งาน>
3) สถานะการตรวจสอบ
สำหรับการตรวจสอบแบบฟอร์มคุณต้องจัดทำสไตล์การตรวจสอบ เอฟเฟกต์เหล่านี้มีอยู่ใน bootstrap:
เมื่อใช้งานคุณจะต้องเพิ่มชื่อคลาสสถานะที่สอดคล้องกับคอนเทนเนอร์แบบฟอร์ม
<form role = "form"> <div> <label for = "inputwarning1"> สถานะการเตือน </label> <อินพุต type = "text" id = "inputwarning1" placeholder = "สถานะคำเตือน"> </div> <div> <label for = "inputerror1> สำหรับ = "inputSuccess1"> สถานะความสำเร็จ </label> <อินพุต type = "text" id = "inputsuccess1" placeholder = "ความสำเร็จ"> </div> </form>
การเรนเดอร์มีดังนี้:
หากคุณต้องการให้แบบฟอร์มแสดงไอคอนในสถานะที่สอดคล้องกันคุณจะต้องเพิ่มชื่อคลาส "Has-Feedback" ในสถานะที่เกี่ยวข้อง (ชื่อคลาสนี้ควรมาพร้อมกับ "Has-error", "Has-Warning" และ "ประสบความสำเร็จ")
4. แบบฟอร์ม bootstrap
1) ปุ่มสไตล์ที่กำหนดเอง
<button type = "ปุ่ม"> ปุ่มพื้นฐาน </button> <button type = "ปุ่ม"> ปุ่มเริ่มต้น </button> <button type = "ปุ่ม"> ปุ่มหลัก </button> <button type = "ปุ่ม"> ปุ่มประสบความสำเร็จ </button> <button type = "ปุ่ม"> ปุ่ม </ปุ่ม "ปุ่ม" ปุ่ม "
การเรนเดอร์มีดังนี้:
2) ปุ่ม bootstrap รองรับหลายป้ายกำกับและปุ่มที่ทำโดยป้ายกำกับอื่น ๆ มีดังนี้:
<button type = "ปุ่ม"> ปุ่มแท็กปุ่ม </button> <อินพุต type = "subment" value = "ปุ่มแท็กอินพุต"/> <span> ปุ่มแท็ก </span> <div> ปุ่มแท็ก Div </div> <a href = "##"> ปุ่มแท็ก </a>
3) ขนาดปุ่ม
ควบคุมขนาดของปุ่มโดยผนวกชื่อคลาสเข้ากับปุ่มฐาน ".btn"
<button type = "ปุ่ม"> ปุ่มปกติ </button> <button type = "ปุ่ม"> ปุ่มขนาดใหญ่ </button> <button type = "ปุ่ม"> ปุ่มเล็ก ๆ </button>
4) ปุ่มบล็อก (ใช้เพิ่มเติมบนเทอร์มินัลมือถือ)
ปุ่มบล็อก: ความกว้างของปุ่มเติมเต็มคอนเทนเนอร์พาเรนต์ทั้งหมด (ความกว้าง: 100%) และจะไม่มีค่าการขยายและอัตรากำไรขั้นต้นใด ๆ
Bootstrap มีชื่อคลาส "BTN-block" ปุ่มสามารถใช้ชื่อคลาสนี้เพื่อใช้ปุ่มบล็อก (สำหรับรายละเอียดโปรดดูที่บรรทัดไฟล์ bootstrap.css 2340 ถึงบรรทัด 2353)
<button type = "ปุ่ม"> ปุ่มขนาดใหญ่ </button> <button type = "ปุ่ม"> ปุ่มปกติ </tond> <button type = "ปุ่ม"> ปุ่มเล็ก ๆ </button>
การเรนเดอร์มีดังนี้:
5. สถานะแบบฟอร์ม bootstrap
ใน bootstrap เอฟเฟกต์สถานะของปุ่มส่วนใหญ่แบ่งออกเป็นสองประเภท: สถานะที่ใช้งานและสถานะปิดใช้งาน
1) สถานะที่ใช้งานอยู่: ส่วนใหญ่มีสถานะช่วงล่างปุ่มหลายประเภท (: โฮเวอร์), คลิกสถานะ (: แอคทีฟ) และสถานะโฟกัส (: โฟกัส)
2) ปิดการใช้งานสถานะ
มีสองวิธีในการปิดการใช้งานปุ่ม:
วิธีที่ 1: เพิ่มแอตทริบิวต์ปิดใช้งานในแท็ก
วิธีที่ 2: เพิ่มชื่อคลาส "ปิดใช้งาน" ลงในฉลากองค์ประกอบ
ความแตกต่างหลักระหว่างทั้งสองคือ:
สไตล์ ".disabled" ไม่ได้ห้ามพฤติกรรมเริ่มต้นของปุ่ม วิธีการเพิ่มแอตทริบิวต์ "ปิดใช้งาน" ลงในฉลากองค์ประกอบสามารถห้ามพฤติกรรมเริ่มต้นขององค์ประกอบ
6. Bootstrap Image
ใน bootstrap มีสไตล์ต่อไปนี้สำหรับสไตล์ของภาพ:
วิธีใช้: เพียงเพิ่มชื่อคลาสที่สอดคล้องกันในแท็ก IMG ดังนี้:
<img src = "http://img.blog.csdn.net/20160726151432225"> <img src = "http://img.blog.csdn.net/201607261514322225" src = "http://img.blog.csdn.net/20160726151432225">
เอฟเฟกต์การทำงานมีดังนี้หรือดูหน้าต่างผลลัพธ์ทางด้านขวา:
7. ไอคอน bootstrap
Bootstrap มีไอคอนที่แตกต่างกัน 200 รายการดังนี้:
วิธีใช้: เพียงเพิ่มชื่อคลาสไอคอนที่เกี่ยวข้องลงในแท็กดังนี้:
<span> </span>
<span> </span>
หากคุณยังต้องการเรียนรู้อย่างลึก
ชุดของบทความ:
ครั้งแรกที่ฉันได้ติดต่อกับ Magical Bootstrap Basic Layout //www.vevb.com/article/89278.htm
ครั้งแรกที่ฉันติดต่อกับระบบ Bootstrap Grid Magical //www.vevb.com/article/89333.htm
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น