میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 2
  • آی پی دیروز : 11
  • بازدید امروز : 44
  • باردید دیروز : 17
  • گوگل امروز : 0
  • گوگل دیروز : 0
  • بازدید هفته : 156
  • بازدید ماه : 359
  • بازدید سال : 22,868
  • بازدید کلی : 22,868
  • آموزش كار با رنگ ها در Bootstrap 4


    در اين مطلب از سايت ميرممد قصد دارم شما را با كلاس رنگ ها در Bootstrap 4 آشنا كنم.در نسخه ي چهارم بوتسترپ چندين رنگ به رنگ هاي نسخه سوم اضافه شده كه سعي ميكنم تمامي آنها را با مثال همراه با تكه كد براي شما دوستان قرار بدم.

    رنگ هاي موجود در بوتسترپ 4 شامل رنگ ها در عكس زير ميباشد :

    رنگ ها در Bootstrap 4

    كلاس هاي رنگ متن در بوتسترپ چهار شامل موارد زير هستند :

    .text-muted .text-primary .text-success .text-info .text-warning .text-danger .text-secondary .text-white .text-dark .text-light

    كه كلاس رنگ text-body رنگ انتخاب شده ي پيش فرض در بوتسترپ چهار ميباشد.

    نمونه كد براي استفاده از كلاس هاي رنگ متن در بوتسترپ :

    <p class="text-muted">متن muted</p>
    <p class="text-primary">متن primary</p>
    <p class="text-success">متن success</p>
    <p class="text-info">متن info</p>
    <p class="text-warning">متن warning</p>
    <p class="text-danger">متن danger</p>
    <p class="text-secondary">متن secondary</p>
    <p class="text-dark">متن dark</p>

    خرجي كد هاي بالا به ترتيب :

    متن muted

    متن primary

    متن success

    متن info

    متن warning

    متن danger

    متن secondary

    متن dark

    از اين رنگ ها در لينك هاي سايتتون هم ميتونيد استفاده كنيد يك نمونه كلاس رنگ بوتسترپي روي لينك با رنگ وارنينگ :

      <a href="#" class="text-warning">لينك Warning </a>

    خرجي كد بالا :

     لينك Warning

    همونطور كه خودتونم ميبينيد وقتي كلاس رنگ رو به يك لينك ميديم لينك رنگ ميگيره و وقتي روي لينك ميريم يا همون هاور ميكنيم رنگ لينك يك مقدار تيره تر از حالت عادي ميشه.

    دو كلاس رنگ ديگه هم هست كه شامل text-black-50 و text-white-50 ميباشند. كلاس text-black-50 متن رو 50 درصد كمرنگ تر ميكنه و براي جاهايي استفاده ميشه كه بكگراندمون سفيد باشه و كلاس text-white-50 متن رو 50 درصد كمرنگ ميكنه و براي جاهايي استفاده ميشه كه بكگراند سايتمون سياه يا تيره رنگ باشه.

    يك نمونه كد از كلاس text-black-50 :

    <p class="text-black-50">متن با 50 درصد شفافيت</p>

    خرجي كه بالا :

    متن با 50 درصد شفافيت

    كلاس رنگ هاي بكگراند در Bootstrap 4

    در بوتسترپ چهار يك سري كلاس براي رنگ دادن به بكگراند سايت وجود داره كه باز از همون رنگ هايي كه بالا با تصوير نشونتون دادم استفاده ميكنه.اين كلاس هاي رنگ شامل موارد زير هستن :

    .bg-primary  .bg-success  .bg-info .bg-warning  .bg-danger  .bg-secondary  .bg-dark .bg-light

    اين هم تكه كد استفاده از كلاس رنگ پسزمينه در bootstrap 4 :


      <p class="bg-primary">primary</p>
      <p class="bg-info">info</p>
      <p class="bg-warning">warning</p>
      <p class="bg-danger">danger</p>
      <p class="bg-secondary">secondary</p>
      <p class="bg-dark">dark</p>
      <p class="bg-light">light</p>

    خروجي كد هاي بالا به ترتيب :

    primary

    info

    warning

    danger

    secondary

    dark

    light

    بقيه ي كار ديگه بستگي به خلاقيت خودتون داره مثلا در كد زير من اومدم با تركيب دو كلاس به پاراگرافم بكگراند پرايمري دادم و متن داخل پاراگراف رو سفيد انتخاب كردم :

    <p class="bg-primary text-white">متن پاراگراف</p>

    خروجي كد بالا :

    متن پاراگراف

     

    اگر سوالي داشتيد ميتونيد از بخش نظرات كه پايين هستش سوالتونو بپرسيد

    ممنون بابت وقتي كه براي خوندن مطلب گذاشتيد.



    پيشنهاد ميكنم از مطالب زير نيز استفاده كنيد :

    آموزش DocType در HTML 5

    صفحه بندی در Bootstrap 4

    آموزش کار با Progress Bar در Bootstrap 4

    آموزش کار با Badge در Bootstrap 4

    آموزش کار با Button در Bootstrap 4

    آموزش کار با Alerts در Bootstrap 4

    آموزش کار با Jumbotron در Bootstrap 4

    آموزش کار با جداول در Bootstrap 4

    آموزش استفاده از Tooltip در Bootstrap 4

    آموزش استفاده از تگ video در HTML5

    بازدید : 349 چهارشنبه 11 مهر 1397 : 8:37 نظرات ()
    ارسال نظر برای این مطلب

    نام
    ایمیل (منتشر نمی‌شود) (لازم)
    وبسایت
    :) :( ;) :D ;)) :X :? :P :* =(( :O @};- :B /:) :S
    نظر خصوصی
    مشخصات شما ذخیره شود ؟ [حذف مشخصات] [شکلک ها]
    کد امنیتیرفرش کد امنیتی