في الجزء العلوي من السقالات ، تم تصميم عناصر HTML الأساسية وتعزيزها بفئات قابلة للتوسيع لتوفير مظهر ومظهر جديد ومتسق.
تعتمد الشبكة المطبعية بأكملها على متغيرين أقل في ملف 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.
| عنصر | إستعمال | اختياري |
|---|---|---|
<strong> |
للتأكيد على مقتطف من النص به أهمية | لا أحد |
<em> |
للتأكيد على مقتطف من النص مع التشديد | لا أحد |
<abbr> |
يلتف الاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير | قم بتضمين .initialismالفصل للاختصارات الكبيرة. |
<address> |
للحصول على معلومات الاتصال لأقرب سلف أو كامل مجموعة العمل | الحفاظ على التنسيق من خلال إنهاء جميع الأسطر بـ<br> |
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>العلامة:
الاختصارات التي لها titleسمة لها حد سفلي منقط خفيف ومؤشر مساعدة عند التمرير. يمنح هذا المستخدمين إشارة إضافية إلى شيء ما سيظهر عند التمرير.
أضف initialismالفئة إلى الاختصار لزيادة التناغم المطبعي من خلال إعطائها حجم نص أصغر قليلاً.
HTML هو أفضل شيء منذ تقطيع الخبز.
اختصار كلمة صفة هو attr .
| عنصر | إستعمال | اختياري |
|---|---|---|
<blockquote> |
عنصر على مستوى الكتلة لاقتباس محتوى من مصدر آخر | إضافة .pull-leftوفئات .pull-rightالخيارات العائمة |
<small> |
عنصر اختياري لإضافة اقتباس يواجه المستخدم ، عادةً ما يكون مؤلفًا بعنوان العمل | ضع <cite>حول العنوان أو اسم المصدر |
لتضمين اقتباس بلوك ، قم بالالتفاف <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>
<ul class="unstyled">
<ol>
<dl>
<dl class="dl-horizontal">
التفاف المقتطفات من التعليمات البرمجية مع <code>.
- على سبيل المثال ، يجب أن يتم تغليف القسم < code> </ code > على أنه مضمّن .
استخدم <pre>لأسطر متعددة من التعليمات البرمجية. تأكد من عدم وجود أقواس زاوية في الكود من أجل العرض الصحيح.
<p> نموذج نص هنا ... </ p>
- <قبل>
- & lt؛ p & gt؛ عينة نص هنا ... & lt؛ / p & gt؛
- </pre>
ملاحظة: تأكد من الاحتفاظ بالشفرة داخل <pre>العلامات بالقرب من اليسار قدر الإمكان ؛ سيعرض جميع علامات التبويب.
يمكنك اختياريًا إضافة .pre-scrollableالفئة التي ستحدد أقصى ارتفاع يبلغ 350 بكسل وتوفر شريط تمرير للمحور ص.
خذ نفس <pre>العنصر وأضف فئتين اختياريتين للحصول على عرض محسّن.
- <p> نموذج نص هنا ... </ p>
- <pre class = "prettyprint
- الكتان " >
- & lt؛ p & gt؛ عينة نص هنا ... & lt؛ / p & gt؛
- </pre>
قم بتنزيل google-code-prettify واعرض الملف التمهيدي لمعرفة كيفية استخدامه.
| بطاقة شعار | وصف |
|---|---|
<table> |
عنصر التفاف لعرض البيانات بتنسيق جدولي |
<thead> |
عنصر الحاوية لصفوف رؤوس الجدول ( <tr>) لتسمية أعمدة الجدول |
<tbody> |
عنصر الحاوية لصفوف الجدول ( <tr>) في نص الجدول |
<tr> |
عنصر الحاوية لمجموعة من خلايا الجدول ( <td>أو <th>) التي تظهر في صف واحد |
<td> |
خلية الجدول الافتراضية |
<th> |
يجب استخدام خلية جدول خاصة لتسميات العمود (أو الصف ، اعتمادًا على النطاق والموضع) داخل ملف <thead> |
<caption> |
وصف أو ملخص لما يحمله الجدول ، وهو مفيد بشكل خاص لقارئات الشاشة |
- <جدول>
- <رأس>
- <tr>
- <th> … </th>
- <th> … </th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td> … </td>
- <td> … </td>
- </tr>
- </tbody>
- </table>
| اسم | فصل | وصف |
|---|---|---|
| تقصير | لا أحد | لا توجد أنماط ، فقط أعمدة وصفوف |
| أساسي | .table |
فقط الخطوط الأفقية بين الصفوف |
| يحدها | .table-bordered |
يقوم بتدوير الزوايا وإضافة حد خارجي |
| حمار وحشي شريط | .table-striped |
يضيف لون خلفية رمادي فاتح إلى الصفوف الفردية (1 ، 3 ، 5 ، إلخ) |
| تكثف | .table-condensed |
يقطع المساحة المتروكة الرأسية إلى النصف ، من 8 بكسل إلى 4 بكسل ، داخل الكل tdوالعناصرth |
يتم تصميم الجداول تلقائيًا باستخدام حدود قليلة فقط لضمان سهولة القراءة والحفاظ على الهيكل. مع 2.0 ، .tableالفئة مطلوبة.
- <table class = "table" >
- ...
- </table>
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .table-stripedالفصل.
ملاحظة: تستخدم الجداول المخططة :nth-childمحدد CSS ولا يتوفر في IE7-IE8.
- <table class = "table table-striped" >
- ...
- </table>
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري | الطائر | @تويتر |
أضف حدودًا حول الطاولة بأكملها وزوايا مستديرة لأغراض جمالية.
- <table class = "table table-bordered" >
- ...
- </table>
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| علامة | أوتو | تضمين التغريدة | |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري الطائر | @تويتر | |
اجعل الجداول أكثر إحكاما عن طريق إضافة .table-condensedفئة لقص مساحة خلايا الجدول إلى النصف (من 8 بكسل إلى 4 بكسل).
- <table class = "table table-condensed" >
- ...
- </table>
| # | الاسم الاول | الكنية | اسم المستخدم |
|---|---|---|---|
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري الطائر | @تويتر | |
لا تتردد في الجمع بين أي من فئات الجدول لتحقيق مظاهر مختلفة من خلال استخدام أي من الفئات المتاحة.
- <table class = "table-striped table-bordered table-condensed" >
- ...
- </table>
| الاسم الكامل | |||
|---|---|---|---|
| # | الاسم الاول | الكنية | اسم المستخدم |
| 1 | علامة | أوتو | mdo |
| 2 | يعقوب | ثورنتون | @سمين |
| 3 | لاري الطائر | @تويتر | |
أفضل جزء في النماذج في Bootstrap هو أن جميع المدخلات وعناصر التحكم الخاصة بك تبدو رائعة بغض النظر عن كيفية إنشائها في العلامات الخاصة بك. ليست هناك حاجة إلى HTML زائدة عن الحاجة ، ولكننا نقدم الأنماط لأولئك الذين يحتاجون إليها.
تأتي التنسيقات الأكثر تعقيدًا مع فئات مختصرة وقابلة للتطوير من أجل التصميم السهل وربط الأحداث ، بحيث تتم تغطيتك في كل خطوة.
يأتي Bootstrap مع دعم لأربعة أنواع من تخطيطات النماذج:
تتطلب الأنواع المختلفة لتخطيطات النماذج بعض التغييرات في الترميز ، لكن عناصر التحكم نفسها تظل وتتصرف كما هي.
تتضمن نماذج Bootstrap أنماطًا لجميع عناصر التحكم في النموذج الأساسي مثل الإدخال ومنطقة النص والتحديد الذي تتوقعه. ولكنه يأتي أيضًا مع عدد من المكونات المخصصة مثل المدخلات الملحقة والمسبقة ودعم قوائم مربعات الاختيار.
يتم تضمين حالات مثل الخطأ والتحذير والنجاح لكل نوع من أنواع التحكم في النموذج. كما تم تضمين أنماط لعناصر التحكم المعوقين.
يوفر Bootstrap ترميزًا وأنماطًا بسيطة لأربعة أنماط من نماذج الويب الشائعة.
| اسم | فصل | وصف |
|---|---|---|
| عمودي (افتراضي) | .form-vertical (غير مطلوب) |
تسميات مكدسة ومحاذاة إلى اليسار فوق عناصر التحكم |
| في النسق | .form-inline |
تسمية محاذاة إلى اليسار وعناصر تحكم مضمنة للكتلة لنمط مضغوط |
| يبحث | .form-search |
إدخال نص مستدير للغاية للحصول على جمالية بحث نموذجية |
| أفقي | .form-horizontal |
تعويم تسميات محاذاة إلى اليسار ، ومحاذاة لليمين على نفس السطر مثل عناصر التحكم |
مع الإصدار 2.0 ، لدينا إعدادات افتراضية أخف وأكثر ذكاءً لأنماط النماذج. لا ترميز إضافي ، فقط شكل عناصر التحكم.
- <form class = "well" >
- <label> اسم التصنيف </ label>
- <input type = "text" class = "span3" placeholder = "اكتب شيئًا ..." >
- <span class = "help-inline" > نص المساعدة المرتبط! </ span>
- <label class = "checkbox" >
- <input type = "checkbox" > تحقق مني
- </label>
- <button type = "submit" class = "btn" > إرسال </ زر>
- </form>
تعكس أنماط WebKit الافتراضية ، ما عليك سوى إضافة .form-searchحقول بحث مدورة إضافية.
- <form class = "well form-search" >
- <input type = "text" class = "input-medium search-query" >
- <button type = "submit" class = "btn" > بحث </ زر>
- </form>
المدخلات هي مستوى الكتلة للبدء. من أجل .form-inlineو .form-horizontal، نستخدم inline-block.
- <form class = "well 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>
بالنظر إلى نموذج تخطيط النموذج أعلاه ، إليك العلامة المرتبطة بمجموعة الإدخال والتحكم الأولى. كل الفئات و .control-groupو .control-labelو .controlsكلها مطلوبة للتصميم.
- <form class = "form -orizontal" >
- <fieldset>
- <legend> نص مفتاح الرسم </ Legend>
- <div class = "control-group" >
- <label class = "control-label" لـ = "input01" > إدخال النص </ label>
- <div class = "controls" >
- <input type = "text" class = "input-xlarge" id = "input01" >
- <p class = "help-block" > نص المساعدة الداعمة </ p>
- </div>
- </div>
- </fieldset>
- </form>
تظهر على اليسار جميع عناصر التحكم الافتراضية في النموذج التي ندعمها. ها هي القائمة النقطية:
حتى الإصدار 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">بعد عنصر الإدخال.
بدلاً من جعل كل رمز طلبًا إضافيًا ، قمنا بتجميعها في كائن - مجموعة من الصور في ملف واحد يستخدم CSS لوضع الصور بها background-position. هذه هي نفس الطريقة التي نستخدمها على Twitter.com وقد عملت بشكل جيد بالنسبة لنا.
جميع فئات الأيقونات مسبوقة بـ لتباعد .icon-الأسماء وتحديد النطاق المناسبين ، مثل الكثير من المكونات الأخرى. سيساعد هذا في تجنب التعارض مع الأدوات الأخرى.
لقد منحتنا Glyphicons استخدام Halflings المحددة في مجموعة أدواتنا مفتوحة المصدر طالما أننا نقدم رابطًا وائتمانًا هنا في المستندات. يرجى التفكير في فعل الشيء نفسه في مشاريعك.
يستخدم Bootstrap <i>علامة لكل الرموز ، لكن ليس لديهم فئة حالة — فقط بادئة مشتركة. للاستخدام ، ضع الكود التالي في أي مكان تقريبًا:
- <i class = "icon-search" > </i>
هناك أيضًا أنماط متاحة للأيقونات (البيضاء) المقلوبة ، وهي جاهزة بفئة إضافية واحدة:
- <i class = "icon-search icon-white" > </i>
هناك 120 فئة للاختيار من بينها لرموزك. ما عليك سوى إضافة <i>علامة بالفئات المناسبة وستكون جاهزًا. يمكنك العثور على القائمة الكاملة في sprites.less أو هنا في هذا المستند.
انتباه! عند استخدام سلاسل النص بجانب الأزرار أو روابط التنقل ، تأكد من ترك مسافة بعد <i>العلامة للتباعد الصحيح.
الأيقونات رائعة ، ولكن أين يمكن للمرء أن يستخدمها؟ إليك بعض الأفكار:
بشكل أساسي ، في أي مكان يمكنك وضع <i>علامة فيه ، يمكنك وضع رمز.
استخدمها في الأزرار أو مجموعات الأزرار لشريط الأدوات أو التنقل أو مدخلات النموذج المسبق.