دوره مجازی بوت استرپ (جلسه 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 برای ایجاد یک باکس

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

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

comment دیدگاه کاربران
alihoseiny replyپاسخ

صدا واقعا بد است.

وحید صالحی

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

افشین زندی

صدا که قابل قبوله. صدای بد نشنیدین.

مجید

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

افشین زندی replyپاسخ

سلام استاد صالحی. ممنون بابت این جلسه. عالی بود
استاد تا گرید بندی تموم بشه 3 جلسه دیگه مونده؟؟

وحید صالحی

خواهش می کنم افشین جان بله 3 جلسه دیگه باقی مونده.

M Javanmard replyپاسخ

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

لقمان آوند

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

وحید صالحی

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

مجید

حتما با kmplayer فایلها رو تماشا کنید من هم همین مشکل رو داشتم با kmplayer حل شد

وحید صالحی

ممنون از شما آقا مجید

M Javanmard replyپاسخ

اگر امکان داره، جلسات 4 و 5 رو هم بعد از بهتر شدن کیفیت صدا روی سایت قرار دهید.

وحید صالحی

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

افشین زندی replyپاسخ

سلام استاد صالحی. خسته نباشید.
ببخشید چنتا سوال داشتم راجب این جلسه، ممنون میشم جواب بدید.
1- در کوچکترین حالت که چندبار گفتید عرض auto میشه، اصلا عرضی براش در نظر گرفته نشده و marginها رو auto گرفته، قاعدتا باید از width های break point قبل از خودش استفاده کنه. پس عرض column ها کجا تعریف شده؟؟
2- استاد به نظر من 30px برای فاصله خیلی زیاده. اگه داخل صفحه customize بوت استرپ بیام و gutter ها رو تغییر بدم و مثلا بکنم10px اونوقت اون عرض هایی که داخل اسلاید این جلسه گفتید افزایش پیدا میکنن. درسته؟؟ اینجوری مشکلی پیش نمیاد؟

وحید صالحی

ممنون افشین جان
1-تمام ستون ها در کوچکترین حالت تا اندازه نهایی container دارای عرض هستند در این جلسه عرضی رو که بر حسب px برای هر مدیا کوئری گفتیم ماکزیمم عرض هست که در ظاهر بر مقیاس px هستند اما در باطن و هسته بوت استرپ هر ستون در هر مدیا کوئری عرضی بر حسب درصد داره نه پیکسل که در جلسات اینده در مورد توضیح میدیم بازم جلو جلو رفتی 🙂 و اینکه در کوچکترین حالت بصورت auto هست و margin ها برابر auto هست بخاطر اینکه چون در اسکرین های کوچک قرار بلاک ها و ستون ها بصورت تمام صفحه باشن و عرض صفحه رو پر کنن باید وسط صفحه قرار بگیرند و بصورت وسط چین در صفحه باشن و چون عرض ستون ها در این حالت بسیار متغیره و وابسته به اندازه صفحه نمایش کاربر هست , auto در نظر گرفته میشه در جلسات آیند زمانی که کلاس col-xs رو بررسی کنیم این مورد رو بهتر درک خواهید کرد…
2-فاصله gutter استاندارد هست و در اکثر فریم ورک های معروف و معتبر همین قدر بطور پیش فرض در نظر گرفته و توصیه میشه با همین مقدار استفاده بشه نه عرض ها تغییر نمی کنن بلکه ستون ها بهم نزدیکتر میشن چون اگر در اسلایدها دقت کرده باشی گفتیم عددی که در هر اسلاید در نظر گرفته شده مجموع عرض ستون و مقدار gutter هست که 30px رو باید ازش کم کنی تا عرض ستون بدست بیاد.

افشین زندی

ممنون استاد بابت پاسختون
ولی در مورد سوال دومم: استاد خب قاعدتا وقتی فاصله کم تر بشه باید ستون ها بهم نزدیک بشن ولی چطوری عرض بیشتر نمیشه؟ خب وقتی gutter بشه 10px، ما باید بیایم برای بدست اوردن عرض هر ستون، اون عدد رو به جای کم کردن از 30 از 10 کم کنیم. اینجوری عرض ستون ها بیشتر در میاد. درسته؟؟
ببخشید زیاد سوال میپرسم:)

وحید صالحی

نه مشکلی نیست افشین جان بالاخره ابهاماتت باید برطرف بشه تا مسئله بخوبی برات جا بیفته
ببین این مقدار gutter همون طور که توی ویدئو گفتم 2 مقدار 15px مارجین هست که به هر ستون از چپ و راست اعمال میشه که مجموعش میشه 30 خوب به عنوان مثال گفتیم در container با عرض 1170 که حداکثر عرض container در حالت استاندارد هست عرض هر ستون بعلاوه مقدار gutter میشه 98px هست خوب 30 تا ازش کم به میشه عرض ستون در این حالت یعنی میشه 68px یعنی عرض ستون 68px هست بطور ثابت حالا شما gutter رو کمتر در نظر بگیری چه اتفاقی میفته؟مجموع عرض ستون و gutter کم تر میشه در حقیقت شما از عرض gutter کم کردی نه عرض ستون یعنی اگر مقدار gutter رو بجای 30 بیای و 10 در نظر بگیری عرض ستون بعلاوه مقدار gutter جدید میشه 78px نه px98 و چون عرض ستون ها در هسته بوت استرپ بر حسب درصد هست نه پیکسل زمانی که مقدار gutter رو کم کنیم ستون ها ناچارن برای عرض کانتینر رو بطور یکسان پر کنن افزایش عرض بدن و به عبارتی عامیانه کش بیان برای اینکه بهتر متوجه بشی فایل bootstrap.css رو باز کن و یکی از کلاس col-lg-1 رو سرچ کن و پراپرتی که برای مقدار عرض ست شده رو ببین تا بهتر درک کنی مقداری که برحسب درصد برای این کلاس در نظر گرفته شده به این معنی هست که اگر مقدار %width = 8.33333333 هستش زمانی که از این کلاس استفاده میشه عنصری که این کلاس رو گرفته بیاد و 8.33333333 درصد عرض کانتینر رو در مدیا کوئری مورد نظر پر کنه.در جلسات آینده با مثال هایی که میزنیم تمام این ابهامات برات برطرف میشه نگران نباش تازه شروع کردیم.

افشین زندی

استاد ممنون. الان کامل متوجه شدم طرز کارش رو.
واقعا ممنون از اینکه وقت گذاشتید با جزییات کامل توضیح دادید ❓

وحید صالحی

خواهش می کنم افشین جان

افشین زندی replyپاسخ

استاد یه سوال رو هم جا انداختم
چرا گیر دادید به هسته وردپرس؟؟ 😀 تو این چند جلسه بیشتر از بوت استرپ اسم وردپرس اومده! 🙂

وحید صالحی

🙂 درسته دارم یه کارایی با وردپرس انجام میدم همش میاد به ذهنم.

افشین زندی replyپاسخ

استاد من کدهای بوت استرپ رو بررسی کردم. اون مورد رو هم فک کنم فهمیده باشم راجب اینکه در کوچکترین حالت چرا عرض container به صورت auto میشه با اینکه براش عرض رو تعریف نکردن. اگه میشه لطف کنید بهم بگید درسته این ذهنیتم یا ن.
استاد تو کدهای بوت استرپ، جایی که شروع کرده کلاس container رو تعریف کنه، بالاترین مقدار برای این کلاس داخل هیچ media query نیست،( این همون کلاسیه که تو کوچکترین حالت container به خودش میگیره و مارجین ها رو auto داده) و چون داخلش عرضی تعیین نشده مقدار پیش فرض برای width رو گرفته یعنی auto . و چون media query های بعدی ابعاد 768 به بالا رو کامل پوشش دادن، و کوچکترین media query برای container مقدار min-width: 768px هست در نتیجه کوچکتر از این عرض 768px چون براش media query تعریف نشده میاد و اون کلاسی که داخل هیچ media query نیست رو به خودش میگیره که دارای عرض پیش فرض auto هست. درسته؟؟
استاد معذرت میخوام امروز خیلی وقتتون رو گرفتم با سوالام ولی این یکی دیگه آخریشه خدا بخواد!

وحید صالحی

افشین جان اگر منظورت از بالاترین مقدار برای کلاس container همان عرض 1170 باشه برای این مورد هم مدیا کوئری در نظر گرفته خط 1598 روببین واگر هم منظورت اگر هم منظورت از بالاترین مقدار خط 1582 جایی که داره براش خصوصیت تعریف میکنه باید بگم اینها خصوصیات عمومی هست و در تمام مدیا کوئری ها صدق میکنه و ربطی به مدیا کوئری خاصی نداره فقط در مدیا کوئری های مختلف یکسری خصوصیات بهش اضافه میشه …ببین افشین جان به زبان خیلی ساده برات میگم در کوچکترین حالت به این خاطر عرض رو auto گرفته این مورد رو هم قبلا گفتم و هم در ویدئو چون در رزلوشن 768 به پایین تنوع ابزار هایی که دارای اندازه های مختلف از نظر صفحه نمایش هستند زیاده و نمبشه دقیقا فیلترشون کرد و برای هر اندازه ای یه مدیا کوئری با عرض برای container درش تعریف کرد به این دلیله که عرض بصورت خودکار و auto تغییر وضعیت میده حالا جلوتر که بریم بهتر متوجه میشه…
افشین جان باز هم اگر متوجه نشدی یه تماس با من بگیر بیشتر برات توضیح بدم چون به حالت نوشتاری ممکنه یکم گیج کننده باشه.

افشین زندی

خیلی ممنون استاد. تا الان رو دیگه کامل متوجه شدم.
استاد منظورم دقیقا همون خط 1582 بود که خصوصیاتی رو برایش تعریف کرده ولی width داخلش نیست. سوالم این بود که چطوری وقتی width رو تعریف نکرده، در اسکرین های خیلی کوچیک عرض رو auto داده، که فهمیدم چون تو اسکرین های کوچیک تر از 768px ، چون عرضی برای container تعریف نشده مقدار پیش فرض width رو میگیره که همون auto هست.
ممنون از شما ❓

وحید صالحی

اره دیگه دقیقا چون توی آخرین مدیا کوئری برای عرض از پزاپزتی min-width استفاده کرده و گفته حداقل عرض 768 باشه و کوچکتر از اون چون عرض نداره خودش auto در نظر میگیره…
سلامت باشی…

mehdi karimi replyپاسخ

سلام استاد
من از همون ابتدا واسم مشکل پیش اومد 😀 این grid displayer رو من طبق آموزش درگ کردم رو بوکمراک ولی وقتی روش کلیک میکنم بار اول که کار نکرد اصلا بعد که پاکش کردم دوباره گذاشتم هرچی روش کلیک میکنم وارد همون صفحه خودش میشه ( همون صفحه ای که انگلیسی بود از توش درگ کردیم )

وحید صالحی

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

mehdi karimi replyپاسخ

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

وحید صالحی

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

mehdi karimi

ممنون

Khazra replyپاسخ

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

وحید صالحی

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

Khazra replyپاسخ

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

وحید صالحی

خوب خدا رو شکر

Ehsan a replyپاسخ

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

وحید صالحی

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

mohamad mohamadi replyپاسخ

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

وحید صالحی

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

مرتضی replyپاسخ

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

وحید صالحی

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

Ahad Saadatnia

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

وحید صالحی

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

Somayeh Shams replyپاسخ

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

Somayeh Shams

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

Hoom@n replyپاسخ

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

وحید صالحی

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

سحر بشری replyپاسخ

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

وحید صالحی

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

حمیدرضا شریف replyپاسخ

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

amirfff replyپاسخ

سلام وعرض خدمت استاد صالحی
زمانی که می خوام صفحه ی مرورگر را رفرش کنم ,در نرم افزار 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

mohammad mehdi alipour replyپاسخ

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

وحید صالحی

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

ارسال نظرات

کاربر گرامی، امکان ارسال نظر و پشتیبانی برای دوره های مجازی فقط برای دانشجویان این دوره امکان پذیر می باشد.