ما هو bootstrap؟
Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
تاريخ
تم تطوير Bootstrap بواسطة Mark Otto من Twitter و Jacob Thornton. Bootstrap هو منتج مفتوح المصدر صدر على Github في أغسطس 2011.
تركز هذه المقالة على تقديم البرنامج التعليمي التمهيدي الصفر الصفر (2). التفاصيل المحددة هي كما يلي:
مواقع الويب التي تراجع المعلومات بشكل متكرر أثناء العملية:
http://www.w3school.com.cn/ هذا موقع ويب أنشأه تحالف W3C لنشر معيار W3C. هناك العديد من التقنيات على جانب الويب ، ويمكنك مشاهدتها كموسوعة لتكنولوجيا الويب.
http://v3.bootcss.com/ لا داعي للقول ، وثيقة bootstrap3 الرسمية
http://www.runoob.com/ هذا يشبه في الواقع W3School ، لكنه أكثر تعقيدًا من W3School. يتم ترجمة الكثير من المحتوى من موقع W3C English الأصلي والمستندات الإنجليزية الرسمية لـ Bootstrap الأصلي ، لكنني أشعر أن جودة ترجمتها أعلى (لأن أول موقعين تم ترجمتهما لهما بصراحة) ، وبعض الحالات أسهل في الفهم.
بدون مزيد من اللغط ، لنبدأ:
(1) تحقيق الأهداف بوضوح
كما هو موضح في الشكل أدناه ، هذا موقع ويب بسيط نريد تنفيذه. التصميم بسيط وليس هناك تأثير رائع. ومع ذلك ، من الضروري تنفيذ وظيفة: اقرأ المعلومات ذات الصلة من ملف JSON (يمكنك التحقق من موقع الويب أعلاه لمعرفة JSON) وعرضها على موقع الويب.
محتوى ملف JSON:
{"class 001": {"Xiao Wang": {"الجنس": "ذكر" ، "العمر": "18" ، "الاهتمام": "كرة القدم" ، "مسقط رأسه": "شنغهاي"} ، 002 ": {" Xiao Cai ": {" الجنس ":" أنثى "،" العمر ":" 19 "،" الاهتمام ":" الرقص "،" مسقط رأسه ":" Gaoxiong "}} ، "Taibei"}} ، "Class 005": {"Xiao Zhang": {"الجنس": "ذكر" ، "العمر": "20" ، "الاهتمام": "Running" ، "Hometown": "Guangzhou"}}}}}الآن:
تَخطِيط:
هناك ثلاث كتل رئيسية: الجانب الأيسر من السطر الأول هو قائمة الفصل ، والجانب الأيمن من السطر الأول هو قائمة اسم زملاء الدراسة ، والخط الثاني هو المعلومات ذات الصلة لزملاء الفصل.
وظيفة:
1. انقر فوق فصل دراسي في قائمة الفصل لتحديث الطلاب في الفصل ديناميكيًا في قائمة الفصل ، ويمكنهم تحديد الفصل.
2. انقر على زميل في قائمة زميله وعرض معلومات زميل في الفصل الدراسي على السطر الثاني. يمكن عرض معلومات زميل واحد فقط في وقت واحد.
(2) التقنيات المطلوبة للتحليل
تَخطِيط:
bootstrap: يستخدم لتنفيذ هذا التصميم البسيط ثنائي الصفوف ، وكذلك فحص أعمدة الفئة ، وقضبان التمرير (بعضها سهل التنفيذ مباشرة مع bootstrap ، في حين أن البعض الآخر لا يمكن.
وظيفة:
استخدم JavaScript و Ajax لتحقيق الحصول على البيانات والتفاعل الديناميكي (في طريقة التحديث المحلية).
(3) تحليل الاختيار الفني
1. تنفيذ التصميم.
من خلال البحث عن الوثائق (http://www.runoob.com/bootstrap/bootstrap-grid-system-example3.html) ، وجدت أن bootstrap تم وضعه باستخدام نظام النقطية. من خلال تحديد سمات فئة محددة لـ DIV ، يمكنني تحقيق تأثير التصميم الذي أريده. ويمكنك وضع تأثيرات مختلفة على الهواتف المحمولة والأجهزة اللوحية وأجهزة الكمبيوتر المكتبية. يمكن العثور على سمات الفئة لعلامات HTML وما هي علامات HTML على W3School.
تجدر الإشارة إلى أن سمات فئة العنصر يمكن أن تحتوي على سمات فئة متعددة.
على سبيل المثال: <div rob = "group" aria-label = "..." id = "btn-group-vertical-classes">
استخدم فترات "Space" بين سمات مختلفة ، صدقوني ، سيسمح لك ذلك بكتابة نصوص JavaScript بسهولة وضبط CSS.
2. إدراك الترتيب الرأسي لأرقام الفصل والاختيارات المتعددة.
تحقق من http://www.runoob.com/bootstrap/bootstrap-button-groups.html لمعرفة كيفية إعداد مجموعات الأزرار العمودية. أي ، قم بتعيين فئة DIV حيث توجد مجموعة الأزرار في BTN-Group-etterical ، بحيث تصبح الحاوية لتخزين مجموعة الأزرار.
تحقق من http://www.runoob.com/bootstrap/bootstrap-button-plugin.html ومعرفة كيفية إجراء مجموعة الأزرار. يتم التنفيذ عن طريق إضافة بيانات بيانات البيانات toggle = "الأزرار" إلى DIV من سمة الفئة إلى BTN-Group.
3. قم بتنفيذ زوايا الزر المراد إعادة تعريفها من الزوايا المستديرة إلى الزوايا اليمنى ، وإضافة أشرطة التمرير إلى مجموعة الأزرار ، وإضافة قيود إلى النص المعروض على الزر بحيث لا يتجاوز الزر. يتم عرض الجزء الزائد على أنه "..." ، وعندما يتحرك الماوس ويتوقف على الزر ، يتم عرض كل النص:
جزء صغير (تصبح الزوايا المدورة زوايا صحيحة ، يجب أن يتم ضبط الماوس لعرض النص) مباشرة في علامة HTML.
تتم كتابة معظم التطبيقات مع CSS:
<type type = "text/css">#btn-group-vertical-classes {overflow-y: auto ؛ overflow-x: auto ؛ height: 150px ؛}#btn-group-classmmoSmmsmys {verflow-y: auto ؛ verflow-x: auto ؛ leight: 150px ؛} مخفي ؛ الحدود الحدودية: 0px ؛} </style>يتم وضع جزء <style> من الكود في الرأس ، أي بين <head> و </head>.
تتمثل الطريقة العامة أولاً في استخدام محدد CSS لتحديد العلامة لتعيين CSS ، ثم تعيين النمط المقابل في الأقواس المجعد.
ما يسمى محدد CSS هو "#BTN-Group-etterical-sterical" و "Button" في الكود أعلاه ، أي خط رمز على الأقواس المجعد. هناك طرق متعددة لاستخدام محدد CSS ، ويمكنك العثور على الطرق ذات الصلة من خلال موقع W3School.
نظرًا لأن أوراق نمط CSS لها ثلاث طرق تحميل (ملف CSS ؛ <Head> ، سمة النمط في عنصر HTML ، وترتيب الأولوية الفعال هو: "النمط على العنصر" لا يعمل إعداد الحدود في الحدود أعلاه <Style> من وجهات نظر "يجب أن تعمل" و "أدنى درجة اقتران (أي التعديل الأكثر ملاءمة)".
<1> اكتب سمة النمط مباشرة في علامة العنصر. هذا هو الأكثر تفضيلًا ، لذلك سيعمل بالتأكيد.
<2> قم بتعديل ملف CSS Bootstrap الذي ربطته ، مرة واحدة وإلى الأبد ، وأضف عناصر جديدة في المستقبل ، دون الحاجة إلى إعادة كتابة السمة ذات النمط واحدًا تلو الآخر. هذا يتطلب منك تنزيل ملف CSS بدلاً من الإشارة إلى الرابط.
نظرًا لأن صفحتنا صغيرة جدًا ، فقد أخذت الطريقة الأولى.
4. استخدم AJAX لتحقيق الحصول على البيانات والتفاعل والتحميل الديناميكي.
اسألني كيف أستخدم AJAX؟ ابحث على Baidu ، أو اسأل الأشخاص الذين يعرفون التكنولوجيا الأمامية.
الشيء الأكثر أهمية في Ajax هو أنه يمكن تحديثه جزئيًا دون تحديث الصفحة بأكملها. هنا يجب علينا أولاً التحقق من المستندات ذات الصلة على تقنية Ajax (المواقع الثلاثة أعلاه ، بالإضافة إلى مختلف Baidu). نظرًا لأنك ترغب في الحصول على بيانات من ملف JSON ، فإنك تشير إلى Manual Http://www.w3school.com.cn/jquery/jquery_ref_ajax.asp في jQuery (لأن Bootstrap's JS تعتمد على jquery ، وجميع أساليب jQuery تعمل أيضًا عندما تكون هذه المعرفة تبحث عن المعلومات). تم اختيار وظيفة getjson. بالإضافة إلى ذلك ، راجع http://www.cnblogs.com/codeplus/archive/2011/07/18/2109544.html حدد كل وظيفة كطريقة تحليل.
في تنفيذ التعليمات البرمجية ، يتضمن بشكل أساسي اجتياز (للبيان) ، الحكم (إذا كان البيان) ، العمليات على عناصر HTML ، إضافة عناصر الطفل ، تعديل قيم السمات ، إلخ.
فيما يتعلق بكيفية كتابة الصفحة المحددة ، من الممل كتابتها بالتفصيل ، لذلك قمت بلصق الرمز.
بعض النقاط للاهتمام عند تشغيل العرض التوضيحي: يبدو أن Chrome يقيد القراءة المباشرة لمحتوى الملف محليًا ، لذلك تحتاج إلى وضع المشروع بأكمله في مجلد Apache's Htdocs. ثم ركض. فيما يتعلق بكيفية تثبيت Apache ، تحتوي مدونتي السابقة على مقدمة مفصلة للغاية. كيفية استخدامه ، يرجى بايدو.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua-contable" content = "ie = edge"> <meta name = "viewport" content = "width width = 1-1" -> <link href = "css/bootstrap.min.css" rel = "STYLESHEET"> <!-html5 shim و dreeld.js لدعم IE8 لعناصر html5 والاستعلامات الإعلامية-> <! src = "// cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src =" // cdn.bootcss.com/respond.js/1.4.2/respond.min.js • type = "text/css">#btn-group-vertical-classes {overflow-y: auto ؛ Overflow-X: Auto ؛ الارتفاع: 150px ؛}#btn-group-vertical-classmates {overflow-y: auto ؛ Overflow-X: Auto ؛ الارتفاع: 150px ؛} زر {text-overflow: ellipsis ؛ overflow: hidden ؛ border-radius: 0px ؛} </style> </head> <body> <viv> <br> </br> <bring id = "div1-classmeses"> <div rom = "group" aria-label = "..." show-> </div> <div id = "btn-group-vertical-classmates" rob = "group" aria-label = "..."> <!-حيث يُظهر زملاء الدراسة-> <button type = "button" style = "border-radius: 0px ؛ id = "context_div"> <p> انقر فوق زميل في الفصل لإظهار التفاصيل. </p> </viv> </viv> <!-jQuery (ضروري لمكونات JavaScript الخاصة بـ bootstrap)-> <script src = " src = "js/bootstrap.min.js"> </script> <script> $ (document) .Ready (function () {$. getJson ("Resource/ClassMates.json" ، function (result) {$. كل (نتيجة ، الدالة (i ، الحقل) {var tmp_button = $ (' data-toggle = "button" chosen_state = 0> </utton> '). text (i) ؛ tmp_button.attr ("title" ، i) ؛ $ ("#btn-group-vertical classes"). append (tmp_button) ؛}) ؛ $ ( tmp_chosen = number ($ (this) .ATTR ("chosen_state"))^1 ؛ $ (this) .ATTR ("chosen_state" ، string (tmp_chosen)) ؛ $ ("#btn-group-classmates") Array () ؛ $ (" تم اختيار {chosen_list_x ؛ لـ (chosen_list_x in chosen_list) {if (chosen_list [chosen_list_x] == i) {$. كل (حقل ، الدالة (j ، field2) {var tmp_button = $ (' تم اختيار _state = 0> </utton> '). Text (j) ؛ tmp_button.attr ("title" ، j) ؛ $ ("#btn-group-vertical-classmates"). append (tmp_button) ؛}) ؛}}}}) ؛ $ (" selection_classmate = $ (this) .text () ؛ var classmate_context_item ؛ $ ("#context_div") field3 ؛ var tmp_p = $ ('<p> </p>'). النص (classmate_context_item) ؛ $ ("#context_div"). إلحاق (tmp_p) ؛}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛