ابدأ مع Bootstrap

Bootstrap عبارة عن مجموعة أدوات أمامية قوية ومليئة بالميزات. أنشئ أي شيء - من النموذج الأولي إلى الإنتاج - في دقائق.

على هذه الصفحة

بداية سريعة

ابدأ بتضمين CSS وجافا سكريبت الجاهزين للإنتاج من Bootstrap عبر CDN دون الحاجة إلى أي خطوات بناء. شاهده عمليًا مع عرض Bootstrap CodePen هذا .

قم بإنشاء index.htmlملف جديد في جذر مشروعك. قم بتضمين <meta name="viewport">العلامة أيضًا للحصول على سلوك استجابة مناسب في الأجهزة المحمولة.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

قم بتضمين CSS و JS من Bootstrap. ضع <link>العلامة في <head>CSS الخاصة بنا ، <script>وعلامة حزمة JavaScript الخاصة بنا (بما في ذلك Popper لوضع القوائم المنسدلة ، و poppers ، وتلميحات الأدوات) قبل الإغلاق </body>. تعرف على المزيد حول روابط CDN الخاصة بنا .

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

يمكنك أيضًا تضمين Popper و JS الخاص بنا بشكل منفصل. إذا كنت لا تخطط لاستخدام القوائم المنسدلة أو المنبثقة أو تلميحات الأدوات ، فاحفظ بعض الكيلو بايت من خلال عدم تضمين Popper.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

مرحبا بالعالم! افتح الصفحة في المستعرض الذي تختاره لترى صفحة Bootstrapped الخاصة بك. يمكنك الآن البدء في البناء باستخدام Bootstrap من خلال إنشاء تخطيطك الخاص وإضافة العشرات من المكونات واستخدام الأمثلة الرسمية لدينا .

روابط CDN

كمرجع ، إليك روابط CDN الأساسية الخاصة بنا.

وصف	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
شبيبة	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

يمكنك أيضًا استخدام CDN لجلب أي من تصميماتنا الإضافية المدرجة في صفحة المحتويات .

الخطوات التالية

اقرأ المزيد عن بعض إعدادات البيئة العالمية المهمة التي يستخدمها Bootstrap.
اقرأ حول ما يتم تضمينه في Bootstrap في قسم المحتويات وقائمة المكونات التي تتطلب JavaScript أدناه.
بحاجة الى مزيد من القوة؟ ضع في اعتبارك البناء باستخدام Bootstrap عن طريق تضمين الملفات المصدر عبر مدير الحزم .
تبحث لاستخدام Bootstrap كوحدة نمطية مع <script type="module">؟ يرجى الرجوع إلى استخدام Bootstrap كقسم وحدة نمطية.

مكونات JS

هل أنت مهتم بالمكونات التي تتطلب صراحةً JavaScript و Popper؟ انقر فوق ارتباط إظهار المكونات أدناه. إذا لم تكن متأكدًا على الإطلاق من بنية الصفحة العامة ، فاستمر في القراءة للحصول على نموذج لقالب الصفحة.

إظهار المكونات التي تتطلب JavaScript

تنبيهات للرفض
أزرار لتبديل الحالات ووظائف مربع الاختيار / الراديو
دائري لجميع سلوكيات الشرائح ، وعناصر التحكم ، والمؤشرات
تصغير لتبديل رؤية المحتوى
القوائم المنسدلة للعرض وتحديد المواقع (يتطلب أيضًا Popper )
نماذج لعرض السلوك وتحديد المواقع والتمرير
Navbar لتوسيع الإضافات Collapse و Offcanvas لتنفيذ السلوكيات سريعة الاستجابة
تنقل باستخدام ملحق Tab لتبديل أجزاء المحتوى
مداخن للعرض ، وتحديد المواقع ، وسلوك التمرير
Scrollspy لسلوك التمرير وتحديثات التنقل
الخبز المحمص للعرض والرفض
تلميحات الأدوات والأجزاء المنبثقة للعرض وتحديد المواقع (يتطلب أيضًا Popper )

جلوبالس مهمة

يستخدم Bootstrap عددًا قليلاً من الأنماط والإعدادات العالمية المهمة ، وكلها تقريبًا موجهة بشكل حصري نحو تطبيع أنماط المستعرضات المتقاطعة. دعنا نتعمق.

نوع مستند HTML5

يتطلب Bootstrap استخدام نوع مستند HTML5. بدونها ، سترى بعض التصميم غير التقليدي وغير المكتمل.

<!doctype html>
<html lang="en">
  ...
</html>

علامة وصفية سريعة الاستجابة

تم تطوير Bootstrap للهاتف المحمول أولاً ، وهي استراتيجية نقوم من خلالها بتحسين التعليمات البرمجية للأجهزة المحمولة أولاً ثم توسيع نطاق المكونات حسب الضرورة باستخدام استعلامات وسائط CSS. لضمان العرض المناسب والتكبير باللمس لجميع الأجهزة ، أضف العلامة الوصفية لإطار العرض المتجاوب إلى ملف <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

يمكنك رؤية مثال على ذلك عمليًا في البداية السريعة .

حجم الصندوق

لمزيد من التحجيم المباشر في CSS ، نحول box-sizingالقيمة العالمية من content-boxإلى border-box. يضمن هذا paddingعدم التأثير على العرض النهائي المحسوب للعنصر ، ولكنه قد يتسبب في مشاكل مع بعض برامج الجهات الخارجية مثل خرائط Google ومحرك البحث المخصص من Google.

في الحالات النادرة التي تحتاج فيها إلى تجاوزها ، استخدم شيئًا مثل ما يلي:

.selector-for-some-widget {
  box-sizing: content-box;
}

باستخدام المقتطف أعلاه ، فإن العناصر المتداخلة - بما في ذلك المحتوى الذي تم إنشاؤه عبر ::beforeو - ::afterسترث جميعها المحدد box-sizingلذلك .selector-for-some-widget.

تعرف على المزيد حول نموذج الصندوق والتحجيم في CSS Tricks .

اعادة التشغيل

لتحسين العرض عبر المستعرضات ، نستخدم Reboot لتصحيح التناقضات عبر المتصفحات والأجهزة مع توفير عمليات إعادة تعيين أكثر إبداءً لرأي عناصر HTML الشائعة.

تواصل اجتماعي

ابق على اطلاع دائم على تطوير Bootstrap وتواصل مع المجتمع بهذه الموارد المفيدة.

اقرأ واشترك في مدونة Bootstrap الرسمية .
اسأل واستكشف مناقشات GitHub .
الدردشة مع زملائك Bootstrappers في IRC. على irc.libera.chatالخادم ، في #bootstrapالقناة.
يمكن العثور على مساعدة التنفيذ في Stack Overflow (الموسومة bootstrap-5).
يجب على المطورين استخدام الكلمة الأساسية bootstrapفي الحزم التي تعدل وظائف Bootstrap أو تضيف إليها عند التوزيع من خلال npm أو آليات التسليم المماثلة لتحقيق أقصى قدر من الاكتشاف.

يمكنك أيضًا متابعة getbootstrap على Twitter للحصول على أحدث مقاطع الفيديو الموسيقية الرائعة والشائعات.