آموزش بوت استرپ [گام 7] راستچین کردن و ساخت منو

دوره بوت استرپ جولای 2015 06

سلام ، ضمن تشکر از دوستانی که با ارسال نظر حمایت میکنند با کمی تاخیر جلسه 7 آموزش فریم ورک بوت استرپ را تقدیمتان میکنم. در این ویدئو به دو مبحث راستچین کردن بوت استرپ و نحوه ساخت منو میپردازیم. ویدئوی این قسمت را میتوانید از باکس زیر دانلود کنید :

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

 

برای راستچین کردن بوت استرپ باید استایل اصلی آن را ادیت کردن اما این کار وقت گیر است لذا یک فایل استایل از قبل آماده شده هست که بای اضافه کردن آن به صفحه وب استایل های بوت استرپ اصلاح و راستچین میشود. برای دریافت این فایل به آدرس cdnjs.com/libraries/bootstrap-rtl رفته و فایل مورد نظر را دریافت و بعد از bootstrap.min.css اتچ کنید.

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

 

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

    تشکر بابت آموزش 🙂

  • mohammad36987 گفت:

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

  • homan گفت:

    سلام.خیلی ممنون از فایلهای اموزشی و زحماتی که برای این کار با ارزش کشیدید. فکر میکنم لینک دانلود گام 6 و 7 مشکل داره من چندین بار برای دانلود سعی کردم ولی موفق نشدم.ممنون میشم چک بفرمائید…
    با تشکر از شما

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

      سلام
      برای من مشکلی نداره و سایر دوستان هم دانلود کردند ، فکر میکنم ترافیک سرور دانلودم پر شده حتما برسی میکنم

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

      قسمت های 6 و 7 و 8 مجددا با پسوند zip آپلود شد ، متوانید بدون مشکل استفاده کنید…

  • smrh گفت:

    سلام
    مهندس لینک دانلود مشکل داره گویا…

  • behr0z گفت:

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

  • Esmat گفت:

    Hi mate can you start HTML5 and CSS3 for us plz

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

      برنامه html و css را برای 2 ماه دیگه ریختم و فعلا دارم سر فصل هاشو آماده میکنم

  • Esmat گفت:

    AND #C AS WELL PLZ

  • JAMASB گفت:

    سلام .
    دست شما درد نکنه! عالی بود!!

  • danger1875 گفت:

    فقط میتونم بگم دمت گرم

  • امیر گفت:

    سلام لینک خرابه لطف کنید رسیدگی کنید

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

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

  • امیر گفت:

    خیلی ممنون مشکل حل شد

  • danger1875 گفت:

    سلام من تازه فیلم رو دیدم خیلی خیلی عالی بود دستت درد نکنه خیلی ممنون:)

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

    سلام حسین جان
    خیلی ممنون بابت اموزشات

  • kamal گفت:

    درود
    بازم مثل همیشه ، فیلمات نمونه میشه
    موفق باشی

  • Esmat گفت:

    thank you so much that was so good

  • hamed_z2001 گفت:

    به به … به سلامتی قسمت جدید هم اومد.خسته نباشی آقا حسین ….
    گفتی دوره 50 روز دیگه طول میکشه … مگه قرار نبود روزی یک جلسه آموزشو بذارید؟؟
    🙁

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

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

  • shayanweb گفت:

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

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

      سلام و تشکر
      ببینید من در خود ویدئو هم عرض کردم سرعت بروز شدن آموزش ها به بازتاب های کاربران بستگی داره ، من باید بدونم که کاربران طالب کدام آموزش ها هستند و تاکیدم روی همون خواهد بود
      در حال حاضر مشغول برنامه ریزی هستم و آموزش های سایت به اوج میرسه و فکر میکنم حداقل 3 ویدئوی آموزش در هفته منتشر بشه که این تعداد تا مهر ماه شاید به روزی یک ویدئو هم برسه اما در نهایت بنده به بازخورد های کاربران نیاز دارم
      موفق باشید

  • milad گفت:

    سلام .
    فایل مشکل داره از حالت 7z خارج نمیشه .
    هم این آموزش هم آموزش 6 .
    ممنون میشم زیپ شده یا همون فایل ویدیویی را قرار بدید .

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

      سلام
      دوستان دانلود و استفاده کردند مشکلی نداشته ! از نرم افزار 7zip استفاده کنید…

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

      قسمت های 6 و 7 و 8 مجددا با پسوند zip آپلود شد ، متوانید بدون مشکل استفاده کنید…

  • hamed_z2001 گفت:

    آقا اگه همهمون بیایم و روزی چندتا کامنت بذاریم حله؟؟ تعداد بازخورد ها به حد کافی میرسه ؟؟
    🙂

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

      تعداد بازدید و تعداد دانلود ویدئو ها بالاست ، تا حدی که سرور دانلود ترافیک کم آورده !
      شما به نوبه خودت عمل کن و انشالله بقیه هم نظرشون (چه خوب چه بد و چه انتقاد) رو بیان کنند بنده روند اون آموزش را سریعتر ادامه میدم

  • نسرین گفت:

    سلام
    بی نهایت ممنون بابت آموزش خوب،بیان شیوا و رساتون…

  • senator_x37 گفت:

    با سلام و خست نباشید خدمت اقای شفیعیان

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

    سپاس

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

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

  • behr0z گفت:

    حسین جان منتظریم

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

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

  • simin گفت:

    مرسی از زحماتتون

  • smrh گفت:

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

  • نسرین گفت:

    خدا قوت
    آقای حسین منتظریم…

  • سینا گفت:

    سلام مهندس
    میخاستم بگم من فایل قسمت 6 و 7 رو چند بار دانلود کردم اما مثل اینکه خرابن

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

      قسمت های 6 و 7 و 8 مجددا با پسوند zip آپلود شد ، متوانید بدون مشکل استفاده کنید…

  • احمد گفت:

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

  • پریا گفت:

    سلام….عالی بود…بقیه ویدیو ها رو کی میزارید؟؟؟؟؟

  • منصور گفت:

    سلام. استاد من درسالهای ۷۰ اقدام به برنامه نویسی با فاکس پرو کردم و سیستم حقوق و دستمزد و چند برنامه دیگر برای تعدادی از ادارات دولتی نوشتم و حدود ده یازده سال با این برنامه ها کارکردن ناگفته نماند که بعضی از برنامه ها را تبدیل به ویژوال فاکس پرو کردم . درهرصورت درحال حاضر معلم شیمی هستم ومشغول تدریس شیمی (لیسانس من شیمی است) حالا دوست دارم اوقات فراغتم را اندروید یاد بگیرم لطفا راهنمایی کنید از کجا شروع کنم . با تشکر

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

      سلام
      میتونید با سی پلاس پلاس یا جاوا شروع کنید

    • danger1875 گفت:

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

  • milad گفت:

    سلام .
    امکانش هست لینک های دانلود را در حالت .7z نزارید ؟

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

      سلام
      بنده فایل ها رو دانلود کردم و باز میشن ، مشکلی ندارن !
      شما حتما از برنامه 7zip برای اکسترکت استفاده کنید
      در ادامه فیلم ها رو در آپارات هم آپلود میکنم …

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

      قسمت های 6 و 7 و 8 مجددا با پسوند zip آپلود شد ، متوانید بدون مشکل استفاده کنید…

  • مهرشاد گفت:

    سلام و خسته نباشید
    میشه یه توضیح جامع در مورد قابلیت pull و pushدر بوت استپر بدین ؟
    جون من هر کاری میکنم نمی تونم متوجه بشم این عمل رو
    تو خیلی از فروم هی خارجی در این مسئله ابهاماتی هست

  • روح اله گفت:

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

  • روح اله گفت:

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

  • روح اله گفت:

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

  • میلاد گفت:

    با سلام و خسته نباشید
    سایت خیلی خوب و کاربردی دارین…
    میشه در مورد منو بیشتر آموزش بزارین:
    شخصی سازی منو (رنگ بندی و هاور و اندازه فونت ها و…)
    با تشکر

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

    سلام . خیلی ممنون از آموزش خوب و مفیدتون

  • نامي گفت:

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

  • اعظم گفت:

    سلام من فا یلای بوت استرپ رو دانلود کردم وپیش فایل html ذخیره کردم اما گزینه data-toggle و data-target تو گزینه های دریم ویور نیست خودمم میزنم اصلن عمل نمیکنه .ممنون میشم اگه جوابم رو بدید.

  • hooman.mahmoodi.1 گفت:

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

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

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

  • hassan گفت:

    سلام مهندس خسته نباشی
    اگه بخوام کنار هر کدام از دسته های منوم یه آیکون قرار بگیره باید چکار کنم؟
    مثل منوی این سایت
    kimiaonline.com
    یا این
    lapbuy.com
    ممنون

  • hassan گفت:

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

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

    سلام.ممنون از آموزش های خوبتون.من همه این قسمت هایی که گذاشتینو دیدم .مشتاقانه منتظر بقیشم.و یه سوال دارم 2 روزه درگیرشم.
    در بوت استرپ من یک منو دارم که این منو رو میخوام وسط اون دایوی که دارم قرار بدم .از هر روشی فک کنید رفتم اما مشکل دار شده. از text-align و تگ center و margin – padding و حتی center-block خود بوت استرپ رو تست کردم بازم نشده.بعضی ها شده اما در سپانسیو مشکل داشته اگه راهی هست منتظر جوابم.

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

      با کلاس های col بهش پهنا بدید ، و با کلاس های offset به وسط منتقلش کنید. این کار رو در صفحه ثبت نام همین قالب فعلیم انجام دادم !

  • Aram گفت:

    سلام حسین جان خسته نباشی ……. این فایل راستچین مشکل داره ………….. مثلا تو بخش carousel مشکل داره ……… بهتر دونستم دوستان رو مطلع کنید از این فایل استفاده کنن بهتره……..github.com/morteza/bootstrap-rtl …………خیلی ممنون

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

      سلام ، مرسی
      آره متوجه شدم
      منتظرم ورژن 4 بوت استرپ منتشر بشه خودم فایل راستچینش رو می نویسم 😉

  • Mina گفت:

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

  • فهیم گفت:

    با سلام
    من میخوام بالای صفحه در راستای navbar و در سمت راست آن لوگو سایت رو قرار بدم ولی با استفاده از col و row هرچی تلاش کردم نشد اگر راهنماییم کنید ممنون میشم

  • فهیم گفت:

    یک سوال دیگه اینکه چجوری میتونم رنگ navbar رو تغییر بدم
    و دیگه اینکه توی طراحی نمیخوام sidebar قرار بدم و می خوام عکس در کنار متن قرار بگیره و زیر اون نباشه ممنون میشم اگه راهنمایی کنید

  • پدرام گفت:

    در منوی بوت استرپ فقط دو رنگ وجود داره؟ نمیشه از رنگ های دیگه استفاده کنیم؟

  • یاشار گفت:

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

  • یاشار گفت:

    جوابتون نمدونم چرا قانع کننده بود …
    یه سوال دیگه هم داشتم ..
    نمیدونم چرا وقتی از .CONTAINER-FLIUD استفاده میکنم مقدار تقریبا 10PX از چپ و راست با فاصله میمونه !!!
    و این ک وقتی از کد های آماده سایت W3SCHOOLS استفاده میکنم اول این ک اون 10px از بین میره … و div میچسبه به دیواره های مرور گر … و یکی دیگه هم این ک چرا w3schools از container استفاده نکرده ؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟

    ببخشید یکم پر حرفم :))

  • فاطمه گفت:

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

  • hesam گفت:

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

  • منا گفت:

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

  • Behnam.m گفت:

    سلام خسته نباشید آموزشو انجام دادم اما تو ویژوال استدیو او اروری ک شما بهش بر خوردی تو تعریف و لینک کردن جاوا اسکریپت ه بوت استرپ من دقیقا همون ارور رو دارم لینکارو هم دادم چرا عمل نمیکنه ؟
    این ارور رو هم میده :
    // This file is autogenerated via the commonjs Grunt task. You can require() this file in a CommonJS environment.
    require(‘../../js/transition.js’)
    require(‘../../js/alert.js’)
    require(‘../../js/button.js’)
    require(‘../../js/carousel.js’)
    require(‘../../js/collapse.js’)
    require(‘../../js/dropdown.js’)
    require(‘../../js/modal.js’)
    require(‘../../js/tooltip.js’)
    require(‘../../js/popover.js’)
    require(‘../../js/scrollspy.js’)
    require(‘../../js/tab.js’)
    require(‘../../js/affix.js’)

  • Behnam.m گفت:

    راستی ممنون آموزشاتون رایگانه 🙂

  • mr.ghasemi1047@gmail.com گفت:

    20

  • مریم گفت:

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

  • MaryMJ گفت:

    Hello! My name is MaryMarkova, our compane need to advertise on your website. What is your prices? Thank you. Best regards, Mary.

  • MelindaBlite گفت:

    Hello)
    XRumer16.0 is coming soon
    Good luck!

  • آرش گفت:

    سلام
    ممنون از فیلمهای خوب آموزشیتون
    من همین کارهایی که گفتید برای ساختن منو کردم ولی وقتی سایز صفحه رو کم میکنم دکمه ای که برای باز کردم منو گذاشتم بلافاصله بعد از باز شدن بسته میشه
    فایهای 3.1jquery و bootstrap.min.js رو هم به ترتیب گذاشتم
    مشکل چیه؟

  • بهار گفت:

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

  • بهار گفت:

    من برای اضافه کردن jquery
    از کد
    استفاده کردم اما همچنان منو باز نمیشه.

  • بهار گفت:

    مشکلم حل شد ممنون


Time limit is exhausted. Please reload CAPTCHA.