metronic เป็นธีมแผงควบคุมผู้ดูแลระบบขั้นสูงที่ใช้ Bootstrap 3.x ขึ้นอยู่กับกรอบ Bootstrap3 ปรับแต่งได้สูงและใช้งานง่าย เหมาะสำหรับความละเอียดหน้าจอจำนวนมากตั้งแต่อุปกรณ์พกพาขนาดเล็กไปจนถึงคอมพิวเตอร์เดสก์ท็อปขนาดใหญ่ ประกอบด้วย 7 ธีม, หน้าตัวอย่างสูงสุดประมาณ 100 หน้า, เอฟเฟ็กต์การแสดงหน้าที่หลากหลายมาก รวมถึงแบบฟอร์ม ตาราง แผนที่ ปฏิทิน... และอื่นๆ metronic สามารถใช้กับเว็บแอปพลิเคชันทุกประเภท: Metronic สามารถใช้กับโปรแกรมเว็บไซต์รูปแบบต่างๆ เช่น แบ็กเอนด์ผู้ดูแลระบบ, เครื่องมือการจัดการ, แบ็กเอนด์อีคอมเมิร์ซ, CMS, CRM, SAAS, เว็บไซต์บริษัท, เว็บไซต์อีคอมเมิร์ซ, ธุรกิจ เว็บไซต์, เว็บไซต์แสดงข้อมูล, บล็อก ฯลฯ การออกแบบที่เรียบหรู สะอาดตาของ Metronic ช่วยให้เว็บไซต์ของคุณดูเป็นมิตรและน่าดึงดูด เทมเพลต Metronic มีปลั๊กอินและองค์ประกอบ UI จำนวนมาก และสามารถแสดงผลได้ตามปกติบนเบราว์เซอร์ทั่วไป อุปกรณ์แท็บเล็ต และอุปกรณ์อัจฉริยะ ความเข้ากันได้ของเบราว์เซอร์: iE8, IE9, IE10, IE11, firefox, Safari, Opera, Chrome รู้สึกคล้ายกันมาก (free-AdminLTE) ฉันไม่ค่อยได้ทำ front-end development บทความนี้ใช้เป็นกระบวนการจดบันทึกและเรียนรู้ร่วมกัน ขอให้ผู้อ่านอย่าใช้ความรุนแรงในการอ่าน การเตรียมซอฟต์แวร์ที่อาจล้มล้างแนวคิดส่วนหน้าของคุณ: วัตถุประสงค์และการรับประกัน VS2013 วัตถุประสงค์หลัก: เทมเพลตการจัดการแบบรวม จำเป็นสำหรับการสร้างแบ็กเอนด์ระบบการจัดการ เช่น CMS, HR, OA และระบบการจัดการอื่นๆ ซอฟต์แวร์แฟนซีนี้สามารถขายได้มากกว่าซอฟต์แวร์เดียวกันถึง 40% ด้วยอินเทอร์เฟซที่เข้มงวด มันสามารถรวมเข้ากับส่วนหน้าของทุกภาษา รวมถึง asp.net, JSP และ PHP กระแสหลัก (พร้อม Bootstrap และ Metronic เป็นการสนับสนุนทางเทคนิคที่อัปเดต เว้นแต่ทีม Tuitu จะถูกยกเลิก) ) ภาพหน้าจอซอฟต์แวร์ไดเร็กทอรี 1 ตามชื่อไดเร็กทอรี จะเห็นได้ว่าประกอบด้วยเอกสาร (เอกสารประกอบ) ทรัพยากร (ทรัพยากร) เริ่มต้น (เริ่มต้น) ธีม (ธีมและ theme_trl) ระบุว่า readme.txt เปิด readme และเราจะเห็นว่าเราจำเป็นต้องใช้ธีมเท่านั้น โฟลเดอร์นี้จะทำ theme_rtl รองรับ RTL ซึ่งทำลายนิสัยการเขียนโปรแกรมของฉัน คุณสามารถเรียกใช้เอฟเฟกต์ดัชนีภายใต้ธีม -> เทมเพลต -> adminX ตามลำดับ อย่างไรก็ตาม ฉันพบว่าผู้ดูแลระบบแต่ละคนสอดคล้องกับ admin_material_design ตาม readme admin_material_design สอดคล้องกับเวอร์ชัน AngularJS ฉันไม่รู้วิธีเปรียบเทียบ เราไม่เข้าใจ AngularJS ดังนั้นเราจึงใช้ซอฟต์แวร์ adminX เวอร์ชันปกติเท่านั้น ภาพหน้าจอ 2 ขึ้นไปเป็นภาพหน้าจอบางส่วน การตั้งค่าทางด้านขวาสามารถกำหนดวิธีการจัดวางได้ ภาพหน้าจอของซอฟต์แวร์ 3. ซูมออกเบราว์เซอร์เพื่อดูเอฟเฟกต์บนแท็บเล็ตเช่นกัน รายการคุณสมบัติแบบเต็ม การออกแบบสไตล์ Metro ที่สะอาด ใช้งานง่าย และตอบสนองได้อย่างเต็มที่ (ใช้งานได้กับเบราว์เซอร์หลักๆ แท็บเล็ต และใช่) หน้าเทมเพลตที่ถูกต้องมากกว่า 500 หน้า Bootstrap 3.3.5 เฟรมเวิร์ก jQuery ธีมสี 1.10.26 รองรับ Sass แบบเต็ม รองรับ RTL เต็มรูปแบบ รหัสที่เป็นมิตรกับนักพัฒนา Google เปิดแบบอักษร Sans ภาษา แถบสลับ เมนูหลายระดับ เมนูขนาดใหญ่แนวนอน แดชบอร์ดอีคอมเมิร์ซ มุมมองคำสั่งซื้อผลิตภัณฑ์ รูปแบบการแก้ไขผลิตภัณฑ์ผลิตภัณฑ์ รูปแบบชื่อเริ่มต้นคงที่ แสดง/ซ่อนแถบด้านข้าง แถบด้านข้างแนวนอน เมนู เมนูแนวนอน หน้าเว็บ ตัวอย่าง เทมเพลตอีเมลอเนกประสงค์ กำลังโหลดเนื้อหาผ่านแถบด้านข้าง AJAX ปิดหน้า ตัวอย่างหน้าคงที่แถบด้านข้าง ตัวอย่างหน้าว่าง ตัวอย่างหน้าชนิดบรรจุกล่อง ตัวอย่างเค้าโครงหน้าชนิดบรรจุกล่องที่ไม่ตอบสนอง คุณสมบัติส่วนต่อประสานกับผู้ใช้ แท็กที่กำหนดเองและเมโทรหีบเพลง ปุ่มมีสไตล์ องค์ประกอบของแบบฟอร์ม สัญลักษณ์สัญลักษณ์ แบบอักษรรวม (แบบอักษรที่ยอดเยี่ยม ไอคอนที่ยอดเยี่ยมพร้อมเวอร์ชัน 3.2.0) แผนภูมิ ( เปิด jQuery), แป้นหมุนวงกลม (jQuery Knobs), แถบเลื่อนสไตล์เมโทร (jQuery UI), ปุ่มตัวเลือกและช่องทำเครื่องหมาย Box Metro Style (jQuery Uniform) การแจ้งเตือนแบบติดหนึบ (jQuery Exchange) ปุ่มสลับแบบกำหนดเองแบบเร้าใจ (ปุ่มเปิด) jQuery UI Model สไตล์ Windows 8 ไทล์ การแจ้งเตือน Toastr มุมมองต้นไม้แบบรวม (ต้นไม้ Bootstrap) รายการที่ซ้อนกันแบบรวม (jQuery ซ้อน) ตัวเลื่อนช่วงอิออน ตัวเลื่อนช่วง noui ตัวเลื่อนช่วงวงกลม ปุ่มหมุนหมายเลข แถบความคืบหน้าสำหรับอินเทอร์เฟซผู้ใช้ (jQuery blockUI) อินพุตป้ายกำกับ (อินพุตป้ายกำกับ jQuery) ตัวเลือกวันที่ของแบบฟอร์ม (ตัวเลือกวันที่บูตสแตรป ) เครื่องมือเลือกเวลา (เครื่องมือเลือกเวลาบูตสแตรป) เครื่องมือเลือกเวลาหน้าปัดนาฬิกา (เครื่องมือเลือกเวลานาฬิกาบูตสแตรป) เครื่องมือเลือกช่วงวันที่ (เครื่องมือเลือกช่วงวันที่บูตสแตรป) เครื่องมือเลือกสี (เครื่องมือเลือกสีบูตสแตรป) 2 เมนูแบบเลื่อนลงเลือกแบบเลื่อนลงเลือกแบบกำหนดเอง (เลือกบูตสแตรป) เลือกหลายรายการ สวิตช์ยกอัตโนมัติ การป้อนที่อยู่ IP แบบหมุน การป้อนข้อมูลมาสก์ การป้อนแท็ก การป้อนไฟล์ขั้นสูง โปรแกรมแก้ไข WYSIWYG ในตัว (bootstraps wysihtml5 และ CKEditor) การควบคุมแบบฟอร์มไม่จำกัด เค้าโครงแบบฟอร์มขั้นสูง (2 คอลัมน์บวกขอบ การแยกแถว แถบ แถบแท็ก) การตรวจสอบแบบฟอร์มล่วงหน้า (ปลั๊กอินการตรวจสอบแบบฟอร์ม jQuery) รายการแบบฟอร์มปฏิทินแบบเต็มที่ครอบคลุมสำหรับหน้าจอล็อค (ปฏิทินที่สมบูรณ์ของ jQuery)