نمادها

شما اینجا هستید

آموزش Bootstrap 4 جلسه چهارم (typography)

در خدمت شما هستیم با آموزش Bootstrap 4 جلسه چهارم (typography)

آموزش Bootstrap 4 جلسه چهارم (typography) از سری آموزش های تک قسمتی است.

 

تایپوگرافی (typography)

تایپوگرافی یکی از موارد مهم در بوت استرپ و مبحث رسپانسیو است چرا که بیشتر بستر یک سایت را محتوا و مطالب تشکیل میدهند خوانایی نوشته یکی از موارد بسیار مهم در سئو و زیبایی سایت شما است. در این جلسه میپردازیم به کلاس هایی از بوت استرپ که باعث خوانایی هرچه بیشتر محتوای شما در دستگاه های مختلف و برای کاربر میشود. کلاس هایی که بصورت استاندارد در بوت استرپ تعریف و استایل دهی شده اند. علاوه بر کلاس هایی که خود بوت استرپ تعریف کرده است به تگ های معروف نیز استایل داده است تگ هایی مثل heading ها و تگ های p ، pre ، mark و … این تگ ها جز تگ های مهم تایپوگرافی و نوشتار به حساب می آیند.

 

heading ها

همانطور که میدانید تگ های h1 تا h6 را heading مینامند و در تایتل گذاری از آنها استفاده میکنند این تگ ها در سئو بسیار مهم هستند و گوگل اهمیت مطالب را بر پایه آن ها میسنجد. بوت استرپ برای مقیاس دهی به این تگ و دیگر تگ ها از واحد جدیدی که قبلا آن را معرفی کردیم استفاده میکند این واحد rem است که  یک rem برابر است با ۱۶px بر همین روش شما میتوانید باقی مقیاس ها را نیز تبدیل کنید. ما برای شما heading ها و اندازه آنها بر پایه rem و px را لیست میکنیم.

  • h1 : اندازه این هدینگ ۴۰px است که برابر است با ۲٫۵rem
  • h2 : اندازه آن ۳۲px است که برابر است با ۲rem
  • h3 : اندازه هدینگ ۳ برابر است با ۲۸px که میشود ۱٫۷۵rem
  • h4 : اندازه این هدینگ ۲۴px است که میشود ۱٫۵rem
  • h5 : این هدینگ اندازه ۲۰px دارد که میشود ۱٫۲۵rem
  • h6 : در نهایت هدینگ ۶ برابر است با ۱۶px که میشود ۱rem

کلاس display

ممکن است بخواهید در اندازه های بالا تغییر سایز داشته باشید برای این مورد بوت استرپ کلاسی تعریف کرده است با نام display که مقدار ۱ تا ۴ دارد که ۱ اندازه بزرگ آن و ۴ کوچکترین آن است نحوه نوشتار آن نیز به صورت display-2 است که جای ۲ میتوان از ۱ تا ۴ بنا به نیاز مقدار دهی کرد. برای این کلاس استایل های font-size و font-weight هایی بزرگتر از حالت استاندارد کد نوشته شده است که نوشته هایی توپر و بزرگ را میسازند. اما اگر بخواهیم نوشته هایی کوچکتر داشته باشیم چه؟

 

تگ  small

به کمک تگ small همانطور که از نامش مشخص است میتوانید هر متنی را در اندازه کوچکتر نمایش بدهید این تگ در بوت استرپ ۴ بسیار استاندارد است و ظاهر و اندازه جذابی به نوشته شما میدهد که امکان مطالعه در سایت شما را برای کاربر فراهم و آسان میکند. اصطلاحا به این تگ و استفاده از آن secondary text گفته میشود که به معنای نوشته ثانویه است یعنی اگر تایتل شما توضیحاتی دارد که قرار است زیر آن نوشته شود این مورد بسیار مناسب است یا برای استفاده زیر عنوان گزینه خوبی است.

 تگ mark

از این تگ همانطور که از نامش مشخص است برای مارک کردن یا همان هایلایت کردن استفاده میشود اگر شما نوشته ای دارید که قصد مارک کردن آن را دارید کافیست آن را داخل این تگ قرار دهید تا یک رنگ زرد بسیار کمرنگ روی آن کشیده شود و به صورت هایلایت در بیاید مانند کد زیر:

<mark/>نوشته مورد نظر شما<mark>

تگ abbr

از این تگ برای معرفی استفاده میشود مشابه تولتیپ است اما به آن تولتیپ نمیشود گفت فرض کنید شما اسم یک فرد را داخل سایت خود می آورد و میخواهید وقتی موس روی آن قرار گرفت توضیحاتی درباره آن فرد نمایش داده شود اگر بخواهیم مثالی برنیم ساختار آن به شکل زیر است.

در کد بالا کلمه مد نظر را بین تگ باز و بسته abbr قرار میدهیم و در قسمت title توضیح خود راجب آن را مینویسیم.

 

تگ blockquote

از این تگ برای نقل قول استفاده میشود علاوه بر تگ ،بوت استرپ کلاسی نیز با همین نام برای آن در نظر گرفته است برخلاف تصوری که این تگ استفاده چندانی ندارد برعکس بسیار برای مبحث سئو مناسب و مفید است اگر شما نوشته ای را از جایی کپی کنید و یا نوشته ای را در سایت خود قرار دهید که قبلا مانند آن بوده باشد گوگل به سایت شما امتیاز منفی میدهد اگر میخواهید این اتفاق نیفتد کافیست آن متن را داخل تگ blockquote قرار دهید و منبع را ذکر کنید و خیالتان از بابت مطلب کپی راحت باشد. اگر بخواهیم مثالی از این تگ بزنیم کد زیر مناسب است:

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

 

تگ code

از این تگ زمانی استفاده میشود که شما بخواهید کدی یا کلمه خاصی بنوسید که جز متن مقاله نیست و نباید با باقی مقاله اشتباه گرفته شود در آن موقع میتوان از تگ code استفاده کرد و نوشته مد نظر را بین تگ باز و بسته آن نوشت.

 

تگ kbd

این تگ مناسب زمانی است که شما بخواهید نوشته ای را متمایز کنید و به شکل دکمه در بیاورید به عنوان مثال در سایت خود مقاله ای درباره آموزش فتوشاپ نوشته اید و میخواهید در وسط مقاله یک کلید میانبر معرفی کنید کافیست آن کلید را بنویسید مثلا ctrl + z و داخل این تگ قرار دهید.

 

تگ pre

اگر به همین آموزش دقت کنید در جاهایی که کد نوشته شده است ظاهر نمایش کاملا متفاوت است این کار توسط تگ pre اتفاق می افتد. در اصل کاربرد این تگ این است که هر نوشته داخل آن قرار گیرد بدون تغییر و تاثیر استایل ها نمایش داده میشود.

 

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

آموزش Bootstrap 4

 

همچنین مثال از برخی از کد های گفته شده در کد زیر موجود است که میتوانید استفاده کنید.

کد بالا مثالی از سرفصل های این مقاله است.

می توانید دیگر قسمت ها را در لینک زیر ببینید:

آموزش Bootstrap 4 جلسه سوم (ساختار بدنه)

آموزش Bootstrap 4 جلسه پنجم (color)

 

شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید:

 

همچنین در صورت علاقه می توانید این آموزش را از باکس دانلود موجود در زیر همین پست دانلود نمایید

 

اگر این مطلب آموزنده بود به ما امتیاز دهید
1 ستاره2 ستاره3 ستاره4 ستاره5 ستاره (2 رای, میانگین: 4٫50 امتیاز از 5)
Loading...

این یک فایل mp4 تصویری است که با پلیر های ویدیویی قابل اجرا می باشد

دانلود آموزش Bootstrap 4 جلسه چهارم (typography): نوع فایل:mp4 حجم فایل:40.79 مگابایت

هر پلیر اجرا کننده فایل ویدیویی

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*

code

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.