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

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

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

FireShot Capture 1 - آقای برنامه نویس - http___mrprogrammer.net_

ویدیو این قسمت را از باکس زیر میتونید دانلود کنید :

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

 

در این قسمت چهار چوب و هدر را پیاده کردیم . در قسمت بعدی که قول میدم سریع تر پیش بریم و تا 2 جلسه آینده قالب رو تکمیل کنیم ساید بار و محتوای قالب رو پیاده خواهیم کرد.

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

دانلود پروژه این قسمت
لینک دانلود1 مگابایت
دیدگاه ها
  • navid khorsand گفت:

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

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

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

  • Aram گفت:

    خسته نباشی………….خدا قوت

  • مهران گفت:

    مهندس یه سوال به نظرت bootstrap خوبه ؟ یا Zurb foundation ؟ با کدومش سریع تر میشه یه قالب خوب ساخت؟

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

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

  • پرهام گفت:

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

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

      مرسی ، اگه اولین قالب هست عالیه . اولین قالبی که من طراحی کردم خیلی ضایع بود !
      چیدمانت خوبه ولی باید تو رنگبندیش کار کنی

  • سجاد 7 گفت:

    سلام حسین جان کارت عالیه حرف نداره داش
    چی شد گروه و کانال تلگرام پاک شد ؟؟؟

  • علی گفت:

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

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

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

  • hey the گفت:

    سلام واقعا این آموزش ارزشش از همه آموزش های وب سایت بالاتره به نظرم الویت تکمیل آموزش ها طراحی قالب با بوتسترپ باشه بهتره

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

    سلام. ایشالا این آموزشو هرچه زود تر تموم کنید تا من یه سایت بتونم بسازم .جواب زحمتتاتنو بدم.مرسی که آموزش های به این خوبی میزاری.صداتم خیلی خوبه.فقط یه پیشنهاد .اگه میشه واسه آموزشا از دریم ویور استفاده کنید چون واقعا خیلی سرعت و میبره بالا و زمان کمتری به هدر میره.واسه قسمت بعد این دوره اگه میشه کامل توضیح بدین چطور 3 ستون در صفحه میزاریم که دقیقا ستون وسط، وسطِ وسط باشه .
    در ضمن وقتی میخوام نظر بزارم با این مشکل رو به رو میشم.خطا: Time limit is exhausted. Please enter CAPTCHA value again. لطفا دکمه‌ی بازگشت مرورگر خود را بفشارید و مجددا تلاش کنید.(تایمش خیلی کمه بنظرم)
    ممنون

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

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

  • Mr.Gray گفت:

    جدا از اغراق یا اقراغ 😀
    من از اول شروع کردم به دیدن اموزشای بوت استرپتون-وو اونچه که من تو این مدت کار میکردم با این فریم ورک مقایسه کردم-بسیار عالی بود
    تقریبا نصف بیشتر آموزش هارو شب اول دیدم بس که قشنگ بود-آموزش جدا شیوه آموزش جدا 😀
    خیلی عالی توضیح میدی-یه جورایی خودمونی خودمون واسه همین شیرین بود-
    اما ی یکم اون وسط مسطاش سرد شدی و اموزش هارو میخاستی سریع تموم کنی البته دلتم نمیومد معلوم بود P-:
    در کللل زیاد حرف زدم امیدوارم موفق باشی-شخصا به عنوان یه جوجه اسکریپتی حال کردم D: ممنون آقای برنامه نویس 😉

  • omid گفت:

    درود بر شما خیلی عالی بود واقعا ویدیوهای شما توی نت تکه! امیدوارم ادامه داشته باشه. موفق باشید 🙂

  • amin گفت:

    خوبه اینو حتما به اتمام برسونید. 🙂

  • tupac گفت:

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

  • karami گفت:

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

  • هومان گفت:

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

  • رضا گفت:

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

  • Mohsen گفت:

    سلام
    اگه میشه پایگاه داده Mysqli یا PDO رو به صورت شی گرا هم آموزش بدید
    خیلی ممنون

  • mahsa hoseini گفت:

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

  • mahsa hoseini گفت:

    عذرخواهی میکنم مثل این نمونه سایت http://www.templatemonster.com/demo/57549.html

  • IMAN313 گفت:

    واقعا عالیه مرسی که ادامه دادین

  • مهدیه گفت:

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

  • Ali.n گفت:

    خسته‌ نباشید من منتظر این اموزش ها بودم ، دستت دردنكنید

  • mahsamn گفت:

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

  • امیر گفت:

    سلام آقا حسین خسته نباشید

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

    آیا میتونم با این تفاسیر ، این آموزش و ادامه اون رو مشاهده کنم ؟

    ممنون

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

    سلام . منوی دوم من ، زمانی که توی اندازه sm و xs هست هرچی اندازه صفحه کوچیک تر باشه ارتفاعش بیشتر میشه
    لطفا زودتر جواب بدین

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

    سلام . منوی دوم من ، زمانی که توی اندازه sm و xs هست هرچی اندازه صفحه کوچیک تر باشه ارتفاعش بیشتر میشه

  • zs گفت:

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

  • سپهر گفت:

    سلام :
    یک سوال مهم داشتم.
    اگه دقت کرده باشی کلاس container عرض 1170 پیکسل رو داره حالا اگه من بخوام یک سایت با عرض 1300 پیکسل داشته باشم چکار کنم؟

    مثلا من سایت زومیت رو دیدم این سایت از بوت استرپ استفاده کرده ولی عرض اصلی سایتش 1300 پیکسل هست.

    جریان چیه؟

  • یاشار گفت:

    برادر تو این فیلم اشاره ب 15 جلسه میشه … لطفا لینکشو برام بزارید … من نتونستم تو سایتتون پیداش کنم

  • یاشار گفت:

    برادر پیدا کردم … زحمت نکش … ممنون

  • پدرام گفت:

    سلام
    تشکر فراوان از توضیحات و اموزش

  • امیر گفت:

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

  • مینا گفت:

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

  • منا گفت:

    اقا دمت گرم.

  • مجتبی گفت:

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

  • mahdi3751 گفت:

    سلام
    چطور میشه ارتفاع منوی فیکس بالا رو کوچیک کرد . مث منوی خوددتون ؟
    من با css به هر کاری کردم نشد .

  • slasher گفت:

    لینک های دانلود مشکل پیدا کرده لطفا درست کنید ارور Account Suspended میده ممنون

  • امیر گفت:

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

  • امیر گفت:

    همین قالبه سایت اوبونتو نیوز

  • 2 گفت:

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

  • مهدی گفت:

    اقای شفیعیان لطفا” با شماره ای که در بخش ارتباط با ما گذاشتید در شبکه های اجتماعی عضو بشد تا باهاتون بتونیم ارتباط برقرار کنیم

  • رضوی گفت:

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

  • xiaoyu گفت:

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

  • Deniz گفت:

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

  • جعفری گفت:

    سلام من چند صفحه اچ تی ام الی دارم که دیزان طراحی کردم
    و یک پروژه asp.net mvc ولی نمیدونم چطوری می توانم از صفحه اچ اتی ام الی توی پروژه ام استفاده کنم