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

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

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

در این بخش نحوه سبک دادن و قالب بندی محتوای متنی مانند 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

اشتراک گذاری:

مشاهده نمونه های بیشتر

24 تیر 1403

ثبت مکان در گوگل مپ: آموزش ثبت رایگان مکان کسب و کارتان تنها در ۵ گام

20 تیر 1403

اینفوگرافیک چیست؟ انواع، کاربرد ها و مراحل ساخت Infographic

2 خرداد 1402

راهنمای جامع طراحی سایت فروشگاهی

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

31 اردیبهشت 1402

تایپوگرافی چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

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

25 اردیبهشت 1402

طرح رنگ چیست و چگونه از آن در طراحی سایت استفاده کنیم؟

در این مقاله، ما به پیچیدگی‌های طرح‌های رنگی در طراحی وب‌ سایت، بررسی اصول تئوری رنگ‌ها، تأثیرات روان‌شناختی رنگ‌ها و ملاحظات عملی برای انتخاب پالت رنگ مناسب می‌پردازیم.

23 اردیبهشت 1402

همه چیز در مورد چیدمان و ناوبری در طراحی سایت

ناوبری از مهم ترین عناصر طراحی سایت است که این مقاله به اهمیت طرح‌بندی و ناوبری در طراحی سایت، ارائه اصول کلیدی، استراتژی‌ها و بهترین شیوه‌ها برای بهینه‌سازی وب‌سایت شما برای موفقیت می‌پردازد.