تایپوگرافی در Bootstrap

تایپوگرافی در Bootstrap

تاریخ انتشار: 6 دی 1394

تعداد بازدید: 0 نفر

در این بخش نحوه سبک دادن و قالب بندی محتوای متنی مانند headingها، پاراگراف ها، تگ های نقل قول (blockquote) و ... را با استفاده از بوت استرپ خواهیم آموخت.

headingها :

میتوانید کلیه headingهای html را (h1 تا h6) به همان شکل که در یک html ساده تعریف میکنید، در اینجا هم به همان شکل تعریف کنید. همچنین اگر میخواهید سبک مشابه heading را بر روی متن عناصر دیگر اعمال کنید میتوانید کلاس هاس h1. تا h6. را بر روی آن عناصر اعمال نمایید.







خروجی مثال بالا به شکل زیر خواهد بود :













بعلاوه میتوانید تگ های small یا span را به کار ببرید تا متن دوم برای هر heading به صورت کوچکتر نمایش داده شود. 







خروجی مثال بالا به شکل زیر خواهد بود :







 

ایجاد هدر صفحه (page header) :

میتوانید با استفاده از هدر صفحه کاری کنید که تگ h1 متفاوت تر از دیگر تگ های heading در صفحه به نظر برسد و با استفاده از تگ small یک زیرمتن (subtext) هم به آن بدهید.






خروجی مثال بالا به شکل زیر خواهد بود :


 

پاراگراف ها :

سایز فونت بوت استرپ به صورت کلی و پیش فرض 14px با ارتفاع خط 1.428 میباشد که بر روی body و تمام پاراگراف ها اعمال میشود. علاوه بر این، یک حاشیه پایینی به اندازه نصف ارتفاع خط (پیش فرض 10px) بر روی تمام پاراگراف ها اعمال میشود.
همچنین میتوانید با اضافه کردن کلاس lead. پاراگراف های برجسته ایجاد کنید.





خروجی مثال بالا به شکل زیر خواهد بود :





به راحتی میتوانید با استفاده از کلاس های تنظیم متن، متن داخل پاراگراف ها و عناصر دیگر را تنظیم(align) کنید.




 

قالب بندی متن در bootstrap :

میتوانید با استفاده از تگ هایی مانند strong ، i ، small و ... متن خود را bold، italic، کوچک و ... کنید به همان روشی که در یک html ساده انجام میدهید.











خروجی مثال بالا به شکل زیر خواهد بود :















 

کلاس های تغییر شکل متن :

همچنین میتوانید متن را به حالت حروف کوچک یا بزرگ تغییر شکل دهید.







خروجی مثال بالا به شکل زیر خواهد بود :




 

کلاس های تأکید متن :

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













خروجی مثال بالا به شکل زیر خواهد بود :








 

سبک دادن به نقل قول ها (blockquotes) :

در بوت استرپ میتوان ظاهری زیبا به نقل قول ها داد. تنها کافیست نقل قول را با استفاده از تگ blockquote تعریف کنید، بوت استرپ بقیه کارها را انجام خواهد داد.








خروجی مثال بالا به شکل زیر خواهد بود :






همچنین با اضافه کردن کلاس pull-right. به blockquote به صورت دلخواه میتوانید نقل قول را راست نویس نمایید.







خروجی مثال بالا به شکل زیر خواهد بود :






مطلب بعدی -> ایجاد جدول در bootstrap
اشتراک گذاری:
021-41658