Bootstrap จาก Twitter เป็นเฟรมเวิร์กส่วนหน้ายอดนิยมมากที่สุดในปัจจุบัน Bootstrap ขึ้นอยู่กับ HTML, CSS และ JavaScript มันง่ายและยืดหยุ่นทำให้การพัฒนาเว็บเร็วขึ้น
ประเด็นสำคัญสำหรับการเรียนรู้:
1. แบบฟอร์ม
2. รูปภาพ
ในบทเรียนนี้เราส่วนใหญ่เรียนรู้เกี่ยวกับรูปแบบ bootstrap และฟังก์ชั่นภาพและแสดงเอฟเฟกต์ที่หลากหลายผ่านคำจำกัดความ CSS ในตัว
หนึ่ง. รูปร่าง
Bootstrap มีรูปแบบที่หลากหลายสำหรับนักพัฒนาที่จะใช้
1. รูปแบบพื้นฐาน
// ใช้สไตล์ฟอร์มพื้นฐาน <form> <divel
หมายเหตุ: รูปแบบที่ถูกต้องสามารถกำหนดได้หากประเภทของกล่องอินพุตถูกตั้งค่าอย่างถูกต้อง การควบคุมกล่องอินพุตที่รองรับ ได้แก่ : ข้อความ, รหัสผ่าน, DateTime, DateTime-Local, วันที่, เดือน, เวลา, สัปดาห์, หมายเลข, อีเมล, URL, การค้นหา, โทรและสี
2. ฟอร์มแบบอินไลน์
// ให้แบบฟอร์มถูกจัดตำแหน่งและลอยตัวและทำตัวเป็นโครงสร้างบล็อกอินไลน์แบบอินไลน์ <form>
หมายเหตุ: เมื่อน้อยกว่า 768px สไตล์พิเศษจะได้รับการฟื้นฟู
3. การจัดกลุ่มแบบฟอร์ม
// เพิ่มชิ้นส่วนก่อนและหลัง <div> <div> ￥ </div> <อินพุต type = "text"> <div> .00 </div> </div>
4. การจัดเรียงแนวนอน
// เก็บองค์ประกอบไว้ในแบบฟอร์มที่จัดเรียงในแนวนอน <Form> <divel
หมายเหตุ: ใช้ระบบ COL-SM Raster ที่นี่และบทต่อไปนี้จะมุ่งเน้นไปที่การอธิบายในขณะที่ตัวควบคุมฉลากแสดงถึงการซิงโครไนซ์กับสไตล์องค์ประกอบหลัก
5. กล่องกาเครื่องหมายและกล่องวิทยุ
// ตั้งค่าช่องทำเครื่องหมายบนบรรทัด <div> <dable> <อินพุต type = "ช่องทำเครื่องหมาย"> กีฬา </label> </div> <dively <dable> <อินพุตประเภท = "ช่องทำเครื่องหมาย"> เพลง </label> </div> // ตั้งค่าช่องทำเครื่องหมายที่ปิดใช้งาน <dabled> type = "ช่องทำเครื่องหมาย"> Sports </label> <label> <อินพุต type = "ช่องทำเครื่องหมาย" ปิดการใช้งาน> เพลง </label> // ตั้งค่ากล่องวิทยุ <div> <dable> <อินพุต type = "Radio" name = "sex" ปิดใช้งาน> male </label> </div>
6. รายการดรอปดาวน์
// ตั้งค่ารายการดร็อปดาวน์ <elect> <pontion> 1 </pontion> <pontion> 2 </opovie> <pontion> 3 </potion> <pontion> 4 </opovie
7. ตรวจสอบสถานะ
// ตั้งค่าเป็นสถานะข้อผิดพลาด <div>
หมายเหตุ: มีสถานะอื่น ๆ ดังนี้:
คำอธิบายสไตล์มีสถานะข้อผิดพลาดข้อผิดพลาดสถานะความสำเร็จของการประสบความสำเร็จมีสถานะเตือนการเตือนภัย // การซิงโครไนซ์แท็กฉลากสถานะที่สอดคล้องกัน <darble> อินพุตที่ประสบความสำเร็จ </label>
8. เพิ่มไอคอนพิเศษ
// ไอคอนข้อความในตัวที่ด้านขวาของกล่องข้อความ <div> <label> อีเมล </lable> <อินพุต type = "อีเมล"> <span> </span> </div>
หมายเหตุ: นอกเหนือจาก Glyphicon-OK แล้วยังมีหลายตารางด้านล่าง:
สไตล์คำอธิบาย GLYPHICON-OK สถานะความสำเร็จสถานะ GLYPHICON-WARNING SIGN SIGN STATUS สถานะ GLYPHICON-REMOVE ARROT
9. ควบคุมขนาด
// จากขนาดใหญ่ถึงเล็ก <อินพุต type = "รหัสผ่าน"> <อินพุต type = "รหัสผ่าน"> <อินพุต type = "รหัสผ่าน">
หมายเหตุ: คุณยังสามารถตั้งค่าองค์ประกอบหลักแบบฟอร์ม-กลุ่ม LG และ FORM-GROUP-SM เพื่อปรับ
สอง. รูปภาพ
Bootstrap ให้รูปแบบภาพที่หลากหลายสำหรับนักพัฒนาที่จะใช้
1. รูปร่างของภาพ
// สามรูปร่าง <img src = "img/pic.png"> <img src = "img/pic.png"> <img src = "img/pic.png"> // ภาพตอบสนอง <img src = "img/pic.png">
ด้านบนเป็นเนื้อหาที่เกี่ยวข้องกับแบบฟอร์ม bootstrap และรูปภาพที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน!