تایپوگرافی در بوت استرپ
تایپوگرافی در بوت استرپ-Bootstrap Typography
اندازه ی فونت پیش فرض عمومی در بوت استرپ 14px میباشد و اندازه ی line-height آن نیز 1.428 می باشد. این موضوع همچنین به تگ <body> و تمام پاراگراف ها نیز اعمال شده است.
علاوه بر آن، تمام عناصر <p> به طور پیش فرض، دارای یک margin-bottom به اندازه ی 10 پیکسل هستند.
بوت استرپ و تنظیمات پیش فرض مرورگر
بوت استرپ به طور پیش فرض، عنوان های HTML را به صورت زیر استایل دهی می کند:
مثال (تایپوگرافی در بوت استرپ)
h1 Bootstrap heading 36px
h2 Bootstrap heading 30px
(h3 Bootstrap heading (24px
h4 Bootstrap heading (18px)
h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)
کاربرد عنصر <small> در بوت استرپ
در بوت استرپ از عنصر <small> برای ایجاد یک متن ثانویه و شفاف تر در هر عنوان استفاده می شود(منظور متن secondary text است):
مثال (تایپوگرافی در بوت استرپ)
h1 heading secondary text
h2 heading secondary text
h3 heading secondary text
h4 heading secondary text
h5 heading secondary text
h6 heading secondary text
کاربرد عنصر<mark> در بوت استرپ
بوت استرپ، عنصر اچ تی ام ال <mark> را به صورت زیر استایل دهی می کند:
کاربرد عنصر <abbr> در بوت استرپ
بوت استرپ، عنصر اچ تی ام ال <abbr> را به صورت زیر استایل دهی می کند:
کاربرد عنصر <blockquote> در بوت استرپ
بوت استرپ، عنصر اچ تی ام ال <blockquote> را به صورت زیر استایل دهی می کند:
مثال (تایپوگرافی در بوت استرپ)
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
From WWF's website
برای نشان دادن نقل قول در سمت راست، از کلاس blockquote-reverse استفاده کنید:
مثال (تایپوگرافی در بوت استرپ)
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
From WWF's website
کاربرد عنصر <dl> در بوت استرپ
بوت استرپ عنصر اچ تی ام ال <dl> را به صورت زیر استایل دهی می کند:
کاربرد عنصر <code> در بوت استرپ
بوت استرپ عنصر اچ تی ام ال <code> را به صورت زیر استایل دهی می کند:
مثال (تایپوگرافی در بوت استرپ)
The following HTML elements:span
,section
, anddiv
defines a section in a document.
کاربرد عنصر<kbd> در بوت استرپ
بوت استرپ عنصر اچ تی ام ال <kbd> را به صورت زیر استایل دهی می کند:
کاربرد عنصر <pre> در بوت استرپ
بوتسترپ عنصر اچ تی ام ال <pre> را به صورت زیر استایل دهی می کند:
مثال (تایپوگرافی در بوت استرپ)
Text in a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
کاربرد متن های رنگی شده در بوت استرپ
بوت استرپ حاوی چندین کلاس است که به وسیله ی آنها می توانیم با استفاده از رنگ ها، اهمیت یک متن را نشان دهیم. این کلاس ها عبارتند از:
- text-muted
- text-primary
- text-success
- text-info
- text-warning
- text-danger
مثال (کلاس های رنگی در بوت استرپ)
This text is muted.
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
کلاس ها برای رنگ پس زمینه عبارتند از:
- bg-primary
- bg-success
- bg-info
- bg-warning
- bg-danger
مثال (کلاس رنگی پس زمینه در بوت استرپ)
This text is important.
This text indicates success.
This text represents some information.
This text represents a warning.
This text represents danger.
انواع کلاس های تایپوگرافی در بوت استرپ
کلاس های بوت استرپ زیر، می توانند برای استایل دهی عناصر HTML مورد استفاده قرار بگیرند:
کلاس | توضیحات | مثال |
---|---|---|
lead. | برجسته کردن یک پاراگراف | امتحان کنید |
smal. | یک متن کوچکتر را مشخص می کند(ست کردن به اندازه ی 85% عنصر والد) | امتحان کنید |
text-left. | تراز بندی کردن یک متن به سمت چپ | امنحان کنید |
text-center. | تراز بندی کردن یک متن به موقعیت وسط | امتحان کنید |
text-right. | تراز بندی کردن یک متن به سمت راست | امتحان کنید |
text-justify. | تراز بندی کردن یک متن به صورت نشکستن کلمات(justified) | امتحان کنید |
text-nowrap. | تراز بندی کردن یک متن به صورت بدون شکست(nowrap) | امتحان کنید |
text-lowercase. | متن با حروف کوچک را مشخص می کند | امتحان کنید |
text-uppercase. | متن با حروف بزرگ را مشخص می کند | امتحان کنید |
text-capitalize. |
متن با حروف بزرگ (capitalize) را مشخص می کند |
امتحان کنید |
initialism. |
نمایش متن درون یک عنصر <abbr> در یک اندازه ی فونت کمی کوچکتر |
امتحان کنید |
list-unstyled. | امتحان کنید |
- نوشته شده توسط احسان عباسی
- بازدید: 22519