آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم

آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم

با سلام و عرض ادب خدمت دوستان و سروران عزیز. توی این مطلب آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم رو در اختیار کاربران عزیز قرار داده ایم. همانطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده است. شروع دوره در ادامه مطلب…

جهت مشاهده آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه دوم به ادامه مطلب مراجعه نمایید.

Bootstrap Gridsبخش سوم :

سیستم و ساختار بوت استرپ گرید :

سیستم بوت استریپ گرید به شما اجازه ساخت ده ستون در طول صفحع را میدهد . اگر مایل به ساخت ۱۲ ستون به صورت مجزا نیستید میتوانید انها را به به صورت گروهی در اورده و ستون های عریض تری بسازید . سیستم بوت استرپ گرید به حالت ریسپانسیو-واکنش گرا عمل میکند به به صورت اتوماتیک و نسبت به اندازه صفحه نظم و اندازه ستون ها را تنطیم میکند .

کلاس های گرید :

سیستم بوت استرپ گرید شامل چهار کلاس میباشد :

  • XS (برای موبایل ها)
  • SM ( برای تبلت ها)
  • ) MDبرای کامپیوتر های رومیزی)
  • LG ( برای کامپیوتر های رومیزی بزرگتر)

میتوان کلاس های بالا را ترکیب کرده و طرحی انعطاف پذیر تر پویا تر بسازیم.

ساختار اساسی بوت استرپ گرید :

در زیر ساختار اساسی یک بوت استرپ گریدرا مشاهده می نمایید :

ابتدا یک ردیف (<div class=”row”>) بسازید . سپس ، به تعداد دلخواه ستون وارد کنید . ( تگ هایی با کلاس .col-*-* مناسب ) . توجه داشته باشید که عددهای تنظیم شده در .col-*-* همیشه باید برای هر هر ردیف به دوازده تا برسند. در زیر تعدادی مثال از طرح های بیسیک بوت استرپ گرید برایتان تدارک دیده ایم.

سه ستون مساوی :

.col-sm-4 .col-sm-4 .col-sm-4

.col-sm-4

.col-sm-8

” height=”112″ width=”495″>این مثال نشان میدهد که چگونه دو ستون با عرض های نامساوی در تبلت ها و کامپیوتر های رومیزی بزرگ بسازید .

نکته : در بخش های بعدی این مجموعه بیشتر با بوت استرپ اشنا خواهید شد .

بخش چهارم : Bootstrap Text/Typography

تنظیمات پیش فرض بوت استرپ : اندازه بین المللی تعیین شده برا فونت بوت استرپ ۱۴px و ارتفاع خطوط ۱٫۴۲۸ میباشد . این تنظیمات به <body> و همه پاراگراف ها اعمال میشود . علاوه بر این ، المنت های پاراگراف <p>از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض ۱۰px است.

بوت استرپ در مقابل تنظیمات پیش فرض های بروزر :

در این قسمت نگاهی به چند المنت HTML خواهیم داشت که توسط بوت استرپ به شکل متفاوتی نسبت به تنظیمات پیش فرض بروز استایل دهی میشوند .

<h1> – <h6>

به صورت پیش فرض بوت استرپ هدینگ های اچ تی ام ال را بصورت زیر استایل دهی می کند :

h1 Bootstrap heading (36px)

h2 Bootstrap heading (30px)

h3 Bootstrap heading (24px)

h4 Bootstrap heading (18px)

h5 Bootstrap heading (14px)
h6 Bootstrap heading (12px)

عنصر <small>

در بوت استرپ از عنصر اچ تی ام ال <small> برای ایجاد یک متن ثانویه و سبک تر در هر سرفصل استفاده می شود:

همچنین برای نشان دادن نقل قول در سمت راست، از کلاس .blockquote-reverse استفاده کنید.

عنصر <dl>

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

Coffee

– black hot drink

Milk

– white cold drink

عنصر <code>

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

The following HTML elements: span, section, and div defines a section in a document.

عنصر <kbd>

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

Use ctrl + p to open the Print dialog box.

عنصر <pre>

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

Text in a pre element

is displayed in a fixed-width

font, and it preserves

both     spaces and

line breaks.

رنگ های متنی و پس زمینه :

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

.text-muted, .text-primary, .text-success, .text-info, .text-warning, .text-danger:

This text is muted.

This text is important.

This text indicates success.

This text represents some information.

This text represents a warning.

This text represents danger.

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

The classes for background colors are:.bg-primary, .bg-success, bg-info, bg-warning, .bg-danger:

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

کلاس های بوت استرپ زیر را میتوان در استایل دهی عناصر HTML مورد استفاده قرار داد :

کلاس توضیحات  
.lead برجسته کردن پاراگراف  
.small یک متن کوچکتر را نشان میدهد( تا ۸۵% سایز والد تنظیم میکند)  
.text-left تزاربندی متن به سمت چپ  
.text-center تراز بندی متن به وسط صفحه  
.text-right تراز بندی متن به سمت راست  
.text-justify هم تراز کردن متون  
.text-nowrap تراز بندی به صورت بدون شکست  
.text-lowercase نشان دهنده متن با حروف کوچک  
.text-uppercase نشان دهنده متن با حروف بزرگ  
.text-capitalize نشان دهنده متن با سرحرف درشت  
.initialism نمایش متن در عنصر <abbr> در سایزی کوچک تر  
.list-unstyled لیست-استایل پیشفرض و تراز بندی سمت چپ ر در ایتم های لیست پاک میکند(بر روی دو عنصر<ul> و <ol> کار میکند) .این کلاس فقط بر روی ایتم های لیست فرزند اعمال میشود(برای پاک کردن لیست-استایل پیشفرض در بیست های تو در تو، این کلاس را بر روی تک تک لیست های تو در تو اجرا کنید)  
.list-inline تمام ایتم های لیست را بر روی یک خط قرار میدهد .  
.dl-horizontal ترم های <dt> و توضیحات <dd> را در عنصر <dl>کنار هم تنظیم میکند.در ابتدا مانند <dl> پیشفرض کار میکند اما وقتی که صفحه بزرگ تر شود ، به صورت کنار هم تنظیم میشود  
.pre-scrollable عنصر <pre> را قابل اسکرول میکند .  

منابع کامل تایپوگرافی بوت استرپ : برای دستیابی به منابع کامل تمام کلاس ها عنصر ها به این لینک مراجعه کنید . و همینطور برای اطلاعات بیشتر در مورد کلاس های متنی میتوانید از این لینک استفاده کنید .