akofaraji.ir
متون و تایپوگرافی در بوت استرپ 4
نوشته شده در تاریخ 31 خرداد 1403
نظرات: 0 امتیاز: 5 زمان مطالعه: 16 دقیقه

 

در این قسمت از مجموعه آموزشی Bootstrap 4 می خواهیم به بررسی تایپوگرافی bootstrap ، متون و حالت های مختلف نمایش آن ها بپردازیم. اطلاعات کافی در این زمینه می تواند به شما کمک کند که وب سایت خود را به آسانی و با دقت بیشتری طراحی کنید.

 

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

در بوت استرپ 4 متون، تنظیمات پیش فرض خاص خودشان را دارند. font-size برابر با 16 پیکسل و line-height برابر با 1.5 است. همچنین font-family برابر با توالی زیر است:

"Helvetica Neue", Helvetica, Arial, sans-serif

به علاوه، تمام عناصر <p> دارای margin-top: 0 و margin-bottom: 1rem (برابر 16 پیکسل) هستند.

 

تگ های heading

تگ های <h1> تا <h6> در بوت استرپ 4 دارای وزن بالاتر (بولدتر) و اندازه ی بیشتری هستند.

به مثال زیر توجه کنید:

مشاهده ی خروجی در JSBin

 

این حالت عادیِ heading ها در بوت استرپ است اما چیزی به نام Display heading نیز وجود دارد که همان heading ها هستند با این تفاوت که اندازه ی فونت بزرگتری داشته اما وزن فونت کمتر است (لاغر تر هستند). این نوع heading ها با یکی از چهار کلاس display-1. و display-2. و display-3. و display-4. مشخص می شوند. به کد زیر توجه کنید:

مشاهده ی خروجی در JSBin

 

عنصر <small>

در بوت استرپ 4 عنصری به نام <small> وجود دارد که وظیفه اش ایجاد متن خاصی در heading ها با سایزی کوچکتر است. به مثال زیر نگاه کنید:

مشاهده ی خروجی در JSBin

 

همانطور که در مثال بالا می بینید این عنصر یک متن ثانویه در همان heading ایجاد می کند (قسمتی که از بقیه ی heading کوچکتر است). این قسمت معمولا برای زیباسازی ظاهری و یا اضافه کردن توضیحاتی که اهمیت کمتری نسبت به خود heading دارند، استفاده می شوند. به طور مثال اگر heading ما «ایجاد درخواست AJAX در IE8» باشد می توانیم قسمت «در IE8» را کوچکتر بنویسیم.

عنصر <mark>

بوت استرپ 4 عنصر <mark> را بر اساس سلیقه ی خود استایل دهی می کند؛ به پس زمینه ی آن رنگ زرد کمرنگ و کمی padding! شما می توانید این موضوع را در مثال زیر ببینید:

مشاهده ی خروجی در JSBin

 

عنصر <abbr>

بوت استرپ 4 عنصر <abbr> را به صورت نقطه چین هایی زیر عنصر مربوطه تغییر می دهد. در این مثال دقت کنید:

مشاهده ی خروجی در JSBin

 

عناصر <blockquote>

همانطور که میدانید عنصر <blockquote> برای ذکر نقل قول در صفحه آورده می شود؛ زمانی که می خواهیم حرف کسی را عینا تکرار کنیم. اگر به این عناصر کلاس blockquote. را اضافه کنیم بوت استرپ استایل خاص خودش را به آن می دهد:

مشاهده ی خروجی در JSBin

 

عنصر <dl>

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

مشاهده ی خروجی در JSBin

 

عنصر <code>

بوت استرپ 4 کد ها (عنصر <code>) را به این شکل استایل دهی می کند:

مشاهده ی خروجی در JSBin

 

عنصر <kbd>

عنصر <kbd> که برای توضیح کلید های کیبورد استفاده می شود در بوت استرپ 4 به شکل زیر استایل دهی می شود:

مشاهده ی خروجی در JSBin

 

عنصر <pre>

این عنصر نیز استایل خاص خودش را در بوت استرپ 4 دارد:

مشاهده ی خروجی در JSBin

موارد بالا مهم ترین موارد در زمینه ی تایپوگرافی bootstrap بود اما شما می توانید کلاس های بیشتر بوت استرپ را از سایت آن مشاهده کنید. امیدوارم از این قسمت لذت برده باشید.

 

منبع: سایت روکسو


اگر احساس می کنید این مطلب برای شما مفید بود ، از 1 تا 10 به این مطلب امتیاز دهید

دیدگاه کاربران در مورد این مطلب

ثبت نظر
به نظر خوب میاد!
لطفا نام را وارد کنید
@
لطفا یک ایمیل منحصر به فرد و معتبر انتخاب کنید.
لطفا متن با کلمات و معانی مفهوم دار وارد نمایید