آموزش بوت استرپ
راهنمای جامع و آموزش گام به گام طراحی قالب وبسایت با bootstrap

تنظیمات جهانی (کلی)

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

1-از یک پشته فونت بومی استفاده کنید که بهترین فونت خانواده را برای هر سیستم عامل و دستگاه انتخاب می کند.

2-برای یک مقیاس نوع فراگیر و قابل دسترس بیشتر، ما فونت اندازه پیش فرض مرورگر را در نظر می گیریم تا بازدیدکنندگان بتوانند پیش فرض های مرورگر خود را به صورت دلخواه سفارشی کنند.

3-با استفاده از font-family-base،$font-size-base$ و صفات  line-height-base$ به عنوان پایه تایپوگرافی ما  به <body> اعمال شده است.

4-رنگ لینک جهانی را از طریق link-color$ تنظیم کنید و پیوند را فقط بر روی: hover اعمال کنید.

5-از  body-bg$ برای تنظیم رنگ پسزمینه در <body> استفاده کنید.

این سبک ها را می توان در داخل _reboot.scss یافت، و متغیرهای جهانی در _variables.scss تعریف شده اند. اطمینان حاصل کنید که font-size-base$ را در rem قرار دهید.

 

سر صفحه 

همه عنوان های <HTML، <h1 از طریق <h6>، در دسترس هستند..

Heading Example

<h1></h1>

h1. Bootstrap heading

<h2></h2>

h2. Bootstrap heading

<h3></h3>

h3. Bootstrap heading

<h4></h4>

h4. Bootstrap heading

<h5></h5>

h5. Bootstrap heading

<h6></h6>

h6. Bootstrap heading

 

 <h1>h1. Bootstrap heading</h1> <h2>h2. Bootstrap heading</h2> <h3>h3. Bootstrap heading</h3> <h4>h4. Bootstrap heading</h4> <h5>h5. Bootstrap heading</h5> <h6>h6. Bootstrap heading</h6> 

 

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading

h6. Bootstrap heading

 

کلاسهای h1. از طریق h6. نیز در دسترس هستند، زیرا زمانی که میخواهید ظاهر فونت یک عنوان را مطابقت دهید، اما نمیتوانید از عنصر HTML استفاده کنید.

 

 <p class="h1">h1. Bootstrap heading</p> <p class="h2">h2. Bootstrap heading</p> <p class="h3">h3. Bootstrap heading</p> <p class="h4">h4. Bootstrap heading</p> <p class="h5">h5. Bootstrap heading</p> <p class="h6">h6. Bootstrap heading</p>

 

سر صفحه شمارشی 

از کلاسهای ابزار افزوده شده برای بازسازی متن کوچک متن دوم از Bootstrap 3 استفاده کنید.

Fancy display heading With faded secondary text

 <h3> Fancy display heading <small class="text-muted">With faded secondary text</small> </h3>

 

نمایشگرها

عناصر عنوان سنتی برای بهترین کار در محتوای صفحه طراحی شده اند. هنگامی که شما نیاز به یک عنوان برای ایستادگی کردن، در نظر بگیرید با استفاده از یک صفحه نمایش، یک سبک عنوان کمی بزرگتر و کمی معتبر تر.

Display 1
Display 2
Display 3
Display 4
 <h1 class="display-1">Display 1</h1> <h1 class="display-2">Display 2</h1> <h1 class="display-3">Display 3</h1> <h1 class="display-4">Display 4</h1>

 

رهبری

پاراگراف را با اضافه کردن به .lead بنویسید.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

 <p class="lead"> Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus. </p>

 

عناصر درونی متن

یک ظاهر طراحی شده برای عناصر HTML5 معمولی درون خطی.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

 

 <p>You can use the mark tag to <mark>highlight</mark> text.</p> <p><del>This line of text is meant to be treated as deleted text.</del></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p><u>This line of text will render as underlined</u></p> <p><small>This line of text is meant to be treated as fine print.</small></p> <p><strong>This line rendered as bold text.</strong></p> <p><em>This line rendered as italicized text.</em></p>

علامت و کلاس های کوچک نیز در دسترس هستند برای اعمال همان سبک ها به عنوان <mark> و <small> در حالی که اجتناب از هر معانی ناخواسته معنایی که برچسب ها را به ارمغان می آورد.

ر حالی که در بالا نشان داده نشده است، از <b> و <i> در HTML5 استفاده کنید. <b> به معنای برجسته کردن کلمات یا عبارات بدون انتقال اهمیت اضافی است، در حالی که <i> عمدتا برای صدا، اصطلاحات فنی و غیره است

 

ابزار های متن 

هماهنگی متن، تبدیل، سبک، وزن و رنگ را با ابزارهای متن و امکانات رنگی ما تغییر دهید.

 

اختصارات 

پیاده سازی تلطیف شده از عنصر abbr> HTML>برای اختصارات استفاده می شود و اختصارات برای نمایش نسخه گسترش یافته در شناور. اختصارات به طور پیش فرض تحت تأثیر قرار می گیرند و به  مکان نما کمک می کنند تا زمینه اضافی در شناور و کاربران تکنولوژی های کمک کننده فراهم کند.

اضافه کردن .initialism به اختصار برای یک اندازه کوچکتر فونت.

attr

HTML

 <p><abbr title="attribute">attr</abbr></p> <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

 

مسابقه

برای ارسال بلوک های محتوا از منبع دیگری در سند خود. از قرار دادن <blockquote class = "blockquote"> در اطراف هر HTML به عنوان نقل قول استفاده کنید.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante. 

 <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> </blockquote>

 

نام یک منبع

برای شناسایی منبع یک <footer class = "blockquote-footer" اضافه کنید. نام کار منبع را در <cite> قرار دهید.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

 <blockquote class="blockquote"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>

 

هم ترازی 

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
 <blockquote class="blockquote text-center"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

 

 <blockquote class="blockquote text-right"> <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer> </blockquote>

 

unstyled

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

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
  •  
 <ul class="list-unstyled"> <li>Lorem ipsum dolor sit amet</li> <li>Consectetur adipiscing elit</li> <li>Integer molestie lorem at massa</li> <li>Facilisis in pretium nisl aliquet</li> <li>Nulla volutpat aliquam velit <ul> <li>Phasellus iaculis neque</li> <li>Purus sodales ultricies</li> <li>Vestibulum laoreet porttitor sem</li> <li>Ac tristique libero volutpat at</li> </ul> </li> <li>Faucibus porta lacus fringilla vel</li> <li>Aenean sit amet erat nunc</li> <li>Eget porttitor lorem</li> </ul>

 

درونی 

گلوله های لیست را حذف کنید و برخی از حاشیه های نور را با ترکیبی از دو کلاس، لیست درون خطی و لیست درون خطی مورد استفاده قرار دهید.

  • Lorem ipsum
  •  
  • Phasellus iaculis
  •  
  • Nulla volutpat
 <ul class="list-inline"> <li class="list-inline-item">Lorem ipsum</li> <li class="list-inline-item">Phasellus iaculis</li> <li class="list-inline-item">Nulla volutpat</li> </ul>

 

تراز لیست توضیحات 

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

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

 

 <dl class="row"> <dt class="col-sm-3">Description lists</dt> <dd class="col-sm-9">A description list is perfect for defining terms.</dd> <dt class="col-sm-3">Euismod</dt> <dd class="col-sm-9"> <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p> <p>Donec id elit non mi porta gravida at eget metus.</p> </dd> <dt class="col-sm-3">Malesuada porta</dt> <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd> <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt> <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd> <dt class="col-sm-3">Nesting</dt> <dd class="col-sm-9"> <dl class="row"> <dt class="col-sm-4">Nested definition list</dt> <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd> </dl> </dd> </dl>

 

Typography ریسپانسیو

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

در اینجا مثالی آورده ایم، هر فونت اندازه و پرس و جو رسانه ای را که می خواهید انتخاب کنید.

 html { font-size: 1rem; } @include media-breakpoint-up(sm) { html { font-size: 1.2rem; } } @include media-breakpoint-up(md) { html { font-size: 1.4rem; } } @include media-breakpoint-up(lg) { html { font-size: 1.6rem; } }