سبد (0)

تایپوگرافی در بوت استرپ

تایپوگرافی در بوت استرپ-Bootstrap Typography

Wiki

اندازه ی فونت پیش فرض عمومی در بوت استرپ 14px میباشد و اندازه ی line-height آن نیز 1.428 می باشد. این موضوع همچنین به تگ <body>  و تمام  پاراگراف ها نیز اعمال شده است. 

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

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

Wiki

بوت استرپ به طور پیش فرض، عنوان های 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> در بوت استرپ

Wiki

در بوت استرپ از عنصر <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> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <mark> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Use the mark element to highlight text.
خودتان امتحان کنید »

کاربرد عنصر <abbr> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <abbr> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

The WHO was founded in 1948.
خودتان امتحان کنید »

کاربرد عنصر <blockquote> در بوت استرپ

Wiki

بوت استرپ، عنصر اچ تی ام ال <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> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <dl> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Coffee
- black hot drink
Milk
- white cold drink
خودتان امتحان کنید »

کاربرد عنصر <code> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <code>  را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

The following HTML elements: span, section, and div defines a section in a document.
خودتان امتحان کنید »

 کاربرد عنصر<kbd> در بوت استرپ

Wiki

بوت استرپ عنصر اچ تی ام ال <kbd> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Use ctrl + p to open the Print dialog box.
خودتان امتحان کنید »

کاربرد عنصر <pre> در بوت استرپ

Wiki

بوتسترپ عنصر اچ تی ام ال <pre> را به صورت زیر استایل دهی می کند:

مثال (تایپوگرافی در بوت استرپ)

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
خودتان امتحان کنید »

کاربرد متن های رنگی شده در بوت استرپ

Wiki

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

  1. text-muted
  2. text-primary
  3. text-success
  4. text-info
  5. text-warning
  6. 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.

خودتان امتحان کنید »

 کلاس ها برای رنگ پس زمینه عبارتند از: 

  1. bg-primary
  2. bg-success
  3. bg-info
  4. bg-warning
  5. bg-danger

مثال (کلاس رنگی پس زمینه در بوت استرپ)

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

خودتان امتحان کنید »

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

Wiki

کلاس های بوت استرپ زیر، می توانند برای استایل  دهی عناصر 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.   امتحان کنید

 

نوشته شده توسط احسان عباسی
بازدید: 22512

آموزش صوتی Bootstrap

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

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

در میان شش هزار مطلب آموزشی منتشر شده در بیاموز، جستجو نمایید ...

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین - بانک ملت معرفی بیاموز در شبکه سه