مع زيادة عدد مستخدمي الأجهزة المحمولة ، لا تتوافق بنية نظام الويب التقليدية مع الاستخدام العادي للعديد من محطات المحمول. في العمل ، سأجد أيضًا أن العديد من العملاء لديهم الآن الحاجة إلى استخدام أنظمة الإدارة على محطات الهواتف المحمولة مثل الهواتف المحمولة والأجهزة اللوحية. إذا تم تطوير صفحة ويب الاستجابة المقابلة بشكل منفصل لكل محطة ، فسيؤدي ذلك حتماً إلى زيادة تكلفة المشروع والضغط على المطورين. في هذا الوقت ، من الضروري فهم التصميم المستجيب ، الذي يولد لحل المشكلات متعددة الطرف. هذه المرة نقدم الوزن الخفيف ، المصدر المفتوح ، و bootstrap المجاني.
بناء بيئة تنمية
أولاً ، قم بتنزيل حزمة رمز مصدر Boostrap للموقع الرسمي: http://www.bootcss.com/. لتطوير مشاريع بسيطة ، ليس عليك إضافة جميع CSS و JS والخطوط وما إلى ذلك في الكود المصدري. وفقًا لاحتياجات مشروعك ، يمكنك تخصيص البيئة التي تحتاجها.
الملفات المطلوبة هي كما يلي: jquery.min.js ، botstrap.min.js ، bootstrap.css. إذا كنت بحاجة إلى استخدام بعض أنماط الخطوط ، فأنت بحاجة أيضًا إلى إضافة ملفات متعلقة بالخط ، كما هو موضح في الشكل أدناه:
[ملاحظة] عند تحميل JS ، يجب أولاً تحميل jQuery.min.js ، لأنه في bootstrap.min.js ، سوف تستخدم طرقًا متعلقة بـ jQuery ، أي boostrap.min.js ، يعتمد على jquery.min.js.
اختبار بيئة bootsrap
اكتب ملف اختبار index.html. محتويات ملف الاختبار هي كما يلي:
<! doctype html> <html> <head> <title> اختبر بيئة boostrap </title> <link rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "text/javascript" src = " type = "text/javaScript" src = "./ js/bootstrap.min.js"> </script> </head> <body> </body> </html>
ما سبق هو بيئة تطوير Bootsrap. الأمر بسيط للغاية!
ما يجب أن تعرفه عند استخدام Boostrap هو نظام Boostrap النقطي. يرجع ذلك بالتحديد إلى نظام الشبكة الذي يجعله متوافقًا بشكل أفضل مع الأجهزة الطرفية ذات الدقة المختلفة.
يحتوي موقع الويب الرسمي لنظام الشبكة المحدد على مقدمة واضحة: http://v3.bootcss.com/css/. تقع الصورة التالية للموقع الرسمي:
عند استخدام Boostrap ، نستخدم بشكل أساسي بعض الأنماط التي تم تعريفها فيه. هذا مفيد لبرنامج ليس لديه القدرة على الفن ، وبناء صفحة جيدة بسرعة.
عند استخدام Bootstrap فعليًا ، نتحقق غالبًا من بعض مستندات المساعدة على الموقع الرسمي: http://v3.bootcss.com/css/#tables.
أنا شخصياً أوصي بأن تقوم بنسخ الكود ذي الصلة مباشرة إلى صفحة الويب الخاصة بك في أمثلة الموقع الرسمي ، ثم إجراء التعديلات ذات الصلة بناءً على ذلك. بهذه الطريقة ، ستكون سرعة التطوير أسرع وستكون الدقة أعلى.
إظهار بعض أنماط boostrap --- أنماط الجدول.
<! doctype html> <html> <head> <title> اختبار بيئة boostrap </title> <link rel = "stylesheet" type = "text/css" href = "./ css/bootstrap.css"> <script type = "script/javascript" src = ". type = "text/javaScript" src = "./ js/bootstrap.min.js"> </script> <body> <body> <table> <tr> اختبار النموذج </td> اختبار </td> اختبار </td> اختبار </td> نموذج </td> <td> اختبار </td> <td> اختبار </td> </td> <tr> <td> اختبار </td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <tr> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td> <td> اختبار </td>
نتائج عرض صفحة الويب هي كما يلي:
يتم تقديم السمات في الفصل:
1) الجدول بالإضافة إلى هذا يحتوي بالفعل على نمط جدول Bootsrap
2) يشير الجدول إلى أن خلفية الصف لماوس الجدول تظل مشرقة
3) يظهر الجدول المحدد الجدول على الحدود
4) خطوط الجدول المخططة الجدول
[ملاحظة] عند إضافة سمات متعددة معًا ، هناك مسافات بين كل سمة.
2. زر
<!-الزر-> <a href = "#" rode = "button"> الرابط </a> <button type = "submit"> button> <button> <input type = "button" value = "input"> <input type = "president" value = "prode> <! type = "button"> (التفضيلات) الأساسي </button> <!-يشير إلى إجراء ناجح أو إيجابي-> <button type = "button"> (النجاح) النجاح </button> <!-زر سياق لرسائل التنبيه المعلوماتية-> <button type = "button"> (المعلومات العامة) إجراء سلبي محتمل-> <button type = "button"> (خطر) الخطر </button> <!-تعرض زرًا لجعله يبدو وكأنه رابط أثناء الحفاظ على سلوك الزر-> <button type = "button"> (link) link </button>
نتائج صفحة الويب هي كما يلي:
بالنسبة للعديد من الأنماط والمكونات الأخرى ، يوصى بالإشارة إلى وثائق المساعدة الرسمية.
لخص
هذه المقالة هي دليل ، يقدم بإيجاز ماهية Boostrap وكيفية استخدامها. لا توجد قائمة مفصلة بجميع المكونات والأنماط ، ولكن ... اقرأ!
هذه مقالة سحرية للغاية ، يجب عليك النقر وإلقاء نظرة
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
آمل أن يتمكن أولئك المهتمين بالتمهيد من اختبار تأثيرات كل نمط يدويًا وكيفية استخدام كل مكون بأنفسهم ، ويشعرون حقًا بالمرح الذي جلبته Bootstrap.