سبد (0)

کلاس های تایپوگرافی در بوت استرپ

تنظیمات پیش فرض بوتسترپ

اندازه ی فونت پیش فرض و عمومی بوتسترپ 14px می باشد، همچنین line-height نیز برابر با 1.428 می باشد.

این ویژگی به عنصر <body> و تمام پاراگراف ها اعمال شده است.

بعلاوه، تمام عناصر <p> یک margin-bottom دارند که برابر با نصف line-height محاسبه شده برای آنها می باشد(10px به طور پیش فرض).


نگارش

عناصر زیر، درواقع عناصر HTML ای هستند که در بوتسترپ کمی متفاوت تر از عناصر پیش فرض مرورگر، استایل بندی خواهند شد. به مثال های "امتحان کنید" نگاه کنید تا نتیجه یا تفاوت را دریابید.

از کلاس های زیر می توان برای استایل بندی بیشتر عناصر استفاده کرد.

Element/Class توضیحات مثال
<h1> - <h6>
یا
.h1 - .h6
سرفصل های h1 الی h6 امتحان کنید
<small>

یک متن دوم و کم رنگ تر را به یک سرفصل اضافه می کند.

امتحان کنید
small.

یک متن کوچکتر را مشخص می کند(ست کردن به %85 عنصر والد).

امتحان کنید
lead.

 یک متن را برجسته می کند.

امتحان کنید
<mark>
or
mark.
برجسته کردن متن امتحان کنید
<del> یک متن حذف شده را مشخص می کند: Deleted text امتحان کنید
<s> یک متن خط خورده را مشخص می کند: No longer relevant text امتحان کنید
<ins> یک متن الحاق شده را مشخص می کند Inserted text امتحان کنید
<u> یک متن زیر خط دار را مشخص می کند Underlined text امتحان کنید
<strong> یک متن پررنگ شده را مشخص می کند: Bold text امتحان کنید
<em> یک متن ایتالیک را مشخص می کند: Italic text امتحان کنید
text-left. یک متن چپ چین شده را مشخص می کند. امتحان کنید
text-center. یک متن وسط چین شده را مشخص می کند. امتحان کنید
text-right. یک متن راست چین شده را مشخص می کند. امتحان کنید
text-justify. یک متن justified را مشخص می کند. امتحان کنید
text-nowrap. یک متن بدون بسته بندی را مشخص می کند. امتحان کنید
text-lowercase. یک متن با حروف کوچک را مشخص می کند. امتحان کنید
text-uppercase. یک متن با حروف بزرگ را مشخص می کند. امتحان کنید
text-capitalize.

<یک متن capitalized را مشخص می کند.

امتحان کنید
<abbr>

عنصر <abbr> یک واژه ی مخفف یا سرنام واژگان را مشخص می کند. مخفف ها به همراه یک خصوصیت title، دارای یک کادر نقطه ای در پایین خود می باشند و دارای یک نشانگر کمک، به هنگام رفتن موس بر روی خود هستند که یک متن اضافی برای توصیح بیشتر را نشان می دهد.

امتحان کنید
initialism.

متن درون عنصر <abbr> را با یک اندازه ی فونت کوچکتر نمایش می دهد.

امتحان کنید
<address> اطلاعات تماس را مشخص می کند. امتحان کنید
<blockquote>

بلوک های محتوا را از یک منبع دیگر مشخص می کند.

امتحان کنید
blockquote-reverse.

یک blockquote را به همراه محتوای راست چین شده مشخص می کند.

امتحان کنید
<ul>

یک لیست نامنظم را مشخص می کند.

امتحان کنید
<ol>

یک لیست منظم را مشخص می کند.

امتحان کنید
list-unstyled.

استایل لیست پیش فرض  و margin سمت چپ را از آیتم های لیست حذف می کند(بر روی هر دو <ul> و <li> کار می کند). این کلاس تنها بر روی آیتم های ضروری فرزند یک لیست اعمال می شود(برای حذف کردن استایل لیست پیش فرض از هر لیست تودرتو، این کلاس را می توانید به خوبی به هر لسیت تو در تو اضافه کنید).

امتحان کنید
list-inline.

تمام آیتم های لیست را در یک خط واحد قرار می دهد.

امتحان کنید
<dl> یک لیست توضیح را مشخص می کند. امتحان کنید
dl-horizontal.

هنگامی که پنجره گسترش می یابد، توضیحات و سرفصل در کنار یکدیگر قرار می گیرند.

امتحان کنید

Code

Element/Class توضیحات مثال
<code>

کدهای درون خطی را مشخص می کند: span , div

امتحان کنید
<kbd>

ورودی را که به طور معمول به وسیله ی کیبورد وارد شده است، مشخص می کند: CTRL+P

امتحان کنید
<pre>

کدهای چند خطی را مشخص می کند.

امتحان کنید
<pre class="pre-scrollable">

خط های کد چندگانه به همراه اسکرول بار را مشخص می کند.

امتحان کنید
<samp> خروجی نمونه را از یک برنامه ی کامپیوتری مشخص می کند. امتحان کنید
<var>

متغیرهای   x = ab + y را مشخص می کند.

امتحان کنید

آموزش صوتی Bootstrap

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه