ابدء
نظرة عامة على Bootstrap وكيفية التنزيل والاستخدام والقوالب والأمثلة الأساسية والمزيد.
نظرة عامة على Bootstrap وكيفية التنزيل والاستخدام والقوالب والأمثلة الأساسية والمزيد.
يحتوي Bootstrap (حاليًا الإصدار 3.3.7) على بعض الطرق السهلة للبدء بسرعة ، كل واحدة منها جذابة لمستوى مهارة مختلف وحالة استخدام. اقرأ لمعرفة ما يناسب احتياجاتك الخاصة.
تم تجميعها وتصغيرها CSS وجافا سكريبت والخطوط. لم يتم تضمين مستندات أو ملفات مصدر أصلية.
Source Less وجافا سكريبت وملفات الخطوط ، جنبًا إلى جنب مع مستنداتنا. يتطلب مترجم أقل وبعض الإعداد.
تم نقل Bootstrap من Less إلى Sass لإدراجها بسهولة في مشاريع Rails أو Compass أو Sass-only.
يوفر الأشخاص الموجودون في jsDelivr بلطف دعم CDN لكل من Bootstrap's CSS و JavaScript. فقط استخدم روابط Bootstrap CDN هذه.
يمكنك أيضًا تثبيت وإدارة Bootstrap's Less و CSS و JavaScript والخطوط باستخدام Bower :
يمكنك أيضًا تثبيت Bootstrap باستخدام npm :
require('bootstrap')
سيتم تحميل جميع ملحقات jQuery الخاصة بـ Bootstrap على كائن jQuery. الوحدة bootstrap
نفسها لا تصدر أي شيء. يمكنك يدويًا تحميل ملحقات jQuery الخاصة بـ Bootstrap بشكل فردي عن طريق تحميل /js/*.js
الملفات ضمن دليل المستوى الأعلى للحزمة.
يحتوي Bootstrap package.json
على بعض البيانات الوصفية الإضافية تحت المفاتيح التالية:
less
- المسار إلى ملف Less source file الرئيسي الخاص بـ Bootstrapstyle
- المسار إلى CSS غير المصغر لـ Bootstrap والذي تم تجميعه مسبقًا باستخدام الإعدادات الافتراضية (بدون تخصيص)يمكنك أيضًا تثبيت وإدارة خطوط أقل و CSS وجافا سكريبت وخطوط Bootstrap باستخدام Composer :
يستخدم Bootstrap Autoprefixer للتعامل مع بادئات بائع CSS . إذا كنت تقوم بتجميع Bootstrap من مصدر Less / Sass ولا تستخدم Gruntfile الخاص بنا ، فستحتاج إلى دمج Autoprefixer في عملية الإنشاء بنفسك. إذا كنت تستخدم Bootstrap المترجم مسبقًا أو تستخدم Gruntfile الخاص بنا ، فلا داعي للقلق بشأن هذا لأن Autoprefixer مدمج بالفعل في Gruntfile الخاص بنا.
Bootstrap قابل للتنزيل في شكلين ، ستجد ضمنهما الدلائل والملفات التالية ، وتجميع الموارد المشتركة بشكل منطقي وتوفير كل من الاختلافات المترجمة والمصغرة.
يرجى ملاحظة أن جميع مكونات JavaScript الإضافية تتطلب تضمين jQuery ، كما هو موضح في قالب البدء . استشرناbower.json
لمعرفة إصدارات jQuery المدعومة.
بمجرد التنزيل ، قم بفك ضغط المجلد المضغوط لرؤية بنية Bootstrap (المترجمة). سترى شيئًا كهذا:
هذا هو الشكل الأساسي من Bootstrap: الملفات المترجمة مسبقًا للاستخدام السريع في أي مشروع ويب تقريبًا. نحن نقدم CSS و JS ( bootstrap.*
) مترجمين ، بالإضافة إلى CSS و JS ( bootstrap.min.*
) المُجمَّعين والمُصغرين. خرائط مصدر CSS ( bootstrap.*.map
) متاحة للاستخدام مع أدوات مطور بعض المتصفحات. يتم تضمين الخطوط من Glyphicons ، وكذلك سمة Bootstrap الاختيارية.
يتضمن تنزيل التعليمات البرمجية المصدر لـ Bootstrap أصول CSS و JavaScript وأصول الخط المترجمة مسبقًا ، إلى جانب المصدر Less و JavaScript والوثائق. بشكل أكثر تحديدًا ، يتضمن ما يلي والمزيد:
إن less/
و js/
و fonts/
هي الكود المصدري لخطوط CSS و JS والأيقونات (على التوالي). يتضمن dist/
المجلد كل شيء مدرج في قسم التنزيل المترجم مسبقًا أعلاه. يتضمن docs/
المجلد الكود المصدري examples/
لوثائقنا واستخدام Bootstrap. علاوة على ذلك ، يوفر أي ملف مضمّن آخر دعمًا للحزم ومعلومات الترخيص والتطوير.
يستخدم Bootstrap Grunt لنظام البناء الخاص به ، مع طرق ملائمة للعمل مع إطار العمل. إنها الطريقة التي نجمع بها الكود الخاص بنا ونجري الاختبارات والمزيد.
لتثبيت Grunt ، يجب أولاً تنزيل وتثبيت node.js (الذي يتضمن npm). يرمز npm إلى الوحدات النمطية المجمعة للعقدة وهي طريقة لإدارة تبعيات التطوير من خلال node.js.
ثم من سطر الأوامر:grunt-cli
عالميًا باستخدام npm install -g grunt-cli
./bootstrap/
، ثم قم بتشغيل npm install
. سيبحث npm في package.json
الملف ويقوم تلقائيًا بتثبيت التبعيات المحلية الضرورية المدرجة هناك.عند الانتهاء ، ستتمكن من تشغيل أوامر Grunt المختلفة المتوفرة من سطر الأوامر.
grunt dist
(فقط قم بتجميع CSS و JavaScript)يجدد /dist/
الدليل بملفات CSS و JavaScript مُجمَّعة ومُصغَّرة. بصفتك مستخدم Bootstrap ، عادة ما يكون هذا هو الأمر الذي تريده.
grunt watch
(راقب)يراقب الملفات ذات المصدر الأقل ويعيد تجميعها تلقائيًا إلى CSS كلما قمت بحفظ تغيير.
grunt test
(تشغيل الاختبارات)يدير JSHint ويدير اختبارات QUnit بدون رأس في PhantomJS .
grunt docs
(بناء واختبار أصول المستندات)ينشئ ويختبر CSS و JavaScript والأصول الأخرى التي يتم استخدامها عند تشغيل الوثائق محليًا عبر bundle exec jekyll serve
.
grunt
(بناء كل شيء على الإطلاق وتشغيل الاختبارات)يقوم بتجميع وتصغير CSS و JavaScript ، وإنشاء موقع التوثيق على الويب ، وتشغيل مدقق HTML5 مقابل المستندات ، وإعادة إنشاء أصول Customizer ، والمزيد. يتطلب Jekyll . عادة ما يكون ضروريًا فقط إذا كنت تقوم بالقرصنة على Bootstrap نفسه.
إذا واجهت مشاكل في تثبيت التبعيات أو تشغيل أوامر Grunt ، فاحذف أولاً /node_modules/
الدليل الذي تم إنشاؤه بواسطة npm. ثم أعد التشغيل npm install
.
ابدأ بقالب HTML الأساسي هذا ، أو قم بتعديل هذه الأمثلة . نأمل أن تقوم بتخصيص نماذجنا وأمثلةنا ، وتكييفها لتناسب احتياجاتك.
انسخ HTML أدناه لبدء العمل بأدنى حد من مستند Bootstrap.
قم بالبناء على القالب الأساسي أعلاه باستخدام العديد من مكونات Bootstrap. نحن نشجعك على تخصيص Bootstrap وتكييفه ليناسب احتياجات مشروعك الفردي.
احصل على الكود المصدري لكل مثال أدناه عن طريق تنزيل مستودع Bootstrap . يمكن العثور على أمثلة في docs/examples/
الدليل.
Bootlint هي أداة Bootstrap HTML linter الرسمية . يقوم تلقائيًا بالتحقق من العديد من أخطاء HTML الشائعة في صفحات الويب التي تستخدم Bootstrap بطريقة "الفانيليا" إلى حد ما. تتطلب عناصر / عناصر واجهة Vanilla Bootstrap أن تتوافق أجزاءها من DOM مع هياكل معينة. يتحقق Bootlint من أن مثيلات مكونات Bootstrap تحتوي على HTML منظم بشكل صحيح. ضع في اعتبارك إضافة Bootlint إلى سلسلة أدوات تطوير الويب Bootstrap بحيث لا تؤدي أي من الأخطاء الشائعة إلى إبطاء تطوير مشروعك.
ابق على اطلاع دائم على تطوير Bootstrap وتواصل مع المجتمع بهذه الموارد المفيدة.
irc.freenode.net
الخادم ، في ## bootstrap قناة .twitter-bootstrap-3
.bootstrap
في الحزم التي تعدل أو تضيف إلى وظائف Bootstrap عند التوزيع من خلال npm أو آليات التسليم المماثلة لتحقيق أقصى قدر من الاكتشاف.يمكنك أيضًا متابعة getbootstrap على Twitter للحصول على أحدث مقاطع الفيديو الموسيقية الرائعة والشائعات.
يقوم Bootstrap تلقائيًا بتكييف صفحاتك مع أحجام الشاشات المختلفة. إليك كيفية تعطيل هذه الميزة حتى تعمل صفحتك مثل هذا المثال غير المستجيب .
<meta>
المذكور في مستندات CSSwidth
on the .container
لكل طبقة شبكة بعرض واحد ، على سبيل المثال width: 970px !important;
تأكد من أن هذا يأتي بعد Bootstrap CSS الافتراضي. يمكنك بشكل اختياري تجنب استخدام !important
استعلامات الوسائط أو بعض المحددات..col-xs-*
الفئات بالإضافة إلى الفئات المتوسطة / الكبيرة أو بدلاً منها. لا تقلق ، تتناسب شبكة الجهاز الصغيرة جدًا مع جميع الدقة.ستظل بحاجة إلى Respond.js لـ IE8 (نظرًا لأن استفسارات الوسائط لا تزال موجودة وتحتاج إلى المعالجة). يؤدي هذا إلى تعطيل جوانب "موقع الجوال" في Bootstrap.
لقد طبقنا هذه الخطوات على مثال. اقرأ الكود المصدري الخاص به لمعرفة التغييرات المحددة التي تم تنفيذها.
هل تتطلع إلى الترحيل من إصدار أقدم من Bootstrap إلى الإصدار 3.x؟ تحقق من دليل الترحيل الخاص بنا .
تم تصميم Bootstrap للعمل بشكل أفضل في أحدث متصفحات سطح المكتب والجوال ، مما يعني أن المتصفحات القديمة قد تعرض عروض مختلفة الأنماط ، على الرغم من أنها تعمل بكامل طاقتها ، لمكونات معينة.
على وجه التحديد ، نحن ندعم أحدث إصدارات المتصفحات والأنظمة الأساسية التالية.
لا يتم دعم المتصفحات البديلة التي تستخدم أحدث إصدار من WebKit أو Blink أو Gecko ، سواء بشكل مباشر أو عبر واجهة برمجة تطبيقات عرض الويب للنظام الأساسي ، بشكل صريح. ومع ذلك ، يجب أن يعرض Bootstrap (في معظم الحالات) ويعمل بشكل صحيح في هذه المتصفحات أيضًا. يتم توفير معلومات دعم أكثر تحديدًا أدناه.
بشكل عام ، يدعم Bootstrap أحدث الإصدارات من المتصفحات الافتراضية لكل منصة رئيسية. لاحظ أن المتصفحات الوكيلة (مثل Opera Mini و Opera Mobile's Turbo mode و UC Browser Mini و Amazon Silk) غير مدعومة.
كروم | ثعلب النار | سفاري | |
---|---|---|---|
ذكري المظهر | أيد | أيد | غير متاح |
iOS | أيد | أيد | أيد |
وبالمثل ، يتم دعم أحدث إصدارات معظم متصفحات سطح المكتب.
كروم | ثعلب النار | متصفح الانترنت | أوبرا | سفاري | |
---|---|---|---|---|---|
ماك | أيد | أيد | غير متاح | أيد | أيد |
شبابيك | أيد | أيد | أيد | أيد | غير مدعوم |
في نظام Windows ، ندعم Internet Explorer 8-11 .
بالنسبة إلى Firefox ، بالإضافة إلى أحدث إصدار ثابت عادي ، فإننا ندعم أيضًا أحدث إصدار من إصدار الدعم الموسع (ESR) من Firefox.
بشكل غير رسمي ، يجب أن يبدو Bootstrap ويتصرف بشكل جيد بما فيه الكفاية في Chromium و Chrome لنظام التشغيل Linux و Firefox لنظام التشغيل Linux و Internet Explorer 7 بالإضافة إلى Microsoft Edge ، على الرغم من عدم دعمها رسميًا.
للحصول على قائمة ببعض أخطاء المتصفح التي يتعين على Bootstrap التعامل معها ، راجع جدار أخطاء المتصفح .
يتم دعم Internet Explorer 8 و 9 أيضًا ، ومع ذلك ، يرجى الانتباه إلى أن بعض خصائص CSS3 وعناصر HTML5 لا تدعمها هذه المتصفحات بشكل كامل. بالإضافة إلى ذلك ، يتطلب Internet Explorer 8 استخدام Respond.js لتمكين دعم استعلام الوسائط.
ميزة | إنترنت إكسبلورر 8 | إنترنت إكسبلورر 9 |
---|---|---|
border-radius |
غير مدعوم | أيد |
box-shadow |
غير مدعوم | أيد |
transform |
غير مدعوم | مدعوم -ms بالبادئة |
transition |
غير مدعوم | |
placeholder |
غير مدعوم |
تفضل بزيارة هل يمكنني استخدام ... للحصول على تفاصيل حول دعم المتصفح لميزات CSS3 و HTML5.
احذر من التحذيرات التالية عند استخدام Respond.js في بيئات التطوير والإنتاج الخاصة بك لـ Internet Explorer 8.
يتطلب استخدام Respond.js مع CSS المستضاف على مجال (فرعي) مختلف (على سبيل المثال ، على شبكة CDN) بعض الإعداد الإضافي. راجع مستندات Respond.js للحصول على التفاصيل.
file://
نظرًا لقواعد أمان المتصفح ، لا يعمل Respond.js مع الصفحات التي يتم عرضها عبر file://
البروتوكول (مثل عند فتح ملف HTML محلي). لاختبار الميزات سريعة الاستجابة في IE8 ، اعرض صفحاتك عبر HTTP (S). راجع مستندات Respond.js للحصول على التفاصيل.
@import
لا يعمل Respond.js مع CSS المشار إليه عبر @import
. على وجه الخصوص ، من المعروف أن بعض تكوينات دروبال تستخدم @import
. راجع مستندات Respond.js للحصول على التفاصيل.
لا يدعم IE8 بشكل كامل box-sizing: border-box;
عند دمجه مع min-width
، max-width
أو min-height
، أو max-height
. max-width
لهذا السبب ، اعتبارًا من الإصدار 3.0.1 ، لم نعد نستخدم .container
s.
يواجه IE8 بعض المشكلات @font-face
عند دمجه مع :before
. يستخدم Bootstrap هذا المزيج مع Glyphicons الخاص به. إذا تم تخزين الصفحة مؤقتًا وتحميلها بدون الماوس فوق النافذة (على سبيل المثال ، اضغط على زر التحديث أو قم بتحميل شيء ما في إطار iframe) ، فسيتم عرض الصفحة قبل تحميل الخط. سيؤدي التمرير فوق الصفحة (النص الأساسي) إلى إظهار بعض الرموز وسيؤدي التمرير فوق الرموز المتبقية إلى إظهارها أيضًا. راجع العدد رقم 13863 للحصول على التفاصيل.
لا يتم دعم Bootstrap في أوضاع توافق Internet Explorer القديمة. للتأكد من أنك تستخدم أحدث وضع عرض لـ IE ، ضع في اعتبارك تضمين <meta>
العلامة المناسبة في صفحاتك:
قم بتأكيد وضع المستند عن طريق فتح أدوات التصحيح: اضغط F12وتحقق من "وضع المستند".
يتم تضمين هذه العلامة في جميع وثائق وأمثلة Bootstrap لضمان أفضل عرض ممكن في كل إصدار مدعوم من Internet Explorer.
راجع سؤال StackOverflow هذا لمزيد من المعلومات.
لا يفرق Internet Explorer 10 بين عرض الجهاز وعرض منفذ العرض ، وبالتالي لا يطبق استعلامات الوسائط بشكل صحيح في CSS الخاص بـ Bootstrap. عادةً ما تضيف مقتطفًا سريعًا من CSS لإصلاح ذلك:
ومع ذلك ، لا يعمل هذا مع الأجهزة التي تعمل بإصدارات Windows Phone 8 الأقدم من التحديث 3 (المعروف أيضًا باسم GDR3) ، حيث يتسبب في عرض هذه الأجهزة لعرض سطح المكتب في الغالب بدلاً من عرض "الهاتف" الضيق. لمعالجة هذا الأمر ، ستحتاج إلى تضمين CSS و JavaScript التاليين للتغلب على الخطأ .
لمزيد من المعلومات وإرشادات الاستخدام ، اقرأ Windows Phone 8 و Device-Width .
كتوجيه ، نقوم بتضمين هذا في جميع وثائق وأمثلة Bootstrap كعرض توضيحي.
واجه محرك عرض إصدارات Safari السابقة للإصدار 7.1 لنظام التشغيل OS X و Safari لنظام التشغيل iOS v8.0 بعض المشاكل مع عدد المنازل العشرية المستخدمة في .col-*-1
فئات الشبكة الخاصة بنا. لذلك إذا كان لديك 12 عمودًا فرديًا للشبكة ، فستلاحظ أنها جاءت قصيرة مقارنة بصفوف الأعمدة الأخرى. إلى جانب ترقية Safari / iOS ، لديك بعض الخيارات للحلول البديلة:
.pull-right
إلى عمود الشبكة الأخير للحصول على محاذاة أقصى اليميندعم overflow: hidden
العنصر <body>
محدود للغاية في iOS و Android. تحقيقا لهذه الغاية ، عندما تقوم بالتمرير إلى ما بعد الجزء العلوي أو السفلي من الوسائط في أي من متصفحات تلك الأجهزة ، <body>
سيبدأ المحتوى في التمرير. راجع خطأ Chrome رقم 175502 (تم الإصلاح في Chrome v40) وخطأ WebKit رقم 153852 .
اعتبارًا من iOS 9.3 ، أثناء فتح النموذج ، إذا كانت اللمسة الأولية لإيماءة التمرير داخل حدود النص <input>
أو a <textarea>
، <body>
فسيتم تمرير المحتوى الموجود أسفل النموذج بدلاً من النموذج نفسه. راجع خطأ WebKit # 153856 .
لاحظ أيضًا أنه إذا كنت تستخدم شريط تنقل ثابتًا أو تستخدم مدخلات ضمن نموذج ، فإن iOS به خطأ في العرض لا يقوم بتحديث موضع العناصر الثابتة عند تشغيل لوحة المفاتيح الافتراضية. تتضمن بعض الحلول لذلك تحويل العناصر الخاصة بك إلى position: absolute
أو استدعاء مؤقت عند التركيز لمحاولة تصحيح الوضع يدويًا. لا يتم التعامل مع هذا بواسطة Bootstrap ، لذا فإن الأمر متروك لك لتحديد الحل الأفضل لتطبيقك.
لا يتم .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 التالية:
من خارج الصندوق ، يأتي Android 4.1 (وحتى بعض الإصدارات الأحدث على ما يبدو) مع تطبيق Browser باعتباره متصفح الويب الافتراضي المفضل (على عكس Chrome). لسوء الحظ ، يحتوي تطبيق Browser على الكثير من الأخطاء والتناقضات مع CSS بشكل عام.
فيما يتعلق <select>
بالعناصر ، لن يعرض متصفح Android Stock عناصر التحكم الجانبية إذا كان هناك border-radius
و / أو border
مطبق. (راجع سؤال StackOverflow هذا للحصول على التفاصيل.) استخدم مقتطف الشفرة أدناه لإزالة CSS المسيء وعرض <select>
العنصر كعنصر غير منظم على مستعرض الأسهم في Android. يتجنب استنشاق وكيل المستخدم التداخل مع متصفحات Chrome و Safari و Mozilla.
تريد أن ترى مثالا؟ تحقق من هذا العرض التوضيحي لـ 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).
يتبع Bootstrap معايير الويب الشائعة ويمكن - بأقل جهد إضافي - استخدامه لإنشاء مواقع يمكن الوصول إليها لأولئك الذين يستخدمون AT .
إذا كان التنقل الخاص بك يحتوي على العديد من الروابط ويأتي قبل المحتوى الرئيسي في DOM ، فأضف Skip to main content
رابطًا قبل التنقل (للحصول على شرح بسيط ، راجع مقالة مشروع A11Y هذه حول تخطي روابط التنقل ). سيؤدي استخدام .sr-only
الفصل إلى إخفاء رابط التخطي بشكل مرئي ، .sr-only-focusable
وسيضمن الفصل أن يصبح الرابط مرئيًا بمجرد التركيز (لمستخدمي لوحة المفاتيح المبصرين).
نظرًا لأوجه القصور / الأخطاء الطويلة الأمد في Chrome (راجع الإصدار 262171 في متتبع أخطاء Chromium ) و Internet Explorer (راجع هذه المقالة حول الروابط في الصفحة وترتيب التركيز ) ، ستحتاج إلى التأكد من أن هدف رابط التخطي الخاص بك يمكن التركيز عليه برمجيًا على الأقل عن طريق إضافة tabindex="-1"
.
بالإضافة إلى ذلك ، قد ترغب في منع إشارة التركيز المرئية صراحةً على الهدف (خاصة وأن Chrome حاليًا يركز أيضًا على العناصر tabindex="-1"
عند النقر بالماوس عليها) #content:focus { outline: none; }
.
لاحظ أن هذا الخطأ سيؤثر أيضًا على أي روابط أخرى في الصفحة قد يستخدمها موقعك ، مما يجعلها عديمة الفائدة لمستخدمي لوحة المفاتيح. قد تفكر في إضافة إصلاح توقف فجوة مشابه لجميع معرفات الارتساء / الأجزاء المسماة الأخرى التي تعمل كأهداف ارتباط.
عند تداخل العناوين ( <h1>
- <h6>
) ، يجب أن يكون عنوان المستند الأساسي ملف <h1>
. يجب أن تستخدم العناوين اللاحقة استخدامًا منطقيًا <h2>
- <h6>
بحيث يمكن لقارئات الشاشة إنشاء جدول محتويات لصفحاتك.
تعرف على المزيد في HTML CodeSniffer و AccessAbility في ولاية بنسلفانيا .
حاليًا ، تتوفر بعض مجموعات الألوان الافتراضية في Bootstrap (مثل فئات الأزرار ذات الأنماط المختلفة ، وبعض ألوان تمييز التعليمات البرمجية المستخدمة في كتل التعليمات البرمجية الأساسية ، وفئة مساعد .bg-primary
الخلفية السياقية ، ولون الارتباط الافتراضي عند استخدامه على خلفية بيضاء) لديها نسبة تباين منخفضة (أقل من النسبة الموصى بها وهي 4.5: 1 ). هذا يمكن أن يسبب مشاكل للمستخدمين الذين يعانون من ضعف البصر أو الذين يعانون من عمى الألوان. قد تحتاج هذه الألوان الافتراضية إلى تعديل لزيادة تباينها ووضوحها.
تم إصدار Bootstrap بموجب ترخيص معهد ماساتشوستس للتكنولوجيا وحقوق الطبع والنشر 2016 Twitter. مسلوقة إلى قطع أصغر ، يمكن وصفها بالشروط التالية.
يوجد ترخيص Bootstrap الكامل في مستودع المشروع لمزيد من المعلومات.
قام أعضاء المجتمع بترجمة وثائق Bootstrap إلى لغات مختلفة. لا يتم دعم أي منها رسميًا وقد لا تكون محدثة دائمًا.
نحن لا نساعد في تنظيم أو استضافة الترجمات ، نحن فقط نربطها.
هل انتهيت من ترجمة جديدة أو أفضل؟ افتح طلب سحب لإضافته إلى قائمتنا.