آموزش Bootstrap قسمت ۵: تایپوگرافی در بوت استرپ
آنچه در این مقاله میخوانید
Toggleآموزش بوت استرپ: تایپوگرافی
دراین قسمت قصد داریم در مورد تایپوگرافی در بوت استرپ مطالبی را بیان نماییم.
استایل دهی به متون:
اینکه چطور می توانیم به متن هایمان استایل دهیم. این بخش ممکن است نسبت به بخش های گذشته، کمی خسته کننده بنظر برسد.
ابتدا وارد صفحه سایت bootstrap در قسمت content شوید Documentation را در ساید بار پیدا نموده (دقت نمایید که contents را نباید انتخاب نمایید) سپس در زیرمنو typography را انتخاب نمایید.
ورود به صفحه Typography در سایت رسمی Bootstrap
اگر کمی اسکرول کنید خواهید دید که چند مثال برای استایل هایی که بوت استرپ به صورت پیش فرض به تگها میدهد نمایش داده شده است.
در اینجا تگ های h1 و h2 را میبینید.
پس با هم امتحان کنیم؛
حل مثال:
یک فایل جدید به نام Typography.html بسازید:
کد starter قسمت دوم را در آن جایگذاری میکنیم.
هر ۶ تگ را وارد کنید و لغت یا لغاتی را به دلخواه خودتان بصورت فارسی یا انگلیسی میان آنها بنویسید. البته مانند بخش های قبلی، تمامی کدها را در container قرار دهید!
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="./bootstrap-4.3.1-dist/css/bootstrap.min.css"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>typography</title> </head> <body> <div class="container"> <h1>h1. heading</h1> <h2>h2. heading</h2> <h3>h3. heading</h3> <h4>h4. heading</h4> <h5>h5. heading</h5> <h6>h6. heading</h6> <h1>هدینگ ۱</h1> <h2>هدینگ ۲</h2> <h3>هدینگ ۳</h3> <h4>هدینگ ۴</h4> <h5>هدینگ ۵</h5> <h6>هدینگ ۶</h6> </div> <script src="./bootstrap-4.3.1-dist/js/bootstrap.js"></script> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> </body> </html>
فایل را در مرورگر سیستم خودتان اجرا نمایید.
ممکن است در اینجا چیزی متوجه نشوید. پس خطی که بوتسرپ را به فایل شما اضافه میکند، حذف نموده و فایل را دخیره و سپس مرورگر را ریفرش نمایید.
میبینید که بوتسترپ در فونت , سایز فونت , فاصله بین خطوط , Margin , Padding و خیلی از موارد دیگر تاثیر داشته است و تغییر پیدا کردند.
باید بدانید بوت استرپ تقریبا روی تمام المنتهای HTML تاثیرگذار است.
حال میخواهم روش دیگری را ارائه کنم که به جای استفاده از HTML برای بزرگ و کوچک کردن نوشته ها , از بوت استرپ بکارگیری میکند. از شما میخواهم که یک تگ p ایجاد نموده و چیزی در آن بنویسید.
<p>سایت تاتوره</p>
وقتی فایل را ذخیره میکنیم همه چیز عادی است و نوشته بهصورت درست نمایش داده میشود .
خطی که بوتسترپ را به فایل ما اضافه میکرد را برگردانید و تگهای هدینگ را کامنت کنید.
سپس کلاسی به تگ p اضافه نموده، کلاس h1 مانند کد زیر و یک تگ h1 دیگر نیز در زیر تگ p اضافه نمایید:
<p class="h1">سایت تاتوره با تگ پی</p> <h1>سایت تاتوره با تگ اچ۱</h1>
نتیجه را مشاهده کنید:
دقیقا همون استایلی که تگ h1 به تنهایی و بدون کلاس داشت .
خیلی عالی است که ما میتوانیم با استفاده از تگها نوشته خودمان را کنترل کنیم که کار را برای ما خیلی آسان تر میکند.
امّا چرا باید از این کلاسها استفاده کنیم؟
در هر صفحه معمولا باید یک تگ h1 داشته باشیم. اگر بخواهیم مطلب مهمی را نمایش دهیم که باید بزرگتر نوشته شود، میتوانیم از این کلاس استفاده کنیم یا تگهای دیگری که بخواهیم در صفحه خیلی بزرگتر به نظر برسند.
در صفحه typography اگر کمی پائینتر بروید، کلاس Text-muted را میبینید. با اضافه کردن این کلاس رنگ متن شما به خاکستری تغییر پیدا میکند که در قسمت رنگها بصورت کامل به آن پرداختیم. ورود به قسمت ۳ رنگها
انواع کلاس ها در بوت استرپ:
کلاس display :
کمی پایین تر به کلاسهای display میرسیم. کلاس هایی که شما میتوانید متن های خودتان را از h1 هم بزرگتر کنید.
بهتر است با هم امتحان کنیم. کد زیر را به ابتدای فایلتون اضافه کنید:
<h1 class="display-1">Display ۱</h1> <h1 class="display-2">Display ۲</h1> <h1 class="display-3">Display ۳</h1> <h1 class="display-4">Display ۴</h1>
دقت کنید،
که فقط ۴ کلاس display داریم و با هدینگ که ۶ مورد است اشتباه نگیرید.
حتی display-4 هم بزرگتر از h1 نوشته میشود. بنابراین از این کلاس ها با دقت استفاده کنید و در هر صفحه بیشتر از یکی قرار ندهید!
نکته دیگه اینه که لازم نیست کلاسها رو حتما به هدینگها یا تگ p دهید، میتوانید این کلاس ها را به هر تگی که نوشتهای را نمایش میدهد اختصاص دهید. مثل div , a , button و … . بنابراین هیچ محدودیتی از این لحاظ نداریم.
کلاس lead :
کلاس بعدی lead است . کلاس چندان مهمی نیست مانند تگ P اما با استایلهای font:size: 1.25rem و font-weight: 300 که اندازه آن کمی بزرگتر و ضخامت آن کمی کمتر از تگP است.
دو تگ P ایجاد کنید و به یکی کلاس lead اختصاص دهید.
<p class="lead">with lead</p> <p>with out lead</p>
میبینید ک تفاوت چندانی وجود ندارد.
کلاس blockquote :
کلاس blockquote که مثل lead دقیقا همان اندازه را دارد اما کاری به ضخامت نوشته ندارد و به زیر نوشته margin اضافه میکند، همین!
اما کلاسی که blockquote را تکمیل میکند blockquote-footer است.
فرض کنید میخواهید نقلوقولی در نوشته تان داشته باشید. با اضافه کردن blockquote به نقلوقول و blockquote-footer به نویسندهی نقلوقول , میتوانید استایل زیبایی به آن دهید.
کد زیر را به فایلتان اضافه کنید.
<blockquote class="blockquote"> <p class="mb-0">زندگی مانند دوچرخه سواری است. برای این که بتوانید تعادل خود را حفظ کنید باید همیشه در حرکت باشید</p> <footer class="blockquote-footer">نوشته شده توسط <cite title="Source Title">اینشتین</cite></footer> </blockquote>
سپس مرورگر را ریفرش کنید.
میبینید نوشته ای که blockquote-footer دارد رنگ خاکستری گرفته و قبل از اون خط کوتاهی ظاهر شده است. باید بدانید حتما لازم نیست تگ footer را به آن دهید ولی خب استانداردی است که انجام میدهند.
کلاس های تراز بندی:
اخرین چیزی که میخواهیم درمورد آن صحبت کنیم کلاس های تراز بندی است؛
- text-center: نوشته را وسط چین میکند.
- text-right : ننوشته را راست چین میکند.
- text-left : نوشته چپ چین میشود.
برای ما که فارسی مینویسیم ابتدا body را راست چین می کنیم به اینصورت که استایل زیر را به تگ body میدهیم:
Direction : rtl
حالا اگه بخواهیم متن انگلیسی به نوشته مان اضافه کنیم باید از text-left استفاده کنیم.
اما من نمیخواهم این استایل را به body بدهم پس برای راستچین شدن متن فارسی از text-right استفاده کنیم.
تگ p ایجاد نموده و کلاس text-right را به آن اضافه نمایید.
<p class="text-right">من یک تگ پی با نوشته فارسی هستم که راست چین شدم!</p>
مرورگر را ریفرش کنید.
میبینید که مثل rtl کردن نوشته راست چین شده , اما تفاوتی که وجود دارد این است که اگر المنت مان را راستچین کنیم المنتهای داخلی آن هم از سمت راست صفحه شروع به اضافه شدن میکنند مثل این است که flexbox داشته باشید.
اگر نمیخواهید این اتفاق بیفتد میتوانید فقط با اضافه کردن کلاس text-right نوشتههایتان را راستچین کنید.
لازم بذکر است؛ این کلاس ها خیلی پرکاربرد میباشند و من به شخصه خیلی از آنها استفاده میکنم.
در ادامه از text-center و text-left هم استفاده مینماییم. کد زیر را به ابتدای فایلتان اضافه کنید.
<p class="text-right">من یک تگ پی با نوشته فارسی هستم که راست چین شدم!</p> <p class="text-center">من یک تگ پی با نوشته فارسی هستم که وسط چین شدم!</p> <p class="text-left">من یک تگ پی با نوشته فارسی هستم که چپ چین شدم!</p>
میبینید که با اضافه کردن text-center نوشته ما به وسط صفحه منتقل شده و البته با اضافه کردن text-left هم نوشته چپ چین شده است اما چون به صورت پیش فرض استایل فایل صفحههای html به صورت ltr است، تفاوتی ندارد اگر از این کلاس استفاده کنیم یا نه. اما اگر همینجا کل body را راست چین میکردیم این کلاس خیلی بکار می آمد.
همانطور که مشاهده نمودید تایپوگرافی در بوت استرپ را توضیح دادیم. به همین مقدار اکتفا میکنیم و در قسمت بعد jumbotrons
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.