آموزش Bootstrap--کاربرد کلاس collapse در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت نهم آموزش در زیر قرار داده شده است.

کاربرد کلاس collapse. در بوت استرپ                                            قسمت نهم

قبل از شروع آموزش از شما عزیزان میخوام برای درک بهتر مطالب وارد محیط visual studio شده و کد های آموزش داده شده را نوشته و خروجی را مشاهده کنید

کلاس collacpse. :

زمانی که شما متنی با محتوای زیاد دارید میتوانید با استفاده از این کلاس متن خود را مخفی کنید بدین صورت که با کلیک بر روی تگ مورد نظر متن شما قابل مشاهده خواهد شد که برای این کار می توانیم از تگ a یا تگ button استفاده کنیم

ما در اینجا با استفاده از یک تگ <a></a> متن مخفی شده خود را در زمان کلیک کاربر نمایش می دهیم

ابتدا برای المان لینک  خود "data-toggle="collapse را مینویسیم سپس ID تگی که متنمان در آن قرار دارد را به button  خود اختصاص میدهیم به این صورت :

data-target="#id"

سپس کلاس .collapse را به تگ حاوی متن خود می دهیم

برای تگ a به جای قرار دادن ID در data-target آن را در خصوصیت href تگ a قرار می دهیم

استفده از تگ a :

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

استفاده از button :

<button class=" btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

اجرای کد بالا به صورت زیر می باشد

 

بعد از کلیک :

 

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

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>

میتوانیم از کلاس collapse در پنل هایمان نیز استفاده کنیم به این صورت که pane-body را درون تگی که به آن کلاس panel-collapse را داده ایم قرار میدهیم

نکته : پنل ها در قسمت های قبلی آموزش داده شده اند

 مثال زیر یک پنل collapse شده را نشان می دهد

<div class="container">

  <h2>Collapsible Panel</h2>

  <div class="panel-group">

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>

        </h4>

      </div>

      <div id="collapse1" class="panel-collapse collapse">

        <div class="panel-body">Panel Body</div>

        <div class="panel-footer">Panel Footer</div>

      </div>

    </div>

  </div>

</div>

نتیجه اجرای کد بالا به شکل زیر می باشد :

 

 

مثالی دیگر با استفاده از کلاس list و panel و : collapse

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

نتیجه اجرای کد بالا :

 

برای درک بهتر کد , کد را بنویسید و اجرای آن را مشاهده کنید

 پایان قسمت نهم

 ادامه آموزش در قسمت دهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : http://www.w3schools.com 

آموزش bootstrap3- نحوه استفاده از جداول در بوت استرپ

آموزش bootstrap                                                     

قسمت سوم

کار با جدول ها در bootstrap

کلاس Table  :

با اضافه کردن کلاس table به تگ table جدول مان را به شکل بوت استرپی در می آوریم

کلاس table-striped :

این کلاس سطرهای جدولمان را به صورت یکی در میان خاکستری می کند

کلاس table-bordered :

این کلاس با خط دار کردن جدول سطر ها و ستون ها را مشخص می کند

کلاس table-hover :

با اضافه کردن کلاس hover به جدول هرگاه اشاره گر موس بر روی هر سطر جدول قرار گیرد رنگ آن سطر تغییر می کند

کلاس table-condensed :

کلاس table-condensed خاصیت padding جدول را کاهش میدهد

کلاس table-responsive :

اگر می خواهید جدول شما خاصیت responsive داشته باشد و در دستگاه های با عرض خروجی متفاوت تنظیم شود از این کلاس استفاده می شود

کلاس های Contextual :

همچنین می توان از کلاس های متنی زیر برای تغییر رنگ سطرها و ستون ها استفاده کرد

برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.

تماس با ما: 66120694و66912056 و09122246022

آموزش bootstrap2- کلاس Container و row

آموزش bootstrap

 قسمت دوم

قبل از معرفی و استفاده از کلاس ها ی (استایل ها) بوت استرپ کد زیر را جهت responsive  کردن پروژه به صفحه مان اضافه می کنیم

<meta name="viewport" content="width=device-width, initial-scale=1">    

      .   بخش width=device-width  :

این بخش از کد جهت تنظیم عرض صفحه وب با عرض دستگاه های خروجی می باشد

• بخش   initial-scale=1 :

این بخش از کد میزان زوم اولیه را هنگامی که صفحه برای اولین بار load می شود تنظیم میکند

کلاس container  :

 این کلاس برای ساخت باکس کلی سایت استفاده خواهد شد و تمام کد ها درون این کلاس قرار خواهند گرفت ؛ این کلاس باکسی وسط چین و با عرض 1170 پیکسل را ایجاد میکند

کلاس container-fluid  :

این کلاس یک باکس با عرض فول اسکرین ایجاد میکند

کلاس row :

در بوت استرپ برای ایجاد یک سطر از کلاس row استفاده میشود و هر باکس یا row از صفحه مان را به 12 قسمت تقسیم می کند که این تقسیم بندی ها به وسیله کلاس   .col-*-* مشخص می شود

که بسته به اینکه عرض دستگاه مان چقدر است و صفحه ما چند ستونه است می توانیم کلاس های col را تغییر دهیم

• برای تعیین نوع دستگاه از چهار گزینه lg,md,sm,xs   استفاده می کنیم
• برای مشخص کردن تعدا ستون ها می توانیم 1 تا 12 ستون قرار دهیم

به مثال های زیر توجه کنید :

مثال اول :

مثال دوم :     

برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.

تماس با ما: 66120694و66912056 و09122246022

آموزش bootstrap- bootstrap چیست؟

آموزش bootstrap 

 قسمت اول

Bootstrap چیست؟

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

استفاده از فریم ورک ها چه مزیت هایی دارد ؟

1. بدیلی اینکه یکسری کمد از قبل آماده اند و طراح فقط از این کد ها استفاده میکند و نیازی به نوشتن کد نیست سرعت طراحی را بالا میبرد.
2. اکثر فریم ورک ها از قبیل بوت استرپ در مرورگر های شناخته شده و استاندارد با یک ظاهر و بدون هیچ بهم ریختگی اجرا میشوند.
3. اکثر فریم ورک ها از قبیل بوت استرپ قابلیت رسپانسیو کردن را در اختیار طراح میگذارند.
4. وجود کد های زیبا و استاندارد باعث زیبایی استایل تم خواهد شد.

طریقه اضافه کردن framework بوت استرپ به برنامه Microsoft visual studio 2012

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

2. بر روی نام وب سایت  کلیک راست کرده و گزینه  Manage NuGet Package را انتخاب کنید

3. با نصب کرن Bootstrap css تمامی فایل های فریم ورک  بوت استرپ به برنامه شما اضافه می شود

4. در تگ head  صفحه وب خود چهار گزینه زیر را از پوشه Content  و Script اضافه کنید

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

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

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

برای مشاهده سایر مطالب آموزشی ازwww.afragraphic.ir دیدن کنید.

تماس با ما: 66120694و66912056 و09122246022