نظرة عامة على المشروع ومحتوياته وكيفية البدء بقالب بسيط.
قبل التنزيل ، تأكد من أن لديك محرر كود (نوصي Sublime Text 2 ) وبعض المعرفة العملية بـ HTML و CSS. لن نتصفح الملفات المصدر هنا ، لكنها متاحة للتنزيل. سنركز على بدء استخدام ملفات Bootstrap المجمعة.
أسرع طريقة للبدء: احصل على الإصدارات المترجمة والمصغرة من CSS و JS والصور الخاصة بنا. لا توجد مستندات أو ملفات مصدر أصلية.
احصل على الملفات الأصلية لجميع CSS و Javasript ، بالإضافة إلى نسخة محلية من المستندات عن طريق تنزيل أحدث إصدار مباشرة من GitHub.
ضمن التنزيل ، ستجد بنية الملف التالية ومحتوياته ، حيث يتم تجميع الأصول المشتركة بشكل منطقي وتوفير كل من الاختلافات المترجمة والمصغرة.
بمجرد التنزيل ، قم بفك ضغط المجلد المضغوط لرؤية بنية Bootstrap (المترجمة). سترى شيئًا كهذا:
bootstrap / ├── css / │ ├── bootstrap . المغلق │ ├── التمهيد . دقيقة . css ├── js / │ ├── التمهيد . js │ ├── bootstrap . دقيقة . js ├── img / │ الحروف الرسومية - halflings . png │ ├── الحروف الرسومية - النصفية - الأبيض . بي إن جي └── اقرأني . م
هذا هو الشكل الأساسي من Bootstrap: الملفات المجمعة للاستخدام السريع في أي مشروع ويب تقريبًا. نحن نقدم CSS و JS ( bootstrap.*
) مترجمين ، بالإضافة إلى CSS و JS ( bootstrap.min.*
) المُجمَّعين والمُصغرين. يتم ضغط ملفات الصور باستخدام ImageOptim ، وهو تطبيق Mac لضغط PNGs.
يأتي Bootstrap مزودًا بـ HTML و CSS و JS لجميع أنواع الأشياء ، ولكن يمكن تلخيصها بعدد قليل من الفئات الظاهرة في الجزء العلوي من وثائق Bootstrap .
الأنماط العامة للجسم لإعادة تعيين النوع والخلفية وأنماط الارتباط ونظام الشبكة وتخطيطين بسيطين.
أنماط لعناصر HTML الشائعة مثل الطباعة والتعليمات البرمجية والجداول والنماذج والأزرار. يتضمن أيضًا Glyphicons ، مجموعة أيقونات صغيرة رائعة.
الأنماط الأساسية لمكونات الواجهة الشائعة مثل علامات التبويب وأقراص الأقراص وشريط التنقل والتنبيهات ورؤوس الصفحات والمزيد.
على غرار المكونات ، تعد مكونات Javascript الإضافية مكونات تفاعلية لأشياء مثل تلميحات الأدوات ، والأدوات المنبثقة ، والشروط ، والمزيد.
توفر أقسام المكونات و Javascript الإضافية معًا عناصر الواجهة التالية:
في الأدلة المستقبلية ، قد نتصفح هذه المكونات بشكل فردي بمزيد من التفاصيل. حتى ذلك الحين ، ابحث عن كل منها في الوثائق للحصول على معلومات حول كيفية استخدامها وتخصيصها.
مع مقدمة موجزة عن المحتويات بعيدًا عن الطريق ، يمكننا التركيز على استخدام Bootstrap. للقيام بذلك ، سنستخدم قالب HTML أساسيًا يتضمن كل ما ذكرناه في بنية الملف .
الآن ، إليك نظرة على ملف HTML نموذجي :
- <html>
- <head>
- <title> قالب Bootstrap 101 </title>
- </head>
- <الجسم>
- <h1> مرحبًا بالعالم! </h1>
- </body>
- </html>
لجعل هذا نموذج Bootstrapped ، ما عليك سوى تضمين ملفات CSS و JS المناسبة:
- <html>
- <head>
- <title> قالب Bootstrap 101 </title>
- <! - Bootstrap ->
- <link href = "css / bootstrap.min.css" rel = "stylesheet" >
- </head>
- <الجسم>
- <h1> مرحبًا بالعالم! </h1>
- <script src = "js / bootstrap.min.js" > </script>
- </body>
- </html>
وأنت على استعداد! مع إضافة هذين الملفين ، يمكنك البدء في تطوير أي موقع أو تطبيق باستخدام Bootstrap.
انتقل إلى ما بعد القالب الأساسي باستخدام بعض الأمثلة على التخطيطات. نحن نشجع الناس على تكرار هذه الأمثلة وليس مجرد استخدامها كنتيجة نهائية.
توجه إلى المستندات للحصول على المعلومات والأمثلة ومقتطفات التعليمات البرمجية ، أو اتخذ الخطوة التالية وقم بتخصيص Bootstrap لأي مشروع قادم.
قم بزيارة مستندات Bootstrap تخصيص Bootstrap