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

دسته بندی: آموزش
زمان مطالعه: 2 دقیقه
۰۸ تیر ۱۳۹۴

در این جلسه به معرفی و بررسی سیستم شبکه بندی (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 برای ایجاد یک باکس
:: توجه

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

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

چه امتیازی به این مقاله می دید؟
نویسنده
علاقمند به طراحی و برنامه نویسی وب هستم و چند سالی میشه که در این زمینه فعالیت می کنم. (ایمیل من: @) وب سایت من:

جلسات دوره

نظرات کاربران

mohammad mehdi alipour

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

وحید صالحی

سلام برای پخش ازplayer vlc یا km player استفاده کنید

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

حمیدرضا شریف

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

سحر بشری

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

وحید صالحی

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

Hoom@n

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

وحید صالحی

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

Somayeh Shams

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

Somayeh Shams

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

مرتضی

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

وحید صالحی

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

Ahad Saadatnia

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

وحید صالحی

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

mohamad mohamadi

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

وحید صالحی

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

Ehsan a

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

وحید صالحی

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

وحید صالحی

خوب خدا رو شکر

پایان زمان پشتیبانی

دانشجوی گرامی، بازه پشتیبانی فعال برای این دوره ۳ ماه است که برای شما به پایان رسیده است.

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

نیاز به لاگین

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