سبد خرید (0)

کلاس های تایپوگرافی در بوت استرپ

تنظیمات پیش فرض بوتسترپ

اندازه ی فونت پیش فرض و عمومی بوتسترپ 14px می باشد، همچنین line-height نیز برابر با 1.428 می باشد.

این ویژگی به عنصر <body> و تمام پاراگراف ها اعمال شده است.

بعلاوه، تمام عناصر <p> یک margin-bottom دارند که برابر با نصف line-height محاسبه شده برای آنها می باشد(10px به طور پیش فرض).


نگارش

عناصر زیر، درواقع عناصر HTML ای هستند که در بوتسترپ کمی متفاوت تر از عناصر پیش فرض مرورگر، استایل بندی خواهند شد. به مثال های "امتحان کنید" نگاه کنید تا نتیجه یا تفاوت را دریابید.

از کلاس های زیر می توان برای استایل بندی بیشتر عناصر استفاده کرد.

Element/Class توضیحات مثال
<h1> - <h6>
یا
.h1 - .h6
سرفصل های h1 الی h6 امتحان کنید
<small>

یک متن دوم و کم رنگ تر را به یک سرفصل اضافه می کند.

امتحان کنید
small.

یک متن کوچکتر را مشخص می کند(ست کردن به %85 عنصر والد).

امتحان کنید
lead.

 یک متن را برجسته می کند.

امتحان کنید
<mark>
or
mark.
برجسته کردن متن امتحان کنید
<del> یک متن حذف شده را مشخص می کند: Deleted text امتحان کنید
<s> یک متن خط خورده را مشخص می کند: No longer relevant text امتحان کنید
<ins> یک متن الحاق شده را مشخص می کند Inserted text امتحان کنید
<u> یک متن زیر خط دار را مشخص می کند Underlined text امتحان کنید
<strong> یک متن پررنگ شده را مشخص می کند: Bold text امتحان کنید
<em> یک متن ایتالیک را مشخص می کند: Italic text امتحان کنید
text-left. یک متن چپ چین شده را مشخص می کند. امتحان کنید
text-center. یک متن وسط چین شده را مشخص می کند. امتحان کنید
text-right. یک متن راست چین شده را مشخص می کند. امتحان کنید
text-justify. یک متن justified را مشخص می کند. امتحان کنید
text-nowrap. یک متن بدون بسته بندی را مشخص می کند. امتحان کنید
text-lowercase. یک متن با حروف کوچک را مشخص می کند. امتحان کنید
text-uppercase. یک متن با حروف بزرگ را مشخص می کند. امتحان کنید
text-capitalize.

<یک متن capitalized را مشخص می کند.

امتحان کنید
<abbr>

عنصر <abbr> یک واژه ی مخفف یا سرنام واژگان را مشخص می کند. مخفف ها به همراه یک خصوصیت title، دارای یک کادر نقطه ای در پایین خود می باشند و دارای یک نشانگر کمک، به هنگام رفتن موس بر روی خود هستند که یک متن اضافی برای توصیح بیشتر را نشان می دهد.

امتحان کنید
initialism.

متن درون عنصر <abbr> را با یک اندازه ی فونت کوچکتر نمایش می دهد.

امتحان کنید
<address> اطلاعات تماس را مشخص می کند. امتحان کنید
<blockquote>

بلوک های محتوا را از یک منبع دیگر مشخص می کند.

امتحان کنید
blockquote-reverse.

یک blockquote را به همراه محتوای راست چین شده مشخص می کند.

امتحان کنید
<ul>

یک لیست نامنظم را مشخص می کند.

امتحان کنید
<ol>

یک لیست منظم را مشخص می کند.

امتحان کنید
list-unstyled.

استایل لیست پیش فرض  و margin سمت چپ را از آیتم های لیست حذف می کند(بر روی هر دو <ul> و <li> کار می کند). این کلاس تنها بر روی آیتم های ضروری فرزند یک لیست اعمال می شود(برای حذف کردن استایل لیست پیش فرض از هر لیست تودرتو، این کلاس را می توانید به خوبی به هر لسیت تو در تو اضافه کنید).

امتحان کنید
list-inline.

تمام آیتم های لیست را در یک خط واحد قرار می دهد.

امتحان کنید
<dl> یک لیست توضیح را مشخص می کند. امتحان کنید
dl-horizontal.

هنگامی که پنجره گسترش می یابد، توضیحات و سرفصل در کنار یکدیگر قرار می گیرند.

امتحان کنید

Code

Element/Class توضیحات مثال
<code>

کدهای درون خطی را مشخص می کند: span , div

امتحان کنید
<kbd>

ورودی را که به طور معمول به وسیله ی کیبورد وارد شده است، مشخص می کند: CTRL+P

امتحان کنید
<pre>

کدهای چند خطی را مشخص می کند.

امتحان کنید
<pre class="pre-scrollable">

خط های کد چندگانه به همراه اسکرول بار را مشخص می کند.

امتحان کنید
<samp> خروجی نمونه را از یک برنامه ی کامپیوتری مشخص می کند. امتحان کنید
<var>

متغیرهای   x = ab + y را مشخص می کند.

امتحان کنید

دیدگاه‌ها  

+2 # مهدی ربانی 1394-02-07 11:58
دوتا لینک اول به یک جا اشاره داره.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # احسان عباسی 1394-02-07 21:59
با سلام
در توضیحات لینک دوم آمده : یک متن دوم و کم رنگ تر را به یک سرفصل اضافه می کند .
و در مثال آن نیز برای هر سرفصل یک متن دوم و کم رنگ تر آمده است: 36px و 30px و ...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # farshadroozbahani 1394-02-08 09:36
آقا احسان، حق با آقای ربانی است، لطفاً یکبار دیگر بررسی کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # احسان عباسی 1394-02-08 10:22
دوست گرامی اگه به سایت اصلی یعنی همون سایت w3schools به آدرس:
www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp
بروید می بینید که دو مثال اول با یکدیگر یکسان هستند.
زیرا که این مثال به صورت دو منظوره ایجاد شده است. یعنی هم در مورد سرفصل های h1 تا h6 بکار می رود و هم برای ایجاد یک متن کوچکتر و کم رنگ تر در کنار سرفصل از آن استفاده می شود.
دقت کنید که عبارت 36px و 30px و ... کم رنگ هستند.....!!! این ها همان عبارات کم رنگی هستند که در لینک دوم در موردشان توضیحات آورده شده است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی Bootstrap

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!