Real Time Web Analytics کانال تلگرام لرن روت

Bootstrap

آموزش Bootstrap - درس سوم

نویسنده : محمد مظفری
تاریخ انتشار:
11:33:31 1394-07-18
bootstrap, responsive

در قسمت های قبلی ما با مبانی اولیه فریم ورک Bootstrap آشنا شدیم، در این قسمت به حالت های اصلی که بوت استرپ برای تگ های HTML قرار داده است نگاهی می اندازیم . لطفا با لرن روت همراه ما باشید.

حالت های Default بوت استرپ
فونت اصلی بوت استرپ برابر با 14پیکسل می باشد و فاصله بین خطوط آن 1.428 می باشد. که این تغییرات بر روی <body> و همه پاراگراف ها اعمال شده است.


حالت های Default بوت استرپ در مقایسه با حالت های Default مرورگرها
در این جا ما برخی از تغییرات تگ ها را در بوت استرپ می بینم؛

 

      <h1> - <h6>    
می بینیم که سایز این فونت ها به مراتب بزرگتر از سایز معمولی است.

 

 

 

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

      <kbd>

<p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>

      <mark>  

 <p>Use the mark element to <mark>highlight</mark> text.</p>
  


تگ های دیگری نیز تغییر یافته اند که برخی از آنها عبارتند از:
<small> ، <abbr> ، <blockqoute> ، <pre> ، <dl> ، <code> و ...


رنگ های متن و پشت زمینه ها
بوت استرپ خود شامل چندین رنگ می باشد، که بر اساس انتقال معنا از طریق رنگ هستند. برای مثال قطعه کد زیر را در نظر بگیرید؛

هر کدام از این رنگ ها دارای معنای متفاوتی می باشد؛
که سبز با کلاس text-success به معنای موفقیت است و انتقال دهنده این مفهوم نیز می باشد.
بقیه زنگ ها  نیز هر کدام معنا و مفهوم خود را دارند.

 


 

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

علاوه بر رنگ فونت رنگ پشت زمینه را نیز می توان با کلاس های بوت استرپ مشخص کرد و دیگر نیازی به کد زدن CSS برای آنها نیست.(برای مثال)

 

 

 

 

<div class="container">
  <h2>Contextual Backgrounds</h2>
  <p>Use the contextual background classes to provide "meaning through colors":</p>
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

 

برای دیدن کلاسهای کمکی بوت استرپ می توانید به اینجا مراجعه کنید: Bootstrap CSS Helper Classes Reference

و هم چنین برای مشاهده همه تگ ها در بوت استرپ می توانید به اینجا مراجعه کنید: Bootstrap CSS Typography Reference

برچسب ها:
مقالات مشابه