آموزش سیستم شبکه در بوت استرپ 

4 سال پیش
امتیاز دهید post

آموزش سیستم شبکه در بوت استرپ 

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش سیستم شبکه در بوت استرپ خواهیم پرداخت.

در این درس ما در مورد سیستم Bootstrap Grid بحث خواهیم کرد.

شبکه چیست؟

همانطور که توسط wikepedia قرار داده شده است –

در طراحی گرافیک، شبکه ساختاری است (معمولاً دو بعدی) که از مجموعه ای از خطوط متقاطع مستقیم (عمودی، افقی) تشکیل شده است که برای ساختار محتوا استفاده می شود. این به طور گسترده ای برای طراحی طرح و ساختار محتوا در طراحی چاپ استفاده می شود. در طراحی وب ، یک روش بسیار موثر برای ایجاد یک طرح ثابت و سریع و م usingثر با استفاده از HTML و CSS است.
به عبارت ساده تر ، شبکه ها در طراحی وب به ترتیب و ساختاردهی محتوای سایت می پردازند ، اسکن وب سایت ها را آسان می کند و بار شناختی کاربران را کاهش می دهد.

سیستم Bootstrap Grid چیست؟

همانطور که توسط اسناد رسمی بوت استرپ برای سیستم شبکه ارائه شده است –

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

اولین استراتژی موبایل

  • محتوا

آنچه مهمترین است را تعیین کنید.

  • ظرح بندی

ابتدا به عرض های کوچکتر طراحی کنید.

ابتدا آدرس تلفن همراه CSS را وارد کنید. آدرس جستجوی رسانه برای رایانه لوحی ، رایانه رومیزی.

  • Progressive Enhancement

با افزایش اندازه صفحه، عناصر را اضافه کنید.

کار کردن سیستم شبکه بوت استرپ

سیستم های شبکه برای ایجاد طرح بندی صفحه از طریق یک سری ردیف ها و ستون هایی که محتوای شما را در خود جای داده اند ، استفاده می شود. در اینجا نحوه کار سیستم شبکه Bootstrap –

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

کوئری رسانه در سیستم شبکه در بوت استرپ

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

 

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

 

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

اجازه دهید این خط را در نظر بگیریم –

 

برای همه دستگاه ها مهم نیست که min-width: @screen-sm-min اگر عرض صفحه کوچکتر از @ screen-sm-max باشد ، کاری انجام دهید.

گزینه های شبکه

جدول زیر جنبه هایی از نحوه کار سیستم شبکه Bootstrap را در چندین دستگاه خلاصه می کند –

Extra small devices Phones (<768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints Collapsed to start, horizontal above breakpoints
Max container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12 12 12 12
Max column width Auto 60px 78px 95px
Gutter width 30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

30px

(15px on each side of a column)

Nestable Yes Yes Yes Yes
Offsets Yes Yes Yes Yes
Column ordering Yes Yes Yes Yes

 

ساختار شبکه اصلی

در زیر ساختار اصلی شبکه Bootstrap آورده شده است –

 

بازنشانی ستون پاسخگو

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

 

 

ستون های افست

جابجایی ها یک ویژگی مفید برای طرح بندی های تخصصی تر هستند. (برای مثال) می توان آنها را برای فشار دادن ستون ها به یکدیگر استفاده کرد. کلاسهای *=col-xs  از جبران کننده پشتیبانی نمی کنند ، اما با استفاده از یک سلول خالی به راحتی تکرار می شوند.

برای استفاده از جبران در نمایشگرهای بزرگ ، از کلاس های .col-md-offset- * استفاده کنید. این کلاسها حاشیه سمت چپ یک ستون را با ستونهای * که * از 1 تا 11 محدوده دارند افزایش می دهند.

در مثال زیر ، ما <div class = “col-md-6”> .. </div> داریم ، ما این را با استفاده از کلاس .col-md-offset-3 قرار می دهیم.

ستون های تو در تو

برای قرار دادن محتوای خود با شبکه پیش فرض ، یک ستون جدید .row و مجموعه ای از ستون .col-md- * را در یک ستون .col-md- * اضافه کنید. ردیف های تو در تو باید مجموعه ای از ستون ها را جمع کنند که به 12 ستون اضافه می شود.

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

 

مرتب سازی ستون

یکی دیگر از ویژگی های خوب سیستم grid Bootstrap این است که شما می توانید ستون ها را به ترتیب و به ترتیب بنویسید و آنها را به صورت دیگری نشان دهید. شما می توانید به راحتی با استفاده از کلاس های اصلاح کننده .col-md-push- * و .col-md-pull- * ترتیب ستون های شبکه داخلی را تغییر دهید که * از 1 تا 11 باشد.

در مثال زیر طرح دو ستون وجود دارد که ستون سمت چپ باریک ترین است و به عنوان یک نوار کناری عمل می کند. ترتیب این ستونها را با استفاده از کلاسهای .col-md-push- * و .col-md-pull- * مبادله خواهیم کرد.

 

منبع.

لیبست جلسات قبل آموزش بوت استرپ

  1. آموزش بوت استرپ
  2.  بررسی اجمالی بوت استرپ
  3. آموزش راه اندازی بوت استرپ
امتیاز دهید post
0
برچسب ها :
نویسنده مطلب saber

دیدگاه شما

بدون دیدگاه