متن/تایپوگرافی
محتویات
- ۱ تنظیمات پیش فرض بوت استرپ
- ۲ پیش فرض‌های مرورگر در مقابل بوت استرپ
- ۳ تگ های <h1> تا <h6>
- ۴ تگ <small>
- ۵ تگ <mark>
- ۶ تگ <abbr>
- ۷ تگ <blockquote>
- ۸ تگ <dl>
- ۹ تگ <code>
- ۱۰ تگ <kbd>
- ۱۱ تگ <pre>
- ۱۲ پیش زمینه‌ها و رنگ‌های متنی
- ۱۳ کلاس های تایپوگرافی بیشتر
- ۱۴ مرجع کامل تایپوگرافی بوت استرپ
- ۱۵ منابع آموزشی
تنظیمات پیش فرض بوت استرپ
پیش فرض سراسری بوت استرپ اندازه قلم ۱۴ پیکسل با ارتفاع خط ۱٫۴۲۸ است.[۱]
این پیش فرض برروی عنصر <body> و همه پاراگراف‌ها (<p>) اعمال می‌شود.
علاوه براین، همه عناصر <p> یک حاشیه پایین دارند که برابر با نصف ارتفاع خط محاسبه شده آنها است (بطور پیش فرض ۱۰ پیکسل)
پیش فرض‌های مرورگر در مقابل بوت استرپ
در این بخش، برخی از عناصر HTML را بررسی می‌کنیم که بوسیلهٔ بوت استرپ کمی متفاوت تر از پیش فرض‌های مرورگر طراحی می‌شوند.
تگ های <h1> تا <h6>
بطور پیش فرض، بوت استرپ عنوان‌های HTML (<h1> تا <h6>) را به روش زیر طراحی می‌کند:
مثال
تگ <small>
در بوت استرپ عنصر <small> در HTML برای ایجاد متن ثانویه سبک‌تر در هر عنوانی استفاده می‌شود:
مثال
تگ <mark>
بوت استرپ عنصر <mark> در HTML را به روش زیر طراحی می‌کند.
مثال
تگ <abbr>
بوت استرپ عنصر <abbr> در HTML را به روش زیر طراحی می‌کند:
مثال
تگ <blockquote>
بوت استرپ عنصر <blockquote> در HTML را به روش زیر طراحی می‌کند:
مثال
برای نمایش نقل قول در سمت راست، از کلاس .blockquote-reverse استفاده کنید:
مثال
تگ <dl>
بوت استرپ عنصر <dl> در HTML را به روش زیر طراحی می‌کند:
مثال
تگ <code>
بوت استرپ عنصر <code> در HTML را به روش زیر طراحی می‌کند:
مثال
تگ <kbd>
بوت استرپ عنصر <kbd> در HTML را به روش زیر طراحی می‌کند:
مثال
تگ <pre>
بوت استرپ عنصر <pre> در HTML را به روش زیر طراحی می‌کند:
مثال
پیش زمینه‌ها و رنگ‌های متنی
بوت استرپ کلاس‌های متنی نیز دارد که می‌توان از آنها برای فراهم کردن "مفاهیم از طریق رنگ‌ها " استفاده کرد.
کلاس‌های مربوط به رنگ‌های متن عبارتند از: .text-muted، .text-primary، .text-success، .text-info، .text-warning و .text-danger:
مثال
کلاس‌های مربوط به رنگ‌های پیش زمینه عبارتند از: .bg-success، .bg-primary، .bg-warning، .bg-info و .bg-danger:
مثال
کلاس های تایپوگرافی بیشتر
کلاس‌های بوت استرپ زیر را می‌توان برای طراحی عناصر HTML بعدی اضافه کرد:
مرجع کامل تایپوگرافی بوت استرپ
برای دسترسی به مرجع کامل همهٔ کلاس ها/عناصر تایپوگرافی، به مرجع کامل تایپوگرافی بوت استرپ مراجعه کنید.
همچنین برای اطلاعات بیشتر در مورد کلاس‌های متنی، به مرجع کلاس‌های کمک کننده بوت استرپ (به انگلیسی: Bootstrap Helper Classes Reference) مراجعه کنید.
منابع آموزشی