آموزش بوت استرپ (گام3) فرم ها و جداول

دوره بوت استرپ فوریه 2015 02

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

دانلود فیلم آموزشی
لینک دانلود27 مگابایت

 

در این قسمت در مورد جداول و فرم ها با بوت استرپ آشنا میشید. در زیر مجموعه کلاس هایی که میتوان برای تگ <table> تعیین کرد را مثال میزنم ، اولین کلاس table است که با اضافه کردن این کلاس جدول بوت استرپی خود را می سازیم:

اگر کلاس table-striped را به تگ <table> اضافه کنیم سطر های جدول یکی در میان خاکستری میشن تا بهتر قابل تشخیص باشند:

table-striped

 

برای اضافه کردن خط دور به خانه های جدول از کلاس table-bordered استفاده میشه :

table-bordered

 

با اضافه کردن کلاس table-hover وقتی موس روس هر سطر از جدول میره اون سطر تیره تر میشه :

کلاس table-condensed خاصیت padding جدول را کاهش میده و باعث میشه جدول کوچیکتر بشه :

اگر میخواهید جدول شما در رزولوشن های کوچک تنظیم و رسپانسیو باشند تگ <table> را درون کلاس table-responsive قرار دهید :

 

هر یک از کلاس های active , success , info , warning و danger را میتوان به هر سطر در جدول <tr> یا هر خانه <td> نسبت داد و رنگ خاصی را برای هر کدام برگزید :

Contextual

خب بخش جدول تمامه و میریم سراغ فرم ها ؛ در فرم های بوت استرپی تگ های <input> , <textarea> و <select> را باید درون کلاس form-group قرار داد :

این کلاس هر کدام از آبجکت ها را در یک سطر قرار داده و کمی حاشیه نیز برای آنان در نظر میگیرد .  سپس به هر کدام از تک های مذکور (<input> – <textarea> – <select>) کلاس form-control را اضافه میکنیم :

با اضافه کردن کلاس های بالا فرم های معمولی استایل فرم های بوت استرپ را به خود میگیرند و عرض هر کدام برابر 100% خواهد شد:

horisental

 

اما اگر نیاز بود که آبجکت های یک فرم همگی در یک سطر و افقی باشند باید کلاس form-inline  را به تگ <form> نسبت دهیم:

inline

کلاس دیگری با نام form-horizontal که دقیقا بر عکس form-inline عمل میکند و فرم ما را عمودی نشان میدهد.

اما برای چک باکس ها بجای کلاس form-group از checkbox استفاده میشود :

همچنین برای رادیو باتن نیز از کلاس radio استفاده میشود :

برای غیر فعال نمودن رادیو باتن و چک باکس میتوان کلاس disabled را بهشان اضافه کرد.

با اضافه کردن هر کدام از کلاس های has-success ، has-warning و has-error میتوان رنگ های هر آبجکت را تغییر داد و استایل پیشفرض فرم را عوض کرد :

برای بزرگتر کردن هر آبجکت میتوان کلاس input-lg و برای کوچکتر کردنش میتوان کلاس input-sm را استفاده کرد:

 

 

دیدگاه ها
  • ghadirkiani گفت:

    سلام
    بسیار عالی
    فک کنم تمام ویدئو هایی رو که قرار دادید دانلود کردم
    بسیار عالی
    انشاا… با قدرت ادامه بدید و دل سرد نشید

    • حسین شفیعیان گفت:

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

      • hossein8867 گفت:

        با سلام.بسیار متشکرم بابت این آموزش های عالی و مطمئنم همه کاربران از این آموزش ها و این سایت عالی استقبال می کنند.یه سوالم دارم.وقتی یک می سازیم و یه div با کلاس col درونش مگه نباید این div دوم بیفته درون div اول مثل css یا اصلا کلا تو بوت استرپ قضیش فرق میکنه یعنی div دوم تو div اول هست ولی چون هر کدوم از div ها شامل 12 قسمت می شوند div دوم به div اول می چسبد؟

        • حسین شفیعیان گفت:

          سلام و خواهش
          به جان خودم نفهمیدم منظورتون چیه !
          اگر صبر کنید چند تا قالب را بصورت نمونه آموزش میدم

          • hossein8867 گفت:

            منظورم اینه که دو تا div داریم که دومی داخل اولی است پس محتویات دومی شامل اولی هم می شود شبیه به css.سوال اینجاست که وقتی div با کلاس row را می سازیم و div با کلاس col را درون آن قرا می دهیم یا مثلا این دو را داخل div با کلاس container قرار می دهیم جرا دومی درون اولی نمی افتد و به آن می چسبد؟

          • حسین شفیعیان گفت:

            شما قسمت دوم را دیدن؟ از کلاس col برای ایجاد ستون استفاده میشه و ستون ها در کنار یکدیگر قرار میگیرند !
            اگر مورد قابل توجیح نبود از گزینه افزودن کد در دیدگاه استفاده کن و مثال بزن تا بهتر راهنماییت کنم

  • 3pa گفت:

    همیشه تکی!
    درخواست زیاده بروز کن!خخ

  • hossein8867 گفت:

    سلام بازم نشد کدها نمایش داده نمیشن.کاش رو سایت بخش پیوست رو اضافه کنی.من روی این آدرس آپلودش کردم uplod.ir/2ax8ers9ijsv/_strap.zip.htm

  • kamal گفت:

    عشقی مستر پروگرامر

  • mehran گفت:

    سلام مهندس
    خسته نباشی..مثل همیشه عاااااالی هستی.
    مرسی

  • mahjoob گفت:

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

    • حسین شفیعیان گفت:

      سلام
      بنده همین الان تست کردم مشکلی نداره و دانلود میشه ، ممکنه ISP تون مشکل داشته باشه با قند شکن تست کنید. برای دانلود هم میتونید از برنامه ی FlareGet استفاده کنید.
      بله سایر دوستان هم درخواست مکرر بروز رسانی این بخش رو دارند و حتما ادامه خواهد داشت

  • ali.h گفت:

    خسته نباشید اقای شفیعیان…
    آقای شفیعیان سوالی ک واسم پیش اومزه اینه ک بوت استرپ قابلیت z-index رو هم داره…؟برای مثال من میخوام ی قالب طراحی کنم ک بک گراندش کامل اسلایدشو باشه و روی اون مطالب سایت…با بوت استرپ میشه؟اگه میشهی راهنمایی کوچولو کوچولو گوچولو:)))) کنید چون واقعا خیلی زور بهش نیازدارم…
    تشکر و مرسی

    • حسین شفیعیان گفت:

      سلامت باشی علی جان
      من نمی دونم شما دوستان چرا اینقد عجله دارین ، صبر کنید گام به گام میریم جلو
      بله به همون خاصیت Z-index میشه

  • 3pa گفت:

    آقا لینک خرابه!

    • حسین شفیعیان گفت:

      مرسی از هشدار شما ، مشکل حل شد !

      • 3pa گفت:

        ممنون از پاسخ گوییتون ولی بازم خرابه که!

        • حسین شفیعیان گفت:

          سرور را عوض کردیم و سیستم شما کش سرور قبلی را نگه داشته ، مدتی صبر و مجدا تست کنید

          • 3pa گفت:

            ممنون از اطلاع رسانیتون دانلود کردم
            میگم ببخشید سوال بی ازتباط به مطلب این میپرسم میشه بگید چجوری قسمت عضویت برای کاربران سایت ایجاد کنم؟(وردپرسیم)
            ترجیحا مثل مال خودتون هم باشه خوبه
            پیشاپیش ممنون!

  • arezoo گفت:

    سلام
    فوق العاده بود مثل جلسات قبل
    ممنون

  • hossein8867 گفت:

    با سلام وتشکر.من دو تا مشکل دارم یکی اینکه وقتی یه div تعریف می کنم که کلاسشو برابر با container-fliud قرار می دهم و به div داخل آن که مثلا header یا nav است کلاس row را می دهم صفحه overflow-x پیدا میکنه بدون اینکه یه خط کد css نوشته باشم یا شامل محتوا باشه.یه مشکل دیگه هم اینکه من وقتی div با کلاس container-fliud تعریف میکنم و یه سری div دیگه درونش،در رزولوشن های پایین از عرض صد در صد کمتر میشه و وقتی div های داخلش رو پاک میکنم درست میشه البته من هر جا width در نظر گرفته بودم پاک کردم تا خود بوت استرپ برای div ها و دیگر المنت ها width تعیین کنه.

  • hossein8867 گفت:

    سلام.چون می خواستم فایل پیوست کنم ایمیلش کردم.

  • hossein8867 گفت:

    سلام داداش از طریق ایمیل جواب ندادی برای همین آپلودش کردم در این آدرس uplod.ir/ex4eh65ec3xo/_strap-test.zip.htm
    خیلی ممنون.

  • ghadirkiani گفت:

    سلام
    منتظر اموزش جدید هستیم
    طیق وعده امروز منتظریم

  • kamal گفت:

    آقا حسین دوباره که سایت راکد شد !

  • حسن گفت:

    درود
    خسته شدم از بس اومدم تو سایت و خوابیده بود؟
    کی مطلب جدید میذاری ؟

  • kamal گفت:

    سلام
    آیا برای برنامه نویس شدن باید اگثر زبان های برنامه نویسی را بلد بود ؟ یا مهم این است که یکی بلد باش و حرفه ای باش ؟

    • حسین شفیعیان گفت:

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

  • همت گفت:

    درود
    وب سایت خیلی جالبی دارید .
    میخواستم بپرسم من فقط تو کار برنامه نویسی وب هستم
    الان دارم php یاد میگیرم بعدشم باید asp.net را یاد بگیرم
    آیا لازم به جاوا هم هست ؟ من فقط میخوام تو حوزه وب فعالیت کنم
    ممنون

    • حسین شفیعیان گفت:

      درود
      مرسی تشکر ، شما php را کامل و تخصصی کار کنید و نیازی به asp.net و java نیست

      • همت گفت:

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

        • حسین شفیعیان گفت:

          شما مو میبینید و من پیچش مو
          این صحبت من نتیجه 4 سال سابقه کاری تخصصی من بوده و انتظار نداشته باش در عرض 1 روز متوجه این قضیه بشی
          موفق باشی

  • 3pa گفت:

    سلام استاد!!!!!
    بخش php سایتتون خیلی جالبه آموزش هاش حیف مدت هاست آپدیت نمیشه! پایه های php رو از خودتون یاد گرفتم اودمدم هم یه تشکری کنم بابتشون هم مشکلم رو مطرح کنم لطفا بهم جواب بدید کارم گیره
    دارم یه سیستم آزمون میسازم قسمت ثبت نام و لاگین رو با PDO و.. تکمیل کردم حالا رسیدم به صفحه خود آزمون میخوام آزمون زمان داشته باشه و بعد از پایان زمان آزمون به طور خودکار تا جایی که به سوالات جواب داده در دستابیس ذخیره بشه بعدش به طور اتوماتیک کاربر که در حال دادن آزمونه به صفحه دیگه انتقال پیدا کنه من موندم که چجوری بعد از پایان به طور اتوماتیک تاجایی که پاسخ داده رو ذخیره کنم و بطور خودکار انتقال بدم اگه راهی هست لطفا راهنمایی کنید خیلی کارم گیره
    پیشاپیش تشکر!

  • رضا گفت:

    سلام
    سوال ؟
    من هم در اینترنت خیلی گشت زدم همه میگن درآمد Asp.net بهتره
    و میگن اگه برای کار شخصی میخوایید php یاد بگیرید و اگه برا پول درآوردن میخوایید Asp.net
    از طرفی هم میگن که php محبوب ترین زبان برنامه نویسی دنیاست
    چرا Asp.net درآمدش بیشتره ؟
    من از خیلی پرسیدم گفتن هر دو عملکرد یکسانی دارند و نسبت به هم برتری ندارند
    این رو گفنم چون در یوتیوب هم که سرچ کردم انیمشن انگلیسی بود که میگفت اگه بازار کار بهتر میخواهید asp.net و اگر برای کار شخصی میخواهید php را انتخاب کنید

    • kamal گفت:

      درود دوست عزیز
      من خودم php کارم و اینو بدون
      تو یوتوب و هرجای دیگه که میخوان بگن بگن
      تو تو هر رشته ای که حرفه ای باشی پول درمیآری
      حالا چه Asp.net چه php
      ولی نظر من صد در صد بر php است چون خیلی شیرین تره و کار باهاش باحال تر
      و ایضا اگر بخوای از وردپرس و غیره استفاده کنی فقط php بدرت میخوره
      اگه asp بخوای باید حتما بری یه زبون دات نت یادبگیری ولی برای php نیازی نیست
      اگه از من میشنوی برو php یادبگیر
      دستت تو این زبان خیلی باز تره
      امیدوارم سودمند بوده باشه

    • سیدرضا سیدموسوی گفت:

      سلام اقا رضا اگه از اي اس پي استفاده كني امنيت پاييني داره ولي راحت تر ميتوني چيزي در ست كني و نيازبه سخت افزار بالايي داره چون من خيلي با اي اس پي كار كردم ولي پي اچ پي چون از سي و سي پلاس مشتق شده قوي تره وامنيت بالاتري داره چون خودم تست كردم و فرق بين اين دو تا رو ديدم من با اينكه پي اچ پي بلد نبودم وبا كمك اقاي برنامه نويس پي اچ پي كار شدم و فهميدم پي اچ پي خيلي بهتره و قدرت اون بالاست

  • 88dream گفت:

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

    • حسین شفیعیان گفت:

      سلام و سلامت باشید
      خیلی متشکرم از بازتاب خوبتون
      در مورد بروز رسانی باید بگم مدتیه گرفتارم و فعلا امکانش نیست اما سعی میکنم حداقل دوره بوت استرپ را زود ضبط و منتشر کنم
      موفق باشید

  • Hassanhaji گفت:

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

    • حسین شفیعیان گفت:

      سلام و سلامت باشی
      سعی میکنم قسمت بعدی را در تعطیلات عید ضبط و منتشر کنم

  • سیدرضا سیدموسوی گفت:

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

  • سیدرضا سیدموسوی گفت:

    سلام حسين جان خوبي
    بعضي سايت ها هستند از طريق اينترنت اس ام اس ميفرستن ميخواستم بدونم چجوري ومن ميتونم همچين سايتي راه اندازي كنم

  • سیدرضا سیدموسوی گفت:

    سلام حسين جان
    اگه من بخوام ميزبان باشم وپنل پيامك بفروشم بايد چيكار كنم

    • حسین شفیعیان گفت:

      یه سری شرکت هایی هستن نمایندگی فروش پنل پیامک میپذیرند که متاسفانه بنده سراغ ندارم

  • سیدرضا سیدموسوی گفت:

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

  • سیدرضا سیدموسوی گفت:

    سلام حسين جان وقتت بخير
    از اموزش ها خبري نشد

  • reza073 گفت:

    هیچکدوم فایل ها دانلود نمشوند..!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    چرا

  • قیمت لحظه ای سکه گفت:

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

  • سیدرضا سیدموسوی گفت:

    سلام حسين جان
    بهترين كتاب اموزش كالي لينوكس كه از صفر تا صدشو اموزش بده سراغ داري

  • hamedshademan گفت:

    سلام بسیار متشکرم بابت آموزش عالیتون فقط قسمت بعدی رو کی می گذارید در سایت

    • حسین شفیعیان گفت:

      سلام و خواهش
      قول صد در صد نمیدم چون مشغله کاری دارم اما قصد دارم قسمتی از وقتم را در طول روز برای ضبط ویدئو بزارم

  • seyedreza گفت:

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

    • حسین شفیعیان گفت:

      سلام و سلامت باشید
      شما ابتدا باید به سیستم عامل های معمولی گنو / لینوکس کارکنید تا حرفه ای بشید بعد برید سراغ کالی

  • seyedreza گفت:

    سلام حسین جان من با لینوکس کار کردم با بک ترک هم کار کردم ولی کالی فک کنم فرق کنه

  • danger1875 گفت:

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

  • mahdisoser گفت:

    اقای شفیعیان خیییییییییییییلی گلی

  • ehsan68 گفت:

    اقا دمت گرم واقعا عالیه کارت.تا حالا 3تاشو دانلود کردم حرف نداشت.اگه میشه اموزشهای دیگه هم بزار مثلا فریم ورکهای php.تو اینترنت زیاد ریخته.اما چیزی که تو داری طرز بیان جالبته و اینکه انگار میدونی مخاطبت چی میخواد.بازم دستت درد نکنه عالی بود

  • مجتبی سالک گفت:

    بسیار عالی. مثل بقیه آموزشا!!!!!!

  • elix گفت:

    این قالب http://rust.zentexgaming.ir/ با بوتسترپ طراحی شده ؟ ؟؟
    یه کم درباره این قالب توضیح بدید چیا توش به کار رفته

    • حسین شفیعیان گفت:

      اکثر اجزا این قالی اختصاصی اند و فقط از گرید بندی های بوت استرپ استفاده شده

  • elix گفت:

    آقاق حسین ممنون برای وقتی که گذاشتید و قالب رو نگاه کردید شما فرمودید فقط رسپانسیو کردنش با بوتسترپ بوده
    من میخوام چنین قالبی طراحی کنم . اگه به button هاش دقت کنید انگار بوتسترپه
    میشه بیشتر توضیح بدید با چه کدنویسی و چه برنامه ایجاد شده
    ممنون برای پاسخگوییتون

  • Jafari گفت:

    بسیار عالی
    محشرید شما هم مطالب و هم فیلم ها عالیه. مرسی

  • فاطمه گفت:

    واقعا سایتتون عالیه. خدا قوت. خیلی ممنون که علمتون رو در اختیار بقیه هم میذارید.

  • علی گفت:

    سلام
    وظیفه خودم دونستم تا از زحماتتون تشکر کنم ، واقعا ممنون ، آموزش هاتون بسیار عالیه واقعا ، امیدوارم همینطور قدرتمند به کار ارزشمندتون ادامه بدید و ما هم بتوانیم از توانایی های شما بهرهمند بشیم ، براتون آرزوی بهترین ها رو دارم . هر جا هستید همیشه شاد ، سلامت و پیوز باشید . من منتظر آموزش تبدیل قالب های طراحی شده با بوت استرپ به قالب وردپرس هستم . باز هم ممنون !!!!

  • omid گفت:

    سلام اقای شفیعیان اموزشاتون عالیه حرف نداره ممنون از زحماتتون

  • نسترن گفت:

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


Time limit is exhausted. Please reload CAPTCHA.