illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

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



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

دوره مجازی بوت استرپ (جلسه 10): کامپوننت ها و css در بوت استرپ - تب ها و منو - بخش چهارم

35 2531 ۱ مرداد ۹۴
در جلسه دهم  دوره آمورشی فریم ورک بون استرپ می پردازیم به مبحث ایجاد تب ها,پیل ها و منوی واکنشگرا  و در ابن جلسه بیشتر به مزیت استفاده از فریم ورک بوت استرپ برای ایجاد المان های نسبتا پیچیده بدون کدنویسی پی خواهیم برد المان هایی که برای ایجاد آنها خارج از محدوده فریم ورک نیازمند کدنویسی جاوااسکریپ هستند... مطالب مطرح شده در این جلسه عبارتند از : ایجاد انواع تب های واکنش گرا
  • بررسی کلاس list-inline
  • بررسی کلاس nav
  • بررسی کلاس nab-tabs
  • بررسی کلاس nav-pills
  • بررسی کلاس nav-stacked
  • بررسی کلاس nav-justified
  • نحوه ایجاد تب های پویا توسط جاوااسکریپت
  • بررسی کلاس nav-content
  • بررسی کلاس tab-pane
  • بررسی کلاس fade in
ایجاد منوی واکنشگرا
  • بررسی کلاس navbar
  • بررسی کلاس navbar default
  • بررسی کلاس navbar-header
  • بررسی کلاس navbar-brand
  • بررسی کلاس navbar-nav
  • بررسی کلاس navbar-inverse
  • بررسی کلاس navbar-fixed-top
  • بررسی کلاس navbar-fixed-bottom
  • بررسی کلاس navbar-left
  • نحوه ایجاد باکس جستجو در منو
  • نحوه ایجاد لینک های منو و زیر منوها
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 35 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    افشین زندی(۱۵ مرداد ۱۳۹۴)

    سلام استاد
    این جلسه خیلی عالی بود مخصوصا قسمت تب ها که خیلی ساده و کامل توضیح دادید. پروژم رو قدم به قدم خیلی راحت تکمیل کردم تا اینجا.
    فقط استاد اگه میشه تو جلسات بعدی یه 10 دیقه رو به گرید بندی داخل تب ها اختصاص بدید. اینکه تب رو داخل 4بخش درست کنم رو میدونم، ولی اینکه خود 4بخش اصلی رو به 12 بخش تقسیم کنم. مثلا محتوای تب یه تگ p و یه عکس باشه که p بیاد8قسمت بگیره و عکس 4 بخش و عکس به صورت ریسپانسیو باشه!
    ممنون

    • ‏‏
      وحید صالحی(۱۵ مرداد ۱۳۹۴)

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

  • ‏‏

    سلام
    چرا توی مرورگر کروم وقتی منوی رسپانسیو رو میسازیم فیلد جستجو در سایزهای بزرگ به خط دوم میره و یه خط رو اشغال میکنه؟توی موزیلا مشکلی نداره.
    عکس رو ضمیمه قرار دادم
    http://s6.picofile.com/file/8206194634/Untitled_1.jpg

    • ‏‏
      وحید صالحی(۲۸ مرداد ۱۳۹۴)

      خوب باید از یک فایل css reset یا normalize استفاده کنید اگر مشکل برطرف نشد همین کدهایی رو که زدید بفرستید تا بررسی بشه

      • ‏‏
        حسین صانعی(۲۸ آبان ۱۳۹۵)

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

  • ‏‏
    میوند بارکزی(۲۹ مرداد ۱۳۹۴)

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

    • ‏‏
      وحید صالحی(۳۰ مرداد ۱۳۹۴)

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

      • ‏‏
        میوند بارکزی(۳۰ مرداد ۱۳۹۴)

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

        • ‏‏
          وحید صالحی(۳۰ مرداد ۱۳۹۴)

          سلام میوند جان عرض کمتر از 768px توی هسته مدیا کوئری 768 رو پیدا کن (@media (min-width: 718px)) تعدادشون زیاده اونی که کلاسnavbar-collapse و سایر کلاس های مشابه درشه مربوط به همین حالت collapse هستش که اگر عدد رو تغییر بدی collapse هم در همون عدد و مدیا جدید تغییر میکنه که در فایل custom.css همه رو کپی کنی و عدد مدیا کودری رو تغییر بدی بوت استرپ 4 هم چند روزی هست منتشر شده که البته نسخه آلفا و ازمایشی هست که چند کلاس جدید و تغییر در چند کلاس ایجاد شده و هنوز کامل نیست و ممکنه تغییرات بیشتری داشته باشه در جلسه پایانی اشاره کوچیکی می کنیم اما اگر به همین نسخه 3 مسلط بشید براحتی میتونید از ورژن جدید هم استفاده کنید چون در ساختار سیستم شبکه بندی تغییرات عمده ای ایجاد نشده

  • ‏‏
    salmanuser(۱۹ آبان ۱۳۹۴)

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

  • ‏‏
    مرتضی(۲۰ دی ۱۳۹۴)

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

  • ‏‏
    mohamad mohamadi(۱۷ فروردین ۱۳۹۵)

    salam bebakhshid man menu hamo responsive mikonam va kamel kar mikonan
    vali vaghti miram to page e site am yani safe asli nistam ya miram to mataleb ke safe asli nis ro icona mizanam kar nemikonan

    • ‏‏
      وحید صالحی(۱۷ فروردین ۱۳۹۵)

      حتما منو توی صفحه مورد نظرتون وجود نداره !!!

      • ‏‏
        mohamad mohamadi(۱ اردیبهشت ۱۳۹۵)

        salam vojod dare hata copy paste am kardam
        in safe aslime
        battleweb.ir
        ke kar mikone inam 1 page ya postame nega konid
        http://battleweb.ir/2016/04/17/%D8%B3%D9%84%D8%A7%D9%85-%D8%AF%D9%86%DB%8C%D8%A7/
        lotfan komak konid

        • ‏‏
          وحید صالحی(۲ اردیبهشت ۱۳۹۵)

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

  • ‏‏
    سید احسان عظیمی(۲۳ فروردین ۱۳۹۵)

    آقای صالحی ممنون عالی بود

    • ‏‏
      وحید صالحی(۲۳ فروردین ۱۳۹۵)

      خواهش می کنم خوشحالیم که مقبول افتاده موفق باشید

      • ‏‏
        سید احسان عظیمی(۲۴ فروردین ۱۳۹۵)

        با عرض شرمندگی نسبت به سوال بی ربطم و تشکر نسبت به پشتیبانی سریع و عالیتون،در مورد پروفایلم در وبسایت سون لرن …کجای پروفایل میتونم عکسم رو لود کنم،هرچی گشتم پیدا نشد…

        • ‏‏
          وحید صالحی(۲۴ فروردین ۱۳۹۵)

          سلام خواهش می کنم اگر منظورتون تصویر آواتار هست باید در سایت گراواتار با همین ایمیلی که وارد سایت میشید ثبت نام کنید و برای ایمیلتون عکس موردنظرتون رو قرار بدید تا در سون لرن نمایش داده بشه برای این کار به آدرس زیر مراجعه کنید
          https://fa.gravatar.com/
          دقت کنید پس از انجام مراحل برای نمایش عکستون گزینه و کارکتر G رو در هنگام سوال نمایش در کدام سایت ها انتخاب کنید موفق باشید

  • ‏‏
    سید احسان عظیمی(۲۸ فروردین ۱۳۹۵)

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

  • ‏‏
    فاطمه صنیعی(۲ شهریور ۱۳۹۵)

    سلام
    من تمام فایل های بوتسترپ رو در index.html لینک کردم
    تمام کلاس ها فراخوانی میشن فقط کلاس data-toggle فراخوانی نمیشه
    علت چیه؟

    • ‏‏
      وحید صالحی(۲ شهریور ۱۳۹۵)

      data-toggle کلاس نیست یک اتریبیوت هست و اگر تمام فایل ها رو بدرستی فراخوانی کرده باشید کار می کنه کما اینکه نمایشش نده

      • ‏‏
        فاطمه صنیعی(۳ شهریور ۱۳۹۵)

        آره data-toggle رو نمایش نمیده چیکار باید کرد؟

        • ‏‏
          وحید صالحی(۳ شهریور ۱۳۹۵)

          مشکلی نیست استفاده کنید کار میکنه این برمی گرده به IDE که داردی ازش استفاده می کنید و ممکنه بعضی اتذیبیوت ها رو نمایش نده

        • ‏‏
          فاطمه صنیعی(۳ شهریور ۱۳۹۵)

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

        • ‏‏
          وحید صالحی(۳ شهریور ۱۳۹۵)

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

        • ‏‏
          فاطمه صنیعی(۴ شهریور ۱۳۹۵)

          آقای صالحی من هنوز مشکلم برطرف نشده کدهایی که نوشتم به ایمیل شما ارسال کردم لطفا بررسی کنید و ببینید مشکل از کجاست
          البته من از دریم ویوور استفاده میکنم ممکن است مشکل از این باشه؟
          من توی فایل هایی مربوط به شما هم امتحان کردم باز data-target data-toggle navbar-left نه نمایش داده میشه و نه کار میکنه
          خواهشا کمکم کنید تا این مشکل رفع بشه

        • ‏‏
          وحید صالحی(۱۴ شهریور ۱۳۹۵)

          متاسفانه ایمیلی از شما دریافت نکردم

  • ‏‏

    سلام جناب صالحی
    منوی های بوت استرپ به صورت پیش فرض در اندازه صفحه 768 پیکسل جمع می شوند و مانند یک دکمه قرار میگیرند ، آیا می توان تنظیم کرد که در اندازه 992 پیکسل یا اندازه ای دیگر این اتفاق صورت گیرد ، اگر این کار امکان پذیر است لطفا راهنمایی بفرمایید. با تشکر از جنابعالی

    • ‏‏
      وحید صالحی(۱۱ شهریور ۱۳۹۵)

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

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

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

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

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram