تحميل

يحتوي Bootstrap (حاليًا الإصدار 3.4.1) على بعض الطرق السهلة للبدء بسرعة ، كل واحدة منها جذابة لمستوى مهارة مختلف وحالة استخدام. اقرأ لمعرفة ما يناسب احتياجاتك الخاصة.

jsDelivr

يوفر الأشخاص الموجودون في jsDelivr بلطف دعم CDN لكل من Bootstrap's CSS و JavaScript. فقط استخدم روابط jsDelivr هذه .

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

التثبيت مع Bower

يمكنك أيضًا تثبيت وإدارة Bootstrap's Less و CSS و JavaScript والخطوط باستخدام Bower :

bower install bootstrap

تثبيت مع npm

يمكنك أيضًا تثبيت Bootstrap باستخدام npm :

npm install bootstrap@3

require('bootstrap')سيتم تحميل جميع ملحقات jQuery الخاصة بـ Bootstrap على كائن jQuery. الوحدة bootstrapنفسها لا تصدر أي شيء. يمكنك يدويًا تحميل ملحقات jQuery الخاصة بـ Bootstrap بشكل فردي عن طريق تحميل /js/*.jsالملفات ضمن دليل المستوى الأعلى للحزمة.

يحتوي Bootstrap package.jsonعلى بعض البيانات الوصفية الإضافية تحت المفاتيح التالية:

• less- المسار إلى ملف Less source file الرئيسي الخاص بـ Bootstrap
• style- المسار إلى CSS غير المصغر لـ Bootstrap والذي تم تجميعه مسبقًا باستخدام الإعدادات الافتراضية (بدون تخصيص)

التثبيت مع Composer

يمكنك أيضًا تثبيت وإدارة خطوط أقل و CSS وجافا سكريبت وخطوط Bootstrap باستخدام Composer :

composer require twbs/bootstrap

المصفف الآلي مطلوب لأقل / ساس

يستخدم Bootstrap Autoprefixer للتعامل مع بادئات بائع CSS . إذا كنت تقوم بتجميع Bootstrap من مصدر Less / Sass ولا تستخدم Gruntfile الخاص بنا ، فستحتاج إلى دمج Autoprefixer في عملية الإنشاء بنفسك. إذا كنت تستخدم Bootstrap المترجم مسبقًا أو تستخدم Gruntfile الخاص بنا ، فلا داعي للقلق بشأن هذا لأن Autoprefixer مدمج بالفعل في Gruntfile الخاص بنا.

ما يحتويه

Bootstrap قابل للتنزيل في شكلين ، ستجد ضمنهما الدلائل والملفات التالية ، وتجميع الموارد المشتركة بشكل منطقي وتوفير كل من الاختلافات المترجمة والمصغرة.

التمهيد المترجم مسبقا

بمجرد التنزيل ، قم بفك ضغط المجلد المضغوط لرؤية بنية Bootstrap (المترجمة). سترى شيئًا كهذا:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

هذا هو الشكل الأساسي من Bootstrap: الملفات المترجمة مسبقًا للاستخدام السريع في أي مشروع ويب تقريبًا. نحن نقدم CSS و JS ( bootstrap.*) مترجمين ، بالإضافة إلى CSS و JS ( bootstrap.min.*) المُجمَّعين والمُصغرين. خرائط مصدر CSS ( bootstrap.*.map) متاحة للاستخدام مع أدوات مطور بعض المتصفحات. يتم تضمين الخطوط من Glyphicons ، وكذلك سمة Bootstrap الاختيارية.

كود مصدر Bootstrap

يتضمن تنزيل التعليمات البرمجية المصدر لـ Bootstrap أصول CSS و JavaScript وأصول الخط المترجمة مسبقًا ، إلى جانب المصدر Less و JavaScript والوثائق. بشكل أكثر تحديدًا ، يتضمن ما يلي والمزيد:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

إن less/و js/و fonts/هي الكود المصدري لخطوط CSS و JS والأيقونات (على التوالي). يتضمن dist/المجلد كل شيء مدرج في قسم التنزيل المترجم مسبقًا أعلاه. يتضمن docs/المجلد الكود المصدري examples/لوثائقنا واستخدام Bootstrap. علاوة على ذلك ، يوفر أي ملف مضمّن آخر دعمًا للحزم ومعلومات الترخيص والتطوير.

ترجمة CSS و JavaScript

يستخدم Bootstrap Grunt لنظام البناء الخاص به ، مع طرق ملائمة للعمل مع إطار العمل. إنها الطريقة التي نجمع بها الكود الخاص بنا ونجري الاختبارات والمزيد.

تثبيت Grunt

لتثبيت Grunt ، يجب أولاً تنزيل وتثبيت node.js (الذي يتضمن npm). يرمز npm إلى الوحدات النمطية المجمعة للعقدة وهي طريقة لإدارة تبعيات التطوير من خلال node.js.

1. تثبيت grunt-cliعالميًا باستخدام npm install -g grunt-cli.
2. انتقل إلى الدليل الجذر /bootstrap/، ثم قم بتشغيل npm install. سيبحث npm في package.jsonالملف ويقوم تلقائيًا بتثبيت التبعيات المحلية الضرورية المدرجة هناك.

عند الانتهاء ، ستتمكن من تشغيل أوامر Grunt المختلفة المتوفرة من سطر الأوامر.

أوامر Grunt المتاحة

grunt dist(فقط قم بتجميع CSS و JavaScript)

يجدد /dist/الدليل بملفات CSS و JavaScript مُجمَّعة ومُصغَّرة. بصفتك مستخدم Bootstrap ، عادة ما يكون هذا هو الأمر الذي تريده.

grunt watch(راقب)

يراقب الملفات ذات المصدر الأقل ويعيد تجميعها تلقائيًا إلى CSS كلما قمت بحفظ تغيير.

grunt test(تشغيل الاختبارات)

يدير JSHint ويدير اختبارات QUnit في متصفحات حقيقية بفضل Karma .

grunt docs(بناء واختبار أصول المستندات)

ينشئ ويختبر CSS و JavaScript والأصول الأخرى التي يتم استخدامها عند تشغيل الوثائق محليًا عبر bundle exec jekyll serve.

grunt(بناء كل شيء على الإطلاق وتشغيل الاختبارات)

يقوم بتجميع وتصغير CSS و JavaScript ، وإنشاء موقع التوثيق على الويب ، وتشغيل مدقق HTML5 مقابل المستندات ، وإعادة إنشاء أصول Customizer ، والمزيد. يتطلب Jekyll . عادة ما يكون ضروريًا فقط إذا كنت تقوم بالقرصنة على Bootstrap نفسه.

استكشاف الأخطاء وإصلاحها

إذا واجهت مشاكل في تثبيت التبعيات أو تشغيل أوامر Grunt ، فاحذف أولاً /node_modules/الدليل الذي تم إنشاؤه بواسطة npm. ثم أعد التشغيل npm install.

نموذج أساسي

ابدأ بقالب HTML الأساسي هذا ، أو قم بتعديل هذه الأمثلة . نأمل أن تقوم بتخصيص نماذجنا وأمثلةنا ، وتكييفها لتناسب احتياجاتك.

انسخ HTML أدناه لبدء العمل بأدنى حد من مستند Bootstrap.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
  </body>
</html>

أمثلة

قم بالبناء على القالب الأساسي أعلاه باستخدام العديد من مكونات Bootstrap. نحن نشجعك على تخصيص Bootstrap وتكييفه ليناسب احتياجات مشروعك الفردي.

احصل على الكود المصدري لكل مثال أدناه عن طريق تنزيل مستودع Bootstrap . يمكن العثور على أمثلة في docs/examples/الدليل.

باستخدام الإطار

نموذج المبتدئين

لا شيء سوى الأساسيات: تم تجميع CSS وجافا سكريبت مع الحاوية.

موضوع Bootstrap

قم بتحميل سمة Bootstrap الاختيارية للحصول على تجربة محسنة بصريًا.

شبكات

أمثلة متعددة لتخطيطات الشبكة مع المستويات الأربعة جميعها والتداخل والمزيد.

جمبوترون

بناء حول jumbotron مع navbar وبعض أعمدة الشبكة الأساسية.

جمبوترون الضيق

قم ببناء صفحة أكثر تخصيصًا عن طريق تضييق الحاوية الافتراضية و jumbotron.

Navbars في العمل

نافبار

نموذج أساسي للغاية يتضمن شريط التنقل مع بعض المحتويات الإضافية.

ثابت أعلى نافبار

قالب أساسي فائق مع شريط تنقل علوي ثابت مع بعض المحتوى الإضافي.

نافبار ثابت

قالب أساسي للغاية مع شريط تنقل علوي ثابت مع بعض المحتوى الإضافي.

مكونات مخصصة

التغطية

قالب من صفحة واحدة لإنشاء صفحات رئيسية بسيطة وجميلة.

دائري

قم بتخصيص شريط التنقل والعرض الدائري ، ثم أضف بعض المكونات الجديدة.

مقالات

تخطيط بسيط للمدونة من عمودين مع التنقل المخصص والعنوان والنوع.

لوحة القيادة

الهيكل الأساسي للوحة تحكم المسؤول مع شريط جانبي ثابت وشريط التنقل.

صفحة تسجيل الدخول

تخطيط وتصميم نموذج مخصص لنموذج تسجيل دخول بسيط.

التنقل المبرر

إنشاء شريط تنقل مخصص مع روابط مبررة. انتباه! ليس سفاري ودية للغاية.

تذييل مثبت

قم بإرفاق تذييل أسفل إطار العرض عندما يكون المحتوى أقصر منه.

تذييل مثبت مع نافبار

قم بإرفاق تذييل في الجزء السفلي من منفذ العرض مع وجود شريط تنقل ثابت في الأعلى.

التجارب

Bootstrap غير مستجيب

يمكنك بسهولة تعطيل استجابة Bootstrap لكل مستنداتنا .

خارج القماش

أنشئ قائمة تنقل غير قابلة للتبديل للاستخدام مع Bootstrap.

أدوات

Bootlint

Bootlint هي أداة Bootstrap HTML linter الرسمية . يقوم تلقائيًا بالتحقق من العديد من أخطاء HTML الشائعة في صفحات الويب التي تستخدم Bootstrap بطريقة "الفانيليا" إلى حد ما. تتطلب عناصر / عناصر واجهة Vanilla Bootstrap أن تتوافق أجزاءها من DOM مع هياكل معينة. يتحقق Bootlint من أن مثيلات مكونات Bootstrap تحتوي على HTML منظم بشكل صحيح. ضع في اعتبارك إضافة Bootlint إلى سلسلة أدوات تطوير الويب Bootstrap بحيث لا تؤدي أي من الأخطاء الشائعة إلى إبطاء تطوير مشروعك.

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

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

• اقرأ واشترك في مدونة Bootstrap الرسمية .
• تحدث مع زملائك من Bootstrappers باستخدام IRC في irc.freenode.netالخادم ، في ## bootstrap قناة .
• للمساعدة في استخدام Bootstrap ، اسأل على StackOverflow باستخدام العلامةtwitter-bootstrap-3 .
• يجب على المطورين استخدام الكلمة الأساسية bootstrapفي الحزم التي تعدل أو تضيف إلى وظائف Bootstrap عند التوزيع من خلال npm أو آليات التسليم المماثلة لتحقيق أقصى قدر من الاكتشاف.
• اعثر على أمثلة ملهمة لأشخاص يبنون باستخدام Bootstrap في Bootstrap Expo .

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

تعطيل الاستجابة

يقوم Bootstrap تلقائيًا بتكييف صفحاتك مع أحجام الشاشات المختلفة. إليك كيفية تعطيل هذه الميزة حتى تعمل صفحتك مثل هذا المثال غير المستجيب .

خطوات لتعطيل استجابة الصفحة

1. احذف منفذ العرض <meta>المذكور في مستندات CSS
2. قم بتجاوز widthon the .containerلكل طبقة شبكة بعرض واحد ، على سبيل المثال width: 970px !important;تأكد من أن هذا يأتي بعد Bootstrap CSS الافتراضي. يمكنك بشكل اختياري تجنب استخدام !importantاستعلامات الوسائط أو بعض المحددات.
3. إذا كنت تستخدم أشرطة التنقل ، فقم بإزالة كل سلوك طي وتمديد شريط التنقل.
4. بالنسبة إلى تخطيطات الشبكة ، استخدم .col-xs-*الفئات بالإضافة إلى الفئات المتوسطة / الكبيرة أو بدلاً منها. لا تقلق ، تتناسب شبكة الجهاز الصغيرة جدًا مع جميع الدقة.

ستظل بحاجة إلى Respond.js لـ IE8 (نظرًا لأن استفسارات الوسائط لا تزال موجودة وتحتاج إلى المعالجة). يؤدي هذا إلى تعطيل جوانب "موقع الجوال" في Bootstrap.

قالب Bootstrap مع الاستجابة غير مفعّلة

لقد طبقنا هذه الخطوات على مثال. اقرأ الكود المصدري الخاص به لمعرفة التغييرات المحددة التي تم تنفيذها.

عرض مثال غير مستجيب

المستعرض ودعم الجهاز

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

المتصفحات المدعومة

على وجه التحديد ، نحن ندعم أحدث إصدارات المتصفحات والأنظمة الأساسية التالية.

لا يتم دعم المتصفحات البديلة التي تستخدم أحدث إصدار من WebKit أو Blink أو Gecko ، سواء بشكل مباشر أو عبر واجهة برمجة تطبيقات عرض الويب للنظام الأساسي ، بشكل صريح. ومع ذلك ، يجب أن يعرض Bootstrap (في معظم الحالات) ويعمل بشكل صحيح في هذه المتصفحات أيضًا. يتم توفير معلومات دعم أكثر تحديدًا أدناه.

أجهزة محمولة

بشكل عام ، يدعم Bootstrap أحدث الإصدارات من المتصفحات الافتراضية لكل منصة رئيسية. لاحظ أن المتصفحات الوكيلة (مثل Opera Mini و Opera Mobile's Turbo mode و UC Browser Mini و Amazon Silk) غير مدعومة.

متصفحات سطح المكتب

وبالمثل ، يتم دعم أحدث إصدارات معظم متصفحات سطح المكتب.

في نظام Windows ، ندعم Internet Explorer 8-11 .

بالنسبة إلى Firefox ، بالإضافة إلى أحدث إصدار ثابت عادي ، فإننا ندعم أيضًا أحدث إصدار من إصدار الدعم الموسع (ESR) من Firefox.

بشكل غير رسمي ، يجب أن يبدو Bootstrap ويتصرف بشكل جيد بما فيه الكفاية في Chromium و Chrome لنظام التشغيل Linux و Firefox لنظام التشغيل Linux و Internet Explorer 7 بالإضافة إلى Microsoft Edge ، على الرغم من عدم دعمها رسميًا.

للحصول على قائمة ببعض أخطاء المتصفح التي يتعين على Bootstrap التعامل معها ، راجع جدار أخطاء المتصفح .

إنترنت إكسبلورر 8 و 9

يتم دعم Internet Explorer 8 و 9 أيضًا ، ومع ذلك ، يرجى الانتباه إلى أن بعض خصائص CSS3 وعناصر HTML5 لا تدعمها هذه المتصفحات بشكل كامل. بالإضافة إلى ذلك ، يتطلب Internet Explorer 8 استخدام Respond.js لتمكين دعم استعلام الوسائط.

تفضل بزيارة هل يمكنني استخدام ... للحصول على تفاصيل حول دعم المتصفح لميزات CSS3 و HTML5.

Internet Explorer 8 و Respond.js

احذر من التحذيرات التالية عند استخدام Respond.js في بيئات التطوير والإنتاج الخاصة بك لـ Internet Explorer 8.

Respond.js و CSS عبر المجالات

يتطلب استخدام Respond.js مع CSS المستضاف على مجال (فرعي) مختلف (على سبيل المثال ، على شبكة CDN) بعض الإعداد الإضافي. راجع مستندات Respond.js للحصول على التفاصيل.

Respond.js وfile://

نظرًا لقواعد أمان المتصفح ، لا يعمل Respond.js مع الصفحات التي يتم عرضها عبر file://البروتوكول (مثل عند فتح ملف HTML محلي). لاختبار الميزات سريعة الاستجابة في IE8 ، اعرض صفحاتك عبر HTTP (S). راجع مستندات Respond.js للحصول على التفاصيل.

Respond.js و@import

لا يعمل Respond.js مع CSS المشار إليه عبر @import. على وجه الخصوص ، من المعروف أن بعض تكوينات دروبال تستخدم @import. راجع مستندات Respond.js للحصول على التفاصيل.

إنترنت إكسبلورر 8 وتحجيم الصندوق

لا يدعم IE8 بشكل كامل box-sizing: border-box;عند دمجه مع min-width، max-widthأو min-height، أو max-height. max-widthلهذا السبب ، اعتبارًا من الإصدار 3.0.1 ، لم نعد نستخدم .containers.

Internet Explorer 8 و @ font-face

يواجه IE8 بعض المشكلات @font-faceعند دمجه مع :before. يستخدم Bootstrap هذا المزيج مع Glyphicons الخاص به. إذا تم تخزين الصفحة مؤقتًا وتحميلها بدون الماوس فوق النافذة (على سبيل المثال ، اضغط على زر التحديث أو قم بتحميل شيء ما في إطار iframe) ، فسيتم عرض الصفحة قبل تحميل الخط. سيؤدي التمرير فوق الصفحة (النص الأساسي) إلى إظهار بعض الرموز وسيؤدي التمرير فوق الرموز المتبقية إلى إظهارها أيضًا. راجع العدد رقم 13863 للحصول على التفاصيل.

أوضاع توافق IE

لا يتم دعم Bootstrap في أوضاع توافق Internet Explorer القديمة. للتأكد من أنك تستخدم أحدث وضع عرض لـ IE ، ضع في اعتبارك تضمين <meta>العلامة المناسبة في صفحاتك:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

قم بتأكيد وضع المستند عن طريق فتح أدوات التصحيح: اضغط F12وتحقق من "وضع المستند".

يتم تضمين هذه العلامة في جميع وثائق وأمثلة Bootstrap لضمان أفضل عرض ممكن في كل إصدار مدعوم من Internet Explorer.

راجع سؤال StackOverflow هذا لمزيد من المعلومات.

Internet Explorer 10 في Windows 8 و Windows Phone 8

لا يفرق Internet Explorer 10 بين عرض الجهاز وعرض منفذ العرض ، وبالتالي لا يطبق استعلامات الوسائط بشكل صحيح في CSS الخاص بـ Bootstrap. عادةً ما تضيف مقتطفًا سريعًا من CSS لإصلاح ذلك:

@-ms-viewport       { width: device-width; }

ومع ذلك ، لا يعمل هذا مع الأجهزة التي تعمل بإصدارات Windows Phone 8 الأقدم من التحديث 3 (المعروف أيضًا باسم GDR3) ، حيث يتسبب في عرض هذه الأجهزة لعرض سطح المكتب في الغالب بدلاً من عرض "الهاتف" الضيق. لمعالجة هذا الأمر ، ستحتاج إلى تضمين CSS و JavaScript التاليين للتغلب على الخطأ .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2019 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/v3-dev/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

لمزيد من المعلومات وإرشادات الاستخدام ، اقرأ Windows Phone 8 و Device-Width .

كتوجيه ، نقوم بتضمين هذا في جميع وثائق وأمثلة Bootstrap كعرض توضيحي.

التقريب في المئة سفاري

واجه محرك عرض إصدارات Safari السابقة للإصدار 7.1 لنظام التشغيل OS X و Safari لنظام التشغيل iOS v8.0 بعض المشاكل مع عدد المنازل العشرية المستخدمة في .col-*-1فئات الشبكة الخاصة بنا. لذلك إذا كان لديك 12 عمودًا فرديًا للشبكة ، فستلاحظ أنها جاءت قصيرة مقارنة بصفوف الأعمدة الأخرى. إلى جانب ترقية Safari / iOS ، لديك بعض الخيارات للحلول البديلة:

• أضف .pull-rightإلى عمود الشبكة الأخير للحصول على محاذاة أقصى اليمين
• قم بتعديل النسب المئوية يدويًا للحصول على التقريب المثالي لـ Safari (أكثر صعوبة من الخيار الأول)

الوسائط ، وأشرطة التنقل ، ولوحات المفاتيح الافتراضية

تجاوز والتمرير

دعم overflow: hiddenالعنصر <body>محدود للغاية في iOS و Android. تحقيقا لهذه الغاية ، عندما تقوم بالتمرير إلى ما بعد الجزء العلوي أو السفلي من الوسائط في أي من متصفحات تلك الأجهزة ، <body>سيبدأ المحتوى في التمرير. راجع خطأ Chrome رقم 175502 (تم الإصلاح في Chrome v40) وخطأ WebKit رقم 153852 .

حقول نصية iOS والتمرير

اعتبارًا من iOS 9.3 ، أثناء فتح النموذج ، إذا كانت اللمسة الأولية لإيماءة التمرير داخل حدود النص <input>أو a <textarea>، <body>فسيتم تمرير المحتوى الموجود أسفل النموذج بدلاً من النموذج نفسه. راجع خطأ WebKit # 153856 .

لوحات المفاتيح الافتراضية

لاحظ أيضًا أنه إذا كنت تستخدم شريط تنقل ثابتًا أو تستخدم مدخلات ضمن نموذج ، فإن نظام التشغيل iOS به خطأ في العرض لا يقوم بتحديث موضع العناصر الثابتة عند تشغيل لوحة المفاتيح الافتراضية. تتضمن بعض الحلول لذلك تحويل العناصر الخاصة بك إلى position: absoluteأو استدعاء مؤقت عند التركيز لمحاولة تصحيح الوضع يدويًا. لا يتم التعامل مع هذا بواسطة Bootstrap ، لذا فإن الأمر متروك لك لتحديد الحل الأفضل لتطبيقك.

القوائم المنسدلة Navbar

لا يتم .dropdown-backdropاستخدام العنصر في نظام التشغيل iOS في التنقل بسبب تعقيد فهرسة z. وبالتالي ، لإغلاق القوائم المنسدلة في أشرطة التنقل ، يجب أن تنقر مباشرةً على عنصر القائمة المنسدلة (أو أي عنصر آخر سيطلق حدث نقرة في iOS ).

تكبير المتصفح

يعرض تكبير الصفحة حتمًا عيوبًا في العرض في بعض المكونات ، في كل من Bootstrap وبقية الويب. اعتمادًا على المشكلة ، قد نتمكن من إصلاحها (ابحث أولاً ثم افتح المشكلة إذا لزم الأمر). ومع ذلك ، فإننا نميل إلى تجاهلها نظرًا لعدم وجود حل مباشر لها في كثير من الأحيان بخلاف الحلول البديلة.

مثبت :hover/ :focusعلى الهاتف المحمول

على الرغم من أن التحويم الحقيقي غير ممكن في معظم الشاشات التي تعمل باللمس ، إلا أن معظم متصفحات الجوال تحاكي دعم التحويم وتجعله :hover"ثابتًا". بمعنى آخر ، :hoverتبدأ الأنماط في التطبيق بعد النقر على عنصر ولا تتوقف عن التطبيق إلا بعد نقر المستخدم على بعض العناصر الأخرى. يمكن أن يتسبب هذا في :hoverأن تصبح حالات Bootstrap "عالقة" بشكل غير مرغوب فيه على مثل هذه المتصفحات. كما أن بعض متصفحات الجوال تجعلها :focusلزجة بالمثل. لا يوجد حاليًا حل بسيط لهذه المشكلات بخلاف إزالة هذه الأنماط تمامًا.

طباعة

حتى في بعض المتصفحات الحديثة ، يمكن أن تكون الطباعة غريبة.

على وجه الخصوص ، اعتبارًا من Chrome v32 وبغض النظر عن إعدادات الهامش ، يستخدم Chrome عرض إطار عرض أضيق بكثير من حجم الورق الفعلي عند حل استعلامات الوسائط أثناء طباعة صفحة ويب. يمكن أن يؤدي ذلك إلى تنشيط شبكة Bootstrap الصغيرة جدًا بشكل غير متوقع عند الطباعة. راجع المشكلة رقم 12078 وخلل Chrome رقم 273306 للحصول على بعض التفاصيل. الحلول المقترحة:

• احتضن الشبكة الصغيرة جدًا وتأكد من أن صفحتك تبدو مقبولة تحتها.
• قم بتخصيص قيم @screen-*المتغيرات الأقل بحيث يتم اعتبار ورق الطابعة أكبر من الحجم الصغير جدًا.
• أضف استعلامات وسائط مخصصة لتغيير نقاط توقف حجم الشبكة لوسائط الطباعة فقط.

أيضًا ، اعتبارًا من الإصدار 8.0 من Safari ، .containerيمكن أن يتسبب العرض الثابت في أن يستخدم Safari حجم خط صغير بشكل غير عادي عند الطباعة. راجع # 14868 وخطأ WebKit # 138192 لمزيد من التفاصيل. أحد الحلول المحتملة لهذا هو إضافة CSS التالية:

@media print {
  .container {
    width: auto;
  }
}

متصفح Android Stock

من خارج الصندوق ، يأتي Android 4.1 (وحتى بعض الإصدارات الأحدث على ما يبدو) مع تطبيق Browser باعتباره متصفح الويب الافتراضي المفضل (على عكس Chrome). لسوء الحظ ، يحتوي تطبيق Browser على الكثير من الأخطاء والتناقضات مع CSS بشكل عام.

حدد القوائم

فيما يتعلق <select>بالعناصر ، لن يعرض متصفح Android Stock عناصر التحكم الجانبية إذا كان هناك border-radiusو / أو borderمطبق. (راجع سؤال StackOverflow هذا للحصول على التفاصيل.) استخدم مقتطف الشفرة أدناه لإزالة CSS المخالف وعرض <select>العنصر كعنصر غير منظم على مستعرض الأسهم في Android. يتجنب استنشاق وكيل المستخدم التداخل مع متصفحات Chrome و Safari و Mozilla.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

تريد أن ترى مثالا؟ تحقق من هذا العرض التوضيحي لـ JS Bin.

المدققون

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

لا تهم تحذيرات التحقق هذه من الناحية العملية نظرًا لأن الجزء غير المخترق من CSS الخاص بنا يتحقق بشكل كامل ولا تتداخل أجزاء الاختراق مع الأداء السليم للجزء غير المخترق ، ومن ثم فإننا نتجاهل هذه التحذيرات الخاصة عمدًا.

تحتوي مستندات HTML أيضًا على بعض التحذيرات التافهة وغير المهمة للتحقق من صحة HTML نظرًا لتضميننا حلًا بديلًا لخلل معين في Firefox .

دعم الطرف الثالث

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

حجم الصندوق

تتعارض بعض برامج الجهات الخارجية ، بما في ذلك خرائط Google و Google Custom Search Engine ، مع Bootstrap بسبب * { box-sizing: border-box; }القاعدة التي تجعلها كذلك paddingلا تؤثر على العرض النهائي المحسوب للعنصر. تعرف على المزيد حول نموذج الصندوق والتحجيم في CSS Tricks .

اعتمادًا على السياق ، يمكنك التجاوز حسب الحاجة (الخيار 1) أو إعادة تعيين حجم الصندوق لمناطق بأكملها (الخيار 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

إمكانية الوصول

يتبع Bootstrap معايير الويب الشائعة ويمكن - بأقل جهد إضافي - استخدامه لإنشاء مواقع يمكن الوصول إليها لأولئك الذين يستخدمون AT .

اقفز الملاحة

إذا كان التنقل الخاص بك يحتوي على العديد من الروابط ويأتي قبل المحتوى الرئيسي في DOM ، فأضف Skip to main contentرابطًا قبل التنقل (للحصول على شرح بسيط ، راجع مقالة مشروع A11Y هذه حول تخطي روابط التنقل ). سيؤدي استخدام .sr-onlyالفصل إلى إخفاء رابط التخطي بشكل مرئي ، .sr-only-focusableوسيضمن الفصل أن يصبح الرابط مرئيًا بمجرد التركيز (لمستخدمي لوحة المفاتيح المبصرين).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

عناوين متداخلة

عند تداخل العناوين ( <h1>- <h6>) ، يجب أن يكون عنوان المستند الأساسي ملف <h1>. يجب أن تستخدم العناوين اللاحقة استخدامًا منطقيًا <h2>- <h6>بحيث يمكن لقارئات الشاشة إنشاء جدول محتويات لصفحاتك.

تعرف على المزيد في HTML CodeSniffer و AccessAbility في ولاية بنسلفانيا .

تباين اللون

حاليًا ، تتوفر بعض مجموعات الألوان الافتراضية في Bootstrap (مثل فئات الأزرار ذات الأنماط المختلفة ، وبعض ألوان تمييز التعليمات البرمجية المستخدمة في كتل التعليمات البرمجية الأساسية ، وفئة مساعد .bg-primary الخلفية السياقية ، ولون الارتباط الافتراضي عند استخدامه على خلفية بيضاء) لديها نسبة تباين منخفضة (أقل من النسبة الموصى بها وهي 4.5: 1 ). هذا يمكن أن يسبب مشاكل للمستخدمين الذين يعانون من ضعف البصر أو الذين يعانون من عمى الألوان. قد تحتاج هذه الألوان الافتراضية إلى تعديل لزيادة تباينها ووضوحها.

مصادر إضافية

• التطبيق المختصر "HTML Codesniffer" لتحديد مشكلات إمكانية الوصول
• ملحق أدوات مطور إمكانية الوصول في Chrome
• محلل تباين اللون
• مشروع A11Y
• وثائق الوصول MDN

الأسئلة الشائعة حول الترخيص

تم إصدار Bootstrap بموجب ترخيص معهد ماساتشوستس للتكنولوجيا وحقوق الطبع والنشر 2019 Twitter. مسلوقة إلى قطع أصغر ، يمكن وصفها بالشروط التالية.

يتطلب منك:

• احتفظ بالترخيص وإشعار حقوق الطبع والنشر في ملفات CSS و JavaScript الخاصة بـ Bootstrap عند استخدامها في أعمالك

يسمح لك بما يلي:

• تنزيل Bootstrap واستخدامه بحرية ، كليًا أو جزئيًا ، لأغراض شخصية أو خاصة أو داخلية أو تجارية
• استخدم Bootstrap في الحزم أو التوزيعات التي تقوم بإنشائها
• تعديل التعليمات البرمجية المصدر
• امنح ترخيصًا فرعيًا لتعديل Bootstrap وتوزيعه على جهات خارجية غير مدرجة في الترخيص

يمنعك من:

• تحميل المؤلفين ومالكي التراخيص المسؤولية عن الأضرار حيث يتم توفير Bootstrap بدون ضمان
• تحميل المبدعين أو حاملي حقوق النشر الخاصة بـ Bootstrap المسؤولية
• إعادة توزيع أي قطعة من Bootstrap دون الإسناد المناسب
• استخدم أي علامات مملوكة لتويتر بأي طريقة قد تنص أو تشير ضمنًا إلى أن تويتر يؤيد التوزيع الخاص بك
• استخدم أي علامات مملوكة لتويتر بأي طريقة قد تنص أو تشير ضمنًا إلى أنك أنشأت برنامج تويتر المعني

لا يتطلب منك:

• قم بتضمين مصدر Bootstrap نفسه ، أو أي تعديلات قد تكون أجريتها عليه ، في أي إعادة توزيع قد تقوم بتجميعها وتتضمنها
• أرسل التغييرات التي تجريها على Bootstrap مرة أخرى إلى مشروع Bootstrap (على الرغم من تشجيع هذه التعليقات)

يوجد ترخيص Bootstrap الكامل في مستودع المشروع لمزيد من المعلومات.

الترجمات

قام أعضاء المجتمع بترجمة وثائق Bootstrap إلى لغات مختلفة. لا يتم دعم أي منها رسميًا وقد لا تكون محدثة دائمًا.

• Bootstrap 中文 文档 (صيني)
• Bootstrap på Dansk (الدنماركية)
• Bootstrap en Français (الفرنسية)
• Bootstrap auf Deutsch (الألمانية)
• Bootstrap باللغة الإيطالية (الإيطالية)
• Bootstrap 한국어 (كوري)
• Bootstrap em Português do Brasil (البرتغالية البرازيلية)
• Bootstrap по-русски (الروسية)
• Bootstrap en Español (إسباني)
• Türkçe Bootstrap (التركية)
• Bootstrap українською (الأوكرانية)
• Bootstrap bằng tiếng Việt (الفيتنامية)

نحن لا نساعد في تنظيم أو استضافة الترجمات ، نحن فقط نربطها.

هل انتهيت من ترجمة جديدة أو أفضل؟ افتح طلب سحب لإضافته إلى قائمتنا.