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

- visibility ۵۱ mode_comment

در این جلسه به معرفی و بررسی سیستم شبکه بندی (Grid System) در فریم ورک بوت استرپ می پردازیم و به بررسی ماهیت و عمل کرد آن خواهیم پرداخت .در ضمن یکسری از ابزار های کاربردی برای سهولت کار و درک بیشتر سیستم شبکه بندی را خدمت شما معرفی خواهیم کرد...

مطالب مطرح شده در این جلسه عبارتند از :

  • معرفی و نصب ابزار Grid Displayer برای درک بهتر ساختار شبکه بندی
  • نصب افزونه Firebug جایگزینی مناسب برای Inspect Element گوگل کروم در فایرفاکس
  • نصب افزونه MeasureIt (خط کش) فایرفاکس
  • نصب افزونه Tab Auto Reload برای رفرش خودکار صفحات
  • معرفی ساختار سیستم شبکه بندی
  • معرفی کلاس اختصاصی container-fluid,container و مفهوم Column ها و Gutter ها در سیستم شبکه بندی
  • بررسی مدیا کوئری های استاندارد بکار رفته در ساختار فریم ورک بوت استرپ
  • مروری بر کلاس های اختصاصی سیستم شبکه بندی(col-xs,col-sm,col,md-col-lg)
  • بررسی رفتار های شبکه و ستون ها در مدیا کوئری ها و صفحه نمایش دستگاه های مختلف
  • بررسی برک پوینت های  Major و Minor
  •  معرفی کلاس اختصاصی row برای ایجاد ردیف های سیستم شبکه بندی بوت استرپ در سند
  • شروع ایجاد ساختار شبکه بندی و استفاده ترکیبی از کلاس های  container,row,col-lg
  • معرفی کلاس عمومی well برای ایجاد یک باکس
info توجه

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

ثبت نام در دوره آموزش بوت استرپ

comment دیدگاه کاربران
Khazra

مشکل Grid displayer حل شد. همون طوری که راهنمایی کردید.

وحید صالحی

خوب خدا رو شکر

Ehsan a

سلام استاد خسته نباشید . استاد صالحی یه سوال داشتم اینکه من میخوام یه پنل دیگه زیره همین پنل که توی عکسی که آپ کردم داشته باشم ولی فاصله سمته راستو چجوری پر کنم نمیخوام چیزی بزارم
http://8pic.ir/images/nzmysqhk308alxr1xjxy.png
با این روش که یه تگ دیو با کلاس 2 ستون بزارم هونجا تگو ببندم چیزی بین 2 تا تگ نباشه بعدش برای پنل همون کدی که برای پنل هست رو کپی کنم میخوام بدونم بدون این روش میشه یا خیر ممنون

وحید صالحی

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

mohamad mohamadi

چقدر بوت استرپ جالبه چقد کارو راحت میکنه 😛

وحید صالحی

یکی از دلایل ایجاد فریم ورک ها چه در مبحث طراحی چه برنامه نویسی همین هست 🙂

مرتضی

سلام و خسته نباشید.
کیفیت صدا خیلی بد هستش. تا جایی هم که یادمه سیستم های با کیفیت خریداری کرده بودین. ولی صدایی مثل صدای نویز زیاد داشت این جلسه.

وحید صالحی

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

Ahad Saadatnia

با سلام خدمت شما آقای صالحی
من هم در جلسه 3 مشکل صدا دارم چه باید کرد؟

وحید صالحی

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

Somayeh Shams

با سلام. من از داخل php storm نمیتونم فایل ها رو اجرا کنم. موقع اجرا در مرورگر این ادرس
http://localhost:63342/index.html
درج میشه. باید حتما روی خود فایل index کلیک کنم تا در مرورگر نمایش داده بشه. لطفا راهنمایی کنید

Somayeh Shams

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

Hoom@n

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

وحید صالحی

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

سحر بشری

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

وحید صالحی

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

سلام
بوت استرپ بریک پوینت 480px رو نداره لطفا کدهای لازم و تغییرات لازم برای اضافه کردن این بریک پوینت رو در اختیار ما بگذارید . من البته خودم میتونم col-tn رو اضافه کنم ولی مطمئن نیستم همه تغییرات لازم رو انجام داده باشم.

amirfff

سلام وعرض خدمت استاد صالحی
زمانی که می خوام صفحه ی مرورگر را رفرش کنم ,در نرم افزار phpstorm با پیغام زیر:
Page ‘http://localhost:63342/B…mon/css/bootstrap.css.map’ requested without authorization,
you can copy URL and open it in browser to trust it
مواجه می شم , چی کار کنم که دیگه این
پیغام برام نیاد؟؟؟؟

وحید صالحی

این مقدار رو از url جذف کنید :
:63342

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.
1 2