مقياس مطبعي

تعتمد الشبكة المطبعية بأكملها على متغيرين أقل في ملف variables.less الخاص بنا: @baseFontSizeو @baseLineHeight. الأول هو حجم الخط الأساسي المستخدم طوال الوقت والثاني هو ارتفاع الخط الأساسي.

نحن نستخدم هذه المتغيرات ، وبعض الرياضيات ، لإنشاء الهوامش ، والحشوات ، وارتفاعات الخطوط لجميع أنواعنا وأكثر.

مثال على نص أساسي

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes، nascetur ridiculus mus. Nullam id dolor id nibh ultricies Vehiclesicula ut id elit.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis، est noncommo luctus، nisi erat porttitor ligula، eget lacinia odio sem nec elit. Donec sed odio dui.

باستخدام التركيز

Fusce dapibus ، tellus ac cursus COMMODO ، tortor mauris condimentum nibh ، ut fermentum massa justo sit amet risus. Maecenas faucibus mollis interdum. Nulla vitae elit libero ، augue pharetra.

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

عناوين المثال

فيما يلي مثالان لكيفية استخدام <address>العلامة:

أمثلة الاختصارات

تم تصميم الاختصارات بنمط كبير وإطار سفلي منقط فاتح. لديهم أيضًا مؤشر مساعدة عند التمرير حتى يكون لدى المستخدمين إشارة إضافية سيتم عرض شيء ما عند التمرير.

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

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

لتضمين اقتباس بلوك ، قم بالالتفاف <blockquote>حول أي HTML كاقتباس. لعروض الأسعار المستقيمة نوصي أ <p>.

قم بتضمين عنصر اختياري <small>للإشارة إلى مصدرك وستحصل على شرطة em —قبله لأغراض التصميم.

<blockquote>
  <p> Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح من قبل venenatis. </p>
  <small> شخص مشهور </ small>
</blockquote>

تم تصميم علامات الاقتباس الافتراضية على النحو التالي:

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح من قبل venenatis.

شخص مشهور في جسم العمل

لتعويم اقتباس الكتلة الخاص بك إلى اليمين ، أضف class="pull-right":

Lorem ipsum dolor sit amet، consectetur adipiscing elit. عدد صحيح من قبل venenatis.

شخص مشهور في جسم العمل

غير مرتب

<ul>

• أبجد هوز دولور الجلوس امات
• 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">

• أبجد هوز دولور الجلوس امات
• 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

أمر

<ol>

1. أبجد هوز دولور الجلوس امات
2. Consectetur adipiscing النخبة
3. عدد صحيح molestie lorem في ماسا
4. Facilisis في فترة ما قبل nisl aliquet
5. Nulla volutpat aliquam velit
6. Faucibus porta lacus fringilla vel
7. Aenean sit amet erat nunc
8. Eget porttitor lorem

وصف

<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.

في النسق

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

على سبيل المثال ، يجب أن يتم تغليف القسم < code> </ code > على أنه مضمّن .  

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

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

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

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

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

جوجل Prettify

خذ نفس <pre>العنصر وأضف فئتين اختياريتين للحصول على عرض محسّن.

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

<pre class = "prettyprint 
     الكتان " >
  & lt؛ p & gt؛ عينة نص هنا ... & lt؛ / p & gt؛
</pre>

قم بتنزيل google-code-prettify واعرض الملف التمهيدي لمعرفة كيفية استخدامه.

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

يتم تصميم الجداول تلقائيًا باستخدام حدود قليلة فقط لضمان سهولة القراءة والحفاظ على الهيكل. مع 2.0 ، .tableالفئة مطلوبة.

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

احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .table-stripedالفصل.

ملاحظة: تستخدم جداول Sprited :nth-childمحدد CSS وهي غير متوفرة في IE7-IE8.

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

أضف حدودًا حول الطاولة بأكملها وزوايا مستديرة لأغراض جمالية.

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

اجعل الجداول أكثر إحكاما عن طريق إضافة .table-condensedفئة لقص مساحة خلايا الجدول إلى النصف (من 8 بكسل إلى 4 بكسل).

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

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

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

مرنة HTML و CSS

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

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

وشملت أربعة تخطيطات

يأتي Bootstrap مع دعم لأربعة أنواع من تخطيطات النماذج:

• عمودي (افتراضي)
• يبحث
• في النسق
• أفقي

تتطلب الأنواع المختلفة لتخطيطات النماذج بعض التغييرات في الترميز ، لكن عناصر التحكم نفسها تظل وتتصرف كما هي.

دول السيطرة وأكثر

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

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

مع الإصدار 2.0 ، لدينا إعدادات افتراضية أخف وأكثر ذكاءً لأنماط النماذج. لا ترميز إضافي ، فقط شكل عناصر التحكم.

تعكس أنماط WebKit الافتراضية ، ما عليك سوى إضافة .form-searchحقول بحث مدورة إضافية.

المدخلات هي مستوى الكتلة للبدء. من أجل .form-inlineو .form-horizontal، نستخدم inline-block.

ما يحتويه

تظهر على اليسار جميع عناصر التحكم الافتراضية في النموذج التي ندعمها. ها هي القائمة النقطية:

• مدخلات النص (نص ، كلمة مرور ، بريد إلكتروني ، إلخ)
• خانة الاختيار
• مذياع
• تحديد
• تحديد متعدد
• إدخال ملف
• منطقة النص

الافتراضات الجديدة مع v2.0

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

حالات المتصفح المعاد تصميمها

يتميز Bootstrap بأنماط للتركيز disabledوالحالات التي يدعمها المستعرض. نزيل Webkit الافتراضي outlineونطبق box-shadowفي مكانه من أجل :focus.

التحقق من صحة النموذج

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

<مجموعة الحقول
  class = "خطأ مجموعة التحكم" >
  ...
</fieldset>

قبل وإلحاق المدخلات

توفر مجموعات الإدخال - التي تحتوي على نص مُلحق أو مُسبَق - طريقة سهلة لإعطاء سياق أكثر لمدخلاتك. تشمل الأمثلة الرائعة علامة @ لأسماء مستخدمي Twitter أو $ للشؤون المالية.

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

حتى الإصدار 1.4 ، تطلب Bootstrap ترميزًا إضافيًا حول مربعات الاختيار وأجهزة الراديو لتكديسها. الآن ، إنها مسألة بسيطة لتكرار ذلك <label class="checkbox">الذي يلف ملف <input type="checkbox">.

مربعات الاختيار المضمنة وأجهزة الراديو مدعومة أيضًا. ما عليك سوى الإضافة .inlineإلى أي منها .checkboxأو .radioتكون قد انتهيت.

نماذج مضمنة وإلحاق / مقدمًا

لاستخدام المدخلات المسبقة أو الملحقة في نموذج مضمن ، تأكد من وضع .add-onو inputعلى نفس السطر ، بدون مسافات.

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

لإضافة نص تعليمات لإدخالات النموذج ، قم بتضمين نص تعليمات مضمنة مع <span class="help-inline">أو نص تعليمات مع <p class="help-block">بعد عنصر الإدخال.

أزرار للإجراءات

كمصطلح ، يجب استخدام الأزرار فقط للإجراءات أثناء استخدام الارتباطات التشعبية للكائنات. على سبيل المثال ، يجب أن يكون "تنزيل" زرًا بينما يجب أن يكون "النشاط الأخير" رابطًا.

للمراسي والأشكال

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

ملاحظة: يجب أن تتضمن جميع الأزرار .btnالفئة. يجب تطبيق أنماط الأزرار <button>وعناصر <a>التناسق.

مقاسات متعددة

يتوهم أزرار أكبر أو أصغر؟ هل لديك في ذلك!

الأستجابة الأولية عمل

الأستجابة الأولية عمل

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

بالنسبة للأزرار المعطلة ، استخدم .btn-disabledالروابط والعناصر.:disabled<button>

الأستجابة الأولية عمل

الأستجابة الأولية عمل

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

في IE9 ، قمنا بإسقاط التدرج اللوني على جميع الأزرار لصالح الزوايا الدائرية لأن IE9 لا يقطع تدرجات الخلفية إلى الزوايا.

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

بنيت ككائن

بدلاً من جعل كل رمز طلبًا إضافيًا ، قمنا بتجميعها في كائن - مجموعة من الصور في ملف واحد يستخدم CSS لوضع الصور بها background-position. هذه هي نفس الطريقة التي نستخدمها على Twitter.com وقد عملت بشكل جيد بالنسبة لنا.

جميع فئات الأيقونات مسبوقة بـ لتباعد .icon-الأسماء وتحديد النطاق المناسبين ، مثل الكثير من المكونات الأخرى. سيساعد هذا في تجنب التعارض مع الأدوات الأخرى.

لقد منحتنا Glyphicons استخدام Halflings المحددة في مجموعة أدواتنا مفتوحة المصدر طالما أننا نقدم رابطًا وائتمانًا هنا في المستندات. يرجى التفكير في فعل الشيء نفسه في مشاريعك.

كيف تستعمل

مع الإصدار 2.0.0 ، اخترنا استخدام <i>علامة لجميع الرموز الخاصة بنا ، ولكن ليس لديهم فئة حالة - فقط بادئة مشتركة. للاستخدام ، ضع الكود التالي في أي مكان تقريبًا:

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

هناك أيضًا أنماط متاحة للأيقونات (البيضاء) المقلوبة ، وهي جاهزة بفئة إضافية واحدة:

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

هناك 120 فئة للاختيار من بينها لرموزك. ما عليك سوى إضافة <i>علامة بالفئات المناسبة وستكون جاهزًا. يمكنك العثور على القائمة الكاملة في sprites.less أو هنا في هذا المستند.

استخدم حالات

الأيقونات رائعة ، ولكن أين يمكن للمرء أن يستخدمها؟ إليك بعض الأفكار:

• كمرئيات للتنقل في الشريط الجانبي
• من أجل التنقل القائم على الأيقونات فقط
• للأزرار للمساعدة في نقل معنى الإجراء
• مع روابط لمشاركة السياق على وجهة المستخدم

بشكل أساسي ، في أي مكان يمكنك وضع <i>علامة فيه ، يمكنك وضع رمز.

ينعش الدفع حذف

تعليق إعدادات مزيد من المعلومات