عناصر تایپوگرافی در بوت استرپ

عناصر تایپوگرافی

علاوه بر دکمه‌ها، برچسب‌ها، فرم‌ها، جداول و برگه‌ها، Bootstrap چند عنصر دیگر نیز دارد.
برای صفحه آرایی اولیه.

Hero Unit

واحد قهرمان یک منطقه محتوای بزرگ است که اندازه سرفصل ها را افزایش می دهد و چیزهای زیادی اضافه می کند
حاشیه برای محتوای صفحه فرود . برای استفاده از Hero Unit، به سادگی ایجاد کنید
یک المنت<div> با کلاس .hero-unit. علاوه بر <h1> بزرگتر، وزن قلم به 200 کاهش می یابد.

هدر صفحه

هدر صفحه یک ویژگی کوچک خوب برای اضافه کردن فاصله مناسب است
اطراف سرفصل های یک صفحه این به ویژه در صفحه آرشیو وبلاگ که در آن قرار دارد مفید است
ممکن است چندین عنوان پست داشته باشید و به راهی برای ایجاد تمایز به هر یک از آنها نیاز داشته باشید. بهتر است
از هدر صفحه استفاده کنید، عنوان خود را در یک <div> با یک کلاس .page-header بپیچید.

Thumbnails

بسیاری از سایت ها به راهی برای چیدمان تصاویر در یک شبکه نیاز دارند، و Bootstrap یک راه آسان برای
این کار نیز دارد، برای ایجاد یک تصویر کوچک، یک تگ <a> با کلاس .thumbnail در اطراف تصویر اضافه کنید.
تصویر با این کار چهار پیکسل بالشتک و یک حاشیه خاکستری خواهد داشت. در شناور(هاور)،
یک درخشش متحرک تصویر را مشخص می کند.

اکنون که تصویر کوچک اولیه خود را دارید، می توانید سرفصل ها، دکمه ها را اضافه کنید. فقط تگ <a> که دارای کلاس .thumbnail است را به a تغییر دهید
<div>. در داخل آن <div>، می توانید هر چیزی را که نیاز دارید اضافه کنید. از آنجایی که این یک <div> است، ما
می توانید از قرارداد نامگذاری پیش فرض مبتنی بر دهانه برای اندازه استفاده کنیم. اگر می خواهید گروهی از عکس هارا به این صورت داشته باشید ،
چندین تصویر، آنها را در یک لیست نامرتب قرار دهید، و هر آیتم لیست در آن شناور می شود به سمت
چپ.

alerts

مانند مدل هایی که در فصل 4 توضیح داده خواهد شد، هشدارها راهی برای استایل دادن به پیام ها ارائه می دهندبه کاربر . هشدار پیش فرض با ایجاد یک <div> و اضافه کردن
یک کلاس از .alert صورت می گیرد.
.alert از پلاگین alerts jQuery استفاده می کند که در فصل 4 مورد بحث قرار گرفته است.
هشدار، می توانید از دکمه ای استفاده کنید که حاوی ویژگی data-dismiss=”alert” است. سیار
مرورگرهای Safari و Mobile Opera برای بسته شدن به یک href=”#” نیاز دارند.
اگر پیام طولانی تری در هشدار خود دارید، می توانید از کلاس .alert-block استفاده کنید. این
بالشتک کمی بیشتر در بالا و پایین محتوای موجود در هشدار فراهم می کند که
به ویژه برای خطوط چند صفحه ای محتوا مفید است.
همچنین سه گزینه رنگ دیگر وجود دارد تا به ارائه یک رنگ بیشتر کمک کند
روش معنایی برای هشدار آنها با استفاده از .alert-error، .alertsuccess یا .alert-info اضافه می شوند.

Progress Bars

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