การใช้เฟรมเวิร์ก Bootstrap สำหรับการออกแบบและพัฒนาเป็นแนวโน้มที่ค่อนข้างเป็นที่นิยมในโลก เมื่อเพิ่มประสิทธิภาพผลิตภัณฑ์ใหม่ บริษัท ซอฟต์แวร์หลายแห่งจะเลือกกรอบการพัฒนานี้เนื่องจากข้อได้เปรียบที่ครอบคลุมใน JS และการควบคุม
เฟรมเวิร์ก Bootstrap เป็นเฟรมเวิร์กการออกแบบ UI Front-end มันมีอินเทอร์เฟซ UI แบบครบวงจรและทำให้กระบวนการออกแบบอินเตอร์เฟส UI ง่ายขึ้น (ข้อเสียคืออินเทอร์เฟซถูกปรับแต่งดังนั้นจึงไม่มีที่ว่างสำหรับการปรับ) โดยเฉพาะอย่างยิ่งเค้าโครงเวลาตอบสนองปัจจุบัน (ความเข้าใจของฉันคือหน้าใช้เลย์เอาต์ขององค์ประกอบหน้าต่างๆตามความละเอียดที่แตกต่างกัน) ซึ่งได้รับการสนับสนุนอย่างดีใน bootstrap ตราบใดที่มีการตั้งค่าคุณสมบัติเพียงแค่เค้าโครงเวลาตอบสนองสามารถนำไปใช้งานได้โดยอัตโนมัติซึ่งทำให้กระบวนการของอินเทอร์เฟซของโปรแกรมเมอร์ง่ายขึ้นอย่างมาก
ดังนั้นฉันใช้เฟรมเวิร์ก Bootstrap เพื่อใช้อินเทอร์เฟซต่อไปนี้ แม้ว่ามันจะง่าย แต่ก็ไม่ธรรมดา (ถ้าคุณต้องการที่จะใช้มันด้วยตัวเองฉันไม่รู้ว่ามันจะเป็นปีของเดือนลิงและม้า)
ทั้งหน้าแบ่งออกเป็นหลายส่วนซึ่งถูกนำไปใช้โดยใช้รหัสตัวอย่างบนเว็บไซต์ทางการของ Bootstrap และในที่สุดก็กลายเป็นหน้า แผนผังของแต่ละส่วนจะแสดงในรูปต่อไปนี้
ถัดไปอธิบายรหัสของแต่ละส่วนในทางกลับกัน
ก่อนอื่นสร้างหน้าว่างรหัสมีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "เนื้อหาที่เข้ากันได้กับ x-ua =" IE = edge "> <meta name =" viewport "เนื้อหา = name = "ผู้เขียน" content = ""> <title> bootstrap </title> <link rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[ถ้า lt ie 9]> <สคริปต์ src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <สคริปต์ src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! [endif]-> <style> .bs-docs-home พื้นหลัง-ภาพ: url (line.png); } </style> </head> <body> <script src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <สคริปต์ src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"> </script> </body> </html>
ในการใช้เฟรมเวิร์ก Bootstrap คุณต้องอ้างถึงไฟล์ Bootstrap Framework ในหน้า มีสี่ทั้งหมด: bootstrap.min.css, bootstrap-theme.min.css, jQuery-1.10.2.min.js, bootstrap.min.js
โดยการอ้างถึงไฟล์เหล่านี้เท่านั้นคุณสามารถใช้องค์ประกอบ UI ต่างๆที่จัดทำโดยเฟรมเวิร์ก Bootstrap
ถัดไปดังที่แสดงในรูปด้านบนอธิบายรหัสของแต่ละส่วนตามลำดับ
คำอธิบายด้านบน:
แนวคิดในการออกแบบทั้งหน้าคือการวางทั้งหน้าบนแผงควบคุมและข้อความที่อยู่ด้านบนคือส่วนหัวของพาเนล
หน้าของเฟรมเวิร์ก Bootstrap เป็นรูปแบบกริด 12 คอลัมน์ ดังนั้นฉันจึงแบ่งทั้งหน้าออกเป็นสามส่วน มีช่องว่างกว้าง 3 คอลัมน์ด้านซ้ายและขวาและ 6 คอลัมน์ขยายหนึ่งแผง (แผง)
รหัสมีดังนี้: ส่วนที่เหลือของรหัสอยู่ใน <div> </div> ตามลำดับ
<body> <div> <h1 style = "line-height: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> <strong> การสอบคะแนนการสอบคะแนนการสอบเทียบ </strong> </h3> </div> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js"
ข้อความแจ้ง
ข้อความพรอมต์ใช้องค์ประกอบการแจ้งเตือนในเฟรมเวิร์ก Bootstrap และรหัสมีดังนี้:
<div> <button type = "button" data-dismiss = "Alert" Aria-hidden = "true"> × </button> <strong> หมายเหตุ! </strong> คะแนนสำหรับเว็บไซต์นี้มาจากเว็บไซต์ทางการของ 12333
รูปแบบบัตรประจำตัวและปุ่มสอบถาม
แบบฟอร์มบัตรประจำตัวประชาชนและแบบฟอร์มบัญชีที่ตามมาควรอยู่ในรูปแบบเดียว รูปแบบตัวตนและปุ่มสอบถามเป็นกลุ่มขององค์ประกอบแบบฟอร์มที่ใช้เฟรมเวิร์ก bootstrap ใช้กลุ่มอินพุตเพื่อรวมกล่องข้อความและปุ่ม เฟรมเวิร์ก Bootstrap ให้เอฟเฟกต์เช่นลายน้ำและไฮไลท์ เพิ่มสีสันให้กับแบบฟอร์ม
<form role = "form" name = "form1"> <div> <label for = "idcard"> โปรดป้อนหมายเลข ID ของคุณ </label> <div> <อินพุต type = "text" id = "idcard" name = "idcard" placholder = "หมายเลข Idcard"> <span> > การสืบค้น </button> </span> </div> </form>
รูปแบบหัวเรื่อง
แบบฟอร์มบัญชียังเป็นกลุ่มขององค์ประกอบแบบฟอร์มที่ใช้เฟรมเวิร์ก Bootstrap ใช้กลุ่มอินพุตเพื่อรวมกล่องข้อความ (อินพุต) ปุ่ม (ปุ่ม) และรายการดรอปดาวน์ (UL)
คุณสามารถป้อนหัวเรื่องได้โดยตรงในกล่องข้อความหรือคุณสามารถเลือกตัวแบบในเมนูแบบเลื่อนลงได้ การใช้งานที่เฉพาะเจาะจงคือการใช้ $ ('#หัวเรื่อง'). val ('ผู้ให้บริการคอมพิวเตอร์') และรหัสอื่น ๆ เพื่อเปลี่ยนเนื้อหาในกล่องข้อความในเหตุการณ์คลิก (คลิก) ของไฮเปอร์ลิงก์ (A) แบบฟอร์มบัญชีอยู่ด้านล่างแบบฟอร์ม ID ภายในแบบฟอร์ม (แบบฟอร์ม)
รหัสมีดังนี้:
<div> <label for = "subject"> โปรดป้อนหัวเรื่องที่คุณกำลังมองหา </label> <div> <อินพุต type = "text" id = "subject" name = "subject" placeholder = "บัญชี blank subject หมายถึงการสอบถามวิชาทั้งหมด"> <div> <button type = "ปุ่ม" onclick = "$ ('#subject'). val ('ผู้ให้บริการคอมพิวเตอร์');"> ผู้ให้บริการคอมพิวเตอร์ </a> </li> <li> <a href = "#" onclick = "$ ('#subject'). val ('การออกแบบเว็บ');"> การออกแบบเว็บ </a> </li> <li> onclick = "$ ('#subject'). val ('มัลติมีเดีย');"> มัลติมีเดีย </a> </li></ul> </div> </div> </div>ข้อมูลข้อผิดพลาดแบบสอบถาม
เมื่อปุ่มสอบถามถูกคลิกและไม่พบบันทึกข้อความแสดงข้อผิดพลาดแบบสอบถามจะปรากฏขึ้น เช่นเดียวกับข้อความพรอมต์ก่อนหน้านี้ใช้ส่วนประกอบการแจ้งเตือนในเฟรมเวิร์ก Bootstrap
ไม่ว่าข้อมูลนี้จะแสดงถึงความร่วมมือของรหัสพลวัตพื้นหลังหรือไม่ รหัสไดนามิกตัดสินใจว่าจะแสดงข้อมูลตามผลลัพธ์การสืบค้นหรือไม่ (หากไม่มีบันทึกข้อมูลจะปรากฏขึ้น) รหัสไดนามิกไม่ได้กล่าวถึงในบทความนี้
ตำแหน่งอยู่ด้านหลังแบบฟอร์มและรหัสมีดังนี้:
<div> <button type = "button" data-dismiss = "Alert" Aria-hidden = "true"> × </button> <strong> หมายเหตุ! </strong> ไม่พบผลลัพธ์โปรดตรวจสอบหมายเลข ID และวิชาและตรวจสอบอีกครั้ง </div>
รูปแบบเกรด
เมื่อมีการคลิกปุ่มแบบสอบถามฟอร์มคะแนนจะปรากฏขึ้นเมื่อพบบันทึก ในทำนองเดียวกันไม่ว่าจะแสดงหรือไม่ก็ต้องใช้ความร่วมมือของรหัสไดนามิกในพื้นหลัง
ข้อความแสดงข้อผิดพลาดและแบบฟอร์มคะแนนเพียงครั้งเดียวเท่านั้นที่สามารถปรากฏขึ้นได้ในเวลาเดียวกัน
รหัสมีดังนี้:
<div> <table cellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "สี: สีขาว"> วิชา </span> </th> <th scope = "col"> <span style = "สีขาว"> <td> ผู้ให้บริการคอมพิวเตอร์ </td> <td> ยอดเยี่ยม </td> </tr> <tr> <td> ผู้ให้บริการมัลติมีเดีย </td> <td> ดี </td> </tr> <tr> <td> การออกแบบเว็บ </td> <td> ล้มเหลว </td>
หน้านี้ใช้งานโดยใช้เฟรมเวิร์ก Bootstrap ต้องขอบคุณพลังของเฟรมเวิร์ก Bootstrap การออกแบบ UI นั้นไม่ใช่งานที่ยากอีกต่อไป แต่ Bootstrap เป็นเพียงกรอบ UI และความเป็นเลิศนั้นขึ้นอยู่กับความร่วมมือของรหัสไดนามิกในพื้นหลัง
URL ต่อไปนี้เป็นฟังก์ชั่นของผู้เขียนโดยใช้อินเทอร์เฟซด้านบนรวมถึงรหัสแบ็กเอนด์ไดนามิก (PHP) เพื่อรับรู้การสืบค้นของคะแนนการทดสอบทักษะอาชีพ (เซี่ยงไฮ้เท่านั้น) คุณสามารถไปดูและแสดงความคิดเห็นที่มีค่า (ถูกต้องเป็นเวลา 1 เดือน)
http://bertin.sturgeon.mopaas.com/
รหัส UI ที่สมบูรณ์มีดังนี้:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta http-equiv = "เนื้อหาที่เข้ากันได้กับ x-ua =" IE = edge "> <meta name =" viewport "เนื้อหา = name = "ผู้เขียน" content = ""> <title> bootstrap </title> <link rel = "stylesheet" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap.min.css" href = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/css/bootstrap-theme.min.css"> <!-[ถ้า lt ie 9]> <สคริปต์ src = "../../ docs-assets/js/ie8-responsive-file-warning.js"> </script> <! 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <สคริปต์ src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! [endif]-> <style> .bs-docs-home พื้นหลัง-ภาพ: url (line.png); } </style> </head> <body> <div> <h1 style = "line-height: 2em;"> </h1> <br/> <div> <div> </div> <div> <div> <h3> Aria-hidden = "true"> × </button> <strong> หมายเหตุ! </strong> คะแนนที่สอบถามในเว็บไซต์นี้มาจากเว็บไซต์อย่างเป็นทางการของ 12333 สำหรับรายละเอียดโปรดปรึกษาเว็บไซต์ทางการ </div> <form role = "form" form1 "> <dab> <label for =" iDcard " placeHolder = "หมายเลขรหัส"> <pan> <button type = "ปุ่ม" onclick = "form1.submit ();" > Query </button> </span> </div> <div> <label for = "subject"> โปรดป้อนหัวเรื่องที่คุณต้องการสอบถาม </label> <div> <อินพุต type = "text" id = "subject" name = "subject" placeholder = "บัญชีที่ว่างเปล่า href = "#" onclick = "$ ('#หัวเรื่อง'). val ('ผู้ให้บริการคอมพิวเตอร์');"> ผู้ให้บริการคอมพิวเตอร์ </a> </li> <li> <a href = "#" onclick = "$ (#หัวเรื่อง ') val (' การออกแบบเว็บ '); onclick = "$ ('#subject'). val ('มัลติมีเดีย');"> มัลติมีเดีย </a> </li> </ul> </div> </div> </form> <div> <button type = "ปุ่ม" data-dismiss = "การแจ้งเตือน" <div> <table cellpacing = "0" cellpadding = "0"> <tr> <th scope = "col"> <span style = "สี: สีขาว"> วิชา </span> </th> <th scope = "col"> <span style = "สีขาว"> ผู้ประกอบการ </td> <td> ยอดเยี่ยม </td> </tr> <td> ผู้ให้บริการมัลติมีเดีย </td> <td> ดี </td> </tr> <td> การออกแบบเว็บ </td> <td> ล้มเหลว </td> </tr> src = "https://code.jquery.com/jquery-1.10.2.min.js"> </script> <script src = "http://cdn.bootcss.com/twitter-bootstrap/3.0.1/js/bootstrap.min.js.js"ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับการใช้เฟรมเวิร์ก Bootstrap เพื่อสร้างรหัสตัวอย่างอินเตอร์เฟสสำหรับหน้าสอบถามที่แนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!