آموزش 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