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

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

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

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

Bootstrap Gridsبخش سوم :

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

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

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

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

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

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

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

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

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</div>

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

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

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

.col-sm-4

.col-sm-8

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

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

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

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

تنظیمات پیش فرض بوت استرپ : اندازه بین المللی تعیین شده برا فونت بوت استرپ 14px و ارتفاع خطوط 1.428 میباشد . این تنظیمات به <body> و همه پاراگراف ها اعمال میشود . علاوه بر این ، المنت های پاراگراف <p>از پایین به اندازه نصف فاصله خطوط مارجین دارند که بصورت پیشفرض 10px است.

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

در این قسمت نگاهی به چند المنت 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یک متن کوچکتر را نشان میدهد( تا 85% سایز والد تنظیم میکند)
.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> را قابل اسکرول میکند .

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

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

بزرگترین و جدید ترین مجموعه آموزشی برنامه نویسی به زبان اصلی
  • انتشار: ۳ آبان ۱۳۹۴

دسته بندی موضوعات

آخرین محصولات فروشگاه

مشاهده همه

نظرات

بازخوردهای خود را برای ما ارسال کنید

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