آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش تایپوگرافی در Bootstrap

دوره های مرتبط با این مقاله

تنظیماتِ پیش فرضِ BootStrap

اندازه ی پیش فرض و عمومیِ فونتِ BootStrap ،14 پیکسل بوده و فاصله ی بین خطوط (Line Height) 1.428 می باشد. این اندازه ی قراردادی برای تمامی پاراگراف ها و نیز برای <body> یا تگ ها، اعمال می شود. به علاوه، تمامیِ عناصرِ <p> دارای یک حاشیه ی انتهایی (Bottom Margin) می باشند که برابر با نیمی از ارتفاع بین خطوط(Line Height) است که به صورت پیش فرض به صورت 10 پیکسل تعیین شده است.

BootStrap در مقابل Browser Defaults

در این بخش برخی از عناصر HTML را بررسی خواهیم نمود که نحوه ی استایل بندی آنها توسط BootStrap اندکی متفاوت تر از شیوه ی پیش فرضِ مرورگر ها است.

<h1> - <h6>

BootStrap عناوینِ HTML را (از تگِ h1 تا تگِ h6) به صورت پیش فرض، به شکل زیر استایل بندی می کند:

نمونه 1

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>

در BootStrap، برای ایجاد متنِ Secondary و سبک، از تگِ <small> استفاده می شود:

نمونه 2

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>

BootStrap تگ <mark> در HTML را به صورت زیر استایل بندی می کند:

نمونه 3

Use the mark element to highlight text.

امتحان کنید

تگ <abbr>

BootStrap تگ <abbr> در HTML را به صورت زیر استایل بندی می کند:

نمونه 4

 

The WHO was founded in 1948.

امتحان کنید

تگ <blockquote>

BootStrap تگ <blockquote> در HTML را به صورت زیر استایل بندی می کند:

نمونه 5

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 را اضافه می کنیم:

نمونه 6

 

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.

امتحان کنید

تگ dl

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

نمونه 7

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

تگ <code>

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

نمونه 8

The following HTML elements: span, section, and div defines a section in a document.

امتحان کنید

تگ <kbd>

BootStrap تگِ <kbd> را به صورت زیر استایل بندی می کند:

نمونه 9

Use ctrl + p to open the Print dialog box.

امتحان کنید

تگ <pre>

BootStrap تگِ <pre> را به صورت زیر استایل بندی می کند:

نمونه 10

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

رنگ های متنی (Contextual) و پس زمینه (Background)

BootStrap همچنین دارای کلاس های Contextual است که از طریق آنها می توان معنا را از طریق رنگ ها انتقال داد. کلاس های مورد استفاده برای رنگ های متنی عبارتند از:

  • text-muted
  • text-primary
  • text-success
  • text-info
  • text-warning
  • text-danger

نمونه 11

  

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

نمونه 12

  

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

امتحان کنید

کلاس های Typography بیشتر

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

class
شرح
lead
موجب برجسته شدنِ پاراگراف می شود.
small
بر متن های کوچک تر دلالت دارد ( تا اندازه ی 85% متن والد، تنظیم می کند)
text-left
نشانگرِ متن چپ چین
text-center
نشانگرِ متن وسط چین
text-right
نشانگرِ متن راست چین
text-justify
نشانگر متن Justify شده
text-nowrap
نشانگرِ عدم وجود متن شکسته
text-lowercase
نشانگر متن با حروف کوچک
text-uppercase
نشانگر متن با حروف بزرگ
text-capitalize
نشانگر متن دارای حروف Capital
initialism
نشانگرِ متن درون عنصرِ <abbr> همراه با فونتِ کوچکتر
list-unstyled
این کلاس، استایلِ پیش فرضِ لیست و left margin را حذف می کند و بر روی عناصرِ <ul> و <ol> کار می کند. همچنین، تنها برای آیتم های بی واسطه ی فرزند اعمال می شود تا هرگونه استایل لیست پیش فرض را از لیست های تو در تو حذف نماید.
list-inline
تمامی آیتم های لیست را بر روی یک خط قرار می دهد.
dl-horizontal
عناوینِ <dt> و ویژگی های <dd> در عناصرِ <dl> را پهلو به پهلو چینش می کند. این کلاس مانندِ عناصرِ پیش فرضِ <dl> شروع می شود اما زمانی که پنجره ی مرورگر گسترده می شود، به صورت پهلو به پهلو مرتب می گردد.
pre-scrollable
باعث می شود که عنصرِ <pre> قابلیت Scroll شدن داشته باشد.
  • 2704
  •    740
  • تاریخ ارسال :   1395/10/06

دانلود PDF دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال
کاربر میهمان1396/02/01

تشکر

فوق العاده بود واقعا ممنون از سایت عالی و رایگانتون


آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .