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

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



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

دوره مجازی بوت استرپ (جلسه 6): معرفی و بررسی سیستم شبکه بندی-قسمت چهارم

51 2617 ۱۸ تیر ۹۴
در این جلسه و در قسمت چهارم معرفی و بررسی سیستم شبکه بندی (Grid System) در فریم ورک بوت استرپ می پردازیم و به بیان ناگفته ها و موارد باقی مانده از این مبحث و در آخر هم در قالب یک مینی پروژه ساده آنچه را که تا این جلسه عنوان کردیم رو در قالب چارچوبی ساده از یک قالب پیاده سازی خواهیم کرد... مطالب مطرح شده در این جلسه عبارتند از :
  • معرفی کلاس pull و بررسی ساختار و کاربرد آن
  • معرفی کلاس push و بررسی ساختار و کاربرد آن
  • بررسی columns ordering و نحوه سفارشی سازی الویت نمایش بلاک های ایجاد شده
  • بررسی column nesting و نحوه ایجاد بلاک های تو در تو
  • معرفی کلاس container-fluid برای طراحی تمام صفحه
  • بررسی چارچوب fluid layout
  • بررسی چارچوب fixed layout
  • معرفی کلاس jombotron برای ایجاد یک باکس در سند
  • نحوه سفارشی سازی کلاس container و ایجاد عرض دلخواه برای آن
  • ایجاد ساختار اولیه یک قالب واکنشگرا در قالب یک مینی پروژه بر پایه آنچه که تا این جلسه آموخته ایم
این مطلب یک جلسه از دوره آموزش جامع فریمورک بوت استرپ (پایه تا پیشرفته) است و برای دیدن آن باید در این دوره ثبت نام کنید .
توضیحات : با توجه به افزایش تولید و فراگیر شدن استفاده از اسمارت فون ها و تبلت ها در چند سال اخیر و رابطه مستقیم آنها با دنیای مجازی و اینترنت مدیران و طراحان وب سایت ها ناچار به تعامل مطلوب با این نوع دستگاها شده اند. اما با استفاده از متدها و روش های طراحی سنتی این تعامل با چالش بزرگی روبرو شد و آن عدم ثبات در تطبیق المان ها موجود در قالب وب سایت ها با سایز های متفاوت صفحه نمایش این دستگاه ها بود که این امر باعث عدم پوشش صحیح تمام یا بخش های مختلف یک سایت بصورت استاندارد توسط این دستگاه ها می شد.به لطف این چالش و بخصوص صفحه نمایش هایی با ابعاد متفاوت تکنولوژی جدیدی با عنوان Responsive Design پا به عرضه ظهور گذاشت و تحول بسیار مطلوبی را در عرصه طراحی وب بوجود آورد. در راستای چنین تحولی و با توجه به کمبود و منابع آموزشی کامل در این زمینه در عرصه وب فارسی تصمیم گرفته ایم تا با یک دوره آموزشی بسیار کامل در زمینه تکنولوژی Responsive Design تحت یکی از فریم ورک های بسیار محبوب و البته قدرتمند در این زمینه با نام Bootstrap در خدمت علاقمندان به مبحث طراحی وب بخصوص طراحی واکنشگرا باشیم تا بتوانیم قدمی دیگر در راستای افزایش سطح علمی علاقمندان به مبحث وب و طراحی آن برداریم...
:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

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

  • ‏‏
    محسن امانی(۱۴ دی ۱۳۹۴)

    سلام آقای صالحی من در مورد این این مینی پروژه به شما پیام دادم میشه لطف کنید جواب من بدید

  • ‏‏
    حمید رضا مصطفی زاده(۱ اسفند ۱۳۹۴)

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

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

      سلام آقا حمید برای این کار هم فریم ورکی وجود داره که بر پایه بوت استرپ هست و میشه ازش استفاده کرد به آدرس زیر مراجعه کنید
      http://metroui.org.ua/v2/

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

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

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

    ببخشید سوالی داشتم…
    در سایت 7لرن منو آبی رنگ بالایه و فوتر صفحه به صورت containder-fluid هست و قسمت کانتنت و ساید بار container هستند؟

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

    آقای صالحی چه فایده ای داره برای شخصی سازی کلاس container از width ثابت در cssاستفاده کنیم،پس هدف اصلیمون که طراحی رسپانسیو هست که در اینجا دچار مشکل میشه؟

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

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

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

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

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

          دوست عزیز عرض ثابت نباید بدیدکه باید از خاصیت max-width براش استفاده کنید که بگید مثلا نهایت عرض 700 هست اما کمتر هم می تونه باشه پیشنهاد می کنم ابتدا مباحث css رو فرا بگیرید تا با مشکل مواجه نشید در ضمن زمانی که از فریم ورک استفاده می کنید نیازی به تغییرات کلی در ساختار container نیست

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

    متاسفانه شما از max-width در آموزش استفاده نکرده بودین، منم در سوال اولم فقط خواستم بگم اگه از width استفاده کنیم رسپانسیو بهم میریزه و از هدفمون دور میشیم ک شما در جواب گفتین ظاهرا بحث گرید بندی رو متوجه نشدین و الان هم میگین ابتدا css رو یاد بگیرین،با تشکر از زحمات شما …روز بخیر

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

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

  • ‏‏
    موسی الرضا سنگ سفیدی(۷ خرداد ۱۳۹۵)

    جناب صالحی من عرض رو که مثلا 1024 وارد میکنم دیگه رسپانسیو نیست.علت چیه ؟

  • ‏‏
    موسی الرضا سنگ سفیدی(۷ خرداد ۱۳۹۵)

    من جوابم رو گرفتم آقای صالحی ممنون(max-width)

  • ‏‏
    Somayeh Shams(۲۶ خرداد ۱۳۹۵)

    سلام استاد.خسته نباشید
    ببخشید کلاس های well-lg , well-sm که گفتید، برای سایزهای lg و sm هستند یا در همه ی مدیاها قابل استفاده اند؟

  • ‏‏
    مصطفی کریم زاده(۱۳ مهر ۱۳۹۵)

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

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram