تركيب bootstrap سهل للغاية. هذا المقال هو ملخص لدراستي ، وهو مناسب للاستفسارات والتعلم المستقبلي. في الوقت نفسه ، آمل أن أساعدك.
1. تحميل bootstrap
يمكنك تنزيل أحدث إصدار من bootstrap من http://getbootstrap.com/. عند النقر فوق هذا الرابط ، سترى صفحة ويب مثل هذا:
سترى زريين:
تنزيل bootstrap: تنزيل bootstrap. انقر فوق هذا الزر ويمكنك تنزيل إصدارات مضغوطة مسبقة من CSS و JavaScript والخطوط. لم يتم تضمين مستندات وملفات رمز المصدر الأصلي.
تنزيل المصدر: قم بتنزيل الكود المصدري. انقر فوق هذا الزر ويمكنك الحصول على أحدث bootstrap أقل ورمز مصدر JavaScript مباشرة من.
إذا كنت تستخدم التعليمات البرمجية المصدر غير المنقولة ، فأنت بحاجة إلى تجميع الملف الأقل لإنشاء ملفات CSS القابلة لإعادة الاستخدام. لتجميع عدد أقل من الملفات ، يدعم Bootstrap فقط العطلة ، وهو موجه CSS القائم على Twitter.
من أجل فهم أفضل واستخدام أسهل ، سنستخدم نسخة مسبقة من Bootstrap في هذا البرنامج التعليمي.
نظرًا لأن الملفات يتم تجميعها وضغطها ، فلا يتعين عليك تضمين هذه الملفات المستقلة في كل مرة في تطوير وظيفي مستقل.
ملاحظة الدراسة هذه هي أحدث إصدار (Bootstrap 3).
2. بنية الملف
1. bootstrap premompiled
عند تنزيل الإصدار المترجم من Bootstrap وفك ضغط ملف zip ، سترى هيكل الملف/الدليل التالي:
كما هو موضح في الصورة أعلاه ، يمكنك رؤية CSS و JS المترجمة (bootstrap.*) ، وكذلك CSS المضغوطة و JS (bootstrap.min.*). ويشمل أيضًا خط الغليفيكونز ، وهو موضوع اختياري bootstrap.
2. رمز مصدر bootstrap
إذا قمت بتنزيل رمز مصدر bootstrap ، فستبدو بنية الملف هكذا:
الملفات الموجودة تحت أقل/ و JS/ و Fonts/ هي رموز المصدر لـ Bootstrap CSS و JS و Icon Fonts ، على التوالي.
يحتوي المجلد DIST/ المجلد على الملفات والمجلدات المدرجة في قسم التنزيل المسبق أعلاه.
المستندات-الأزرار/، أمثلة/، وجميع ملفات *.html هي مستندات bootstrap.
3. قالب HTML
يبدو أن قالب HTML الأساسي باستخدام bootstrap مثل هذا:
<! doctype html> <html> <head> <title> قالب bootstrap </title> <meta name = "viewport" content = "width = width device ، scale scale = 1.0"> <!-تقديم bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <!-html5 shim و reponse. لا يمكن أن يكون للملف تأثير-> <!-[إذا lt ie 9]> <script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </script> <script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"> </script> <! src = "https://code.jquery.com/jquery.js"> </script> <!-يتضمن جميع المكونات الإضافية المترجمة-> <script src = "js/bootstrap.min.js"> </script> </body> </html>
هنا يمكنك رؤية ملفات jQuery.js و botstrap.min.js و bootstrap.min.css التي يتم استخدامها لإنشاء ملف HTML عادي يستخدم قالبًا يستخدم bootstrap.
رابعا. أمثلة
الآن دعنا نحاول الإخراج "مرحبًا ، عالم!" باستخدام bootstrap:
<! doctype html> <html> <head> <title> حاول pootstrap مثيل عبر الإنترنت </title> <link href = "http://apps.bdimg.com/libs/boostrap/3.3.0/css/bootstrap.min.cs" rel = "stylesh" src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> </script> <script src = "http://apps.bdimg.com/libs/bootstrap/3. العالم! </h1> </body> </html>
<!-ملف css الأساسي الجديد bootstrap-> <link href = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel = "stylesheet"> <! src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"> </script> <!-ملف jQuery. تأكد من تقديم-> <script src = "http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"> <!-أحدث ملف JavaScript الأساسي-> <script src = "http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"> </script>
إذا كنت لا تزال ترغب في التعلم بعمق ، فيمكنك النقر هنا للتعلم وإرفاق موضوعين مثيرين لك: Bootstrap التعلم التعليمي التعليمي التعليمي العملي
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وبناء بيئة تثبيت bootstrap بشكل صحيح.