ด้วยจำนวนผู้ใช้มือถือที่เพิ่มขึ้นสถาปัตยกรรมระบบเว็บแบบดั้งเดิมไม่สามารถใช้งานได้กับการใช้เทอร์มินัลมือถือจำนวนมาก ในที่ทำงานฉันจะพบว่าลูกค้าจำนวนมากมีความจำเป็นในการใช้ระบบการจัดการบนเทอร์มินัลมือถือเช่นโทรศัพท์มือถือและแท็บเล็ต หากหน้าเว็บตอบสนองที่สอดคล้องกันได้รับการพัฒนาแยกต่างหากสำหรับแต่ละเทอร์มินัลสิ่งนี้จะเพิ่มค่าใช้จ่ายของโครงการและแรงกดดันต่อนักพัฒนาได้อย่างหลีกเลี่ยงไม่ได้ ในเวลานี้มีความจำเป็นที่จะต้องเข้าใจเค้าโครงที่ตอบสนองซึ่งเกิดมาเพื่อแก้ปัญหาหลายขั้ว ครั้งนี้เราแนะนำ Bootstrap ที่มีน้ำหนักเบาโอเพ่นซอร์สและฟรี
สร้างสภาพแวดล้อมการพัฒนา
ก่อนอื่นดาวน์โหลดแพ็คเกจซอร์สโค้ด boostrap ของเว็บไซต์ทางการ: http://www.bootcss.com/ ในการพัฒนาโครงการอย่างง่ายคุณไม่จำเป็นต้องเพิ่ม CSS, JS, แบบอักษร ฯลฯ ทั้งหมดในซอร์สโค้ด ตามความต้องการของโครงการของคุณคุณสามารถปรับสภาพแวดล้อมที่คุณต้องการ
ไฟล์ที่ต้องการมีดังนี้: jQuery.min.js, bootstrap.min.js, bootstrap.css หากคุณต้องการใช้รูปแบบตัวอักษรบางอย่างคุณต้องเพิ่มไฟล์ที่เกี่ยวข้องกับฟอนต์ดังที่แสดงในรูปด้านล่าง:
[หมายเหตุ] เมื่อโหลด JS คุณต้องโหลด jQuery.min.js ก่อนเพราะใน bootstrap.min.js คุณจะใช้วิธีการที่เกี่ยวข้องกับ jQuery เช่น boostrap.min.js ขึ้นอยู่กับ jQuery.min.js
ทดสอบสภาพแวดล้อม bootsrap
เขียนดัชนีไฟล์ทดสอบ html เนื้อหาไฟล์ทดสอบมีดังนี้:
<! doctype html> <html> <head> <title> ทดสอบสภาพแวดล้อม boostrap </title> <link rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" SRC = " type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
ข้างต้นเป็นสภาพแวดล้อมการพัฒนา bootsrap มันง่ายมาก!
สิ่งที่คุณต้องรู้เมื่อใช้ boostrap คือระบบแรสเตอร์ของ Boostrap มันเป็นเพราะระบบกริดนี้ที่ทำให้เข้ากันได้ดีขึ้นกับอุปกรณ์เทอร์มินัลที่มีความละเอียดที่แตกต่างกัน
เว็บไซต์อย่างเป็นทางการของระบบกริดมีการแนะนำที่ชัดเจน: http://v3.bootcss.com/css/ ภาพต่อไปนี้ของเว็บไซต์ทางการตั้งอยู่:
เมื่อใช้ boostrap เราส่วนใหญ่จะใช้สไตล์บางอย่างที่กำหนดไว้ในนั้น สิ่งนี้มีประโยชน์สำหรับโปรแกรมที่ไม่มีความสามารถในการศิลปะสร้างหน้าค่อนข้างดี
เมื่อใช้ bootstrap จริง ๆ เรามักจะตรวจสอบเอกสารความช่วยเหลือบางอย่างบนเว็บไซต์ทางการ: http://v3.bootcss.com/css/#tables
โดยส่วนตัวแล้วฉันขอแนะนำให้คุณคัดลอกรหัสที่เกี่ยวข้องโดยตรงไปยังหน้าเว็บของคุณเองในตัวอย่างของเว็บไซต์ทางการแล้วทำการปรับเปลี่ยนที่เกี่ยวข้องตามสิ่งนี้ ด้วยวิธีนี้ความเร็วในการพัฒนาจะเร็วขึ้นและความแม่นยำจะสูงขึ้น
สาธิตสไตล์ boostrap --- รูปแบบตาราง
<! doctype html> <html> <head> <dite> สภาพแวดล้อมทดสอบ boostrap </title> <link rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/jaVascript" src = " type = "text/javascript" src = "./ js/bootstrap.min.js"> </script> <body> <body> <body> <table> <td> <td> รูปแบบการทดสอบ </td> <td> รูปแบบทดสอบ </td> <td> Form </td> <td> ทดสอบ </td> <td> ทดสอบ </td> </tr> <tr> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> การทดสอบ </td> การทดสอบ <td> <tr> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td> <td> ทดสอบ </td>
ผลการดูหน้าเว็บมีดังนี้:
มีการแนะนำคุณลักษณะในชั้นเรียน:
1) ตารางบวกนี้มีสไตล์ตาราง bootsrap แล้ว
2) Table-Hover ระบุว่าพื้นหลังแถวของเมาส์โต๊ะยังคงสว่าง
3) ตารางตารางที่มีเส้นขอบปรากฏในเส้นขอบ
4) ลายตารางลายตาราง
[หมายเหตุ] เมื่อมีการเพิ่มแอตทริบิวต์หลายรายการเข้าด้วยกันจะมีช่องว่างระหว่างแต่ละแอตทริบิวต์
2. ปุ่ม
<!-ปุ่ม-> <a href = "#" role = "ปุ่ม"> ลิงก์ </a> <ปุ่มประเภท = "ส่ง"> ปุ่ม </ปุ่ม> <อินพุตประเภท = "ปุ่ม" value = "อินพุต"> <อินพุตประเภท = "ส่ง" value = "ส่ง"> <! type = "ปุ่ม"> (การตั้งค่า) หลัก </button> <!-หมายถึงการกระทำที่ประสบความสำเร็จหรือเป็นบวก-> <ปุ่มประเภท = "ปุ่ม"> (ประสบความสำเร็จ) ความสำเร็จ </button> <!-ปุ่มบริบทสำหรับข้อความการแจ้งเตือนข้อมูล-> <button type = "ปุ่ม" การดำเนินการ-> <button type = "ปุ่ม"> (อันตราย) อันตราย </button> <!-deemphasize ปุ่มโดยทำให้ดูเหมือนลิงค์ในขณะที่รักษาพฤติกรรมปุ่ม-> <button type = "ปุ่ม"> (ลิงก์) ลิงค์ </button>
ผลลัพธ์ของหน้าเว็บมีดังนี้:
สำหรับสไตล์และส่วนประกอบอื่น ๆ อีกมากมายขอแนะนำให้อ้างถึงเอกสารช่วยเหลืออย่างเป็นทางการ
สรุป
บทความนี้เป็นแนวทางซึ่งแนะนำ boostrap สั้น ๆ สำหรับและวิธีการใช้งาน ไม่มีรายการโดยละเอียดของส่วนประกอบและสไตล์ทั้งหมด แต่ ... อ่าน!
นี่เป็นบทความที่น่าอัศจรรย์มากคุณต้องคลิกและดู: การสอนการเรียนรู้การเรียนรู้ที่คุ้มค่าแก่การแบ่งปันและการรวบรวม
หากคุณยังต้องการเรียนรู้อย่างลึก
ฉันหวังว่าผู้ที่สนใจ bootstrap สามารถทดสอบผลกระทบของแต่ละสไตล์และวิธีการใช้แต่ละองค์ประกอบด้วยตัวเองและรู้สึกถึงความสนุกที่เกิดจาก bootstrap อย่างแท้จริง