کلاس های تایپوگرافی در بوت استرپ
تنظیمات پیش فرض بوتسترپ
اندازه ی فونت پیش فرض و عمومی بوتسترپ 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> | یک متن حذف شده را مشخص می کند: |
امتحان کنید |
<s> | یک متن خط خورده را مشخص می کند: |
امتحان کنید |
<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 را مشخص می کند. |
امتحان کنید |
- نوشته شده توسط احسان عباسی
- بازدید: 18626
دیدگاهها
دوتا لینک اول به یک جا اشاره داره.
با سلام
در توضیحات لینک دوم آمده : یک متن دوم و کم رنگ تر را به یک سرفصل اضافه می کند .
و در مثال آن نیز برای هر سرفصل یک متن دوم و کم رنگ تر آمده است: 36px و 30px و ...
آقا احسان، حق با آقای ربانی است، لطفاً یکبار دیگر بررسی کنید.
دوست گرامی اگه به سایت اصلی یعنی همون سایت w3schools به آدرس:
www.w3schools.com/bootstrap/bootstrap_ref_css_text.asp
بروید می بینید که دو مثال اول با یکدیگر یکسان هستند.
زیرا که این مثال به صورت دو منظوره ایجاد شده است. یعنی هم در مورد سرفصل های h1 تا h6 بکار می رود و هم برای ایجاد یک متن کوچکتر و کم رنگ تر در کنار سرفصل از آن استفاده می شود.
دقت کنید که عبارت 36px و 30px و ... کم رنگ هستند.....!!! این ها همان عبارات کم رنگی هستند که در لینک دوم در موردشان توضیحات آورده شده است.