ما هو bootstrap؟
Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
تاريخ
تم تطوير Bootstrap بواسطة Mark Otto من Twitter و Jacob Thornton. Bootstrap هو منتج مفتوح المصدر صدر على Github في أغسطس 2011.
بعد أن كتبت هذه المقالة ، أريد أن أكتب المحتويات التالية من هذه المقالة:
1. بناءً على فهمي للتمهيد ، سأجعل ملخصًا صغيرًا.
2. سأقوم بتجميل واجهة المستخدم والرمز لأمثلة تعلم Bootstrap (2) من نقطة الصفر ، بشكل رئيسي للحديث عن كيفية التأثير الذي أردته.
3. من الأفضل تعليم الناس كيفية الصيد بدلاً من تعليم الناس كيفية الصيد. استخدم الأمثلة الخاصة بك (لأنك أيضًا مبتدئ ، وما تكتبه قد يكون أكثر ملاءمة للمبتدئين) ، والتحدث عن المزالق التي واجهتها أثناء عملية كتابة التعليمات البرمجية والنقاط التي تحتاج إلى الاهتمام بها.
بدون مزيد من اللغط ، لنبدأ:
1. ملخص صغير من bootstrap
استنادًا إلى وصف الوثائق الرسمية لـ Bootstrap (http://v3.bootcss.com/) ، يتم تقسيم bootstrap إلى ثلاث كتل كبيرة: نمط CSS ، والمكونات ، و JavaScript Plug-in.
بادئ ذي بدء ، من الواضح أن Bootstrap هو إطار ، مما يعني أنه إذا قام الآخرون بعمل عجلات ، فيمكنك استخدامها مباشرة ، حتى لا تبني عجلات بنفسك. لذلك نحن بحاجة إلى توضيح نقطتين: ما نوع العجلات هذه العجلات وكيفية استخدامها.
1. نمط CSS: يقدم بشكل أساسي النمط العالمي لنظام Raster و Bootstrap. تم تنفيذه عن طريق تحديد قيمة الفصل.
1.1 نظام الشبكة:
يتيح لنا ذلك تنفيذ تخطيط صفحات HTML بسهولة (http://v3.bootcss.com/css/#grid).
أعتقد أن نظام الشبكة مهم للغاية. نظرًا لأن تخطيط صفحات HTML هو مهمة مهمة ومرهقة (يمكنك إلقاء نظرة على مقدمة التخطيط في W3School http://www.w3school.com.cn/html/html_layout.asp ، انظر إلى المدونة في المثال وسوف تفهمها) ، وتكوينات الاختلاف في المسألة.
لقد أبسط النظام النقطي هذا إلى حد كبير. افتح الاتصال أعلاه حول نظام الشبكة ، وسوف تجد أنك تحتاج فقط إلى تعيين القيمة المقابلة لسمة فئة العناصر HTML وفقًا للتأثير الذي تريد تحقيقه ، ويمكنك أيضًا تعيين تأثيرات مختلفة على أجهزة بأحجام شاشة مختلفة.
1.2 Bootstrap Global Style:
هذه هي الطريقة التي يقوم بها bootstrap تجميل عناصر HTML شائعة الاستخدام (على سبيل المثال: DIV ، زر ، P ، الجدول ، IMG ، إلخ). عن طريق تعيين القيمة المقابلة إلى سمة الفئة لعنصر HTML ، يمكنك الحصول على التأثير المطلوب.
لنقدم أبسط مثال:
كما هو موضح في الشكل أعلاه ، يتيح لك Bootstrap تغيير قيمة فئة عنصر الزر لتغيير حجم الزر دون الحاجة إلى مشكلة في تعديل ملف CSS أو تضمين قيمة نمط العنصر.
2. المكون: أعتقد أن المكون هو bootstrap الذي يجمع بين بعض العناصر (عناصر HTML ورمز JavaScript) في مكونات ، ويوفر العديد من الرموز الجيدة والعملية. يتم استخدام هذه المكونات بشكل أساسي في تطوير HTML. تم تنفيذه عن طريق تحديد قيمة الفصل. (http://v3.bootcss.com/components/)
لنقدم أبسط مثال:
كما هو موضح في الشكل أعلاه ، عندما نحتاج إلى تنفيذ وظيفة التنقل. ابحث عن المكونات المقابلة في Boostrap ، وقم بتعيين قيم الفئة المقابلة ، UL و LI وفقًا لاحتياجاتك الخاصة.
3. مكون الإضافات JavaScript: أعتقد أن المكون الإضافي JavaScript الخاص بـ Bootstrap هو "العجلة" التي تغلف وظائف تفاعل الويب الشائعة. تحتاج فقط إلى تعيين سمة الفئة وسمات البيانات لتنفيذ وظائف تفاعل الويب شائعة الاستخدام دون الحاجة إلى كتابة الكثير من رمز JavaScript بنفسك.
بادئ ذي بدء ، دعنا نتحدث عن حلقة صغيرة. قد يعتقد المبتدئون عن طريق الخطأ أن "JavaScript" و "Java" لهما اتصال عميق ، وقد يعتقدون أن JavaScript هو متغير من Java. في الواقع ، هذا ليس هو الحال. JavaScript هي لغة برمجة تم تطويرها بواسطة Netscape للإنترنت. في الواقع ، اسمها الأول هو "Livescript". في وقت لاحق ، توصلت Netscape إلى تعاون مع Sun (أي الشركة التي اخترعت Java ، والتي اكتسبتها Oracle لاحقًا). في ذلك الوقت ، كانت لغة جافا في ذروتها وكانت مشهورة للغاية. من أجل ركوب الركوب ، غيرت اسمها إلى JavaScript. لدرجة أن بعض الناس مازحا: الفرق بين "Java" و "JavaScript" هو نفس الفرق بين "Lei Feng" و "Lei Feng Tower".
بالعودة إلى الموضوع ، نعلم أن JavaScript موجود لإعطاء إمكانيات تفاعل صفحة الويب. لذلك ، يمكن أن تجعلك المكونات الإضافية الغنية JavaScript على bootsript تنفذ وظائف تفاعل الويب شائعة الاستخدام دون الحاجة إلى التركيز على "صنع العجلات".
كما هو موضح في الشكل أعلاه ، فإن استخدام المكونات الإضافية لـ Bootstrap (http://www.runoob.com/bootstrap/bootstrap-carousel-lugin.html ، لا يتم ترجمة وثيقة البوتستاب الرسمية إلى الصينية هنا ، ولكن هناك ترجمة صينية مفصلة للغاية على runoob ، ويمكنك تعديلها عبر الإنترنت إلى تقديم هذا الرصد. يمكنك بسهولة تنفيذ وظيفة Carousel الصورة التي تستخدمها العديد من مواقع الويب الآن. هنا تحتاج فقط إلى تعيين قيم الفئة والصورة المقابلة SRC وفقًا للبرنامج التعليمي في الرابط أعلاه ، ولا تحتاج حتى إلى تعيين قيمة البيانات.
2. قم بتجميل واجهة المستخدم والرمز لأمثلة على تعلم bootstrap (2) من الصفر
يوضح الشكل التالي التأثيرات التي تحققت في البرنامج التعليمي السابق:
يمكننا أن نرى أن هناك أوجه القصور التالية التي يجب تصحيحها:
(1) انقر على زميله المحدد وعرض معلوماتهم ، ولا يتم تحديده. (عند النقر فوق البداية ، ستكون في الحالة المحددة ، ولكن هذا هو مجرد تأثير زر النقر. إذا قمت بالنقر فوق المساحة الفارغة ، فستختفي الحالة المحددة)
(2) الألوان رتيبة وليست جميلة جدًا.
(3) يجب تعديل التصميم. مربع المعلومات هو المكان الذي نحتاج فيه إلى المعلومات ويجب أن يكون كبيرًا قدر الإمكان. من الأفضل إخفاء المربع غير الضروري عند عرضه.
(4) بالنسبة للرمز ، يتم كتابة رمز JavaScript في Bootstrap (2) من نقطة الصفر في صفحة HTML ، وهناك قطاعات رمز مكررة. يجب كتابة مقاطع رمز مكررة في وظائف ، والتي يمكن أن تقلل من حجم الرمز. عند تعديل الكود ، يمكنني فقط تعديل الوظيفة المقابلة مباشرة ، دون البحث عن مكان واحد في وقت واحد. يمكن كتابة رمز JavaScript في ملفات JS لفصل صفحات HTML ورمز JavaScript.
الاختيار الفني (من الناحية المنطقية ، هو التفكير في كيفية استخدام ما هو موجود بالفعل في إطار bootstrap لتحقيق التأثير المطلوب):
1. أولاً ، قم بضبط التصميم ، وضبط مربع المعلومات ومربع الفئة معًا ، وعرض مربع الفئة في الأعلى.
من الواضح ، نحتاج فقط إلى وضع DIV حيث يوجد مربع المعلومات و DIV لمربع الفصل في نفس الصف في DIV ، وتعديل قيمة سمة الفئة "Col-MD" المتعلقة بنظام الشبكة لتحقيقه. على سبيل المثال ، إذا كنا نريدهم أن يعرضوا نسبة 2: 1 ، فيجب أن تحتوي سمة الفئة لمربع المعلومات على Col-MD-8 ، بينما يجب أن يكون مربع الفئة Col-MD-4.
تجدر الإشارة إلى أن الواجهة الأمامية لا يمكن أن تكون أبدًا تطوراً من خطوة واحدة. في كثير من الأحيان ، فإن الكود الأولي ليس هو النتيجة المثالية التي نريدها ، ويجب تعديلها بعناية. على سبيل المثال ، يجب أن يتعلم الجميع البحث عن أنفسهم ، ومحاولة إجراء تعديلات مستمرة (لن يتم شرح التعديلات اللاحقة في العملية المحددة):
بعد تعديل الكود ، يكون التأثير المقدم كما يلي:
من الواضح أن فئة واحدة فقط يتم عرضها على كل سطر أعلاه ، وهو مضيعة للمساحة. لا يتم محاذاة الجزأين أدناه.
قم بحذف "BTN-Group-sterdical" في سمة الفئة لمكون DIV أعلاه ، وأضف Col-MD-6 إلى سمة الفئة من TMP_BUTTON في رمز JS. بالإضافة إلى ذلك ، لوحظ أنه بعد تحديد هذا ، يحتوي السطر الأول على مسافة بادئة غريبة مقارنة بالخط الثاني:
ليس هناك شك في أن هذا النوع من المظهر والتغييرات يرتبط بـ CSS. في هذا الوقت ، يمكننا إلقاء نظرة على CSS المحددة للعنصر.
خذ كروم كمثال:
انقر بزر الماوس الأيمن فوق هذا العنصر وحدد فحصًا ، مما يعني المراجعة. ستجد الرمز المقابل في المربع على اليمين. من خلال المقارنة ، وجدنا أنها مشكلة الهامش اليسرى. هذه الخاصية هي الافتراضي في إطار bootstrap ويرثم من العنصر العلوي. بعضها -1px وبعضها 0 بكسل. نحتاج فقط إلى تغييره إلى نفسه ، على سبيل المثال ، يتم تغيير جميعهم إلى 0px:
في TMP_BUTTON في رمز JS ، قم بتعديل سمة النمط وإضافة "Margin-Left: 0px ؛". يعتقد بعض الناس أن الخط ليس جيدًا للنظر في الوسط ، حتى يتمكنوا من إضافة محاذاة النص: يسار وضبط النص على الزر للبدء من اليسار.
الآثار المصححة:
2. أضف زر طية حتى يتمكن المستخدمون من إخفاء/فتح مربع الفصل من خلال هذا الزر. عند النقر فوق زميل الفصل لعرض معلومات مفصلة ، سيتم إخفاؤها تلقائيًا لتوفير مساحة كبيرة لعرض مربع المعلومات.
لإضافة زر طية ، يمكنك الرجوع إلى http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html.
بالإضافة إلى ذلك ، يمكننا إضافة أيقونة ذات مظهر جيد إلى الزر القابل للطي ، ويمكن تحقيقه بسهولة من خلال الإشارة إلى البرنامج التعليمي http://v3.bootcss.com/components/#glyphicons.
عند النقر على زميل الفصل لعرض معلومات مفصلة ، سيتم إخفاءه تلقائيًا. تحتاج إلى تعديل حدث Click of the ClassMate ، أي رمز JS المقابل.
لقد فحصنا استخدام المكون الإضافي القابل للطي bootstrap http://www.runoob.com/bootstrap/bootstrap-collapse-plugin.html (هذا أفضل ، لم يتم ترجمة الجزء الرسمي بعد) ، ووجد المحتوى التالي:
اتضح أن التصفيق والقيم في سمة الفئة تتحكم في وظائف المخفية والعرض. بعد ذلك ، نحتاج فقط إلى تعديل سمة الفئة المقابلة لعنصر HTML لتنفيذ عملية "show/hide" في رمز الحدث JS النقر فوق الزر. لذا أضف العبارة التالية إلى دالة Click of Classmate Bine:
$ ("#collapseone"). attr ("class" ، "Collapse Collapse") ؛
3. إصلاح الخلل الذي "انقر على طلاب معينين وعرض معلوماتهم ، وليس هناك حالة محددة."
من خلال التحقق من المستند ، http://www.runoob.com/bootstrap/bootstrap-button-plugin.html ، قمنا بتعيين خاصية بيانات البيانات الخاصة بالزر على "زر" ، والتي يمكنها تقديم الحالة المحددة تلقائيًا بعد النقر.
لذلك نقوم بإضافة السمة البيانات toggle = "زر" إلى زر زميله.
في هذا الوقت ، حدثت مشكلة أخرى. أعتقد أنه عندما أنقر على زملاء الدراسة الآخرين بعد ذلك ، كانت النقرات الأصلية لا تزال في الحالة النشطة. ماذا علي أن أفعل؟
من خلال التحقق من http://www.runoob.com/bootstrap/bootstrap-buttons.html ، ستظهر الحالة المحددة عندما تكون تعيين الفئة للزر نشطًا. وهذا يعني أن الإعداد أعلاه ، أي أن Bootstrap يقوم بشيء من هذا القبيل: عندما يتم النقر فوق زر البيانات toggle = "الزر" ، ويتم إضافة النشط تلقائيًا إلى الفصل ، والحالة المحددة موجودة. عند النقر مرة أخرى ، تتم إزالة النشط تلقائيًا من الفصل ، ويتم تقديم الحالة غير المحددة.
بمعنى آخر ، نحتاج فقط إلى القيام بهذه العملية بأنفسنا. على سبيل المثال ، عند النقر فوق زميل الفصل ، يمكنني إزالة جميع أزرار زميل الفصول النشطة من سمة الفصل. بعد الانتهاء من النقر ، فقط الزر الذي نقرته في الحالة النشطة.
لذلك ، تحتاج فقط إلى إضافة مثل هذه العبارات إلى دالة النقر لزر زميل الفصل:
نسخة الكود كما يلي:
$ (".
التأثير على النحو التالي:
4. قم بتجميل مظهر الزر
ابحث عن قسم زر CSS في bootstrap:
http://www.runoob.com/bootstrap/bootstrap-buttons.html
باتباع البرنامج التعليمي لتعديله ، قمت ببساطة بتعديل لون الزر هنا ، ويمكنك تغييره بنفسك وفقًا لاحتياجاتك. التأثير على النحو التالي:
5. فصل صفحات HTML ورمز JavaScript
في الواقع ، ينقسم إلى خطوتين:
الخطوة 1: ضع رمز JavaScript في ملف JS وقم بربطه في ملف HTML.
الخطوة 2: كتابة كتل رمز مع JavaScript أو مسح وظائف في وظيفة واتصل الوظيفة مباشرة.
نظرًا لأن كلتا الخطوتين بسيطتين نسبيًا ، يجب على أي شخص تعلم لغة برمجة القيام بذلك. لن أتوسع وأكتب.
تجدر الإشارة إلى أنه عند ربط ملفات JS ، انتبه إلى الطلب.
على سبيل المثال ، يعتمد ملف JS في Bootstrap على jQuery ويستخدم العديد من وظائف jQuery ، لذلك يجب على ملف JQuery أن يعلن الرابط قبل ملف JS في bootstrap.
وبالمثل ، يعتمد ملف JS الخاص بنا على bootstrap ، لذلك يجب أن يكون بعد bootstrap ، وإلا فلن يعمل الرمز.
أخيرًا ، دعنا ننشر الكود ذي الصلة:
getClassmate.html:
<! 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 ؛ الارتفاع: 100px ؛}#btn-group-classmates {overflow-y: auto ؛ Overflow-X: Auto ؛ الارتفاع: 500px ؛} زر {text-overflow: ellepsis ؛ overflow: Hidden ؛ Border-Radius: 0px ؛}#context_div {overflow-y: auto ؛ Overflow-X: Auto ؛ الارتفاع: 500px ؛} </style> </head> <body> <viv> <viv> <viv> <h4 style = "text-align: rely ؛"> <a id = "collapse_a" data-toggle = "collapse" data-parent = "#orcordion" href = "#collapseone"> </h4> </viv> <div id = "collapseone"> <div id = "Div1-Classes-Classmates"> <div rob = "group" aria-label = "..." id = "btn-group-vertical-classes"> <! id = "btn-group-vertical-classmates" rob = "group" aria-label = "..."> <!-حيث يعرض زملاء الدراسة-> <button type = "button" style = "border-radius: 0px ؛ التفاصيل. </p> </viv> </viv> </viv> <!-jQuery (ضروري لمكونات JavaScript الخاصة بـ Bootstrap)-> <script src = "js/jquery-3.0.0.0.min.js"> </script> <!-تضمين جميع المكونات الإضافية المترجمة (أدناه) أو تضمين الملفات الفردية حسب الحاجة-<script src = "js/bootstrap.min.js"> </script> <script src = "js/script_getclassmate.js"> </script> </body> </html>script_getclassmate.js:
$ (document) .Ready (function () {$. getJson ("Resource/ClassMates.json" ، function (result) {$. كل (نتيجة ، وظيفة (i ، الحقل) {var tmp_button = $ ('<button type = "button" style = "border-radius: 0px ؛ text-align: left ؛ margin-left: تم اختياره _state = 0> </button> '). النص (i) ؛ tmp_button.attr ("title" ، i) ؛ $ ("#btn-group-vertical-classes"). append (tmp_button) ؛}) ؛ $ (". btn.btn-default.btn-class") tmp_chosen = number ($ (this) .attr ("chosen_state"))^1 ؛ $ (this) .ATTR ("chosen_state" ، string (tmp_chosen)) ؛ showclassmates (result) ؛ $ (" BTN-Default BTN-Classmate BTN-INFO ") ؛ $ ("#collapseone "). attr (" class "،" collapse collapse ") ؛ var select_classmate = $ (this) showclassmates (result) {$ ("#btn-group-vertical-classmates"). فارغ () ؛ var chosen_list = جديد Array () ؛ $ (" تم اختياره chosen_list_x ؛ من أجل (chosen_list_x in chosen_list) {if (chosen_list [chosen_list_x] == i) {$. كل (حقل ، الدالة (j ، field2) {var tmp_button = $ ('<button type = "button" style = "border-radius: 0px ؛ تم اختياره _state = 0> </utton> '). النص (j) ؛ tmp_button.attr ("title" ، j) ؛ $ ("#btn-group-vertical-classmates"). classmate_context_item ؛ $ ("#context_div"). فارغ () ؛ $. كل (نتيجة ، الدالة (i ، الحقل) {$. كل (حقل ، وظيفة (j ، field2) {if (j == select_classmate) {$. كل (field2 ، الدالة (k ، field3) {alert (k) ؛ field3 ؛ var tmp_p = $ ('<p> </p>'). النص (classmate_context_item) ؛ $ ("#context_div"). إلحاق (tmp_p) ؛}) ؛}}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛}) ؛Quaritesmates.Json:
{"Class 001": {"Xiao Wang": {"الجنس": "ذكر" ، "العمر": "18" ، "الاهتمام": "كرة القدم" ، "مسقط رأسه": "شنغهاي" ، "صينية": "78" ، "Math": "90" ، "English": "66" ، " "69" ، "Geography": "92"} ، "Xiao Li": {"الجنس": "ذكر" ، "العمر": "20" ، "الاهتمام": "كرة السلة" ، "مسقط رأسه": "Beijing" ، "صيني": "98" ، "Math": "77" ، "English": "97" ، " "88" ، "Geography": "81"}} ، "Class 002": {"Xiao Cai": {"الجنس": "أنثى" ، "العمر": "19" ، "الاهتمام": "الرقص" ، " "77" ، "التاريخ": "89" ، "الجغرافيا": "83"}} ، "الفئة 003": {"xiao ma": {"الجنس": "ذكر" ، "العمر": "18" ، " "97" ، "الكيمياء": "100" ، "التاريخ": "94" ، "الجغرافيا": "92"}} ، "الفئة 005": {"Xiao Zhang": {"الجنس": "ذكر" ، " "66" ، "الفيزياء": "80" ، "الكيمياء": 68 ، "التاريخ": "79" ، "الجغرافيا": "93"}}}ما ورد أعلاه هو التعليمي المقدمة للمقدمة Zero-Basic المقدمة (III) المقدمة لك من قبل المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!