آموزش طراحی قالب بوت استرپ [گام 3] اسلاید سه ستونه

دوره بوت استرپ فوریه 2016 15

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

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

 

پروژه این جلسه را از باکس زیر میتونید دریافت کنید :

دانلود پروژه این جلسه
لینک دانلود2 مگابایت
دیدگاه ها
  • Aram گفت:

    سلام ……………. دستت درد نکنه ممنون

  • wais گفت:

    خیلی ممنون که این قسمت را هم گذاشتید

  • Mina گفت:

    سلام آقای شفیعیان
    ممنون از لطفتون
    با آرزوی موفقیت برای شما…

  • رضا گفت:

    ممنون
    مثل همیشه عالی بود

  • مجید گفت:

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

  • سعید محمدپور گفت:

    مرسی .جالب بود.

  • siavash گفت:

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

  • نبیل امیری گفت:

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

  • رضااسفندیاری گفت:

    سلام
    دورت گشتم ♥:) ان شاء الله همیشه سلامت و خوش باشی 🙂

  • Mina گفت:

    سلام
    در قالبی که شما طراحی کردید، دو تا منو وجود داره. در رزولوشن پایین زمانیکه روی دکمه منوی اول کلیک میکنم، منوی کشویی روی بقیه قسمتها قرار میگیره و این خوبه. اما زمانیکه روی دکمه منوی دوم کلیک میکنم، چنین اتفاقی نمیفته و باعث میشه بقیه قسمتها به سمت پایین بره؛ به همین خاطر به تگ nav دوم ویژگی z-index دادم؛ ام تاثیری نداشت.
    میشه بفرمایید باید چکار کنم تا منوی کشویی دوم هم روی بقیه قسمتها قرار بگیره؟

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

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

  • علی گفت:

    عالی

  • tox گفت:

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

  • tox گفت:

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

  • tox گفت:

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

  • tox گفت:

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

  • اشکان گفت:

    ممنونم. استاد خودم.تشکر

  • محمد گفت:

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

  • جواد گفت:

    خیلی خوب بود، من بیشتر منتظر دوره آموزش وردپرس هستم، ولی خواهشی که دارم اینه که لطفا دوره وردپرس رو با یه پروژه کاربردی پیش ببرید.

  • مهدیه گفت:

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

  • amir گفت:

    با سلام یه مشکلی داشتم من میرم تو قسمت components و در قسمت Contextual alternatives اتو این قسمت یه کدی میده … این رو من قرارا میدم که اینجا باید برام به صورت جرولی دربیاره که نمیاره
    فکر کنم مشکل از نساختن table باشه ! یه کم درباره این مشکل من رو راهنمایی کنید و اگه میشه کد کامل رو برای من قرار بدیدی ممنون میشم

  • siavash گفت:

    پس چرا نمیاد آموزش جدید 🙁 یه هفته شد

  • amir گفت:

    آقای شفیعیان میدونم سرتون شلوغه هر موقع وقت کردید جواب بدید 😉
    با سلام یه مشکلی داشتم من میرم تو قسمت components و در قسمت Contextual alternatives اتو این قسمت یه کدی میده … این رو من قرارا میدم که اینجا باید برام به صورت جرولی دربیاره که نمیاره
    فکر کنم مشکل از نساختن table باشه ! یه کم درباره این مشکل من رو راهنمایی کنید و اگه میشه کد کامل رو برای من قرار بدیدی ممنون میشم

  • امیر گفت:

    سلام آقا حسین
    دستت درد نکنه

  • mehrshad گفت:

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

  • پرهام گفت:

    خیلی جالب بود.
    لطفا آموزش تبدیل PSD به HTML هم بزارید.?

  • فاطمه گفت:

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

  • آریا گفت:

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

  • آریا گفت:

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

  • hutyuytrd گفت:

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

  • reza گفت:

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

  • برنامه نویس گفت:

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

  • adel گفت:

    سلام مهندس دمت گرم واقعا عالی بود.
    فقط یه سوال ؟!
    من قالبو با بوت استرپ نوشتم حالا چطور این قالبو به یه پنل مدیریت مثه ورد پرس وصل کنم ؟!

  • Hesam گفت:

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

  • سعید گفت:

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

  • R.E گفت:

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

  • علی گفت:

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

  • میلاد گفت:

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

  • morteza گفت:

    chi shod edamash pas ?!!

  • مجتبی گفت:

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

  • reza گفت:

    سلام عالیه … لطفا زوود آپدیت کنید … بی صبرانه منتظریم …

  • fighter31 گفت:

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

  • شاهرخ گفت:

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

  • حسین گفت:

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

  • saeedzare1370 گفت:

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

  • حسین گفت:

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

  • Reza گفت:

    سلام آقای شفیعیان
    2 تا سوال داشتم
    1- این چه ویندوزیه که شما استفاده میکنید
    2- این قالب سایت رو با چی درست کردید فقط با html css boootsrap درست کردید

  • پرهام گفت:

    سلام استاد
    من هر کاری کردم نتونستم با Bootstrap یک منو آبشاری با زیر مجموعه های زیاد درست کنم.
    آیا با Bootstrap میشه چنین منویی رو درست کرد؟

  • Saeed.Sepasi گفت:

    fogholadeyii mohandes…vaghean baes pishraftemun shodi…vaghean mamnunam..hamchenan montazer amuzeshaye hefeyitt hastim…

  • morteza گفت:

    kojaii mohandes in form group man az aval montazer budam be mabhasesh beresi alan nazdik 2 mahe montazeran vali hamchenan khabari nis…

  • alireza گفت:

    آقای شفیعان عزیز واقعاً یه دو نه ای …
    کارت حرف ندارد. بی صبرانه منتظر باقی جلسات آموزشی هستیم.

  • sina گفت:

    دوره ها عالی
    اما هاست دانلودتون ظاهرا ساسپند شده دانلود نمیشم

  • علی گفت:

    اینقدر طولانی شد آپدیت جدید هیچی یادم نمیاد؟؟؟؟ 🙁

  • ابوذر گفت:

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

  • مسعود گفت:

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

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

    سلام
    ممنون از ویدیوهاتون
    یک سوال دارم دیتا بیس چطور به بوت استرپ وصل کنم؟؟

  • shiner گفت:

    سلام و عرض ادب ممنون از همه ی زحماتی که میکشید و صبر و حوصلتون.
    درخواستی دارم اونم اینکه شیوه ی ساخت منوی سایدینگ با آیکون و جزیییاتی که در لینگ زیر خدمتتون ارسال میکنم رو میخواستم بدونم چجوریه!واقعا گیر کردم!
    http://webapplayers.com/inspinia_admin-v2.5/#
    خیلی مردی!

  • 324eqwdwe4t گفت:

    eyval khoobe edame bede

  • fatima.sr68 گفت:

    خیلی ممنون. عالی بود

  • arya گفت:

    اقای شفیعیان همه چی یادمون رفت نمی خواید قسمت بعدی رو بزارید ؟

  • محمد گفت:

    سلام.خسته نباشی حسین آقا.
    کی ادامش رو میخوای بزاری؟
    راستی دوره php مقدماتیتون قبلا ویدیوهاش رو دیده بودم و الان میخاستم دوباره برم ببینمشون ولی صفحه خالی و ارور ۴۰۴ میده!؟از تو سایت برداشتید آموزش php مقدماتیتون رو؟
    در رابطه با خودتون و سایتتون و آموزشاتون هم که نمیشه چیزی گفت ، واقعا عالین

  • علی گفت:

    سلام اقای شفیعی من یه صفحه تو یه ساست ورد پرسی دارم که حدود 30 تا عکس ایکون مانند توش داره که هر کدوم لینک هستند با چه روشی میشه اینا رو مرتب تو صفحه چید و اینکه بهشون یه حالت داد بزرگواری میکنید راهنماییم کنید
    اینم همون صفحه
    http://digitamirgah.ir/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%AA%D8%B9%D9%85%DB%8C%D8%B1%D8%A7%D8%AA-%DA%A9%D9%88%D9%84%D8%B1-%DA%AF%D8%A7%D8%B2%DB%8C/

  • محمد گفت:

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

  • منا گفت:

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

  • iman 313 گفت:

    اقا حسین عزیز ازشما خواهش میکنم اموزش هارو ادامه بده چون واقعا کارت عالیه من که به شخصه لذت میبرم بخش اموزش های مقدماتی php
    هم نمیدونم چرا error 404 میده بازم ممنون بخاطر اموزش های عالی

  • erfan گفت:

    آقای شفیعیان شما از 2014 تا الان 21 ساله موندی؟!!!!!!!!!!

  • ziba گفت:

    سلام آقای شفیعیان لطفا زودتر قسمت بعدی رو هم بزارید من بدجور منتظرم…از زحماتتونم ممنونم.

  • مجید گفت:

    آقای شفیعیان این را حقیقتا می گویم: شما فوق العاده اید. بی صبرانه منتظر قسمت های بعدی طراحی قالب بوت استرپ هستم.

  • یوسف گفت:

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

    همه ما منتظرم ویدیو بعدی هستیم 🙂

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

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

  • هومان گفت:

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

  • سلام گفت:

    سلام اقا حسین ببخشید ” دیگه ادامه نمیدین؟”

  • arsalan132 گفت:

    سلام داداش خداییش عالیه . خیر ببینین و ایشالا هرچی از خدا میخاین بهتون بده ما دعاگوی عزیزانی مثل شما هستیم که بدون هیچ چشم داشتی برای این عزیزان مملکتمون وقت میزارین. خدا قوت
    ما که تازه کاریم استاد، 2 تا سوال برام پیش اومده
    1 . ایا این قالب که اینجوری ساخته میشه روی جوملا جواب میده؟
    2. قالبی که قبلا خودم ساختم و ریسپانسیو نیست. ایا امکان داره همون رو با بوتسترپ ریسپانسیو کنم؟
    سپاس

  • نسیم گفت:

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

  • arsalan132 گفت:

    سلام استاد . ممنون که پاسخ دادین.
    اگه فرصت شد یه کم راهنمایی بفرمایین لطفًا . سپاس

  • بهار گفت:

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

  • سلام گفت:

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

  • محمدرضا گفت:

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

  • مهران گفت:

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

  • مجتبی گفت:

    ممنون حسین اقا
    یه سوال میتونم یه سری از کدهای وبتون روریپ بزنم ؟

    مثلا باکس دانلود و …

  • مجتبی گفت:

    جلسه بعدی کی میاد پس منتظریییممممممممممممممممممممممم مردیم از انتظار :دی

  • هاست لینوکس گفت:

    ممنونم بابت مطالب مفیدی که قرار میدید!

  • 1080068082 گفت:

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

  • رضوی گفت:

    سلام
    چجوزی میشه کاری کرد که عکس های اسلایدر تو سایز مشخصی که ما میدیم بشینه
    یعنی هر عکس با هر سایزی بود توی سایزی که ما از قبل مشخص کردیم بشینه؟؟؟؟

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

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

      • xiaoyu گفت:

        سلام .
        کارتون عالیه اقای شفیعیان.
        فقط اینجوری height رو به جای auto باید مقدار بدیم مثلا 200px.
        ولی اینجوری واسه ریسپانسیو و اینا مشکل پیش نمیاد؟؟چون هر جایی رفتم همه height رو auto گزاشتن واسه عکسا.
        دستتون دردنکنه.