CSS
إعدادات CSS العامة ، وعناصر HTML الأساسية مصممة ومُحسَّنة بفئات قابلة للتوسعة ، ونظام شبكة متقدم.
إعدادات CSS العامة ، وعناصر HTML الأساسية مصممة ومُحسَّنة بفئات قابلة للتوسعة ، ونظام شبكة متقدم.
احصل على معلومات حول الأجزاء الرئيسية للبنية التحتية لـ Bootstrap ، بما في ذلك نهجنا لتطوير ويب أفضل وأسرع وأقوى.
يستخدم 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 ، وهو مشروع من إعداد نيكولاس غالاغر وجوناثان نيل .
يتطلب 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
. يتم إزاحة هذه المساحة المتروكة في صفوف للعمود الأول والأخير عبر الهامش السالب على .row
s..col-xs-4
..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
.
<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-*
إلى الأعمدة الخاصة بك. انظر إلى المثال أدناه للحصول على فكرة أفضل عن كيفية عمل كل ذلك.
<!-- 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-*
فئات الكمبيوتر اللوحي.
<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 عمودًا في صف واحد ، فستلتف كل مجموعة من الأعمدة الإضافية كوحدة واحدة في سطر جديد.
<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
فئات الأدوات المساعدة سريعة الاستجابة .
<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>
انقل الأعمدة إلى اليمين باستخدام .col-md-offset-*
الفئات. تزيد هذه الفئات الهامش الأيسر للعمود *
بأعمدة. على سبيل المثال ، .col-md-offset-4
يتحرك .col-md-4
على أربعة أعمدة.
<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 المتوفرة).
<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-*
المعدلات.
<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>
.
<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>
حول أي 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>
.
إضافة <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>
قائمة بالعناصر التي لا يهم الترتيب فيها صراحةً .
<ul>
<li>...</li>
</ul>
قائمة بالعناصر التي يكون الترتيب مهمًا فيها صراحةً.
<ol>
<li>...</li>
</ol>
قم بإزالة الهامش الافتراضي list-style
والهامش الأيسر من عناصر القائمة (الأطفال المباشرون فقط). ينطبق هذا فقط على عناصر قائمة الأطفال المباشرة ، مما يعني أنك ستحتاج إلى إضافة فئة لأي قوائم متداخلة أيضًا.
<ul class="list-unstyled">
<li>...</li>
</ul>
ضع كل عناصر القائمة في سطر واحد مع display: inline-block;
بعض المساحة المتروكة الخفيفة.
<ul class="list-inline">
<li>...</li>
</ul>
قائمة المصطلحات مع الأوصاف المرتبطة بها.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
ضع المصطلحات والأوصاف <dl>
جنبًا إلى جنب. يبدأ مكدسًا مثل <dl>
s الافتراضي ، ولكن عندما يتوسع شريط التنقل ، فقم بذلك.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
ستعمل قوائم الوصف الأفقية على اقتطاع المصطلحات الطويلة جدًا بحيث لا يمكن احتواؤها في العمود الأيسر text-overflow
. في إطارات العرض الأضيق ، ستتغير إلى التنسيق الافتراضي المكدس.
التفاف المقتطفات من التعليمات البرمجية مع <code>
.
<section>
يجب أن يتم لفها على أنها مضمنة.
For example, <code><section></code> should be wrapped as inline.
استخدم <kbd>
للإشارة إلى الإدخال الذي يتم إدخاله عادةً عبر لوحة المفاتيح.
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 على بعض تصميم مجموعة الحقول المحرج 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-control
width: 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-group
s لتتصرف كصفوف شبكية ، فلا داعي لذلك .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 class="sr-only" 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
. ومع ذلك ، يمكنك استخدام .active
s <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
الاستخدام.
في 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();
}
امسح float
s بسهولة عن طريق الإضافة .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>
للعناصر ذات الصلة.
قم بتغيير حجم المستعرض الخاص بك أو تحميله على أجهزة مختلفة لاختبار فئات الأدوات المساعدة سريعة الاستجابة.
تشير علامات الاختيار الخضراء إلى أن العنصر مرئي في منفذ العرض الحالي.
هنا ، تشير علامات الاختيار الخضراء أيضًا إلى أن العنصر مخفي في منفذ العرض الحالي.
تم بناء CSS الخاص بـ Bootstrap على Less ، وهو معالج أولي مع وظائف إضافية مثل المتغيرات والمزج والوظائف لتجميع CSS. أولئك الذين يتطلعون إلى استخدام ملفات المصدر Less بدلاً من ملفات CSS المجمعة يمكنهم الاستفادة من المتغيرات والخلطات العديدة التي نستخدمها في جميع أنحاء الإطار.
يتم تغطية متغيرات الشبكة والمزج داخل قسم نظام الشبكة .
يمكن استخدام 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);
}
بينما تم بناء 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 القياسية.