في هذه المقالة ، نتعرف بشكل أساسي على التاريخ والميزات واستخدامات Boostrap ، ولماذا تم اختيار Boostrap لتطوير مشاريع الويب الخاصة بنا.
النقاط الرئيسية للتعلم:
1. bootstrap نظرة عامة
2. ميزات bootstrap
3. بنية bootstrap
4. إنشاء الصفحة الأولى
5. الاستعدادات المختلفة للتعلم
1. نظرة عامة على bootstrap
Bootstrap هو إطار مفتوح المصدر يعتمد على HTML و CSS و JavaScript تم تطويره من قبل اثنين من المهندسين الفنيين من Twitter (أكبر Weibo في العالم). رمز الإطار بسيط وجميل بصريًا ، ويمكن استخدامه لإنشاء متطلبات صفحة الويب بسرعة وببساطة استنادًا إلى أجهزة الكمبيوتر والأجهزة المحمولة.
في يونيو 2010 ، حل المهندسون داخل Twitter مشكلة التعاون والتوحيد في مهام التنمية في الواجهة الأمامية. بعد حلول مختلفة ، تم تأكيد Bootstrap أخيرًا وإصداره في أغسطس 2011. بعد فترة طويلة من التكرار والترقية ، تطور المشروع الأصلي الذي يحركه CSS ليصبح إطارًا مفتوحًا المصدر مع واجهة أمامية على شبكة الإنترنت متعددة الوظائف مع العديد من المكونات الإضافية والرموز التي تم إنشاؤها.
الجزء الأكثر أهمية في Bootstrap هو تخطيطه المستجيب ، والذي يمكن أن يكون متوافقًا مع وصول الصفحة على الكمبيوتر والهواتف المحمولة.
تنزيل وتوضيح bootstrap:
الموقع الرسمي لترجمة الوثيقة المحلية: http://www.bootcss.com
موقع Piaocheng Web Club الرسمي: http://www.ycku.com
2. ميزات bootstrap
تحظى Bootstrap بشعبية كبيرة بفضل ميزاته وميزاته العملية للغاية. الوظائف الأساسية الرئيسية هي كما يلي:
(1). الجهاز المتقاطع ، المتصفح
إنه متوافق مع جميع المتصفحات الحديثة ، بما في ذلك أكثر انتقاد IE7 و 8. بالطبع ، لم تعد هذه الدورة التدريبية تعتبر المتصفحات أدناه IE9.
(2). تخطيط مستجيب
لا يمكنه دعم الشاشات فقط في قرارات مختلفة على جانب الكمبيوتر ، ولكنها تدعم أيضًا شاشات التبديل المستجيبة للوسادات المحمولة والهاتف المحمول والشاشات الأخرى.
(3). مكونات شاملة المقدمة
يوفر Bootstrap مكونات عملية للغاية ، بما في ذلك: التنقل ، الملصقات ، أشرطة الأدوات ، الأزرار والمكونات الأخرى ، والتي تكون مريحة للمطورين للاتصال بها.
(4). مكونات JQuery مدمجة
يوفر Bootstrap العديد من المكونات الإضافية العملية JQuery ، والتي تسهل المطورين لتنفيذ مختلف المؤثرات الخاصة العامة في الويب.
(5). دعم HTML5 و CSS3
HTML5 العلامات الدلالية وخصائص CSS3 مدعومة بشكل جيد.
(6). دعم نمط أقل ديناميكية
لا يستخدم أقل المتغيرات ، والتعشيش ، والعمليات لكتابة CSS أسرع وأكثر مرونة. إنه يعمل بشكل جيد مع bootstrap.
3. بنية bootstrap
بادئ ذي بدء ، إذا كنت ترغب في فهم بنية مستند Boostrap ، فأنت بحاجة إلى تنزيله محليًا على الموقع الرسمي. عنوان تنزيل bootstrap هو كما يلي:
Bootstrap تنزيل عنوان: http://v3.bootcss.com/ (حدد بيئة الإنتاج ، v3.3.4)
بعد إزالة الضغط ، يقدم الدليل هيكلًا كهذا:
bootstrap/
├ CSS/
│├ bootstrap.css
│├ bootstrap.css.map
│├ bootstrap.min.css
│├ bootstrap-theme.css
│├ bootstrap-theme.css.map
│└ bootstrap-theme.min.css
├ JS/
│├ bootstrap.js
│└ bootstrap.min.js
└ الخطوط/
├ glyphicons-halflings-regular.eot
├ glyphicons-halflings-regular.svg
├ glyphicons-halflings-regular.ttf
├ glyphicons-halflings-regular.woff
└ الغليفية Halflings-regular.woff2
وهي مقسمة بشكل أساسي إلى ثلاث أدلة أساسية: CSS (النمط) ، JS (SCRIPT) ، والخطوط (الخط) .
1. هناك أربعة ملفات مع لاحقة CSS في دليل CSS. تلك التي تحتوي على كلمة min هي إصدارات مضغوطة ، والتي يتم استخدامها بشكل عام ؛ تلك التي لا تحتوي على ملفات بدون ضغط ، ويمكنك تعلم فهم رمز CSS ؛ على الرغم من أن الملف الذي يحتوي على لاحقة MAP هو جدول رسم خرائط لمرسم المصدر CSS ، والذي يتم استخدامه في بعض أدوات المتصفح المحددة.
يحتوي دليل 2.JS على ملفين ، غير مضغوط وملفات JS مضغوطة.
3. يحتوي دليل Fonts على ملفات الخط مع لاحقة مختلفة.
4. إنشاء الصفحة الأولى
نقوم بإنشاء صفحة HTML5 ، ونقدم الملف الأساسي لـ Bootstrap ، ثم اختبار ما إذا كان يتم عرضه بشكل طبيعي.
// أول bootstrap
<! doctype html> <html lang = "zh-cn"> <head> <meta charset = "utf-8" <title> مقدمة bootstrap </title> <link rel = "bootstrap </buttrap </buttrap </" script = "css/bootstrap.min.cs src = "js/jquery.min.js"> </script> <script src = "js/bootstrap.min.js"> </script> </body> </html>
5. الاستعدادات المختلفة للتعلم
1. أدوات التنمية . نحن نستخدم Sublime Text3 كأداة تطوير لـ Bootstrap وتثبيت المكون الإضافي لتوليد رمز EMMET ؛
2. أدوات الاختبار ، بالإضافة إلى المتصفحات الحديثة التقليدية ، هي ثانياً كأدوات اختبار للجوال. نستخدم Opera Mobile Emulator وأدوات اختبار الويب للهاتف المحمول من Chrome.
3. الأساس المطلوب هو على الأقل أساس الدورة الأولى من موسم HTML5. يحتوي Bootstrap على العديد من المكونات الإضافية JQuery.
4. قرار الدورة : الدورات الأساسية ، نستخدم 1024 × 768 للتسجيل ، ولكن بعض الأجزاء الخاصة ، مثل دورات الاستجابة والمشروع ، تتطلب تسجيلًا عالي الدقة ، وسوف نستخدم 1440 × 900 للتسجيل.
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوع رائع لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.