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


 

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

درودی مجدد خدمت شما علاقه مندان به آموزش 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

devider

عنوان فرعی خطی یا 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>

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

devider

 

<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

devider

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

 

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

 <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 نیز به پایان رسید. منتظر قسمت های دیگر نیز باشید.

 

 

برای درج نظر و یا طرح سوالات خود لطفا در سایت ثبت نام کنید و یا وارد سایت شوید

نظرات کاربران

برای این مطلب تاکنون نظری ارسال نشده است. شما اولین نفر باشید