ما هو bootstrap؟
Bootstrap هو إطار أمامي للتطوير السريع لتطبيقات الويب ومواقع الويب. يعتمد Bootstrap على HTML و CSS و JavaScript.
تاريخ
تم تطوير Bootstrap بواسطة Mark Otto من Twitter و Jacob Thornton. Bootstrap هو منتج مفتوح المصدر صدر على Github في أغسطس 2011.
لدي الكثير من وقت الفراغ مؤخرًا. اليوم سوف أقدم لكم إطار عمل "نمط" في الواجهة الأمامية - Bootstrap.
1.
لماذا في المقدمة أسمي Bootstrap كإطار نمط أمامي؟ ربما يكون مثل هذا العنوان دقيقًا للغاية ، لكنني أعتقد أن مثل هذا العنوان يمكن أن يسمح لبعض المبتدئين بفهم وفهم ماهية Bootstrap بسرعة أكبر. لا أرغب في استخدام بعض الكلمات الراقية لتعميق فهم معرفة معينة ، ولكن بدلاً من ذلك أفضل استخدام بعض الكلمات التي سهلة الفهم لوصف نقاط المعرفة. على الرغم من أن مثل هذا الوصف قد يكون غير دقيق بعض الشيء ، إلا أنني أعتقد أنه ليس مشكلة كبيرة ، لأن مثل هذه الأوصاف يمكن أن تسمح للمبتدئين بالفعل بفهم هذه المعرفة بشكل أسرع. لأنني كنت في حيرة من أمري عندما كنت أتعلم نقاط المعرفة ، كانت بعض وثائق المعرفة الرسمية متطورة للغاية. في الواقع ، بعبارة صريحة ، كانت مجرد بعض الأشياء من الماضي ، ثم تغليف لجعل التطوير أسهل وأسرع. لذا ، أشارك هنا أن إطار bootstrap هو نفسه. بالإضافة إلى ذلك ، تهدف مؤسسة المحتوى أيضًا إلى تمكين المبتدئين من إتقانه بشكل أفضل. لأنه عندما بدأت في الاتصال بها لأول مرة ، كنت أيضًا مبتدئًا. أعتقد أن طريقة التنظيم هذه يمكن أن تساعدك على فهم المعرفة بشكل أسرع وأفضل.
بالنسبة إلى bootstrap ، يجب علينا أولاً تقديم بنيةه الإجمالية - ما الذي يتكون منه بالضبط. أعتقد أنه يمكنك فهم ما يتكون بالضبط في Bootstrap من خلال النظر إلى الصورة أدناه.
من الشكل أعلاه ، يمكننا أن نرى بوضوح أن bootstrap يتكون بشكل أساسي من الأجزاء التالية:
نظام الشبكة 12 - هو تقسيم الشاشة إلى 12 نسخة (أعمدة).
استخدم الصفوف لتنظيم العناصر (يتضمن كل صف 12 عمودًا) ، ثم ضع المحتويات في العمود.
تقارير عمود التحكم بواسطة COL-MD-*.
مكونات التخطيط الأساسية - توفر Bootstrap مجموعة متنوعة من مكونات التصميم الأساسية. مثل التنضيد ، الرمز ، النماذج ، الأزرار ، النماذج ، إلخ.
jQuery - تعتمد جميع الإضافات JavaScript على jQuery. إذا كنت ترغب في استخدام مكونات JS هذه ، فيجب عليك الرجوع إلى مكتبة jQuery. هذا هو أيضًا السبب في أننا بحاجة إلى الرجوع إلى مكتبة jQuery بالإضافة إلى الإشارة إلى ملف JS وملف CSS الخاص بـ Bootstrap ، وكلاهما تبعية.
مكونات CSS - Bootstrap قد تم تنفيذ العديد من مكونات CSS بالنسبة لنا. تجميع المربع ، مجموعة الأزرار ، التنقل ، إلخ. وبعبارة أخرى ، ساعدنا محتوى bootstrap في تحديد الكثير من أنماط CSS ، ويمكنك تطبيق هذه الأنماط مباشرة على عناصر مثل الصناديق المنسدلة السابقة.
JavaScript Plug-in-Bootstrap تنفذ أيضًا بعض المكونات الإضافية JS بالنسبة لنا. يمكننا استخدام المكونات الإضافية المقدمة من خلالها لإكمال بعض الوظائف الشائعة ، دون مطالبةنا بإعادة كتابة رمز JS لتحقيق تأثيرات مثل مربعات المطالبات والنوافذ المشروطة.
التصميم المستجيب - هذا هو مفهوم التصميم. تعني الاستجابة أنها ستعدل الصفحة تلقائيًا وفقًا لحجم الشاشة ، بحيث يمكن أن تؤدي الصفحة الأمامية بشكل جيد على شاشات بأحجام مختلفة.
يتكون bootstrap من الأجزاء أعلاه. أعطى ما ورد أعلاه مقدمة موجزة لكل مكون ، والمحتوى التالي ليس أكثر من مقدمة مفصلة لكل مكون من خلال بعض الأمثلة.
2. 12 نظام الشبكة
يحدد Bootstrap نظام شبكة 12 لتخطيط أفضل. أول شيء يجب تحديده هو نظام التخطيط لكل إطار عمل أمامي. في Bootstrap ، يستخدم الصفوف والأعمدة لإنشاء تخطيط الصفحة. هناك عدة مبادئ لتخطيطها:
يجب إدراج الصف في .-container (العرض الثابت) أو.-container-fluid (عرض 100 ٪)
يحتوي كل صف على 12 عمودًا
ضع المحتوى في كل عمود
في نظام Bootstrap النقطي ، تنقسم المتصفحات إلى 4 أنواع وفقًا لعرضها. القيم هي: تلقائي (100 ٪) ، 750 بكسل ، 970 بكسل ، و 1170 بكسل.
الأنماط المقابلة هي Small (XS) ، والشاشة الصغيرة (SM) ، والشاشة المتوسطة الحجم (MD) ، والكبيرة (LG)
يتم تنفيذه في الأصل عن طريق تحديد الحد الأدنى للعرض من خلال الاستعلام الإعلامي. لذلك ، فإن صفحات الويب التي تصنعها Bootstrap متوافقة مع الصفحات الكبيرة والصغيرة!
ضمن إطار bootstrap ، تم تحديد قيمة تحديد حجم الشاشة مسبقًا ، ويتم تحديد قيمة تحديد الحدود من خلال استعلامات الوسائط. تعريفه كما يلي:
] 992px) */ @media (min-width: @screen-md-min) {...}/ *شاشة كبيرة (عرض سطح مكتب كبير ، أكبر من أو تساوي 1200px) */ @media (min-width: @screen-lg-min) {...}في الواقع ، يتم استخدام استفسارات الوسائط أيضًا في تطوير تطبيقات Win8 لتحقيق التطبيقات المستجيبة. لذلك إذا سمعت النظام المستجيب في المستقبل ، فلا تعتقد أنه عميق للغاية. في الواقع ، يحدد الإطار استفسارات وسائل الإعلام بالنسبة لنا. إذا كان الحد الأدنى للعرض المحدد في استعلامات الوسائط يتجاوز الحد الأدنى للعرض المحدد في استعلامات الوسائط ، وبهذه الطريقة ، يمكنك تقليص حجم العنصر بين الشاشات المختلفة للتكيف مع الشاشة. ومع ذلك ، فإن المفهوم الذي اقترحه Bootstrap مفضل للأجهزة المحمولة ، وبالتالي فإن الصفحات التي صممها Bootstrap لا يمكن أن تكون متوافقة إلا مع الكبير والصغيرة غير المتوافقة مع الصغيرة.
3. مكونات التصميم الأساسية
مكون التخطيط الأساسي هو أن إطار bootstrap يحدد بعض الأنماط الموحدة لبعض ملصقات التصميم الأساسية. مثل الجدول ، الزر ، النموذج ، إلخ. دعنا نلقي نظرة على مثال على الجدول:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> قالب Bootstrap 101 </title> <!-لأنه لا يوجد مكون إضافي JS لل bootstrap ، لا يوجد أي إشارة إلى مكون jQuery-> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css"> </head> <body> <h3> جدول نمط افتراضي </h3> <slable> <saption> عنوان الجدول. الجدول-> <thead> <tr> <th> معرف </th> <h> الاسم الأول </th> <th> الاسم الأخير </th> </tr> </tbody> <tbody> <tr> <th scope = "row"> 1 </h> <td> scope = "row"> 2 </h> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </h> <td> sam </td> <td> wang </td> </tbody> T+Head ، يمثل T معنى الجدول-> <Thead> <tr> <th> معرف </th> <th> الاسم الأول </th> <th> الاسم الأخير </th> </tr> </thead> <tbody> <tbor> <tr> <th scope = "row"> 1 </th> scope = "row"> 2 </h> <td> bob </td> <td> san </td> </tr> <tr> <th scope = "row"> 3 </h> <td> sam </td> <td> wang </td> </tbod http://v3.bootcss.com/css/#tables-نصها مطلوب -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
لن يتم نشر رمز المثال للزر والنموذج هنا. يمكنك استخدام الرابط أدناه لعرض تأثير التشغيل والرمز المصدر. يمكنك أيضًا تنزيل جميع رموز المصدر لهذا الموضوع من خلال ملف التنزيل الأخير.
رابعا. مكونات CSS
تشبه مكونات CSS مكونات التخطيط الأساسية ، أي أن Bootstrap تحدد بعض الأنماط الموجودة لبعض العلامات ، وتأثير هذه الأنماط جميل للغاية ، بحيث لا تحتاج كل شركة أو مطور إلى كتابة نمط آخر ، وبالتالي تسريع كفاءة التطوير. دعنا نلقي نظرة على مثال التنقل هنا. لوضعها بصراحة ، إذا كنت تستخدم هذا الشيء أكثر من اللازم ، فستكون على دراية به بشكل طبيعي.
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> bootstrap 101 قالب </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com يتم تجميع التبديل لعرض أفضل للهاتف المحمول-> <viv> <button type = "button" data-toggle = "collapse" data-target = "#bs-example-navbar-collapse-1" aria-expanded = "false"> <span> تبديل التنقل </span> </span> </span> href = "#"> الصفحة الرئيسية </a> </div> <!-اجمع روابط NAV والنماذج والمحتوى الآخر للتبديل-> <div id = "bs-example-navbar-collapse-1"> <ul> <li> <a href = "#" href = "#"> about </a> </li></ul> <ul> <li> <a href = "#"> الرابط </a> </li> <li> <a href = "#" data-toggle = "tropdown" rol = "button" aria-haspup = "aria-expanded =" false> HREF = "#"> الإجراء 1 </a> </li> <li> <a href = "#"> الإجراء 2 </a> </li> <li> <A Href = "#" -> </div> <!-/. مطلوب -> <script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
تأثيرات تشغيل المكونات الأخرى هي كما يلي:
5. جافا سكريبت المكون الإضافي
بشكل افتراضي ، يمكن تنفيذ جميع الإضافات JS عن طريق تعيين رمز HTML محدد والخصائص المقابلة دون كتابة سطر من رمز JavaScript. جوهر تنفيذه هو أن bootstrap ينفذ رمز JavaScript المقابل لهذه الخصائص.
دعنا نلقي نظرة على مثال على نافذة مشروطة:
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8"> <meta http-equiv = "x-ua- contablate" content = "ie = edge"> <meta name = "viewport" content = "width = width ، وأي محتوى آخر * يجب * متابعتها! -> <title> bootstrap 101 قالب </title> <!-bootstrap-> <link rel = "stylesheet" href = "http://cdn.bootcss.com type = "button" data-toggle = "modal" data-target = "#mymodal"> انقر فوق لي </button> <div id = "mymodal"> <viv> <viv> <div> <button type = "button" data-dismiss = "Modal" العنوان </h4> </viv> <viv> <p> اختبار الجسم ... </p> </viv> <viv> <button type = "button" data-dismiss = "modal"> exced </button> <button type = "button"> احفظ التغييرات </button> </div> <!-/. jQuery (ضروري لمكونات JavaScript الخاصة بـ Bootstrap)-> <script src = "http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"> </script> <!-تضمين مكونات مكونة من جميعها (أدناه) ، أو تضمين الملفات الفردية حسب الطلب-<script src = "http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js"> </script> </body> </html>
بعد قراءة جميع المحتوى السابق ، هل تشعر على الفور أن Bootstrap هو في الواقع مجرد إطار نمط؟ مع هذا يمكننا بناء صفحات الويب بسرعة وسهولة. بالإضافة إلى ذلك ، بعد قراءة المحتوى السابق ، لن يتم الخلط بينك لماذا تكون وثيقة bootstrap الرسمية كما يلي:
أليست إدخالات شريط التنقل في Bootstrap الرسمية توثق المكونات الرئيسية لمقدمةنا أعلاه؟
6. ملخص
في هذه المرحلة ، انتهى كل محتوى هذه المقالة. آمل أنه من خلال هذا المقال ، يمكن للمبتدئين فهم بسرعة وإتقان bootstrap. بالإضافة إلى ذلك ، فإن هذه المقالة تعادل النقاط الرئيسية في bootstrap. لمزيد من المحتوى التفصيلي ، يمكنك الرجوع إلى الموقع الصيني الرسمي لـ Bootstrap. لكنني لا أعتقد أنني لا أريد ذلك بعد الآن. من الأفضل ممارسة ذلك مباشرة إذا كان لديك ذلك الوقت. يدعم تطبيق الويب VS2013 بالفعل إطار Bootstrap افتراضيًا. يمكنك إنشاء تطبيق ويب على الفور من خلال VS2013 لتجربة تطبيق bootstrap ضمن ASP.NET MVC قبل قراءته.