استفاده از رنگ ها در Bootstrap

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

  • primary: آبی
  • success: سبز
  • Info: آبی روشن
  • warning: رنگی نزدیک به زرد
  • danger: قرمز
  • light: خاکستری روشن
  • dark: خاکستری تیره

نحوه استفاده

رنگ های ذکر شده در هر بخشی از Bootstrap قابل استفاده می باشند که با ذکر چند مثال نحوه استفاده از آنها را شرح خواهیم داد.

Background

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

  • bg-primary
  • bg-success
  • bg-info
  • bg-warning
  • bg-danger
  • bg-light
  • bg-dark

مثال: ردیفی شامل سه ستون طراحی کنید که هر ستون آن دارای رنگی متفاوت باشد.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="css/bootstrap-rtl.css" />
  </head>

  <body class="rtl">
    <div class="container border">
      <h1>نمونه ای کادرهای سه ستونه</h1>
      <div class="row">
        <div class="col bg-primary">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا
          از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
        </div>
        <div class="col bg-success">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا
          از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
        </div>
        <div class="col bg-danger">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید، تا
          از نظر گرافیکی نشانگر چگونگی نوع و اندازه فونت و ظاهر متن باشد.
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
  </body>
</html>

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

کادر سه ستونه در bootstrap

رنگ نوشته

برای تعیین رنگ نوشته کافی است نام رنگ را به پیشوند text- اضافه کنید.

  • text-primary
  • text-success
  • text-info
  • text-warning
  • text-danger
  • text-light
  • text-dark

مثال: کادری حاوی 4 ستون ایجاد نمایید بطوریکه بک گرانند و رنگ نوشته آنها متفاوت باشد.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Beno Academy | Bootstrap Tutorial</title>
    <link rel="stylesheet" href="css/bootstrap-rtl.css" />
  </head>

  <body class="rtl">
    <div class="container border">
      <h1>نمونه ای کادرهای چهار ستونه</h1>
      <div class="row">
        <div class="col bg-warning text-success">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید.
        </div>
        <div class="col bg-info text-danger">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید.
        </div>
        <div class="col bg-danger text-info">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید.
        </div>
        <div class="col bg-dark text-light">
          لورم ایپسوم یا طرح‌نما (به انگلیسی: Lorem ipsum) به متنی آزمایشی و
          بی‌معنی در صنعت چاپ، صفحه‌آرایی و طراحی گرافیک گفته می‌شود. طراح
          گرافیک از این متن به عنوان عنصری از ترکیب بندی برای پر کردن صفحه و
          ارایه اولیه شکل ظاهری و کلی طرح سفارش گرفته شده استفاده می نماید.
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="/js/bootstrap.bundle.js"></script>
  </body>
</html>

حاصل اجرای این کدها همانند تصویر زیر خواهد بود.

کادر چهار ستونه در بوت استرپ

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