صفحه آرایی (typography Bootstrap ) در بوتسترپ

علیرضا حاتمی نیا 1395/12/11 591

مقدمه و معرفی :

درودی مجدد خدمت شما علاقه مندان به آموزش Bootstrap .علیرضا حاتمی نیا هستم و در این قسمت از آموزش بوتسترپ نگاهی به تنظیمات انتخاب شده برای صفحه آرایی  (typography  Bootstrap ) می اندازیم.


بوتسترپ Bootstrap به صورت پیش فرض از فونت های Helvetica Neue, Helvetica, Arial, and sans-serif و اندازه فونت (font-size) 14px و فاصله خطوط (line-height) 1.428  برای متون استفاده می کند. تنظیمات از پیش تعریف شده (شکل و شمایل) برای تگ های مختلف در Bootstrap سبب نمایش بهتری از تگ ها به صورت پیش فرض در صفحه می شود. در ادامه به معرفی این ویژگی ها برای تگ های مختلف می پردازیم.

 

<h1>Heading1 h1</h1>
<h2>Heading2 h2</h2>
<h3>Heading3 h3</h3>
<h4>Heading4 h4</h4>
<h5>Heading5 h5</h5>
<h6>Heading6 h6</h6>

heading در bootstrap

 

 

عنوان فرعی خطی یا Inline Subheadings :

 

جهت اضافه کردن عنوان فرعی به هر کدام از تگ های <h1> تا <h6> به صورت خطی می توانید از تگ <small> استفاده کنید. همچنین می توانیم از کلاس .small استفاده کنیم.

<h1>Heading1 h1. <small>secondary Heading1 h1</small></h1>
<h2>Heading2 h2. <small>secondary Heading2 h2</small></h2>
<h3>Heading3 h3. <small>secondary Heading3 h3</small></h3>
<h4>Heading4 h4. <small>secondary Heading4 h4</small></h4>
<h5>Heading5 h5. <small>secondary Heading5 h5</small></h5>
<h6>Heading6 h6. <small>secondary Heading1 h6</small></h6>

عنوان خطی فرعی در bootstrap

 

<abbr> :

بوتسترپ عنصر <abbr> در HTML را به صورت زیر استایل دهی می کند.
 

<abbr title = "Learn Programming">ILikePHP.ir</abbr>

abbr  در bootstrap

 

کلاس های رنگ بندی متون:

 

بوتسترپ از یک سری کلاس برای رنگبندی متون استفاده می کند. از این زنگ ها در مواقع موردنیاز مانند نکات مهم ، اطلاعیه ، و غیره می توانید استفاده کنید :
 

<p class="text-muted">این رنگ برای متن های خاموش به کار می رود</p>
<p class="text-primary">این رنگ برای متن های مهم به کار می رود</p>  
<p class="text-success">این رنگ برای پیام های موفقیت آمیز به کار می رود</p>
<p class="text-info">این رنگ برای متن های اطلاعاتی به کار می رود</p>
<p class="text-warning">این رنگ برای متن های اخطار به کار می رود</p>
<p class="text-danger">این رنگ برای متن های خطر به کار می رود</p>

کلاس های رنگبندی در bootstrap

 

کلاس های رنگبندی پس زمینه:

 

برای رنگبندی پس زمینه از کلاس های زیر استفاده می کنیم :
 

<p class="bg-primary">متن های مهم در این قسمت قرار می گیرند</p>
<p class="bg-success">متن های موفقیت آمیز در این قسمت قرار می گیرند</p>
<p class="bg-info">متن های اطلاعاتی در این قسمت قرار می گیرند</p>
<p class="bg-warning">متن های اخطاری در این قسمت قرار می گیرند</p>
<p class="bg-danger">متن های خطرناک در این قسمت قرار می گیرند</p>

کلاس های رنگبندی پس زمینه در bootstrap

<kbd> :

 

از تگ <kbd> می توانید برای نمایش ورودی های کیبورد در متن استفاده کنید
 

<h1>Keyboard Inputs</h1>
<p>
Use <kbd>ctrl + c</kbd> to copy the selected text
</p>

kbd در bootstrap

نتیجه گیری :

بسیار خب . در این قسمت از آموزش سعی برآن شد تا مهمترین استایل بندی های پیشفرض Bootsrtap عنوان شود،آموزش این قسمت از Bootstrap نیز به پایان رسید. منتظر قسمت های دیگر نیز باشید.

دانلود PDF قسمت سوم آموزش Bootstrap

دانلود PDF قسمت سوم آموزش Bootstrap

 

قسمت بعدی قسمت قبلی