العناوين

جميع عناوين HTML ، <h1>من خلال <h6>متوفرة.

h1. عنوان 1

h2. العنوان 2

h3. العنوان 3

h4. العنوان 4

h5. العنوان 5

h6. العنوان 6

نسخة الجسم

الافتراضي العام لـ Bootstrap font-sizeهو 14 بكسل ، مع 20 بكسل . يتم تطبيق هذا على جميع الفقرات. بالإضافة إلى ذلك ، (الفقرات) تتلقى هامشًا سفليًا بنصف ارتفاع السطر (افتراضيًا 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 يتكيف معها.@baseFontSize@baseLineHeight

تشديد

استفد من علامات التركيز الافتراضية في HTML بأنماط خفيفة الوزن.

`<small>`

لإلغاء التأكيد على السطر أو كتل النص ، استخدم العلامة الصغيرة.

من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة.

<p> <small> من المفترض أن يتم التعامل مع هذا السطر على أنه طباعة جيدة. </small> </p>

عريض

للتأكيد على مقتطف من النص بسمك خط أثقل.

يتم تقديم المقتطف التالي من النص كنص غامق .

<strong> تم تقديمه كنص عريض </ strong>

مائل

للتأكيد على مقتطف من النص بخط مائل.

يتم تقديم المقتطف التالي من النص كنص مائل .

<em> تم عرضه كنص مائل </ em>

انتباه!لا تتردد في استخدام <b>HTML5 <i>. <b>يهدف إلى إبراز الكلمات أو العبارات دون نقل أهمية إضافية بينما <i>يكون في الغالب للصوت والمصطلحات الفنية وما إلى ذلك.

فئات المحاذاة

إعادة محاذاة النص بسهولة للمكونات باستخدام فئات محاذاة النص.

نص بمحاذاة إلى اليسار.

نص بمحاذاة الوسط.

نص بمحاذاة اليمين.

<p class = "text-left" > نص بمحاذاة إلى اليسار. </p> 
<p class = "text-center" > نص بمحاذاة الوسط. </p> 
<p class = "text-right" > نص بمحاذاة لليمين. </p>

فصول التوكيد

نقل المعنى من خلال اللون مع عدد قليل من فئات المرافق التوكيدية.

Fusce dapibus ، tellus ac cursus Commodo ، tortor mauris nibh.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.

Duis mollis، est noncommo luctus، nisi erat porttitor ligula.

<p class = "muted" > Fusce dapibus، tellus ac cursus Goodso، tortor mauris nibh. </p> 
<p class = "text-warning" > Etiam porta sem malesuada magna mollis euismod. </p> 
<p class = "text-error" > Donec ullamcorper nulla non metus auctor fringilla. </p> 
<p class = "text-info" > Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis. </p> 
<p class = "text-Success" > Duis mollis ، هو عبارة عن قاعدة غير سلعة ، ليجلا بورتريتور. </p>

الاختصارات

تنفيذ منمق <abbr>لعنصر HTML للاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير. الاختصارات التي لها titleسمة لها حد سفلي منقط خفيف ومؤشر تعليمات عند التمرير ، مما يوفر سياقًا إضافيًا عند التمرير.

`<abbr>`

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

اختصار الكلمة صفة هو attr .

<abbr title = "attribute" > Attr </abbr>

`<abbr class="initialism">`

أضف .initialismإلى الاختصار لحجم خط أصغر قليلاً.

HTML هو أفضل شيء منذ تقطيع الخبز.

<abbr title = "HyperText Markup Language" class = "initialism" > HTML </abbr>

عناوين

تقديم معلومات الاتصال لأقرب سلف أو كامل مجموعة العمل.

`<address>`

الحفاظ على التنسيق من خلال إنهاء جميع الأسطر بـ <br>.

Twitter، Inc.
795 Folsom Ave، Suite 600
San Francisco، CA 94107
P: (123) 456-7890

الاسم الكامل
[email protected]

<عنوان>
  <strong> Twitter، Inc. </strong> <br>
  795 فولسوم افي ، جناح 600 <br>
  سان فرانسيسكو ، كاليفورنيا 94107 <br>
  <abbr title = "Phone" > P: </abbr> (123) 456-7890 
</address>
 
<عنوان>
  <strong> الاسم الكامل </ 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. عدد صحيح قبل ذلك. </p>
</blockquote>

خيارات Blockquote

تغييرات في الأسلوب والمحتوى للاختلافات البسيطة في blockquote القياسي.

تسمية المصدر

أضف <small>علامة لتحديد المصدر. لف اسم المصدر في العمل <cite>.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
شخص مشهور في عنوان المصدر

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك. </p>
  <small> شخص مشهور <cite title = "Source Title" > عنوان المصدر </ cite> </small> 
</blockquote>

شاشات بديلة

استخدمه .pull-rightمن أجل blockquote عائم ومحاذاة لليمين.

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح قبل ذلك.
شخص مشهور في عنوان المصدر

<blockquote class = "pull-right" > 
  ...
</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 = "unstyled" > 
  <li> ... </li>
</ul>

في النسق

ضع كل عناصر القائمة في سطر واحد مع inline-blockبعض المساحة المتروكة الخفيفة.

لوريم إيبسوم
Phasellus iaculis
نولا فولوتبات

<ul class = "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>جنبًا إلى جنب.

قوائم الوصف: قائمة وصف مثالية لتعريف المصطلحات.
يوسمود: الدهليز معرف 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 -orizontal" > 
  <dt> ... </dt>
  <dd> ... </dd>
</dl>

انتباه!ستعمل قوائم الوصف الأفقية على اقتطاع المصطلحات الطويلة جدًا بحيث لا يمكن احتواؤها في إصلاح العمود الأيسر text-overflow. في إطارات العرض الأضيق ، ستتغير إلى التنسيق الافتراضي المكدس.

في النسق

التفاف مضمنة قصاصات من التعليمات البرمجية مع <code>.

على سبيل المثال ، <section>يجب أن يتم لفها على أنها مضمنة.

على سبيل المثال ، <code> العلامة & lt ؛ section & gt ؛ يجب تغليف < / code > كمضمنة .

الكتلة الأساسية

استخدم <pre>لأسطر متعددة من التعليمات البرمجية. تأكد من عدم وجود أقواس زاوية في الكود من أجل العرض الصحيح.

<p> نموذج نص هنا ... </ p>

<قبل>
  & lt؛ p & gt؛ عينة نص هنا ... & lt؛ / p & gt؛
</pre>

انتباه!تأكد من الاحتفاظ بالشفرة داخل <pre>العلامات بالقرب من اليسار قدر الإمكان ؛ سيعرض جميع علامات التبويب.

يمكنك اختياريًا إضافة .pre-scrollableالفئة التي ستحدد أقصى ارتفاع يبلغ 350 بكسل وتوفر شريط تمرير للمحور ص.

الأنماط الافتراضية

للتصميم الأساسي - الحشو الفاتح والفواصل الأفقية فقط - أضف الفئة الأساسية .tableإلى أي فئة <table>.

#	الاسم الاول	الكنية	اسم المستخدم
1	علامة	أوتو	mdo
2	يعقوب	ثورنتون	@سمين
3	لاري	الطائر	@تويتر

<table class = "table" > 
  ...
</table>

فصول اختيارية

أضف أيًا من الفئات التالية إلى .tableالفئة الأساسية.

`.table-striped`

يضيف zebra-striping إلى أي صف جدول داخل <tbody>عبر :nth-childمحدد CSS (غير متوفر في IE7-8).

#	الاسم الاول	الكنية	اسم المستخدم
1	علامة	أوتو	mdo
2	يعقوب	ثورنتون	@سمين
3	لاري	الطائر	@تويتر

<table class = "table table-striped" > 
  ...
</table>

`.table-bordered`

أضف الحدود والزوايا الدائرية إلى الجدول.

#	الاسم الاول	الكنية	اسم المستخدم
1	علامة	أوتو	mdo
1	علامة	أوتو	تضمين التغريدة
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>

فئات الصف الاختيارية

استخدم الفئات السياقية لتلوين صفوف الجدول.

فصل	وصف
`.success`	يشير إلى إجراء ناجح أو إيجابي.
`.error`	يشير إلى عمل خطير أو سلبي محتمل.
`.warning`	يشير إلى تحذير قد يحتاج إلى عناية.
`.info`	تستخدم كبديل للأنماط الافتراضية.

#	منتج	تم الدفع	حالة
1	تيرا بايت - شهريًا	01/04/2012	وافق
2	تيرا بايت - شهريًا	02/04/2012	رفض
3	تيرا بايت - شهريًا	03/04/2012	قيد الانتظار
4	تيرا بايت - شهريًا	04/04/2012	اتصل للتأكيد

...
  < tr class = "Success" >
    <td> 1 < / TD>
    <td> تيرا بايت - شهريًا </ td >
    < td > 01/04/2012 < / td >
    <td> معتمد </ td >
  </ tr >
...

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

قائمة عناصر HTML المدعومة للجدول وكيفية استخدامها.

بطاقة شعار	وصف
`<table>`	عنصر التفاف لعرض البيانات بتنسيق جدولي
`<thead>`	عنصر الحاوية لصفوف رؤوس الجدول ( `<tr>`) لتسمية أعمدة الجدول
`<tbody>`	عنصر الحاوية لصفوف الجدول ( `<tr>`) في نص الجدول
`<tr>`	عنصر الحاوية لمجموعة من خلايا الجدول ( `<td>`أو `<th>`) التي تظهر في صف واحد
`<td>`	خلية الجدول الافتراضية
`<th>`	خلية جدول خاصة لتسميات العمود (أو الصف ، حسب النطاق والموضع)
`<caption>`	وصف أو ملخص لما يحمله الجدول ، وهو مفيد بشكل خاص لقارئات الشاشة

<جدول>
  <caption> ... </caption>
  <رأس>
    <tr>
      <th> ... </th>
      <th> ... </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> ... </td>
      <td> ... </td>
    </tr>
  </tbody>
</table>

الأنماط الافتراضية

تتلقى عناصر التحكم في النموذج الفردية نمطًا ، ولكن بدون أي فئة أساسية مطلوبة <form>أو تغييرات كبيرة في العلامات. النتائج في تسميات مكدسة محاذاة إلى اليسار أعلى عناصر التحكم في النموذج.

<form>
  <fieldset>
    <legend> أسطورة </ Legend>
    <label> اسم التصنيف </ label>
    <input type = "text" placeholder = "اكتب شيئًا…" >  
    <span class = "help-block" > مثال على نص المساعدة على مستوى الكتلة هنا. </ span> 
    <label class = "checkbox" > 
      <input type = "checkbox" > تحقق مني 
    </label>
    <button type = "submit" class = "btn" > إرسال </ زر>  
  </fieldset>
</form>

تخطيطات اختيارية

يشتمل Bootstrap على ثلاثة تخطيطات اختيارية للنماذج لحالات الاستخدام الشائعة.

نموذج بحث

أضف .form-searchإلى النموذج وإلى .search-queryإدخال <input>نص دائري إضافي.

<form class = "form-search" > 
  <input type = "text" class = "input-medium search-query" >  
  <button type = "submit" class = "btn" > بحث </ زر>  
</form>

شكل مضمّن

إضافة .form-inlineللملصقات المحاذاة إلى اليسار وعناصر التحكم المضمنة لتخطيط مضغوط.

<form class = "form-inline" > 
  <input type = "text" class = "input-small" placeholder = "Email" >   
  <input type = "password" class = "input-small" placeholder = "Password" >   
  <label class = "checkbox" > 
    <input type = "checkbox" > تذكرني 
  </label>
  <button type = "submit" class = "btn" > تسجيل الدخول </ زر>  
</form>

شكل أفقي

قم بمحاذاة التسميات إلى اليمين وتحريكها إلى اليسار لإظهارها على نفس السطر مثل عناصر التحكم. يتطلب معظم تغييرات الترميز من نموذج افتراضي:

أضف .form-horizontalإلى النموذج
قم بتغليف الملصقات وعناصر التحكم بتنسيق.control-group
أضف .control-labelإلى الملصق
لف أي عناصر تحكم مرتبطة .controlsبالمحاذاة الصحيحة

<form class = "form -orizontal" > 
  <div class = "control-group" > 
    <label class = "control-label" لـ = "inputEmail" > البريد الإلكتروني </ label>  
    <div class = "controls" > 
      <input type = "text" id = "inputEmail" placeholder = "Email" >   
    </div>
  </div>
  <div class = "control-group" > 
    <label class = "control-label" لـ = "inputPassword" > كلمة المرور </ label>  
    <div class = "controls" > 
      <input type = "password" id = "inputPassword" placeholder = "Password" >   
    </div>
  </div>
  <div class = "control-group" > 
    <div class = "controls" > 
      <label class = "checkbox" > 
        <input type = "checkbox" > تذكرني 
      </label>
      <button type = "submit" class = "btn" > تسجيل الدخول </ زر>  
    </div>
  </div>
</form>

ضوابط النموذج المعتمدة

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

المدخلات

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

يتطلب استخدام المحدد typeفي جميع الأوقات.

<input type = "text" placeholder = "إدخال النص" >

تيكستاريا

التحكم في النموذج الذي يدعم عدة أسطر من النص. قم بتغيير rowsالسمة حسب الضرورة.

<textarea rows = "3" > </textarea>

مربعات الاختيار وأجهزة الراديو

خانات الاختيار مخصصة لتحديد خيار واحد أو عدة خيارات في القائمة بينما تكون أجهزة الراديو لاختيار خيار واحد من بين العديد.

افتراضي (مكدس)

<label class = "checkbox" > 
  <input type = "checkbox" value = "" >  
  الخيار الأول هو هذا وذاك — تأكد من تضمين سبب روعة هذا الخيار
</label>
 
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" محدد >     
  الخيار الأول هو هذا وذاك — تأكد من تضمين سبب روعة هذا الخيار
</label>
<label class = "radio" > 
  <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2" >    
  يمكن أن يكون الخيار الثاني شيئًا آخر وسيؤدي تحديده إلى إلغاء تحديد الخيار الأول
</label>

مربعات الاختيار المضمنة

أضف .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>

يختار

استخدم الخيار الافتراضي أو حدد الخيار multiple="multiple"لإظهار خيارات متعددة في وقت واحد.

<اختر>
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>
 
<حدد عدة = "متعددة" > 
  <option> 1 </option>
  <option> 2 </option>
  <option> 3 </option>
  <option> 4 </option>
  <option> 5 </option>
</select>

توسيع ضوابط النموذج

بالإضافة إلى عناصر التحكم الموجودة في المستعرض ، يتضمن Bootstrap مكونات نموذج مفيدة أخرى.

المدخلات الملحقة والمسبقة

أضف نصًا أو أزرارًا قبل أو بعد أي إدخال نصي. هل لاحظ أن selectالعناصر غير مدعومة هنا.

الخيارات الافتراضية

قم بلف " .add-onو" inputبأحد الفئتين لإلحاق النص أو إلحاقه بإدخال.

<div class = "input-prepend" > 
  <span class = "add-on" > @ </span> 
  <input class = "span2" id = "prependedInput" type = "text" placeholder = "Username" >    
</div>
<div class = "input-append" > 
  <input class = "span2" id = "appendedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

مجموع

استخدم كلا الفئتين .add-onومثيلين لإدخال إدخال مسبقًا وإلحاقه.

<div class = "input-prepend Input-append" > 
  <span class = "add-on" > $ </span> 
  <input class = "span2" id = "appendedPrependedInput " type = "text" >   
  <span class = "add-on" > .00 </span> 
</div>

الأزرار بدلاً من النص

بدلاً من <span>النص مع النص ، استخدم a .btnلإرفاق زر (أو اثنين) بإدخال.

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButton " type = "text" >   
  <button class = "btn" type = "button" > انطلق! </button>  
</div>

<div class = "input-append" > 
  <input class = "span2" id = "appendedInputButtons " type = "text" >   
  <button class = "btn" type = "button" > بحث </ زر>  
  <button class = "btn" type = "button" > خيارات </ زر>  
</div>

القوائم المنسدلة للأزرار

<div class = "input-append" > 
  <input class = "span2" id = "appendedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" > </span> 
    </button>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </div>
</div>

<div class = "input-prepend" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" > </span> 
    </button>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "prependedDropdownButton" type = "text" >   
</div>

<div class = "input-prepend Input-append" > 
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" > </span> 
    </button>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </div>
  <input class = "span2" id = "appendedPrependedDropdownButton " type = "text" >   
  <div class = "btn-group" > 
    <button class = "btn dropdown-toggle" data-toggle = "dropdown" >  
      عمل
      <span class = "caret" > </span> 
    </button>
    <ul class = "القائمة المنسدلة" > 
      ...
    </ul>
  </div>
</div>

مجموعات منسدلة مقسمة

<form>
  <div class = "input-prepend" > 
    <div class = "btn-group" > ... </div> 
    < نوع الإدخال = "نص" > 
  </div>
  <div class = "input-append" > 
    < نوع الإدخال = "نص" > 
    <div class = "btn-group" > ... </div> 
  </div>
</form>

نموذج بحث

<form class = "form-search" > 
  <div class = "input-append" > 
    <input type = "text" class = "span2 search-query" >  
    <button type = "submit" class = "btn" > بحث </ زر>  
  </div>
  <div class = "input-prepend" > 
    <button type = "submit" class = "btn" > بحث </ زر>  
    <input type = "text" class = "span2 search-query" >  
  </div>
</form>

التحكم في التحجيم

استخدم فئات تغيير الحجم النسبية مثل .input-largeأو تطابق مدخلاتك مع أحجام أعمدة الشبكة باستخدام .span*الفئات.

مدخلات مستوى الكتلة

اجعل أي عنصر <input>أو <textarea>عنصر يتصرف كعنصر على مستوى الكتلة.

<input class = "input-block-level" type = "text" placeholder = ".input-block-level" >

الحجم النسبي

<input class = "input-mini" type = "text" placeholder = ".input-mini" >   
<input class = "input-small" type = "text" placeholder = ".input-small" >   
<input class = "input-medium" type = "text" placeholder = ".input-medium" >   
<input class = "input-large" type = "text" placeholder = ".input-large" >   
<input class = "input-xlarge" type = "text" placeholder = ".input-xlarge" >   
<input class = "input-xxlarge" type = "text" placeholder = ".input-xxlarge" >

انتباه!في الإصدارات المستقبلية ، سنقوم بتغيير استخدام فئات الإدخال النسبية هذه لتتناسب مع أحجام الأزرار الخاصة بنا. على سبيل المثال ، .input-largeسيزيد المساحة المتروكة وحجم الخط للإدخال.

تحجيم الشبكة

استخدم .span1لـ .span12للمدخلات التي تطابق نفس أحجام أعمدة الشبكة.

<input class = "span1" type = "text" placeholder = ".span1" >   
<input class = "span2" type = "text" placeholder = ".span2" >   
<input class = "span3" type = "text" placeholder = ".span3" >   
<حدد class = "span1" > 
  ...
</select>
<حدد class = "span2" > 
  ...
</select>
<حدد فئة = "span3" > 
  ...
</select>

بالنسبة لمدخلات الشبكة المتعددة في كل سطر ، استخدم .controls-rowفئة المعدل للتباعد المناسب . إنه يطفو المدخلات لطي المسافة البيضاء ، ويضبط الهوامش المناسبة ، ويمسح العائمة.

<div class = "controls" > 
  <input class = "span5" type = "text" placeholder = ".span5" >   
</div>
<div class = "controls-row" > 
  <input class = "span4" type = "text" placeholder = ".span4" >   
  <input class = "span1" type = "text" placeholder = ".span1" >   
</div>
...

مدخلات غير قابلة للتعديل

تقديم البيانات في نموذج غير قابل للتحرير بدون استخدام ترميز النموذج الفعلي.

<span class = "input-xlarge uneditable-input" > بعض القيم هنا </ span>

إجراءات النموذج

قم بإنهاء نموذج بمجموعة من الإجراءات (الأزرار). عند وضعها داخل a .form-actions، سيتم وضع مسافة بادئة للأزرار تلقائيًا لتتوافق مع عناصر التحكم في النموذج.

<div class = "form-Actions" > 
  <button type = "submit" class = "btn btn-primary" > حفظ التغييرات </ زر>  
  <button type = "button" class = "btn" > إلغاء </ زر>  
</div>

نص المساعدة

مستوى الدعم المضمّن والكتل لنص التعليمات الذي يظهر حول عناصر التحكم في النموذج.

تعليمات مضمنة

<input type = "text" > <span class = "help-inline" > نص المساعدة المضمنة </ span>

حظر المساعدة

<input type = "text" > <span class = "help-block" > كتلة أطول من نص المساعدة تنقسم إلى سطر جديد وقد تمتد إلى ما بعد سطر واحد. </ span>

حالات التحكم في النموذج

قدم ملاحظات للمستخدمين أو الزوار مع حالات الملاحظات الأساسية حول عناصر تحكم النماذج والتسميات.

تركيز الإدخال

outlineنقوم بإزالة الأنماط الافتراضية في بعض عناصر التحكم في النموذج وتطبيقها box-shadowفي مكانها على :focus.

<input class = "input-xlarge" id = "focusInput" type = "text" value = "هذا مُركّز ..." >

مدخلات غير صحيحة

مدخلات النمط عبر وظيفة المتصفح الافتراضية باستخدام :invalid. حدد a type، وأضف requiredالسمة إذا لم يكن الحقل اختياريًا ، و (إن أمكن) حدد ملف pattern.

هذا غير متوفر في إصدارات Internet Explorer 7-9 بسبب نقص الدعم لمحددات CSS الزائفة.

<input class = "span3" type = "email" مطلوب >

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

أضف disabledالسمة إلى أحد المدخلات لمنع إدخال المستخدم وإطلاق مظهر مختلف قليلاً.

<input class = "input-xlarge" id = "disabledInput" type = "text" placeholder = "تم تعطيل الإدخال هنا ... "

حالات التحقق

يتضمن Bootstrap أنماط التحقق من الخطأ والتحذير والمعلومات ورسائل النجاح. للاستخدام ، أضف الفصل المناسب إلى المحيط .control-group.

<div class = "control-group warning" > 
  <label class = "control-label" لـ = "inputWarning" > إدخال مع تحذير </ label>  
  <div class = "controls" > 
    < نوع الإدخال = "text" id = "inputWarning" >  
    <span class = "help-inline" > ربما حدث خطأ ما </ span> 
  </div>
</div>
 
<div class = "control-group error" > 
  <label class = "control-label" لـ = "inputError" > إدخال به خطأ </ label>  
  <div class = "controls" > 
    < نوع الإدخال = "text" id = "inputError" >  
    <span class = "help-inline" > الرجاء تصحيح الخطأ </ span> 
  </div>
</div>
 
<div class = "control-group info" > 
  <label class = "control-label" لـ = "inputInfo" > الإدخال مع المعلومات </ label>  
  <div class = "controls" > 
    < نوع الإدخال = "text" id = "inputInfo" >  
    <span class = "help-inline" > اسم المستخدم مستخدم بالفعل </ span> 
  </div>
</div>
 
<div class = "control-group success" > 
  <label class = "control-label" لـ = "inputSuccess" > الإدخال بنجاح </ label>  
  <div class = "controls" > 
    < نوع الإدخال = "text" id = "inputSuccess" >  
    <span class = "help-inline" > رائع! </ span> 
  </div>
</div>

الأزرار الافتراضية

يمكن تطبيق أنماط الأزرار على أي شيء مع .btnتطبيق الفئة. ومع ذلك ، سترغب عادةً في تطبيق هذه العناصر والعناصر فقط <a>للحصول <button>على أفضل عرض.

زر	فئة = ""	وصف
	`btn`	زر رمادي قياسي مع تدرج
	`btn btn-primary`	يوفر وزنًا مرئيًا إضافيًا ويحدد الإجراء الأساسي في مجموعة من الأزرار
	`btn btn-info`	تستخدم كبديل للأنماط الافتراضية
	`btn btn-success`	يشير إلى إجراء ناجح أو إيجابي
	`btn btn-warning`	يشير إلى ضرورة توخي الحذر مع هذا الإجراء
	`btn btn-danger`	يشير إلى عمل خطير أو سلبي محتمل
	`btn btn-inverse`	زر رمادي غامق بديل ، غير مرتبط بإجراء أو استخدام دلالي
	`btn btn-link`	قلل من أهمية الزر بجعله يبدو كأنه ارتباط مع الحفاظ على سلوك الزر

التوافق عبر المتصفح

لا يقوم IE9 بقص التدرجات اللونية للخلفية في الزوايا الدائرية ، لذلك نقوم بإزالتها. ذات صلة ، IE9 يزعج buttonالعناصر المعطلة ، مما يجعل النص رماديًا مع ظل نص مقرف لا يمكننا إصلاحه.

أحجام الأزرار

يتوهم أزرار أكبر أو أصغر؟ أضف .btn-large، .btn-smallأو .btn-miniلأحجام إضافية.

<p>
  <button class = "btn btn-large btn-primary" type = "button" > زر كبير </ b>  
  <button class = "btn btn-large" type = "button" > زر كبير </ button>  
</p>
<p>
  <button class = "btn btn-primary" type = "button" > الزر الافتراضي </ button>  
  <button class = "btn" type = "button" > الزر الافتراضي </ الزر>  
</p>
<p>
  <button class = "btn btn-small btn-primary" type = "button" > زر صغير </ زر>  
  <button class = "btn btn-small" type = "button" > زر صغير </ button>  
</p>
<p>
  <button class = "btn btn-mini btn-primary" type = "button" > زر صغير </ زر>  
  <button class = "btn btn-mini" type = "button" > زر صغير </ Button>  
</p>

قم بإنشاء أزرار مستوى الكتلة — تلك التي تمتد على العرض الكامل لأحد الوالدين — عن طريق الإضافة .btn-block.

<button class = "btn btn-large btn-block btn-primary" type = "button" > زر مستوى الحظر </ b>  
<button class = "btn btn-large btn-block" type = "button" > زر مستوى الحظر </ Button>

دولة المعوقين

اجعل الأزرار تبدو غير قابلة للنقر من خلال تلاشيها مرة أخرى بنسبة 50٪.

عنصر المرساة

أضف .disabledالفصل إلى <a>الأزرار.

الارتباط الأساسي نهاية لهذه الغاية

<a href = "#" class = "btn btn-large btn-primary disabled"> الرابط الأساسي </a>  
<a href = "#" class = "btn btn-large معطل"> الارتباط </a>

انتباه!نستخدم .disabledهنا كفئة أدوات مساعدة ، على غرار .activeالفئة العامة ، لذلك لا يلزم استخدام بادئة. أيضًا ، هذه الفئة مخصصة للجمال فقط ؛ يجب عليك استخدام JavaScript مخصص لتعطيل الروابط هنا.

عنصر الزر

أضف disabledالسمة إلى <button>الأزرار.

<button type = "button" class = "btn btn-large btn-basic معطل" معطل = "معطل" > الزر الأساسي </ زر>   
<button type = "button" class = "btn btn-large" معطل > الزر </ Button>

فئة واحدة ، علامات متعددة

استخدم .btnالفصل على <a>، <button>أو <input>عنصر.

<a class = "btn" href = ""> ارتباط </a> _  
<button class = "btn" type = "Submit" > زر </ Button>  
<input class = "btn" type = "button" value = "Input" >   
<input class = "btn" type = "submit" value = "إرسال" >

كأفضل ممارسة ، حاول مطابقة العنصر في سياقك لضمان مطابقة العرض عبر المستعرضات. إذا كان لديك input، فاستخدم <input type="submit">الزر الخاص بك.

أضف فئات إلى <img>عنصر ما لتسهيل نمط الصور في أي مشروع.

<img src = "..." class = "img-rounded" >  
<img src = "..." class = "img-Circle" >  
<img src = "..." class = "img-polaroid" >

انتباه! .img-roundedولا .img-circleتعمل في IE7-8 بسبب نقص border-radiusالدعم.

رموز رمزية

140 أيقونة في شكل رموز متحركة ، متوفرة باللون الرمادي الداكن (الافتراضي) والأبيض ، مقدمة من Glyphicons .

أيقونة الزجاج
أيقونة الموسيقى
البحث عن الرموز
مغلف أيقونة
أيقونة القلب
نجمة
نجمة فارغة
رمز المستخدم
فيلم أيقونات
أيقونة- ال- كبيرة
أيقونة عشر
قائمة الأيقونات
أيقونة موافق
أيقونة إزالة
تكبير الأيقونة
تصغير الأيقونة
أيقونة قبالة
رمز إشارة
رمز الترس
أيقونة سلة المهملات
أيقونة المنزل
أيقونة ملف
رمز الوقت
أيقونة الطريق
رمز تنزيل بديل
أيقونة التحميل
تحميل أيقونة
رمز البريد الوارد
دائرة تشغيل الأيقونات
تكرار الأيقونة
تحديث الأيقونة
رمز قائمة بديل
رمز القفل
رمز العلم
سماعات الرأس
حجم الأيقونة
رمز خفض مستوى الصوت
رفع مستوى الصوت
رمز الاستجابة السريعة
رمز الباركود
رمز العلامة
علامات الرموز
كتاب الأيقونات
أيقونة المرجعية
أيقونة طباعة
أيقونة الكاميرا
رمز الخط
أيقونة جريئة
رمز مائل
ارتفاع نص الرمز
عرض نص الرمز
رمز محاذاة اليسار
رمز محاذاة المركز
أيقونة محاذاة لليمين
ايقونة محاذاة ضبط
قائمة الأيقونات
رمز المسافة البادئة لليسار
رمز المسافة البادئة لليمين
ايقونة فيس تايم فيديو
صورة رمزية
قلم رصاص
رمز خريطة محدد
ضبط الأيقونة
لون أيقونة
رمز التحرير
رمز المشاركة
التحقق من الرمز
أيقونة التحرك
رمز خطوة للخلف
رمز سريع للخلف
رمز للخلف
أيقونة اللعب
أيقونة وقفة
أيقونة توقف
رمز إلى الأمام
رمز التقديم السريع
رمز خطوة للأمام
إخراج الرمز
رمز شيفرون اليسار
أيقونة-شيفرون-يمين
رمز زائد علامة
رمز ناقص علامة
رمز إزالة تسجيل
رمز موافق تسجيل
رمز السؤال علامة
رمز المعلومات تسجيل
رمز لقطة الشاشة
رمز إزالة الدائرة
رمز دائرة موافق
رمز حظر الدائرة
رمز السهم لليسار
رمز السهم لليمين
رمز السهم لأعلى
رمز السهم لأسفل
رمز حصة بديل
رمز تغيير الحجم الكامل
أيقونة تغيير حجم صغير
أيقونة زائد
رمز ناقص
رمز النجمة
رمز علامة التعجب
هدية أيقونة
أيقونة ورقة
أيقونة النار
أيقونة مفتوحة العين
أيقونة العين قريبة
علامة تحذير رمز
أيقونة الطائرة
أيقونة التقويم
أيقونة عشوائية
أيقونة التعليق
أيقونة المغناطيس
رمز شيفرون متابعة
رمز شيفرون لأسفل
أيقونة إعادة التغريد
عربة التسوق
أيقونة مجلد إغلاق
أيقونة مجلد مفتوح
أيقونة تغيير الحجم عمودي
أيقونة تغيير الحجم أفقي
أيقونة الأقراص الصلبة
أيقونة البوق
أيقونة الجرس
شهادة رمز
رمز ممتاز
ايقونة رفض
رمز اليد اليمنى
رمز اليد اليسرى
أيقونة اليد
رمز اليد لأسفل
رمز دائرة سهم لليمين
رمز دائرة سهم يسار
رمز دائرة السهم لأعلى
رمز دائرة وسهم لأسفل
رمز الكرة الأرضية
وجع
أيقونة المهام
مرشح الرموز
أيقونة حقيبة
رمز ملء الشاشة

إسناد Glyphicons

عادةً ما تكون Glyphicons Halflings غير متاحة مجانًا ، ولكن الترتيب بين Bootstrap ومنشئي Glyphicons جعل هذا ممكنًا دون أي تكلفة عليك كمطورين. كشكر لك ، نطلب منك تضمين ارتباط اختياري للعودة إلى Glyphicons كلما كان ذلك عمليًا.

كيف تستعمل

تتطلب جميع الرموز <i>علامة بفئة فريدة مسبوقة بـ icon-. للاستخدام ، ضع الكود التالي في أي مكان تقريبًا:

<i class = "icon-search" > </i>

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

<i class = "icon-search icon-white" > </i>

انتباه!عند استخدام سلاسل النص بجانب الأزرار أو روابط التنقل ، تأكد من ترك مسافة بعد <i>العلامة للتباعد الصحيح.

أمثلة الرموز

استخدمها في الأزرار أو مجموعات الأزرار لشريط الأدوات أو التنقل أو مدخلات النموذج المسبق.

أزرار

مجموعة الأزرار في شريط أدوات الزر

<div class = "btn-toolbar" > 
  <div class = "btn-group" > 
    <a class = "btn" href = "#"> <i class = "icon-align-left" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-center" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-right" > </i> </a>   
    <a class = "btn" href = "#"> <i class = "icon-align-justify" > </i> </a>   
  </div>
</div>

القائمة المنسدلة في مجموعة الأزرار

المستعمل

<div class = "btn-group" > 
  <a class = "btn btn-primary" href = "#"> <i class = "icon-user icon-white" > </i> مستخدم </a>   
  <a class = "btn btn-primary dropdown-toggle" data-toggle = "dropdown" href = "#"> <span class = "caret" > </span> </a>    
  <ul class = "القائمة المنسدلة" > 
    <li> <a href = "#"> <i class = "icon-pencil" > </i> تعديل </a> </li>  
    <li> <a href = "#"> <i class = "icon-trash" > </i> حذف </a> </li>  
    <li> <a href = "#"> <i class = "icon-ban-Circle" > </i> حظر </a> </li>  
    <li class = "divider" > </li> 
    <li> <a href = "#"> <i class = "i" > </i> تعيين مسؤول </a> </li>  
  </ul>
</div>

أحجام الأزرار

نجمة نجمة نجمة

<a class = "btn btn-large" href = "#"> <i class = "icon-star" > </i> نجمة </a>   
<a class = "btn btn-small" href = "#"> <i class = "icon-star" > </i> نجمة </a>   
<a class = "btn btn-mini" href = "#"> <i class = "icon-star" > </i> نجمة </a>

التنقل

<ul class = "nav nav-list" > 
  <li class = "active" > <a href = "#"> <i class = "icon-home icon-white" > </i> الصفحة الرئيسية </a> </li>   
  <li> <a href = "#"> <i class = "icon-book" > </i> المكتبة </a> </li>  
  <li> <a href = "#"> <i class = "icon-pencil" > </i> تطبيقات </a> </li>  
  <li> <a href = "#"> <i class = "i" > </i> متفرقات </a> </li>  
</ul>

حقول النموذج

<div class = "control-group" > 
  <label class = "control-label" لـ = "inputIcon" > عنوان البريد الإلكتروني </ label>  
  <div class = "controls" > 
    <div class = "input-prepend" > 
      <span class = "add-on" > <i class = "icon-envelope" > </i> </span>  
      <input class = "span2" id = "inputIcon" type = "text" >   
    </div>
  </div>
</div>

الطباعة

العناوين

h1. عنوان 1

h2. العنوان 2

h3. العنوان 3

h4. العنوان 4

h5. العنوان 5

h6. العنوان 6

نسخة الجسم

نسخة الجسم الرصاص

بنيت بأقل

تشديد

<small>

عريض

مائل

فئات المحاذاة

فصول التوكيد

الاختصارات

<abbr>

<abbr class="initialism">

عناوين

<address>

كتلة الاقتباس

blockquote الافتراضي

خيارات Blockquote

تسمية المصدر

شاشات بديلة

القوائم

غير مرتب

أمر

غير منمق

في النسق

وصف

وصف أفقي

شفرة

في النسق

الكتلة الأساسية

الجداول

الأنماط الافتراضية

فصول اختيارية

.table-striped

.table-bordered

.table-hover

.table-condensed

فئات الصف الاختيارية

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

نماذج

الأنماط الافتراضية

تخطيطات اختيارية

نموذج بحث

شكل مضمّن

شكل أفقي

ضوابط النموذج المعتمدة

المدخلات

تيكستاريا

مربعات الاختيار وأجهزة الراديو

افتراضي (مكدس)

مربعات الاختيار المضمنة

يختار

توسيع ضوابط النموذج

المدخلات الملحقة والمسبقة

الخيارات الافتراضية

مجموع

الأزرار بدلاً من النص

القوائم المنسدلة للأزرار

مجموعات منسدلة مقسمة

نموذج بحث

التحكم في التحجيم

مدخلات مستوى الكتلة

الحجم النسبي

تحجيم الشبكة

مدخلات غير قابلة للتعديل

إجراءات النموذج

نص المساعدة

تعليمات مضمنة

حظر المساعدة

حالات التحكم في النموذج

تركيز الإدخال

مدخلات غير صحيحة

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

`<small>`

`<abbr>`

`<abbr class="initialism">`

`<address>`

`.table-striped`

`.table-bordered`

`.table-hover`

`.table-condensed`