في الجزء العلوي من السقالات ، تم تصميم عناصر 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> |
يلتف الاختصارات والمختصرات لإظهار النسخة الموسعة عند التمرير | تضمين اختياري title للنص الموسع |
<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>
العلامة:
تم تصميم الاختصارات بنمط كبير وإطار سفلي منقط فاتح. لديهم أيضًا مؤشر مساعدة عند التمرير حتى يكون لدى المستخدمين إشارة إضافية سيتم عرض شيء ما عند التمرير.
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>
التفاف مضمنة قصاصات من التعليمات البرمجية مع <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 | علامة | أوتو | CSS |
2 | يعقوب | ثورنتون | جافا سكريبت |
3 | ستو | صدمه خفيفه | لغة البرمجة |
احصل على القليل من الهوى مع طاولاتك عن طريق إضافة مخطط حمار وحشي - فقط أضف .table-striped
الفصل.
ملاحظة: تستخدم الجداول المخططة :nth-child
محدد CSS ولا يتوفر في IE7-IE8.
- <table class = "table table-striped" >
- ...
- </table>
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | علامة | أوتو | CSS |
2 | يعقوب | ثورنتون | جافا سكريبت |
3 | ستو | صدمه خفيفه | لغة البرمجة |
أضف حدودًا حول الطاولة بأكملها وزوايا مستديرة لأغراض جمالية.
- <table class = "table table-bordered" >
- ...
- </table>
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | مارك أوتو | CSS | |
2 | يعقوب | ثورنتون | جافا سكريبت |
3 | ستو | صدمه خفيفه | |
3 | بروسف | ستالين | لغة البرمجة |
اجعل الجداول أكثر إحكاما عن طريق إضافة .table-condensed
فئة لقص مساحة خلايا الجدول إلى النصف (من 8 بكسل إلى 4 بكسل).
- <table class = "table table-condensed" >
- ...
- </table>
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | علامة | أوتو | CSS |
2 | يعقوب | ثورنتون | جافا سكريبت |
3 | ستو | صدمه خفيفه | لغة البرمجة |
لا تتردد في الجمع بين أي من فئات الجدول لتحقيق مظاهر مختلفة من خلال استخدام أي من الفئات المتاحة.
- <table class = "table-striped table-bordered table-condensed" >
- ...
- </table>
# | الاسم الاول | الكنية | لغة |
---|---|---|---|
1 | علامة | أوتو | CSS |
2 | يعقوب | ثورنتون | جافا سكريبت |
3 | ستو | صدمه خفيفه | لغة البرمجة |
4 | بروسف | ستالين | لغة البرمجة |
أفضل جزء في النماذج في 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" >
- <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">
بعد عنصر الإدخال.
:after
. في المستندات ، نعرض لون خلفية أحمر فاتح عند التمرير لإبراز حجم الرمز.
بدلاً من جعل كل رمز طلبًا إضافيًا ، قمنا بتجميعها في كائن - مجموعة من الصور في ملف واحد يستخدم CSS لوضع الصور بها background-position
. هذه هي نفس الطريقة التي نستخدمها على Twitter.com وقد عملت بشكل جيد بالنسبة لنا.
جميع فئات الأيقونات مسبوقة بـ لتباعد .icon-
الأسماء وتحديد النطاق المناسبين ، مثل الكثير من المكونات الأخرى. سيساعد هذا في تجنب التعارض مع الأدوات الأخرى.
لقد منحتنا Glyphicons استخدام Halflings المحددة في مجموعة أدواتنا مفتوحة المصدر طالما أننا نقدم رابطًا وائتمانًا هنا في المستندات. يرجى التفكير في فعل الشيء نفسه في مشاريعك.
مع الإصدار 2.0.1 ، اخترنا استخدام <i>
علامة لجميع الرموز لدينا ، ولكن ليس لديهم فئة حالة - فقط بادئة مشتركة. للاستخدام ، ضع الكود التالي في أي مكان تقريبًا:
- <i class = "icon-search" > </i>
هناك أيضًا أنماط متاحة للأيقونات (البيضاء) المقلوبة ، وهي جاهزة بفئة إضافية واحدة:
- <i class = "icon-search icon-white" > </i>
هناك 120 فئة للاختيار من بينها لرموزك. ما عليك سوى إضافة <i>
علامة بالفئات المناسبة وستكون جاهزًا. يمكنك العثور على القائمة الكاملة في sprites.less أو هنا في هذا المستند.
الأيقونات رائعة ، ولكن أين يمكن للمرء أن يستخدمها؟ إليك بعض الأفكار:
بشكل أساسي ، في أي مكان يمكنك وضع <i>
علامة فيه ، يمكنك وضع رمز.
استخدمها في الأزرار أو مجموعات الأزرار لشريط الأدوات أو التنقل أو مدخلات النموذج المسبق.