آموزش بوت استرپ [گام 10] InputGroup

دوره بوت استرپ اکتبر 2015 20

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

دانلود فیلم آموزشی
لینک دانلود23 مگابایت11 دقیقه

 

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

اما جزوه ی این جلسه :

exaple

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

برای اینکه این ورودی متن را به شکل inoput group در بیاوریم باید کلاس input-group-addon را بهش اضافه کنیم :

 

size
برای تغییر سایز میتونیم از 2 کلاس input-group-lg و input-group-sm استفاده کنیم :

 

checkbox

مقادیر داخل کلاس input-group-addon میتوانند هر چیزی اعم از لوگو ، عکس ، رادیو باتن و … باشند :

 

btn-addon

برای اینکه از دکمه در کنار ورودی متن استفاده کنیم شیوه کمی متفاوت است ، اینبار بجای کلاس input-group-addon از input-group-btn استفاده میشود :

 

دیدگاه ها
  • سجاد 7 گفت:

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

  • کمال گفت:

    درود بر آقای برنامه نویس
    آقای برنامه نویس تا قسمت 8 که قالب یاددادی کارکردم و خیلی با بوتسراپ آشنا شدم و تونستم که پروگرس بار و تب بندی و …رو هم وارد کنم
    خلاصه خیلی دمت گرم خیلی چاکرم

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

      درود بر آقا کمال
      لطفا داری کمال جان ، موفق باشی
      فکر میکنم 5 جلسه دیگه به آخر دوره بوت استپ نمونده ، از جلسه 12 میریم سراغ بخش جاوا اسکریپت و زود تمومش میکنم

  • محمد گفت:

    سلام
    ابتدا از آموزش تشکر می کنم
    جلسات اول تا هشتم خیلی خوب بود و گفته بودین دو سه تا قالب حرفه ای کار می کنین اما الان به نظر میرسه یجورایی می خواین از سر خودتون باز کنین. تو ویدیو گفتین هر 10 جلسه یه قالب کار می کنین الان میگین 5 تا جلسه بیشتر نمونده!!! البته خب یجورایی حقم دارین حتما براتون نمیصرفه اما کاش از اول قول نداده بودین. به نظر من اگه دوره رو با همون جدیت قبلی و با یک هزینه کم که واسه خودتونم بصرفه ارایه کنین همه حاضرن که یه هزینه ی کم رو پرداخت کنن یا میتونین اون روند جدی رو در اختیار کسانی که پول میدن قرار بدین و برای بقیه همین 4 یا 5 جلسه رو که قرار بود بذارین، چون واقعا حیف این زحمات شماست.
    موفق باشید

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

      سلام
      خواهش میکنم
      اصرار شما کاربران باعث شده که من سریعتر این دوره رو تموم کنم !
      همانطور که گفتم تا پایان دوره 2 یا 3 قالب با بوت استرپ خواهیم سایخت که اولیش رو تقدیمتان کردم و بعد از 5 جلسه 2 جلسه مجزا ضبط میکنم برای ساخت قالب 😉
      قسمت های اصلی بوت استرپ تموم شده و بقیه موراد فقط نیاز به برسی و آنالیز داره که من دارم سعی میکنم هر چه زودتر ارایه بدم تا دوره به اتمام برسه
      از طرفی ورژن جدید بوت استرپ در حال انتشاره و من برای ورژن جدید برنامه هایی نیز دارم …

  • مبین گفت:

    دمت گرم تو وقتی تا جلسه 8 یاد دادی من بقیشو خودم تا ته رفتم فاندیشنم تا تهش یاد گرفتم و ی قالبم تو وردپرس مارکت گذاشتم :دی امیدوارم موفق باشی
    به بلاگ منم سر بزن mubonit.blog.ir

  • حسین محسنی گفت:

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

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

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

  • امیر حسین گفت:

    آموزش خوبی ممنونم

    یه سوال ، اگه داخل کد های بوت استرپ دست ببریم طوری که زیاد تغیرات ایجاد نشه مثلا تغییر رنگ ها یا استفاده از کلاس Blue به جای primary مشکلی ایجاد میکنه؟؟

    من زیاد این کارو انجام دادم تنها مشکلی که داشت این بود که یادم میرفت چه کلاسی تعیین کردم 🙂

  • یاسر گفت:

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

  • علیرضا گفت:

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

  • مبین گفت:

    ممنون از زحماتی که میکشی ولی ی نکته این سایت برای برنامه نویسی ساختی بوت استرپ فریم ورک طراحی هستش و برای طراحاست ن برنامه نویسا (البته خودم استفاده میکنم :دی ) ممنون میشم بجای طراحی به مباحثی مثل asp بپردازی ک کمتر بشون توجه میشه
    موفق و پیروز باشی

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

      بله متوجه هستم ، این دوره رو تموم کنم ببینم چی میشه دیگه 🙂
      مرسی

    • علیرضا گفت:

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

  • کاظمی گفت:

    سلام و درود

    سوالی که بنده داشتم و درک ان برام گیج کننده هست اینکه من سایت هامو با استفاده از جوملا پیاده سازی می کنم
    چطوری میتونم توی اونها از بوتستراپ استفاده کنم؟
    ایا امکانش هست که یک ویدئو برای این مبحث تهیه بفرمایید؟

    خب شما مثلا منویی درست می کنید و یک کلاس به اون می دهید.اما من برای جوملا فقط یک پوزیشن برای منوهام درست می کنم و در جوملا ماژول منو رو نصب می کنم.چطور می تونم کلاس های بوتستراپ رو به اونها اضافه کنم

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

      سلام
      تو بخش طراحی که اصن ربطی به جوملا نداره ، شما قالب رو استاتیک پیاده میکنی و در نهایت توابع جوملا رو درش سوار میکنی

  • AFKA گفت:

    سلام من به تازگی با سایتتون آشنا شدم و خیلی ممنونم بخاطر مطالب مفیدتون اما لطفا آموزش بوت استرپ رو سریع جمعش نکنین بخش جاوا رو اصلا نگفتین ؟!!

  • ممد گفت:

    سلام حاج حسین
    حاجی این آموزشا رو بذار
    ما طرفدارتیم
    ولی خدایی من شیرازیم حال ندارم هی پیام بدم

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

      سلام ، مرسی
      بله درکتون میکنم ، انشالله تا ماه آینده این دوره تموم میشه

  • امیر گفت:

    مهندس جان فایل دانلود نیست
    ممنون از وقتی که گذاشتی

  • رضا گفت:

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

  • masoumeh گفت:

    اقا دمتون گرم
    خیر دنیا و اخرت رو ببینین
    ایشالله هر چی میخواین بهش برسین