منظور از شبکه چیست؟
در طراحی گرافیک، یک شبکه، یک ساختار (معمولا دو بعدی) است که از یک سری خطوط مستطیلی (عمودی، افقی) متقاطع تشکیل شده است که برای ایجاد ساختار محتوا استفاده می‌شود. این شبکه به طور گسترده ای برای طراحی طرح بندی Layout و ساختار محتوا در طراحی چاپ استفاده می‌شود. شبکه در طراحی وب هم، یک روش بسیار موثر برای ایجاد سریع و موثر یک طرح سازگار با استفاده از HTML و CSS است.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت را مشاهده کنید)
به بیان ساده، شبکه‌ها در سازماندهی طراحی وب و ساختار محتوا، اسکن وب سایت‌ها را آسان کرده و باعث کاهش بارِ شناختی کاربران می‌شود.
سیستم شبکه بوت استرپ چیست؟
برای داشتن تعریف درستی از سیستم شبکه بوت استرپ یا سیستم شبکه بندی بوت استرپ، تعریفی که توسط اسناد رسمی بوت استرپ برای سیستم شبکه بوت استرپ مطرح شده است را در نظر می‌گیریم:
بوت استرپ شامل یک سیستم شبکه واکنش گرا، و اولین شبکه سازگار برای گوشی تلفن همراه است که به طور مناسب و تا ۱۲ ستون، بر اساس اندازه دستگاه یا اندازه نمایشگر افزایش می‌یابد. این شامل کلاس‌های از پیش تعریف شده برای گزینه‌های طرح بندی آسان، و همچنین ترکیب قدرتمندی برای تولید طرح‌های معنایی بیشتر است.
بگذارید عبارت بالا را درک کنیم. بوت استرپ ۳، اول برای تلفن همراه است به این معنا که کار کد بوت استرپ ابتدا با هدف قرار دادن صفحه‌های نمایش کوچکتر مانند دستگاه‌های تلفن همراه و تبلت‌ها آغاز می‌شود و سپس اجزا و شبکه‌ها را برای صفحه نمایش‌های بزرگتر مانند لپ تاپ‌ها و دسکتاپ‌ها “گسترش” می‌دهد.
آموزش پیشنهادی برای شما : آموزش Bootstrap 4 | جادوی رابط کاربری
استراتژیِ اول موبایل یا Mobile First
- محتوا: تعیین آنچه که مهم تر است.
- طرح بندی: ابتدا طراحی برای عرض‌های کوچک تر >>> پایه CSS اول برای دستگاه تلفن همراه؛ کوئری رسانه، برای تبلت و دسک تاپ‌ها.
- پیشرفت تصاعدی: اضافه کردن عناصر با افزایش اندازه صفحه نمایش
کار سیستم شبکه بوت استرپ
سیستم شبکه بوت استرپ برای ایجاد پوسته‌های صفحه از طریق یک سری از ردیف‌ها و ستون‌هایی که مطالب شما را در آن قرار می‌دهد عمل می‌کند. در اینجا، چگونگی کار سیستم شبکه بوت استرپ شرح داده می‌شود.
- در سیستم شبکه بوت استرپ، ردیف‌ها باید در یک کلاس .container قرار بگیرند تا هماهنگی و بالشتک‌ها یا padding مناسب داشته باشند.
- از سطرها برای ایجاد گروه‌های افقی متشکل از ستون‌ها در سیستم شبکه بوت استرپ، استفاده کنید.
- در سیستم شبکه بوت استرپ، محتوا باید در داخل ستون قرار گیرد و ستون‌ها فرزندان ردیف‌ها هستند.
- کلاس‌های سیستم شبکه بوت استرپ، از پیش تعریف شده مانند .row و .col-xs-4 برای سرعت بخشیدن به طرح بندی شبکه‌ها در دسترس هستند. ترکیب‌های کمتر نیز می‌توانند برای طرح بندی معنایی بیشتر، استفاده شوند.
- ستون‌ها با استفاده از padding، شیار‌ها (شکاف بین محتوای درون ستون) را ایجاد می‌کنند. این padding، ستون اول و آخر را در ردیف‌ها مرتب می‌کند. این کار با استفاده از حاشیه منفی در .rows انجام می‌شود.
در سیستم شبکه بوت استرپ، ستون‌های گرید با مشخص کردن تعداد دوازده ستونی که می‌خواهید گسترده شوند ایجاد می‌شود. به عنوان مثال، برای داشتن سه ستون هم اندازه باید از سه .col-xs-4 استفاده کرد.
سیستم شبکه بوت استرپ و کوئری‌های رسانه Media Queries
کوئری مدیا یا رسانه یک اصطلاح واقعا فانتزی برای “rule of conditional CSS” یا دستور شرطی CSS است. این کوئری به سادگی، برخی از CSSها را بر اساس شرایط خاصی اعمال می‌کند. در حقیقت، اگر این شرایط برآورده شود، استایل اعمال می‌شود.
کوئری‌های رسانه در بوت استرپ به شما این امکان را می‌دهند که براساس اندازه نمایشگر، محتوا را حرکت داده، نمایش دهید و یا پنهان کنید. کوئری‌های رسانه ی زیر، در فایل‌های LESS برای ایجاد breakpointهای کلیدی یا نقطه‌های پایانی کلیدی در سیستم شبکه بوت استرپ استفاده می‌شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: @screen-sm-min) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: @screen-md-min) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: @screen-lg-min) { ... } |
گاهی اوقات این کوئری‌ها گسترده می‌شوند تا حداکثر عرض max-width را برای محدود کردن CSS به باریک ترین مجموعه از دستگاه‌ها ایجاد کنند.
|
1 2 3 4 5 6 7 |
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... } |
کوئری رسانه دارای دو بخش، مشخصات دستگاه و سپس یک دستور اندازه است. در مورد فوق، دستور زیر تنظیم شده است. اجازه دهید این خط را در نظر بگیریم:
|
1 |
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } |
سیستم شبکه بوت استرپ و گزینه‌های گرید یا شبکه
جدول زیر خلاصه ای از جنبه‌های چگونگی کار سیستم شبکه بوت استرپ در چندین دستگاه را توضیح می‌دهد.
| Extra small devices Phones (<768px | Small devices Tablets (≥۷۶۸px | Medium devices Desktops (≥۹۹۲px) | Large devices Desktops (≥۱۲۰۰px) | |
| 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) | ۷۵۰px | ۹۷۰px | ۱۱۷۰px |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| # of columns | ۱۲ | ۱۲ | ۱۲ | ۱۲ |
| Max column width | Auto | ۶۰px | ۷۸px | ۹۵px |
| Gutter width | ۳۰px
(۱۵px on each side of a column) |
۳۰px
(۱۵px on each side of a column) |
۳۰px
(۱۵px on each side of a column) |
۳۰px
(۱۵px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
ساختار شبکه اصلی در سیستم شبکه بوت استرپ
کد زیر، ساختار پایه سیستم شبکه بوت استرپ است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class = "container"> <div class = "row"> <div class = "col-*-*"></div> <div class = "col-*-*"></div> </div> <div class = "row">...</div> </div> <div class = "container"> .... </div> |
سیستم شبکه بوت استرپ و بازنشانی ستون واکنش گرا Responsive column resets
با چهار سطح شبکه، در سیستم شبکه بوت استرپ، ممکن است به شرایط خاصی بر بخورید که ستون‌ها کاملا درست نمی‌شوند، مثلا یکی بلندتر از دیگری است. برای رفع این مشکل در سیستم شبکه بوت استرپ، از ترکیب یک کلاس classclearfix و کلاس‌های ابزار‌های واکنش گرا responsive utility classes استفاده کنید، همانطور که در مثال زیر نشان داده شده است:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
<div class = "container"> <div class = "row" > <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut.</p> </div> <div class = "clearfix visible-xs"></div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class = "col-xs-6 col-sm-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim</p> </div> </div> </div> |
این کد، نتیجه زیر را تولید می‌کند:
برای این که نتیجه دلخواه خود را از این مثال بگیرید، اندازه پورت نمایش را تغییر دهید و یا این کد از سیستم شبکه بوت استرپ را روی گوشی تلفن چک کنید.
ستون‌های افست Offsetsدر سیستم شبکه بوت استرپ
Offset ها، یک ویژگی مفید برای طرح بندی‌های تخصصی در سیستم شبکه بوت استرپ هستند. برای مثال می‌توان از آن‌ها برای فشرده کردن ستون‌ها به منظور داشتن فاصله ی بیشتر استفاده کرد. کلاس‌های.col-xs = * از افست‌ها پشتیبانی نمی‌کنند، اما با استفاده از یک سلول خالی می‌توان آن‌ها را به راحتی برگرداند.
برای استفاده از افست‌ها در صفحه نمایش‌های بزرگ، از کلاس‌های .offset-md-* class استفاده کنید. این کلاس‌ها، حاشیه چپ ستون را به اندازه ۱ تا ۱۱ افزایش می‌دهند.
در مثال زیر، <div class = “col-md-6”> .. </ div> را داریم و با استفاده از کلاس center-md-offset-3 آن را در مرکز قرار خواهیم داد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div class = "container"> <h1>Hello, world!</h1> <div class = "row" > <div class = "col-xs-6 col-md-offset-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> </div> </div> |
این کد، نتیجه زیر را تولید می‌کند:
ستون‌های تو در تو در سیستم شبکه بوت استرپ
برای قرار دادن محتوا در حالت پیش فرضِ سیستم شبکه بوت استرپ، یک ستون جدید .row و مجموعه ای از ستون‌های .col-md-* را در یک ستون موجود .col-md-* اضافه کنید. ردیف‌های تو در تو باید شامل مجموعه ای از ستون‌های اضافه شده تا تعداد ۱۲ عدد باشد.
در مثال زیر، طرح دارای دو ستون است، و ستون دوم، با دو ردیف، به چهار باکس تقسیم می‌شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<div class = "container"> <h1>Hello, world!</h1> <div class = "row"> <div class = "col-md-3" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>First Column</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class = "col-md-9" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>Second Column- Split into 4 boxes</h4> <div class = "row"> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis.</p> </div> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <div class = "row"> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class = "col-md-6" style = "background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div> |
این کد، نتیجه زیر را تولید می‌کند:
مرتب سازی ستون‌ها در سیستم شبکه بوت استرپ
یکی دیگر از ویژگی‌های خوبِ سیستم شبکه بوت استرپ این است که شما به راحتی می‌توانید ستون‌ها را در یک نظمی بنویسید و سپس آن‌ها را بر اساس نظم دیگری نشان دهید. شما می‌توانید به راحتی ستون‌های شبکه را با کلاس‌های .col-md-push-* و .col-md-pull-* تغییر دهید که در آن، * ۱ تا ۱۱ میباشد.
در مثال زیر، دو ستون طرح بندی در سیستم شبکه بوت استرپ داریم که ستون سمت چپ تا حد امکان باریک شده و به عنوان یک نوار کناری عمل می‌کند. ما ترتیب این ستون‌ها را با استفاده از کلاس‌های .class-md-push-* و .col-md-pull-* عوض خواهیم کرد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
<div class = "container"> <h1>Hello, world!</h1> <div class = "row"> <p>Before Ordering</p> <div class = "col-md-4" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I am on left </div> <div class = "col-md-8" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I am on right </div> </div> <br> <div class = "row"> <p>After Ordering</p> <div class = "col-md-4 col-md-push-8" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I was on left </div> <div class = "col-md-8 col-md-pull-4" style = "background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> I was on right </div> </div> </div> |
این کد در نهایت، نتیجه زیر را تولید می‌کند:
