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

آموزش کار با متن (Text) و فن چاپ Bootstrap 4

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

آموزش کار با متن (Text) و فن چاپ در Bootstrap 4:

تنظیمات اولیه Bootstrap 4 برای نمایش متن:

چهارچوب کاری بوت استرپ Bootstrap 4 از سایز نوشته پیش فرض (font-size) با مقدار 16px و ارتفاع خط (line-height) به بلندی 1.5 استفاده می کند.
فونت یا قلم (font-family) پیش فرض در Bootstrap 4 نیز به ترتیب فونت های “Helvetica Neue”، “Helvetica”، “Arial” و “sans-serif” هستند.
علاوه بر این ها در بوت استرپ 4 ، تمامی تگ های <p> یا پاراگراف به طور پیش فرص دارای حاشیه بالا (margin-tap) برابر صفر و حاشیه پایین (margin-bottem) معادل 1rem یا 16px هستند.

آموزش کار با تگ های عنوان <h1> تا <h6> در بوت استرپ 4:

Bootstrap 4 از ضخامت قلم (font-weight)، ضخیم تر و کمی سایز نوشته (font size) بزرگتر نسبت به Bootstrap 3 در تگ های عنوان یا <h1> تا <h6> استفاده می کند.
در کد مثال عملی زیر، نحوه کاربرد تگ های عنوان در بوت استرپ 4 و خروجی آن ها را نشان داده ایم :

مثال 1

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)
امتحان کنید

h1 Bootstrap heading (2.5rem = 40px)

h2 Bootstrap heading (2rem = 32px)

h3 Bootstrap heading (1.75rem = 28px)

h4 Bootstrap heading (1.5rem = 24px)

h5 Bootstrap heading (1.25rem = 20px)
h6 Bootstrap heading (1rem = 16px)

آموزش کار با عنوان ها (Headings) در بوت استرپ 4:

عنوان های مخصوص بوت استرپ 4 با کلاس display کمی متفاوت تر از تگ های عنوان HTML با تگ <h1> تا <h6> هستند. این عنوان ها، دارای سایز نوشته بزرگتر (font-size) ولی پهنای قلم (font-weight) کمتر نسبت به تگ های <h> هستند.
برای این عنوان ها، چهار کلاس displsy-1، display-2، display-3 و display-4 در بوت استرپ 4 ، تعریف شده اند که می توانید یکی از آن ها را انتخاب نمایید.
در کد مثال عملی زیر، نحوه استفاده از کلاس های جدید Heading در بوت استرپ 4 و خروجی آن ها نشان داده شده اند :

مثال 2

Display Headings

Display headings are used to stand out more than normal headings (larger font-size and lighter font-weight):

Display 1

Display 2

Display 3

Display 4

امتحان کنید

آموزش کاربرد تگ <small> در بوت استرپ 4:

از تگ <small> در Bootstrap 4 برای ایجاد یک متن کوچکتر و غیر اصلی در عنوان ها استفاده می شود.

راهنمایی :

برای کارکرد صحیح تگ <small< ، این تگ بایستی درون تگ های <h1< تا <h6< و یا تگ های نوشته با کلاس .display.* قرار بگیرد.

در کد مثال عملی زیر، نحوه استفاده از تگ <small> و نتیجه آن را در خروجی نشان داده ایم:

مثال 3

Lighter, Secondary Text

The small element is used to create a lighter, secondary text in any heading:

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 4:

در صورت قرار دادن یک متن درون تگ <mark> ، بوت استرپ 4، آن متن را برای پس زمینه زرد و کمی حاشیه درونی (padding) نمایش خواهد داد.
در کد مثال عملی زیر، نحوه استفاده از تگ <mark> و خروجی آن را نشان داده ایم:

مثال 4

Highlight Text

Use the mark element to highlight text.

امتحان کنید

آموزش کاربرد تگ <abbr> در بوت استرپ 4:

در صورت قرار دادن متن درون تگ <abbr> ، چهارچوب کاری بوت استرپ 4، آن متن را با یک حاشیه زیرین خط چین و نقطه نقطه نمایش می دهد.
در کد مثال عملی زیر، نحوه استفاده از تگ <abbr> را در عمل نشان داده ایم:

مثال 5

Abbreviations

The abbr element is used to mark up an abbreviation or acronym:

The WHO was founded in 1948.

امتحان کنید

آموزش کاربرد تگ <blockquote> در Bootstrap 4:

با اضافه کردن کلاس .blockquote به تگ <blockquote> در بوت استرپ 4، می توانید یک متن را به صورت درج زیرنویس (مثلا اشاره به مرجع مطلب در نوشته ها) در زیر یک متن اصلی نمایش دهید. همانند کد مثال عملی زیر:

مثال 6

Blockquotes

The blockquote element is used to present content from another source:

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> در Bootstrap 4:

بوت استرپ 4، تگ <dl> را با زیر لیست های آن ( تگ های <dt> و <dd> ) به صورت زیر نشان می دهد:

مثال 7

Description Lists

The dl element indicates a description list:

Coffee

- black hot drink

Milk

- white cold drink

امتحان کنید

آموزش کار با تگ <kbd> در Bootstrap 4:

بوت استرپ 4، متن درون تگ <kbd> را با پس زمینه تمام مشکی و رنگ نوشته سفید نمایش می دهد. در کد مثال عملی زیر، نحوه استفاده از تگ <kbd> و خروجی آن را نشان داده ایم:

مثال 8

Keyboard Inputs

To indicate input that is typically entered via the keyboard, use the kbd element:

Use ctrl + p to open the Print dialog box.

امتحان کنید
  • 601
  •    492
  • تاریخ ارسال :   1398/07/08

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

ارسال

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

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