CSS
إعدادات CSS العامة ، وعناصر HTML الأساسية مصممة ومُحسَّنة بفئات قابلة للتوسعة ، ونظام شبكة متقدم.
ملخص
احصل على معلومات حول الأجزاء الرئيسية للبنية التحتية لـ Bootstrap ، بما في ذلك نهجنا لتطوير ويب أفضل وأسرع وأقوى.
نوع مستند HTML5
يستخدم Bootstrap بعض عناصر HTML وخصائص CSS التي تتطلب استخدام نوع مستند HTML5. قم بتضمينه في بداية كل مشاريعك.
<!doctype html>
<html lang="en">
...
</html>المحمول أولا
باستخدام Bootstrap 2 ، أضفنا أنماطًا اختيارية متوافقة مع الأجهزة المحمولة للجوانب الرئيسية لإطار العمل. باستخدام Bootstrap 3 ، أعدنا كتابة المشروع ليكون متوافقًا مع الأجهزة المحمولة منذ البداية. بدلاً من إضافة أنماط اختيارية للهاتف المحمول ، يتم خبزها مباشرة في جوهرها. في الواقع ، يعد Bootstrap متنقلًا أولاً . يمكن العثور على أنماط الجوال الأولى في جميع أنحاء المكتبة بأكملها بدلاً من ملفات منفصلة.
لضمان العرض الصحيح والتكبير باللمس ، أضف العلامة الوصفية لإطار العرض إلى ملف <head>.
<meta name="viewport" content="width=device-width, initial-scale=1">يمكنك تعطيل إمكانيات التكبير / التصغير على الأجهزة المحمولة عن طريق إضافة user-scalable=noعلامة meta لإطار العرض. يؤدي هذا إلى تعطيل التكبير ، مما يعني أن المستخدمين قادرون فقط على التمرير ، وينتج عن ذلك شعور بأن موقعك يشبه إلى حد ما تطبيقًا أصليًا. بشكل عام ، لا نوصي بهذا في كل موقع ، لذا كن حذرًا!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">الطباعة والروابط
يعيّن Bootstrap أنماط العرض والطباعة والارتباط العالمية الأساسية. على وجه التحديد ، نحن:
- تعيين
background-color: #fff;علىbody - استخدم
@font-family-base،@font-size-baseو ،@line-height-baseوالسمات كقاعدة مطبعية - قم بتعيين لون الارتباط العام عبر
@link-colorوتطبيق تسطير الارتباط فقط على:hover
يمكن العثور على هذه الأنماط في الداخل scaffolding.less.
Normalize.css
لتحسين العرض عبر المتصفحات ، نستخدم Normalize.css ، وهو مشروع من إعداد نيكولاس غالاغر وجوناثان نيل .
حاويات
يتطلب Bootstrap عنصرًا يحتوي على محتويات الموقع وإيواء نظام الشبكة الخاص بنا. يمكنك اختيار واحدة من حاويتين لاستخدامها في مشاريعك. لاحظ أنه ، بسبب paddingوأكثر من ذلك ، لا يمكن تداخل أي من الحاوية.
استخدم .containerللحاوية سريعة الاستجابة ذات العرض الثابت.
<div class="container">
...
</div>استخدمه .container-fluidلحاوية كاملة العرض ، تغطي العرض الكامل لإطار العرض الخاص بك.
<div class="container-fluid">
...
</div>نظام الشبكة
يتضمن Bootstrap نظام شبكة مرنة أول متنقل سريع الاستجابة يتسع بشكل مناسب حتى 12 عمودًا مع زيادة حجم الجهاز أو منفذ العرض. يتضمن فئات محددة مسبقًا لخيارات تخطيط سهلة ، بالإضافة إلى عمليات مزج قوية لإنشاء المزيد من التخطيطات الدلالية .
مقدمة
تُستخدم أنظمة الشبكة لإنشاء تخطيطات الصفحة من خلال سلسلة من الصفوف والأعمدة التي تضم المحتوى الخاص بك. إليك كيفية عمل نظام شبكة Bootstrap:
- يجب وضع الصفوف داخل
.container(عرض ثابت) أو.container-fluid(عرض كامل) من أجل المحاذاة والتعبئة الصحيحة. - استخدم الصفوف لإنشاء مجموعات أفقية من الأعمدة.
- يجب وضع المحتوى داخل أعمدة ، ويمكن أن تكون الأعمدة فقط عناصر فرعية مباشرة للصفوف.
- فئات الشبكة المحددة مسبقًا مثل
.rowوتتوفر.col-xs-4لإنشاء تخطيطات الشبكة بسرعة. يمكن أيضًا استخدام مزيج أقل لمزيد من التخطيطات الدلالية. - تقوم الأعمدة بإنشاء مزاريب (فجوات بين محتوى العمود) عبر
padding. يتم إزاحة هذه المساحة المتروكة في صفوف للعمود الأول والأخير عبر الهامش السالب على.rows. - الهامش السلبي هو سبب تقادم الأمثلة أدناه. حيث يتم اصطفاف المحتوى داخل أعمدة الشبكة بمحتوى غير شبكي.
- يتم إنشاء أعمدة الشبكة عن طريق تحديد عدد الأعمدة الاثني عشر المتوفرة التي ترغب في تمديدها. على سبيل المثال ، ثلاثة أعمدة متساوية تستخدم ثلاثة
.col-xs-4. - إذا تم وضع أكثر من 12 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.
- تنطبق فئات الشبكة على الأجهزة التي يكون عرضها للشاشة أكبر من أو يساوي أحجام نقاط التوقف ، وتجاوز فئات الشبكة المستهدفة للأجهزة الأصغر. لذلك ، على سبيل المثال ، فإن تطبيق أي
.col-md-*فئة على عنصر لن يؤثر فقط على تصميمه على الأجهزة المتوسطة ولكن أيضًا على الأجهزة الكبيرة في حالة.col-lg-*عدم وجود فئة.
انظر إلى الأمثلة لتطبيق هذه المبادئ على التعليمات البرمجية الخاصة بك.
تساؤلات الإعلام
نستخدم استعلامات الوسائط التالية في ملفات Less لإنشاء نقاط التوقف الرئيسية في نظام الشبكة الخاص بنا.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }نقوم أحيانًا بتوسيع استعلامات الوسائط هذه لتضمين a max-widthلقصر CSS على مجموعة أضيق من الأجهزة.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }خيارات الشبكة
تعرف على كيفية عمل جوانب نظام شبكة Bootstrap عبر أجهزة متعددة باستخدام جدول سهل الاستخدام.
| هواتف الأجهزة الصغيرة جدًا (<768 بكسل) | الأجهزة اللوحية للأجهزة الصغيرة (768px) | أجهزة كمبيوتر سطح المكتب للأجهزة المتوسطة (992 بكسل) | أجهزة كمبيوتر سطح المكتب الكبيرة (≥1200 بكسل) | |
|---|---|---|---|---|
| سلوك الشبكة | أفقي في جميع الأوقات | مطوي للبدء ، أفقيًا فوق نقاط التوقف | ||
| عرض الحاوية | لا شيء (تلقائي) | 750 بكسل | 970 بكسل | 1170 بكسل |
| بادئة الفئة | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| # من الأعمدة | 12 | |||
| عرض العمود | آلي | ~ 62 بكسل | ~ 81 بكسل | ~ 97 بكسل |
| عرض مزراب | 30 بكسل (15 بكسل على كل جانب من جوانب العمود) | |||
| عش | نعم | |||
| إزاحة | نعم | |||
| ترتيب العمود | نعم | |||
مثال: مكدس إلى أفقي
باستخدام مجموعة واحدة من .col-md-*فئات الشبكة ، يمكنك إنشاء نظام شبكة أساسي يبدأ مكدسًا على الأجهزة المحمولة والأجهزة اللوحية (النطاق الإضافي الصغير إلى النطاق الصغير) قبل أن يصبح أفقيًا على أجهزة سطح المكتب (المتوسطة). ضع أعمدة الشبكة في أي .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>مثال: حاوية السوائل
قم بتحويل أي تخطيط شبكي ذي عرض ثابت إلى تخطيط كامل العرض عن طريق تغيير تنسيق الشبكة الخارجية .containerإلى .container-fluid.
<div class="container-fluid">
<div class="row">
...
</div>
</div>مثال: الجوال وسطح المكتب
ألا تريد أن تتكدس أعمدتك ببساطة في أجهزة أصغر؟ استخدم فئات شبكة الأجهزة الصغيرة والمتوسطة الإضافية عن طريق الإضافة .col-xs-* .col-md-*إلى الأعمدة الخاصة بك. انظر إلى المثال أدناه للحصول على فكرة أفضل عن كيفية عمل كل ذلك.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>مثال: الهاتف المحمول ، الجهاز اللوحي ، سطح المكتب
قم بالبناء على المثال السابق من خلال إنشاء تخطيطات أكثر ديناميكية وقوة باستخدام .col-sm-*فئات الكمبيوتر اللوحي.
.col-xs-12 .col-sm-6 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>مثال: التفاف العمود
إذا تم وضع أكثر من 12 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.
.col-xs-9
.col-xs-4
بما أن 9 + 4 = 13> 12 ، يتم لف عنصر div الذي يبلغ عرضه 4 أعمدة في سطر جديد كوحدة واحدة متجاورة.
بما أن 9 + 4 = 13> 12 ، يتم لف عنصر div الذي يبلغ عرضه 4 أعمدة في سطر جديد كوحدة واحدة متجاورة.
.col-xs-6
تستمر الأعمدة التالية على طول الخط الجديد.
تستمر الأعمدة التالية على طول الخط الجديد.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>إعادة تعيين العمود المستجيب
مع توفر المستويات الأربعة للشبكات ، ستواجه مشكلات حيث لا يتم مسح أعمدةك بشكل صحيح تمامًا عند نقاط توقف معينة لأن إحداها أطول من الأخرى. لإصلاح ذلك ، استخدم مجموعة من .clearfixفئات الأدوات المساعدة سريعة الاستجابة .
.col-xs-6 .col-sm-3 قم
بتغيير حجم منفذ العرض أو تحقق منه على هاتفك للحصول على مثال.
بتغيير حجم منفذ العرض أو تحقق منه على هاتفك للحصول على مثال.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
<div class="row">
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<!-- Add the extra clearfix for only the required viewport -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
<div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>بالإضافة إلى مسح الأعمدة عند نقاط التوقف سريعة الاستجابة ، قد تحتاج إلى إعادة تعيين الإزاحات أو الدفعات أو عمليات السحب . شاهد هذا في العمل في مثال الشبكة .
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>إزالة المزاريب
أزل المزاريب من صف وأعمدته مع .row-no-guttersالفصل.
.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6
<div class="row row-no-gutters">
<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row row-no-gutters">
<div class="col-xs-6">.col-xs-6</div>
<div class="col-xs-6">.col-xs-6</div>
</div>موازنة الأعمدة
انقل الأعمدة إلى اليمين باستخدام .col-md-offset-*الفئات. تزيد هذه الفئات الهامش الأيسر للعمود *بأعمدة. على سبيل المثال ، .col-md-offset-4يتحرك .col-md-4على أربعة أعمدة.
.col-md-4
.col-md-4 .col-md-offset-4
.col-md-3 .col-md-offset-3
.col-md-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>يمكنك أيضًا تجاوز الإزاحات من طبقات الشبكة السفلية .col-*-offset-0بالفئات.
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>أعمدة التعشيش
لتداخل المحتوى الخاص بك مع الشبكة الافتراضية ، أضف مجموعة جديدة .rowومجموعة من .col-sm-*الأعمدة داخل عمود موجود .col-sm-*. يجب أن تتضمن الصفوف المتداخلة مجموعة من الأعمدة التي تضيف ما يصل إلى 12 عمودًا أو أقل (ليس مطلوبًا أن تستخدم جميع الأعمدة الـ 12 المتوفرة).
المستوى 1: .col-sm-9
المستوى 2: .col-xs-8 .col-sm-6
المستوى 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>ترتيب العمود
يمكنك بسهولة تغيير ترتيب أعمدة الشبكة المضمنة لدينا مع .col-md-push-*فئات .col-md-pull-*المعدلات.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-pull-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>أقل الخلطات والمتغيرات
بالإضافة إلى فئات الشبكة التي تم إنشاؤها مسبقًا للحصول على تخطيطات سريعة ، يتضمن Bootstrap متغيرات ومزيجات أقل لتوليد التخطيطات الدلالية البسيطة الخاصة بك بسرعة.
المتغيرات
تحدد المتغيرات عدد الأعمدة وعرض هامش التوثيق ونقطة استعلام الوسائط التي تبدأ عندها الأعمدة العائمة. نحن نستخدم هذه لإنشاء فئات الشبكة المحددة مسبقًا والموثقة أعلاه ، بالإضافة إلى الخلطات المخصصة المدرجة أدناه.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;الخلطات
يتم استخدام Mixins جنبًا إلى جنب مع متغيرات الشبكة لإنشاء CSS الدلالية لأعمدة الشبكة الفردية.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}مثال على الاستخدام
يمكنك تعديل المتغيرات إلى القيم المخصصة الخاصة بك ، أو مجرد استخدام المزيج مع قيمها الافتراضية. فيما يلي مثال على استخدام الإعدادات الافتراضية لإنشاء تخطيط من عمودين مع وجود فجوة بينهما.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>الطباعة
العناوين
جميع عناوين HTML ، <h1>من خلال <h6>، متوفرة. .h1من خلال .h6الفئات المتاحة أيضًا ، عندما تريد مطابقة نمط الخط لعنوان ما ولكنك لا تزال تريد عرض النص في السطر.
h1. عنوان التمهيد |
نصف بولد 36 بكسل |
h2. عنوان التمهيد |
نصف بولد 30 بكسل |
h3. عنوان التمهيد |
نصف بولد 24 بكسل |
h4. عنوان التمهيد |
18 بكسل |
h5. عنوان التمهيد |
نصف بولد 14 بكسل |
h6. عنوان التمهيد |
نصف بولد 12 بكسل |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>قم بإنشاء نص ثانوي أفتح في أي عنوان <small>بعلامة عامة أو .smallفئة.
h1. عنوان التمهيد النص الثانوي |
h2. عنوان التمهيد النص الثانوي |
h3. عنوان التمهيد النص الثانوي |
h4. عنوان التمهيد النص الثانوي |
h5. عنوان التمهيد النص الثانوي |
h6. عنوان التمهيد النص الثانوي |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>نسخة الجسم
الافتراضي العالمي لـ Bootstrap font-sizeهو 14 بكسل ، مع 1.428 . يتم تطبيق هذا على جميع الفقرات. بالإضافة إلى ذلك ، (الفقرات) تتلقى هامشًا سفليًا بنصف ارتفاع السطر المحس��ب (10 بكسل افتراضيًا).line-height<body><p>
Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Nullam معرف دولور معرف nibh ultricies مركبة.
Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis، est noncommo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.
Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis، est noncommo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit.
<p>...</p>نسخة الجسم الرصاص
اجعل فقرة بارزة عن طريق الإضافة .lead.
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est noncommo luctus.
<p class="lead">...</p>بنيت بأقل
يعتمد المقياس المطبعي على متغيرين أقل في المتغيرات . الأول هو حجم الخط الأساسي المستخدم طوال الوقت والثاني هو ارتفاع الخط الأساسي. نستخدم هذه المتغيرات وبعض العمليات الحسابية البسيطة لإنشاء الهوامش والحشوات وارتفاعات الخطوط لجميع أنواعنا وأكثر. قم بتخصيصها و Bootstrap يتكيف معها.@font-size-base@line-height-base
عناصر النص المضمنة
نص مميز
لإبراز مجموعة من النصوص نظرًا لارتباطها بسياق آخر ، استخدم <mark>العلامة.
يمكنك استخدام علامة العلامة لتسليط الضوءنص.
You can use the mark tag to <mark>highlight</mark> text.نص محذوف
للإشارة إلى كتل النص التي تم حذفها ، استخدم <del>العلامة.
من المفترض أن يتم التعامل مع هذا السطر كنص محذوف.
<del>This line of text is meant to be treated as deleted text.</del>نص يتوسطه خط
للإشارة إلى كتل النص التي لم تعد ذات صلة ، استخدم <s>العلامة.
من المفترض أن يتم التعامل مع هذا السطر على أنه لم يعد دقيقًا.
<s>This line of text is meant to be treated as no longer accurate.</s>نص مدرج
للإشارة إلى الإضافات إلى الوثيقة ، استخدم <ins>العلامة.
من المفترض أن يتم التعامل مع هذا السطر كإضافة إلى المستند.
<ins>This line of text is meant to be treated as an addition to the document.</ins>نص مسطر
لتسطير النص استخدم <u>العلامة.
سيتم عرض هذا السطر كما هو مسطر
<u>This line of text will render as underlined</u>استفد من علامات التركيز الافتراضية في HTML بأنماط خفيفة الوزن.
نص صغير
لإلغاء التأكيد على السطر أو كتل النص ، استخدم <small>العلامة لتعيين نص بنسبة 85٪ بحجم الأصل. تتلقى عناصر العنوان عناصر خاصة بها للعناصر font-sizeالمتداخلة <small>.
يمكنك بدلاً من ذلك استخدام عنصر مضمّن .smallبدلاً من أي عنصر <small>.
من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.
<small>This line of text is meant to be treated as fine print.</small>عريض
للتأكيد على مقتطف من النص بسمك خط أثقل.
يتم تقديم المقتطف التالي من النص كنص غامق .
<strong>rendered as bold text</strong>مائل
للتأكيد على مقتطف من النص بخط مائل.
يتم تقديم المقتطف التالي من النص كنص مائل .
<em>rendered as italicized text</em>العناصر البديلة
لا تتردد في استخدام <b>HTML5 <i>. <b>يهدف إلى إبراز الكلمات أو العبارات دون نقل أهمية إضافية بينما <i>يكون في الغالب للصوت والمصطلحات الفنية وما إلى ذلك.
فئات المحاذاة
إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص.
نص بمحاذاة إلى اليسار.
نص بمحاذاة الوسط.
نص بمحاذاة اليمين.
نص مضبوط.
لا يوجد نص التفاف.
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>فئات التحول
تحويل النص في المكونات بفئات الكتابة بالأحرف الكبيرة للنص.
نص صغير.
نص مكتوب بحروف كبيرة.
نص مكتوب بحروف كبيرة.
<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>الاختصارات
تنفيذ منمق <abbr>لعنصر HTML للاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير. الاختصارات التي لها titleسمة لها حد سفلي منقط خفيف ومؤشر مساعدة عند التمرير ، مما يوفر سياقًا إضافيًا عند التمرير ولمستخدمي التقنيات المساعدة.
الاختصار الأساسي
اختصار الكلمة صفة هو attr .
<abbr title="attribute">attr</abbr>الاختصار
أضف .initialismإلى الاختصار لحجم خط أصغر قليلاً.
HTML هو أفضل شيء منذ تقطيع الخبز.
<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>عناوين
تقديم معلومات الاتصال لأقرب سلف أو كامل مجموعة العمل. الحفاظ على التنسيق من خلال إنهاء جميع الأسطر بـ <br>.
Twitter، Inc.
1355 Market Street، Suite 900
San Francisco، CA 94103
P: (123) 456-7890 الاسم الكامل
[email protected]
1355 Market Street، Suite 900
San Francisco، CA 94103
P: (123) 456-7890 الاسم الكامل
[email protected]
<address>
<strong>Twitter, Inc.</strong><br>
1355 Market Street, Suite 900<br>
San Francisco, CA 94103<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>كتلة الاقتباس
لاقتباس كتل المحتوى من مصدر آخر داخل المستند الخاص بك.
blockquote الافتراضي
التفاف <blockquote>حول أي HTML كاقتباس. لعروض الأسعار المستقيمة ، نوصي أ <p>.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>خيارات Blockquote
تغيير الأسلوب والمحتوى للاختلافات البسيطة على المعيار <blockquote>.
تسمية المصدر
أضف <footer>لتحديد المصدر. لف اسم المصدر في العمل <cite>.
Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>شاشات بديلة
إضافة .blockquote-reverseإلى blockquote مع محتوى محاذاة لليمين.
<blockquote class="blockquote-reverse">
...
</blockquote>القوائم
غير مرتب
قائمة بالعناصر التي لا يهم الترتيب فيها صراحةً .
- أبجد هوز دولور الجلوس امات
- Consectetur adipiscing النخبة
- عدد صحيح molestie lorem في ماسا
- Facilisis في فترة ما قبل nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- الدهليز laoreet porttitor sem
- AC tristique Libero volutpat أت
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul>
<li>...</li>
</ul>أمر
قائمة بالعناصر التي يكون الترتيب مهمًا فيها صراحةً.
- أبجد هوز دولور الجلوس امات
- Consectetur adipiscing النخبة
- عدد صحيح molestie lorem في ماسا
- Facilisis في فترة ما قبل nisl aliquet
- Nulla volutpat aliquam velit
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ol>
<li>...</li>
</ol>غير منمق
قم بإزالة الهامش الافتراضي list-styleوالهامش الأيسر من عناصر القائمة (الأطفال المباشرون فقط). ينطبق هذا فقط على عناصر قائمة الأطفال المباشرة ، مما يعني أنك ستحتاج إلى إضافة فئة لأي قوائم متداخلة أيضًا.
- أبجد هوز دولور الجلوس امات
- Consectetur adipiscing النخبة
- عدد صحيح molestie lorem في ماسا
- Facilisis في فترة ما قبل nisl aliquet
- Nulla volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- الدهليز laoreet porttitor sem
- AC tristique Libero volutpat أت
- Faucibus porta lacus fringilla vel
- Aenean sit amet erat nunc
- Eget porttitor lorem
<ul class="list-unstyled">
<li>...</li>
</ul>في النسق
ضع كل عناصر القائمة في سطر واحد مع display: inline-block;بعض المساحة المتروكة الخفيفة.
- لوريم إيبسوم
- Phasellus iaculis
- نولا فولوتبات
<ul class="list-inline">
<li>...</li>
</ul>وصف
قائمة المصطلحات مع الأوصاف المرتبطة بها.
- قوائم الوصف
- قائمة وصف مثالية لتعريف المصطلحات.
- يوسمود
- الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>وصف أفقي
ضع المصطلحات والأوصاف <dl>جنبًا إلى جنب. يبدأ مكدسًا مثل <dl>s الافتراضي ، ولكن عندما يتوسع شريط التنقل ، فقم بذلك.
- قوائم الوصف
- قائمة وصف مثالية لتعريف المصطلحات.
- يوسمود
- الدهليز معرف ligula porta felis euismod semper eget lacinia odio sem nec elit.
- Donec id elit non mi porta gravida at eget metus.
- Malesuada porta
- Etiam porta sem malesuada magna mollis euismod.
- Felis euismod semper eget lacinia
- Fusce dapibus ، tellus ac cursus COMMODO ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>الاقتطاع التلقائي
ستعمل قوائم الوصف الأفقية على اقتطاع المصطلحات الطويلة جدًا بحيث لا يمكن احتواؤها في العمود الأيسر text-overflow. في إطارات العرض الأضيق ، ستتغير إلى التنسيق الافتراضي المكدس.
شفرة
في النسق
التفاف مضمنة قصاصات من التعليمات البرمجية مع <code>.
على سبيل المثال ،
<section>يجب أن يتم لفها على أنها مضمنة.
For example, <code><section></code> should be wrapped as inline.إدخال المستخدم
استخدم <kbd>للإشارة إلى الإدخال الذي يتم إدخاله عادةً عبر لوحة المفاتيح.
لتبديل الدلائل ، اكتب
cdمتبوعًا باسم الدليل.
لتعديل الضبط ، اضغط على ctrl + ,
لتعديل الضبط ، اضغط على ctrl + ,
To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>الكتلة الأساسية
استخدم <pre>لأسطر متعددة من التعليمات البرمجية. تأكد من عدم وجود أقواس زاوية في الكود من أجل العرض الصحيح.
<p> نموذج نص هنا ... </ p>
<pre><p>Sample text here...</p></pre>يمكنك اختياريًا إضافة .pre-scrollableالفئة ، والتي ستحدد أقصى ارتفاع يبلغ 350 بكسل وتوفر شريط تمرير للمحور ص.
المتغيرات
للإشارة إلى المتغيرات ، استخدم <var>العلامة.
ص = م س + ب
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>إخراج العينة
للإشارة إلى كتل عينة الإخراج من برنامج ، استخدم <samp>العلامة.
من المفترض أن يتم التعامل مع هذا النص على أنه عينة إخراج من برنامج كمبيوتر.
<samp>This text is meant to be treated as sample output from a computer program.</samp>الجداول
مثال أساسي
للتصميم الأساسي - الحشو الفاتح والفواصل الأفقية فقط - أضف الفئة الأساسية .tableإلى أي فئة <table>. قد يبدو الأمر زائدًا عن الحاجة ، ولكن نظرًا للاستخدام الواسع للجداول للمكونات الإضافية الأخرى مثل التقويمات ومنتقي التواريخ ، فقد اخترنا عزل أنماط الجدول المخصصة لدينا.
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
<table class="table">
...
</table>صفوف مخططة
استخدمه .table-stripedلإضافة مخطط حمار وحشي إلى أي صف جدول داخل ملف <tbody>.
التوافق عبر المستعرضات
يتم تصميم الجداول المخططة عبر :nth-childمحدد CSS ، وهو غير متوفر في Internet Explorer 8.
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
<table class="table table-striped">
...
</table>جدول بحدود
أضف .table-borderedللحدود الموجودة على كل جوانب الجدول والخلايا.
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
<table class="table table-bordered">
...
</table>تحوم الصفوف
إضافة .table-hoverلتمكين حالة التمرير على صفوف الجدول داخل ملف <tbody>.
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
<table class="table table-hover">
...
</table>طاولة مكثفة
أضف .table-condensedلجعل الجداول أكثر إحكاما عن طريق قطع حشوة الخلايا إلى النصف.
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري الطائر | @تويتر | |
<table class="table table-condensed">
...
</table>الفئات السياقية
استخدم الفئات السياقية لتلوين صفوف الجدول أو الخلايا الفردية.
| فصل | وصف |
|---|---|
.active |
يطبق لون التمرير على صف أو خلية معينة |
.success |
يشير إلى إجراء ناجح أو إيجابي |
.info |
يشير إلى تغيير أو إجراء إعلامي محايد |
.warning |
يشير إلى تحذير قد يحتاج إلى عناية |
.danger |
يشير إلى عمل خطير أو سلبي محتمل |
| # | عنوان العمود | عنوان العمود | عنوان العمود |
|---|---|---|---|
| 1 | محتوى العمود | محتوى العمود | محتوى العمود |
| 2 | محتوى العمود | محتوى العمود | محتوى العمود |
| 3 | محتوى العمود | محتوى العمود | محتوى العمود |
| 4 | محتوى العمود | محتوى العمود | محتوى العمود |
| 5 | محتوى العمود | محتوى العمود | محتوى العمود |
| 6 | محتوى العمود | محتوى العمود | محتوى العمود |
| 7 | محتوى العمود | محتوى العمود | محتوى العمود |
| 8 | محتوى العمود | محتوى العمود | محتوى العمود |
| 9 | محتوى العمود | محتوى العمود | محتوى العمود |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى إلى صف جدول أو خلية فردية فقط مؤشرًا مرئيًا ، والذي لن يتم نقله إلى مستخدمي التقنيات المساعدة - مثل برامج قراءة الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (النص المرئي في صف / خلية الجدول ذي الصلة) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.
جداول مستجيبة
قم بإنشاء جداول سريعة الاستجابة بلف أي .tableمنها .table-responsiveلجعلها قابلة للتمرير أفقيًا على الأجهزة الصغيرة (أقل من 768 بكسل). عند المشاهدة على أي شيء يزيد عرضه عن 768 بكسل ، لن ترى أي اختلاف في هذه الجداول.
القطع / الاقتطاع العمودي
تستفيد الجداول المستجيبة من overflow-y: hiddenأي محتوى يتجاوز الحواف السفلية أو العلوية للجدول. على وجه الخصوص ، يمكن أن يؤدي هذا إلى قص القوائم المنسدلة وأدوات الطرف الثالث الأخرى.
Firefox ومجموعات الحقول
يحتوي Firefox على بعض تصميم مجموعة الحقول المحرج widthالذي يتداخل مع الجدول المتجاوب. لا يمكن تجاوز هذا بدون اختراق خاص بمتصفح Firefox لا نقدمه في Bootstrap:
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}لمزيد من المعلومات ، اقرأ إجابة Stack Overflow .
| # | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول |
|---|---|---|---|---|---|---|
| 1 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
| 2 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
| 3 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
| # | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول | عنوان الجدول |
|---|---|---|---|---|---|---|
| 1 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
| 2 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
| 3 | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول | خلية الجدول |
<div class="table-responsive">
<table class="table">
...
</table>
</div>نماذج
مثال أساسي
تتلقى عناصر التحكم في النموذج الفردية بعض الأنماط العامة تلقائيًا. يتم تعيين كل العناصر النصية <input>والعناصر <textarea>مع افتراضيًا. قم بتغليف الملصقات وعناصر التحكم للحصول على تباعد مثالي.<select>.form-controlwidth: 100%;.form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>لا تخلط بين مجموعات النماذج ومجموعات الإدخال
لا تخلط مجموعات النماذج مباشرة مع مجموعات الإدخال . بدلاً من ذلك ، قم بتداخل مجموعة الإدخال داخل مجموعة النموذج.
شكل مضمّن
أضف .form-inlineإلى النموذج الخاص بك (الذي لا يجب أن يكون أ <form>) لعناصر تحكم محاذاة إلى اليسار ومضمنة. ينطبق هذا فقط على النماذج الموجودة في إطارات العرض التي يبلغ عرضها 768 بكسل على الأقل.
قد تتطلب عروض مخصصة
تم تطبيق المدخلات والتحديدات width: 100%;بشكل افتراضي في Bootstrap. ضمن النماذج المضمنة ، نقوم بإعادة تعيين ذلك width: auto;بحيث يمكن أن توجد عناصر تحكم متعددة على نفس الخط. اعتمادًا على التخطيط الخاص بك ، قد تكون هناك حاجة إلى عروض مخصصة إضافية.
أضف تسميات دائمًا
ستواجه برامج قراءة الشاشة مشكلة في النماذج الخاصة بك إذا لم تقم بتضمين تسمية لكل إدخال. بالنسبة لهذه النماذج المضمنة ، يمكنك إخفاء التسميات باستخدام .sr-onlyالفئة. هناك طرق بديلة أخرى لتوفير تسمية للتقنيات المساعدة ، مثل aria-label، aria-labelledbyأو titleالسمة. في حالة عدم وجود أي منها ، قد تلجأ برامج قراءة الشاشة إلى استخدام placeholderالسمة ، إن وجدت ، ولكن لاحظ أنه placeholderلا يُنصح باستخدامها كبديل لطرق وضع العلامات الأخرى.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>شكل أفقي
استخدم فئات الشبكة المحددة مسبقًا في Bootstrap لمحاذاة التسميات ومجموعات عناصر التحكم في النموذج في تخطيط أفقي عن طريق الإضافة .form-horizontalإلى النموذج (الذي لا يجب أن يكون أ <form>). يؤدي القيام بذلك إلى تغيير .form-groups لتتصرف كصفوف شبكية ، فلا داعي لذلك .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>الضوابط المعتمدة
أمثلة على عناصر تحكم النموذج القياسية المعتمدة في نموذج تخطيط نموذج.
المدخلات
التحكم في النموذج الأكثر شيوعًا ، حقول الإدخال المستندة إلى النص. يتضمن دعمًا لجميع أنواع HTML5: text، password، datetime، datetime-local، date، month، time، week، number، email، url، search، tel، color.
إعلان النوع مطلوب
سيتم تصميم المدخلات بشكل كامل فقط إذا typeتم الإعلان عنها بشكل صحيح.
<input type="text" class="form-control" placeholder="Text input">مجموعات الإدخال
لإضافة نص أو أزرار مدمجة قبل و / أو بعد أي مستند نصي <input>، تحقق من مكون مجموعة الإدخال .
تيكستاريا
التحكم في النموذج الذي يدعم عدة أسطر من النص. قم بتغيير rowsالسمة حسب الضرورة.
<textarea class="form-control" rows="3"></textarea>مربعات الاختيار وأجهزة الراديو
خانات الاختيار مخصصة لتحديد خيار واحد أو عدة خيارات في القائمة ، بينما تستخدم أجهزة الراديو لتحديد خيار واحد من بين العديد.
يتم دعم مربعات الاختيار وأجهزة الراديو المعطلة ، ولكن لتوفير مؤشر "غير مسموح به" على الوالد <label>، ستحتاج إلى إضافة .disabledالفصل إلى الوالد .radio، .radio-inlineأو .checkbox، أو .checkbox-inline.
افتراضي (مكدس)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="checkbox disabled">
<label>
<input type="checkbox" value="" disabled>
Option two is disabled
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that—be sure to include why it's great
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Option two can be something else and selecting it will deselect option one
</label>
</div>
<div class="radio disabled">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled
</label>
</div>مربعات الاختيار وأجهزة الراديو المضمنة
استخدم الفئات .checkbox-inlineأو .radio-inlineفي سلسلة مربعات الاختيار أو أجهزة الراديو لعناصر التحكم التي تظهر على نفس السطر.
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
<input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
<input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>مربعات الاختيار وأجهزة الراديو بدون نص التسمية
إذا لم يكن لديك نص داخل <label>، فسيتم وضع الإدخال كما تتوقع. يعمل حاليًا فقط على مربعات الاختيار وأجهزة الراديو غير المضمنة. تذكر أن تستمر في تقديم شكل من أشكال التسمية للتقنيات المساعدة (على سبيل المثال ، استخدام aria-label).
<div class="checkbox">
<label>
<input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
</label>
</div>يختار
لاحظ أن العديد من قوائم التحديد الأصلية - خاصة في Safari و Chrome - لها زوايا مستديرة لا يمكن تعديلها عبر border-radiusالخصائص.
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>بالنسبة <select>لعناصر التحكم ذات multipleالسمة ، يتم عرض خيارات متعددة بشكل افتراضي.
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>تحكم ثابت
عندما تحتاج إلى وضع نص عادي بجوار تسمية نموذج داخل نموذج ، استخدم .form-control-staticالفئة في ملف <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>حالة التركيز
outlineنقوم بإزالة الأنماط الافتراضية في بعض عناصر التحكم في النموذج وتطبيقها box-shadowفي مكانها على :focus.
:focusالحالة التجريبية
يستخدم الإدخال في المثال أعلاه أنماطًا مخصصة في وثائقنا لتوضيح :focusالحالة في ملف .form-control.
دولة المعوقين
أضف disabledالسمة المنطقية على إدخال لمنع تفاعلات المستخدم. تظهر المدخلات المعطلة بشكل أفتح وتضيف مؤشرًا not-allowed.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>مجموعات الحقول المعوقين
أضف disabledالسمة إلى <fieldset>لتعطيل جميع عناصر التحكم داخل ملف <fieldset>.
تحذير بشأن وظيفة الارتباط الخاصة بـ<a>
بشكل افتراضي ، ستتعامل المستعرضات مع جميع عناصر التحكم (والعناصر) الأصلية في النموذج <input>على أنها <select>معطلة ، مما يمنع تفاعلات لوحة المفاتيح والماوس عليها. ومع ذلك ، إذا كان النموذج الخاص بك يتضمن أيضًا عناصر ، فسيتم منح هذه العناصر فقط نمط . كما هو مذكور في القسم الخاص بحالة التعطيل للأزرار (وتحديداً في القسم الفرعي لعناصر الربط) ، فإن خاصية CSS هذه لم يتم توحيدها بعد ولا يتم دعمها بالكامل في Opera 18 والإصدارات الأقدم ، أو في Internet Explorer 11 ، وفازت منع مستخدمي لوحة المفاتيح من القدرة على التركيز أو تنشيط هذه الروابط. حتى تكون آمنًا ، استخدم JavaScript مخصصًا لتعطيل هذه الروابط.<button><fieldset disabled><a ... class="btn btn-*">pointer-events: none
التوافق عبر المستعرضات
بينما يقوم Bootstrap بتطبيق هذه الأنماط في جميع المستعرضات ، فإن Internet Explorer 11 وما يليه لا يدعم disabledالسمة بشكل كامل في ملف <fieldset>. استخدم JavaScript مخصص لتعطيل مجموعة الحقول في هذه المتصفحات.
<form>
<fieldset disabled>
<div class="form-group">
<label for="disabledTextInput">Disabled input</label>
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
</div>
<div class="form-group">
<label for="disabledSelect">Disabled select menu</label>
<select id="disabledSelect" class="form-control">
<option>Disabled select</option>
</select>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Can't check this
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</fieldset>
</form>للقراءة فقط
أضف readonlyالسمة المنطقية على إدخال لمنع تعديل قيمة الإدخال. تظهر مدخلات القراءة فقط أخف (تمامًا مثل المدخلات المعطلة) ، لكنها تحتفظ بالمؤشر القياسي.
<input class="form-control" type="text" placeholder="Readonly input here…" readonly>نص المساعدة
نص تعليمات مستوى الحظر لعناصر تحكم النموذج.
إقران نص التعليمات بعناصر تحكم النموذج
يجب أن يرتبط نص التعليمات بشكل صريح بعنصر التحكم في النموذج الذي يتعلق باستخدام aria-describedbyالسمة. سيضمن ذلك أن التقنيات المساعدة - مثل برامج قراءة الشاشة - ستعلن عن نص المساعدة هذا عندما يركز المستخدم أو يدخل عنصر التحكم.
<label for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>حالات التحقق
يتضمن Bootstrap أنماط التحقق من الخطأ والتحذير وحالات النجاح في عناصر التحكم في النموذج. لاستخدام أو إضافة أو .has-warningإلى العنصر الأصل. أي ، وداخل هذا العنصر ستتلقى أنماط التحقق من الصحة..has-error.has-success.control-label.form-control.help-block
نقل حالة التحقق إلى التقنيات المساعدة ومستخدمي عمى الألوان
لا يوفر استخدام أنماط التحقق من الصحة هذه للإشارة إلى حالة عنصر تحكم النموذج سوى إشارة مرئية تعتمد على الألوان ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل برامج قراءة الشاشة - أو المستخدمين الذين يعانون من عمى الألوان.
تأكد أيضًا من توفير مؤشر بديل عن الحالة. على سبيل المثال ، يمكنك تضمين تلميح حول الحالة في <label>نص عنصر تحكم النموذج نفسه (كما هو الحال في مثال التعليمات البرمجية التالي) ، أو تضمين رمز Glyphicon (مع نص بديل مناسب باستخدام .sr-onlyالفئة - راجع أمثلة Glyphicon ) ، أو عن طريق توفير نص تعليمات إضافية . على وجه التحديد بالنسبة للتقنيات المساعدة ، يمكن أيضًا تعيين aria-invalid="true"سمة لعناصر تحكم النموذج غير الصالحة.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>مع رموز اختيارية
يمكنك أيضًا إضافة رموز ملاحظات اختيارية مع إضافة .has-feedbackالرمز الصحيح.
تعمل رموز الملاحظات فقط مع <input class="form-control">العناصر النصية.
الرموز والتسميات ومجموعات الإدخال
مطلوب تحديد الموضع اليدوي لرموز التعليقات للمدخلات بدون تسمية ولمجموعات الإدخال مع وظيفة إضافية على اليمين. نحثك بشدة على تقديم تسميات لجميع المدخلات لأسباب تتعلق بإمكانية الوصول. إذا كنت ترغب في منع عرض الملصقات ، قم بإخفائها مع .sr-onlyالفصل. إذا كان لا بد من الاستغناء عن التسميات ، فاضبط topقيمة أيقونة الملاحظات. لمجموعات الإدخال ، اضبط rightالقيمة على قيمة بكسل مناسبة بناءً على عرض الوظيفة الإضافية.
نقل معنى الأيقونة إلى التقنيات المساعدة
للتأكد من أن التقنيات المساعدة - مثل برامج قراءة الشاشة - تنقل معنى الرمز بشكل صحيح ، يجب تضمين نص مخفي إضافي مع .sr-onlyالفصل وربطه بشكل صريح بعنصر التحكم في النموذج الذي يتعلق باستخدامه aria-describedby. بدلاً من ذلك ، تأكد من أن المعنى (على سبيل المثال ، حقيقة وجود تحذير لحقل إدخال نص معين) يتم نقله في شكل آخر ، مثل تغيير نص الفعلي <label>المرتبط بالتحكم في النموذج.
على الرغم من أن الأمثلة التالية تشير بالفعل إلى حالة التحقق من عناصر التحكم في النموذج الخاصة بكل منها في <label>النص نفسه ، فقد تم تضمين التقنية المذكورة أعلاه (باستخدام .sr-onlyالنص و aria-describedby) لأغراض توضيحية.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>رموز اختيارية في الأشكال الأفقية والمضمنة
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>رموز اختيارية مع .sr-onlyتسميات مخفية
إذا كنت تستخدم .sr-onlyالفئة لإخفاء عناصر تحكم النموذج <label>(بدلاً من استخدام خيارات تسمية أخرى ، مثل aria-labelالسمة) ، فسيقوم Bootstrap تلقائيًا بضبط موضع الرمز بمجرد إضافته.
(النجاح)
@
(النجاح)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>التحكم في التحجيم
قم بتعيين ارتفاعات باستخدام فئات مثل .input-lg، وقم بتعيين العروض باستخدام فئات أعمدة الشبكة مثل .col-lg-*.
ارتفاع الحجم
قم بإنشاء عناصر تحكم نموذج أطول أو أقصر تطابق أحجام الأزرار.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>أحجام مجموعة الشكل الأفقي
حجم الملصقات وعناصر التحكم بالنماذج الموجودة بسرعة .form-horizontalعن طريق إضافة .form-group-lgأو .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>تحجيم العمود
التفاف المدخلات في أعمدة الشبكة ، أو أي عنصر رئيسي مخصص ، لفرض العروض المرغوبة بسهولة.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>أزرار
علامات الزر
استخدم فئات الأزرار على <a>، <button>أو <input>عنصر.
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">استخدام خاص بالسياق
بينما يمكن استخدام فئات الأزرار على <a>والعناصر <button>، <button>يتم دعم العناصر فقط داخل مكونات navbar و navbar الخاصة بنا.
تعمل الروابط كأزرار
إذا <a>تم استخدام العناصر للعمل كأزرار - تشغيل وظيفة في الصفحة ، بدلاً من التنقل إلى مستند أو قسم آخر داخل الصفحة الحالية - فيجب أيضًا إعطاؤها مناسبة role="button".
عرض عبر المستعرض
كأفضل ممارسة ، نوصي بشدة باستخدام <button>العنصر كلما أمكن ذلك لضمان مطابقة العرض عبر المستعرضات.
من بين أشياء أخرى ، هناك خطأ في Firefox <30 يمنعنا من تعيين الأزرار القائمة line-heightعلى <input>أساس ، مما يتسبب في عدم تطابقها تمامًا مع ارتفاع الأزرار الأخرى على Firefox.
خيارات
استخدم أيًا من فئات الأزرار المتاحة لإنشاء زر نمط سريعًا.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى إلى الزر فقط مؤشرًا مرئيًا لن يتم نقله إلى مستخدمي التقنيات المساعدة - مثل برامج قراءة الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (النص المرئي للزر) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل.
الأحجام
يتوهم أزرار أكبر أو أصغر؟ أضف .btn-lg، .btn-smأو .btn-xsلأحجام إضافية.
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>قم بإنشاء أزرار مستوى الكتلة — تلك التي تمتد على العرض الكامل لأحد الوالدين — عن طريق الإضافة .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>الحالة النشطة
ستظهر الأزرار مضغوطة (بخلفية داكنة وحد أغمق وظل داخلي) عندما تكون نشطة. بالنسبة <button>للعناصر ، يتم ذلك عبر :active. بالنسبة <a>للعناصر ، يتم ذلك باستخدام .active. ومع ذلك ، يمكنك استخدام .actives <button>(وتضمين aria-pressed="true"السمة) إذا احتجت إلى تكرار الحالة النشطة برمجيًا.
عنصر الزر
لا داعي للإضافة :activeلأنها فئة زائفة ، ولكن إذا كنت بحاجة إلى فرض نفس المظهر ، فابدأ وقم بالإضافة .active.
<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>عنصر المرساة
أضف .activeالفصل إلى <a>الأزرار.
الارتباط الأساسي نهاية لهذه الغاية
<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>دولة المعوقين
اجعل الأزرار تبدو غير قابلة للنقر من خلال تلاشيها مرة أخرى opacity.
عنصر الزر
أضف disabledالسمة إلى <button>الأزرار.
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>التوافق عبر المستعرضات
إذا قمت بإضافة disabledالسمة إلى <button>، فإن Internet Explorer 9 وما يليه سيعرض النص باللون الرمادي مع ظل نص مقرف لا يمكننا إصلاحه.
عنصر المرساة
أضف .disabledالفصل إلى <a>الأزرار.
الارتباط الأساسي نهاية لهذه الغاية
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>نستخدم .disabledهنا كفئة أدوات مساعدة ، على غرار .activeالفئة العامة ، لذلك لا يلزم استخدام بادئة.
تنبيه وظيفة الارتباط
تستخدم هذه الفئة pointer-events: noneلمحاولة تعطيل وظيفة الارتباط الخاصة بـ <a>s ، ولكن خاصية CSS هذه لم يتم توحيدها بعد ولم يتم دعمها بالكامل في Opera 18 والإصدارات الأقدم ، أو في Internet Explorer 11. بالإضافة إلى ذلك ، حتى في المتصفحات التي تدعم pointer-events: noneلوحة المفاتيح يظل التنقل غير متأثر ، مما يعني أن مستخدمي لوحة المفاتيح المبصرين ومستخدمي التقنيات المساعدة سيظلون قادرين على تنشيط هذه الروابط. حتى تكون آمنًا ، استخدم JavaScript مخصصًا لتعطيل هذه الروابط.
الصور
صور مستجيبة
يمكن جعل الصور في Bootstrap 3 سهلة الاستجابة من خلال إضافة .img-responsiveالفصل. هذا ينطبق max-width: 100%;، height: auto;وعلى display: block;الصورة بحيث تتناسب بشكل جيد مع العنصر الأصل.
لتوسيط الصور التي تستخدم .img-responsiveالفصل ، استخدم .center-blockبدلاً من .text-center. راجع قسم فئات المساعدة لمزيد من التفاصيل حول .center-blockالاستخدام.
صور SVG و IE 8-10
في Internet Explorer 8-10 ، تكون صور SVG ذات .img-responsiveحجم غير متناسب. لإصلاح هذا ، أضف width: 100% \9;عند الضرورة. لا يطبق Bootstrap هذا تلقائيًا لأنه يتسبب في حدوث مضاعفات لتنسيقات الصور الأخرى.
<img src="..." class="img-responsive" alt="Responsive image">اشكال الصور
أضف فئات إلى <img>عنصر ما لتسهيل نمط الصور في أي مشروع.
التوافق عبر المستعرضات
ضع في اعتبارك أن Internet Explorer 8 يفتقر إلى الدعم للزوايا المستديرة.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">فصول المساعد
الألوان السياقية
نقل المعنى من خلال اللون مع عدد قليل من فئات المرافق التوكيدية. قد يتم تطبيق هذه أيضًا على الروابط وستظل داكنة عند المرور فوقها تمامًا مثل أنماط الارتباط الافتراضية الخاصة بنا.
Fusce dapibus ، tellus ac cursus Commodo ، tortor mauris nibh.
Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
Duis mollis، est noncommo luctus، nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>التعامل مع الخصوصية
في بعض الأحيان لا يمكن تطبيق فئات التركيز بسبب خصوصية محدد آخر. في معظم الحالات ، يكون الحل الكافي هو التفاف النص الخاص بك في <span>الفصل.
إيصال المعنى للتقنيات المساعدة
يوفر استخدام اللون لإضافة معنى فقط إشارة مرئية ، والتي لن يتم نقلها إلى مستخدمي التقنيات المساعدة - مثل قارئات الشاشة. تأكد من أن المعلومات التي يشير إليها اللون إما واضحة من المحتوى نفسه (الألوان السياقية تستخدم فقط لتعزيز المعنى الموجود بالفعل في النص / الترميز) ، أو يتم تضمينها من خلال وسائل بديلة ، مثل النص الإضافي المخفي مع .sr-onlyالفصل .
الخلفيات السياقية
على غرار فئات ألوان النص السياقية ، يمكنك بسهولة تعيين خلفية العنصر لأي فئة سياقية. ستصبح مكونات الارتساء أكثر قتامة عند المرور فوقها ، تمامًا مثل فئات النص.
Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.
Duis mollis، est noncommo luctus، nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>التعامل مع الخصوصية
في بعض الأحيان لا يمكن تطبيق فئات الخلفية السياقية بسبب خصوصية محدد آخر. في بعض الحالات ، يكون الحل الكافي هو التفاف محتوى العنصر الخاص بك في <div>الفصل.
إيصال المعنى للتقنيات المساعدة
كما هو الحال مع الألوان السياقية ، تأكد من أن أي معنى يتم نقله من خلال اللون يتم نقله أيضًا بتنسيق غير عرضي بحت.
رمز الإغلاق
استخدم رمز الإغلاق العام لرفض محتوى مثل الوسائط والتنبيهات.
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button>علامات الإقحام
استخدم علامات الإقحام للإشارة إلى وظيفة القائمة المنسدلة والاتجاه. لاحظ أن علامة الإقحام الافتراضية ستنعكس تلقائيًا في القوائم المنسدلة .
<span class="caret"></span>يطفو بسرعة
تعويم عنصر إلى اليسار أو اليمين مع الفصل. !importantتم تضمينه لتجنب مشاكل الخصوصية. يمكن أيضًا استخدام الفصول كخلطات.
<div class="pull-left">...</div>
<div class="pull-right">...</div>// Classes
.pull-left {
float: left !important;
}
.pull-right {
float: right !important;
}
// Usage as mixins
.element {
.pull-left();
}
.another-element {
.pull-right();
}كتل المحتوى المركزية
تعيين عنصر إلى display: blockوالتوسيط عبر margin. متاح كمزج وفئة.
<div class="center-block">...</div>// Class
.center-block {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage as a mixin
.element {
.center-block();
}كليرفكس
امسح floats بسهولة عن طريق الإضافة .clearfix إلى العنصر الأصل . يستخدم micro clearfix كما أشاعه Nicolas Gallagher. يمكن أيضا أن تستخدم كمزج.
<!-- Usage as a class -->
<div class="clearfix">...</div>// Mixin itself
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage as a mixin
.element {
.clearfix();
}إظهار وإخفاء المحتوى
فرض عنصر لإظهاره أو إخفاؤه ( بما في ذلك برامج قراءة الشاشة ) باستخدام الفئات .show. .hiddenتستخدم هذه الفئات !importantلتجنب تعارضات الخصوصية ، تمامًا مثل العوامات السريعة . وهي متاحة فقط لتبديل مستوى الكتلة. يمكن استخدامها أيضًا كخلطات.
.hideمتاح ، ولكنه لا يؤثر دائمًا على برامج قراءة الشاشة ويتم إهماله اعتبارًا من الإصدار 3.0.1. استخدم .hiddenأو .sr-onlyبدلاً من ذلك.
علاوة على ذلك ، .invisibleيمكن استخدامه لتبديل رؤية عنصر فقط ، مما يعني displayأنه لم يتم تعديله ولا يزال بإمكان العنصر التأثير على تدفق المستند.
<div class="show">...</div>
<div class="hidden">...</div>// Classes
.show {
display: block !important;
}
.hidden {
display: none !important;
}
.invisible {
visibility: hidden;
}
// Usage as mixins
.element {
.show();
}
.another-element {
.hidden();
}قارئ الشاشة ومحتوى التنقل بلوحة المفاتيح
إخفاء عنصر لجميع الأجهزة باستثناء قارئات الشاشة ذات .sr-only. تتحد .sr-onlyمع.sr-only-focusable لإظهار العنصر مرة أخرى عند التركيز (على سبيل المثال بواسطة مستخدم لوحة المفاتيح فقط). ضروري لاتباع أفضل ممارسات الوصول . يمكن أيضا أن تستخدم كخلطات.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>// Usage as a mixin
.skip-navigation {
.sr-only();
.sr-only-focusable();
}استبدال الصورة
استخدم ملف.text-hide الفئة أو mixin للمساعدة في استبدال محتوى نص العنصر بصورة خلفية.
<h1 class="text-hide">Custom heading</h1>// Usage as a mixin
.heading {
.text-hide();
}المرافق سريعة الاستجابة
للتطوير المتوافق مع الأجهزة المحمولة بشكل أسرع ، استخدم فئات الأدوات المساعدة هذه لعرض المحتوى وإخفائه حسب الجهاز عبر استعلام الوسائط. يتم أيضًا تضمين فئات الأدوات المساعدة لتبديل المحتوى عند الطباعة.
حاول استخدام هذه على أساس محدود وتجنب إنشاء إصدارات مختلفة تمامًا من نفس الموقع. بدلاً من ذلك ، استخدمها لاستكمال العرض التقديمي لكل جهاز.
الفصول المتاحة
استخدم مجموعة واحدة أو مجموعة من الفئات المتاحة لتبديل المحتوى عبر نقاط توقف منفذ العرض.
| أجهزة صغيرة جدًاالهواتف (<768 بكسل) | الأجهزة الصغيرةالأجهزة اللوحية (768px) | الأجهزة المتوسطةأجهزة سطح المكتب (992 بكسل) | أجهزة كبيرةأجهزة الكمبيوتر المكتبية (≥ 1200 بكسل) | |
|---|---|---|---|---|
.visible-xs-* |
مرئي | مختفي | مختفي | مختفي |
.visible-sm-* |
مختفي | مرئي | مختفي | مختفي |
.visible-md-* |
مختفي | مختفي | مرئي | مختفي |
.visible-lg-* |
مختفي | مختفي | مختفي | مرئي |
.hidden-xs |
مختفي | مرئي | مرئي | مرئي |
.hidden-sm |
مرئي | مختفي | مرئي | مرئي |
.hidden-md |
مرئي | مرئي | مختفي | مرئي |
.hidden-lg |
مرئي | مرئي | مرئي | مختفي |
اعتبارًا من الإصدار 3.2.0 ، .visible-*-*تأتي الفئات لكل نقطة توقف في ثلاثة أشكال ، واحدة لكل displayقيمة خاصية CSS مدرجة أدناه.
| مجموعة الفصول | CSSdisplay |
|---|---|
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
xsلذلك ، بالنسبة للشاشات الصغيرة جدًا ( ) على سبيل المثال ، فإن .visible-*-*الفئات المتاحة هي: .visible-xs-blockو .visible-xs-inlineو و .visible-xs-inline-block.
الفئات .visible-xs، .visible-smو .visible-md، .visible-lgموجودة أيضًا ، ولكن تم إهمالها اعتبارًا من الإصدار 3.2.0 . إنها مكافئة تقريبًا .visible-*-block، باستثناء حالات خاصة إضافية <table>للعناصر ذات الصلة بالتبديل.
فصول الطباعة
على غرار الفئات المستجيبة العادية ، استخدمها لتبديل المحتوى للطباعة.
| الطبقات | المستعرض | مطبعة |
|---|---|---|
.visible-print-block.visible-print-inline.visible-print-inline-block |
مختفي | مرئي |
.hidden-print |
مرئي | مختفي |
الفئة .visible-printموجودة أيضًا ولكن تم إهمالها اعتبارًا من الإصدار 3.2.0. يكافئ تقريبًا .visible-print-block، باستثناء حالات خاصة إضافية <table>للعناصر ذات الصلة.
حالات تجريبية
قم بتغيير حجم المستعرض الخاص بك أو تحميله على أجهزة مختلفة لاختبار فئات الأدوات المساعدة سريعة الاستجابة.
مرئي على ...
تشير علامات الاختيار الخضراء إلى أن العنصر مرئي في منفذ العرض الحالي.
صغير جدا
✔ مرئي على x-small
صغير
مرئي على نطاق صغير
متوسط
✔ مرئي في المتوسط
كبير
مرئي بشكل كبير
مرئي على x-small و small
مرئي على المتوسطة والكبيرة
مرئي على x-small والمتوسط
مرئي على الصغيرة والكبيرة
مرئي على x-small و large
مرئي على الصغيرة والمتوسطة
مخفي في ...
هنا ، تشير علامات الاختيار الخضراء أيضًا إلى أن العنصر مخفي في منفذ العرض الحالي.
باستخدام أقل
تم بناء CSS الخاص بـ Bootstrap على Less ، وهو معالج أولي مع وظائف إضافية مثل المتغيرات والمزج والوظائف لتجميع CSS. أولئك الذين يتطلعون إلى استخدام ملفات المصدر Less بدلاً من ملفات CSS المجمعة يمكنهم الاستفادة من المتغيرات والخلطات العديدة التي نستخدمها في جميع أنحاء الإطار.
يتم تغطية متغيرات الشبكة والمزج داخل قسم نظام الشبكة .
تجميع Bootstrap
يمكن استخدام Bootstrap بطريقتين على الأقل: باستخدام CSS المترجمة أو مع الملفات المصدر Less. لتجميع الملفات الأقل ، راجع قسم "الشروع في العمل" لمعرفة كيفية إعداد بيئة التطوير الخاصة بك لتشغيل الأوامر اللازمة.
قد تعمل أدوات الترجمة التابعة لجهات خارجية مع Bootstrap ، لكنها غير مدعومة من قبل فريقنا الأساسي.
المتغيرات
تُستخدم المتغيرات في المشروع بأكمله كطريقة لمركزية القيم شائعة الاستخدام ومشاركتها مثل الألوان أو التباعد أو حزم الخطوط. للحصول على تفاصيل كاملة ، يرجى الاطلاع على أداة التخصيص .
الألوان
استفد بسهولة من نظامي ألوان: التدرج الرمادي والدلالة. توفر ألوان التدرج الرمادي وصولاً سريعًا إلى ظلال الأسود شائعة الاستخدام بينما تتضمن الدلالات ألوانًا مختلفة مخصصة لقيم سياقية ذات معنى.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;استخدم أيًا من متغيرات الألوان هذه كما هي أو أعد تعيينها إلى متغيرات أكثر أهمية لمشروعك.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}سقالات
حفنة من المتغيرات لتخصيص العناصر الرئيسية للهيكل العظمي لموقعك بسرعة.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;الروابط
صمم روابطك بسهولة باستخدام اللون المناسب بقيمة واحدة فقط.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}لاحظ أن @link-hover-colorالوظيفة تستخدم وظيفة ، وهي أداة رائعة أخرى من Less ، لإنشاء لون التمرير الصحيح تلقائيًا. يمكنك استخدام darkenو lightenو saturateو desaturate.
الطباعة
يمكنك بسهولة تعيين الخط وحجم النص والمسافة البادئة والمزيد باستخدام بعض المتغيرات السريعة. يستخدم Bootstrap هذه أيضًا لتوفير عمليات خلط طباعية سهلة.
@font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
@font-size-h1: floor((@font-size-base * 2.6)); // ~36px
@font-size-h2: floor((@font-size-base * 2.15)); // ~30px
@font-size-h3: ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4: ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5: @font-size-base;
@font-size-h6: ceil((@font-size-base * 0.85)); // ~12px
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor((@font-size-base * @line-height-base)); // ~20px
@headings-font-family: inherit;
@headings-font-weight: 500;
@headings-line-height: 1.1;
@headings-color: inherit;الأيقونات
متغيرين سريعين لتخصيص موقع واسم ملف الرموز الخاصة بك.
@icon-font-path: "../fonts/";
@icon-font-name: "glyphicons-halflings-regular";عناصر
تستفيد المكونات الموجودة في Bootstrap من بعض المتغيرات الافتراضية لتعيين القيم المشتركة. فيما يلي الأكثر استخدامًا.
@padding-base-vertical: 6px;
@padding-base-horizontal: 12px;
@padding-large-vertical: 10px;
@padding-large-horizontal: 16px;
@padding-small-vertical: 5px;
@padding-small-horizontal: 10px;
@padding-xs-vertical: 1px;
@padding-xs-horizontal: 5px;
@line-height-large: 1.33;
@line-height-small: 1.5;
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
@component-active-color: #fff;
@component-active-bg: @brand-primary;
@caret-width-base: 4px;
@caret-width-large: 5px;خلطات البائع
مزج البائعين عبارة عن مزيج للمساعدة في دعم متصفحات متعددة من خلال تضمين جميع بادئات البائعين ذات الصلة في CSS المترجمة.
حجم الصندوق
إعادة تعيين نموذج صندوق المكونات الخاصة بك مع mixin واحد. للسياق ، راجع هذه المقالة المفيدة من Mozilla .
تم إهمال المزيج اعتبارًا من الإصدار 3.2.0 ، مع إدخال Autoprefixer. للحفاظ على التوافق مع الإصدارات السابقة ، سيستمر Bootstrap في استخدام المزيج داخليًا حتى Bootstrap v4.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}زوايا مدورة
تدعم جميع المتصفحات الحديثة اليوم border-radiusخاصية غير مسبوقة. على هذا النحو ، لا يوجد .border-radius()mixin ، لكن Bootstrap يتضمن اختصارات لتقريب زاويتين بسرعة على جانب معين من كائن.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}مربع (إسقاط) الظلال
إذا كان جمهورك المستهدف يستخدم أحدث وأكبر المتصفحات والأجهزة ، فتأكد فقط من استخدام box-shadowالخاصية بمفردها. إذا كنت بحاجة إلى دعم لأجهزة Android القديمة (ما قبل الإصدار 4) وأجهزة iOS (ما قبل iOS 5) ، فاستخدم المزيج الموقوف لالتقاط المطلوب-webkit البادئة المطلوبة.
تم إهمال mixin اعتبارًا من الإصدار 3.1.0 ، نظرًا لأن Bootstrap لا يدعم رسميًا الأنظمة الأساسية القديمة التي لا تدعم الخاصية القياسية. للحفاظ على التوافق مع الإصدارات السابقة ، سيستمر Bootstrap في استخدام المزيج داخليًا حتى Bootstrap v4.
تأكد من استخدام rgba()الألوان في ظلال الصندوق حتى تمتزج بسلاسة قدر الإمكان مع الخلفيات.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}الانتقالات
الخلطات المتعددة للمرونة. قم بتعيين جميع معلومات الانتقال بواحد ، أو حدد تأخيرًا ومدة منفصلة حسب الحاجة.
تم إهمال الخلطات اعتبارًا من الإصدار 3.2.0 ، مع إدخال Autoprefixer. للحفاظ على التوافق مع الإصدارات السابقة ، سيستمر Bootstrap في استخدام المزيج داخليًا حتى Bootstrap v4.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}التحولات
قم بتدوير أي كائن أو تغيير حجمه أو ترجمته (تحريك) أو إمالته.
تم إهمال الخلطات اعتبارًا من الإصدار 3.2.0 ، مع إدخال Autoprefixer. للحفاظ على التوافق مع الإصدارات السابقة ، سيستمر Bootstrap في استخدام المزيج داخليًا حتى Bootstrap v4.
.rotate(@degrees) {
-webkit-transform: rotate(@degrees);
-ms-transform: rotate(@degrees); // IE9 only
transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
-webkit-transform: scale(@ratio, @ratio-y);
-ms-transform: scale(@ratio, @ratio-y); // IE9 only
transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
-webkit-transform: translate(@x, @y);
-ms-transform: translate(@x, @y); // IE9 only
transform: translate(@x, @y);
}
.skew(@x; @y) {
-webkit-transform: skew(@x, @y);
-ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
-webkit-transform: translate3d(@x, @y, @z);
transform: translate3d(@x, @y, @z);
}
.rotateX(@degrees) {
-webkit-transform: rotateX(@degrees);
-ms-transform: rotateX(@degrees); // IE9 only
transform: rotateX(@degrees);
}
.rotateY(@degrees) {
-webkit-transform: rotateY(@degrees);
-ms-transform: rotateY(@degrees); // IE9 only
transform: rotateY(@degrees);
}
.perspective(@perspective) {
-webkit-perspective: @perspective;
-moz-perspective: @perspective;
perspective: @perspective;
}
.perspective-origin(@perspective) {
-webkit-perspective-origin: @perspective;
-moz-perspective-origin: @perspective;
perspective-origin: @perspective;
}
.transform-origin(@origin) {
-webkit-transform-origin: @origin;
-moz-transform-origin: @origin;
-ms-transform-origin: @origin; // IE9 only
transform-origin: @origin;
}الرسوم المتحركة
مزيج واحد لاستخدام جميع خصائص الرسوم المتحركة لـ CSS3 في إعلان واحد ومزج أخرى للخصائص الفردية.
تم إهمال الخلطات اعتبارًا من الإصدار 3.2.0 ، مع إدخال Autoprefixer. للحفاظ على التوافق مع الإصدارات السابقة ، سيستمر Bootstrap في استخدام المزيج داخليًا حتى Bootstrap v4.
.animation(@animation) {
-webkit-animation: @animation;
animation: @animation;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
-webkit-animation-timing-function: @timing-function;
animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
-webkit-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
animation-direction: @direction;
}العتامة
قم بتعيين العتامة لجميع المتصفحات وتوفير filterاحتياطي لـ IE8.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}نص العنصر النائب
توفير سياق لعناصر تحكم النموذج داخل كل حقل.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}الأعمدة
قم بإنشاء أعمدة عبر CSS داخل عنصر واحد.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}التدرجات
يمكنك بسهولة تحويل أي لونين إلى تدرج في الخلفية. كن أكثر تقدمًا وحدد اتجاهًا ، أو استخدم ثلاثة ألوان ، أو استخدم تدرجًا شعاعيًا. باستخدام مزيج واحد ، ستحصل على جميع التركيبات البادئة التي ستحتاج إليها.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);يمكنك أيضًا تحديد زاوية التدرج الخطي القياسي ثنائي اللون:
#gradient > .directional(#333; #000; 45deg);إذا كنت بحاجة إلى تدرج نمط شريط الحلاقة ، فهذا سهل أيضًا. ما عليك سوى تحديد لون واحد وسنقوم بتراكب شريط أبيض نصف شفاف.
#gradient > .striped(#333; 45deg);ارفع الرهان واستخدم ثلاثة ألوان بدلاً من ذلك. عيّن اللون الأول ، واللون الثاني ، واللون الثاني ، واللون الثاني (قيمة مئوية مثل 25٪) ، واللون الثالث باستخدام هذه الخلطات:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);انتباه! إذا احتجت في أي وقت إلى إزالة التدرج اللوني ، فتأكد من إزالة أي خاص بـ IE filterقد تكون أضفته. يمكنك القيام بذلك باستخدام .reset-filter()mixin جنبًا إلى جنب background-image: none;.
الخلطات المساعدة
مزيج الأدوات المساعدة عبارة عن مزيج يجمع بين خصائص CSS غير ذات الصلة لتحقيق هدف أو مهمة محددة.
كليرفكس
ننسى الإضافة class="clearfix"إلى أي عنصر وبدلاً من ذلك أضف .clearfix()المزيج عند الاقتضاء. يستخدم micro clearfix من Nicolas Gallagher .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}التمركز الأفقي
قم بتوسيط أي عنصر بسرعة داخل العنصر الأصل. يتطلب widthأو max-widthيتم تعيينه.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}مساعدي التحجيم
تحديد أبعاد الكائن بسهولة أكبر.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }منسوجات يمكن تغيير حجمها
يمكنك تكوين خيارات تغيير الحجم بسهولة لأي منطقة نصية أو أي عنصر آخر. افتراضات على سلوك المتصفح العادي ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}نص مقتطع
اقتطاع النص بسهولة باستخدام علامة حذف باستخدام مزيج واحد. يتطلب العنصر ليكون blockأو inline-blockالمستوى.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}صور شبكية العين
حدد مسارين للصورة وأبعاد الصورة @ 1x ، وسيوفر Bootstrap استعلام وسائط @ 2x. إذا كان لديك العديد من الصور التي تريد عرضها ، ففكر في كتابة CSS لصورة شبكية العين يدويًا في استعلام وسائط واحد.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}باستخدام Sass
بينما تم بناء Bootstrap على Less ، فإنه يحتوي أيضًا على منفذ Sass رسمي . نحن نحتفظ به في مستودع GitHub منفصل ونتعامل مع التحديثات باستخدام برنامج نصي للتحويل.
ما يحتويه
نظرًا لأن منفذ Sass يحتوي على ريبو منفصل ويخدم جمهورًا مختلفًا قليلاً ، تختلف محتويات المشروع اختلافًا كبيرًا عن مشروع Bootstrap الرئيسي. هذا يضمن أن منفذ Sass متوافق مع أكبر عدد ممكن من الأنظمة المستندة إلى Sass.
| طريق | وصف |
|---|---|
lib/ |
كود جوهرة روبي (تكوين Sass ، تكامل القضبان والبوصلة) |
tasks/ |
نصوص المحول (تحويل المنبع Less to Sass) |
test/ |
اختبارات التجميع |
templates/ |
بيان حزمة البوصلة |
vendor/assets/ |
ملفات Sass و JavaScript والخط |
Rakefile |
المهام الداخلية ، مثل أشعل النار والتحويل |
قم بزيارة مستودع GitHub الخاص بمنفذ Sass لمشاهدة هذه الملفات أثناء العمل.
تثبيت
للحصول على معلومات حول كيفية تثبيت Bootstrap for Sass واستخدامه ، راجع الملف التمهيدي لمستودع GitHub . إنه أحدث مصدر ويتضمن معلومات للاستخدام مع مشاريع Rails و Compass و Sass القياسية.