با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره آموزش Bootstrap 4 ، را دنبال می کنند. تاکنون در طی این دوره کاربردی ، مباحث مهمی نظیر آشنایی با فریم ورک Bootstrap 4 و همچنین چگونگی تهیه کردن Bootstrap 4 ، را ارائه کردیم. تا الان شما می توانید Bootstrap 4 را از اینترنت دریافت و طراحی پایه آن را صفحه وب خود قرار دهید. اکنون می خواهیم به سراغ ساختار Bootstrap 4 ، و آشنایی بیشتر با بخش های این فریم ورک محبوب برویم. برای شروع ابتدا ما به موضوع ساختار سیستم شبکه بندی در Bootstrap 4 یا سیستم grid در Bootstrap 4 ، در این بخش از آموزش ، می پردازیم.
سیستم شبکه بندی (Gride) ، در Bootstrap 4 ، از flexbox، ایجاد شده است ، و اجازه می دهد تا ۱۲ ستون را در عرض صفحه وب خود داشته باشید.
این سیستم شبکه بندی ، responsive است. و ستون های آن بصورت خودکار ، نسبت به اندازه صفحه نمایش ، تنظیم می شوند.
سیستم شبکه بندی در Bootstrap 4 ، دارای پنج کلاس است:
.col-
(برای دستگاه های با صفحه نمایش کوچک – با عرض کمتر از ۵۷۶px).col-sm-
(برای دستگاههای با صفحه نمایش کوچک – با عرض برابر یا بزرگتر از ۵۷۶px).col-md-
(برای دستگاههای با صفحه نمایش متوسط – با عرض برابر یا بزرگتر از ۷۶۸px).col-lg-
(برای دستگاههایی با صفحه نمایش بزرگ – با عرض برابر یا بزرگتر از ۹۹۲px).col-xl-
(برای دستگاههایی با صفحه نمایش بزرگ – با عرض برابر یا بزرگتر از ۱۲۰۰px)کلاس های بالا می توانند برای ایجاد طرح های پویا و انعطاف پذیر تر ترکیب شوند.
نکته: در حالت ترکیبی ، هر کلاس به کلاس بالاتر ارتقا می یابد، بنابراین اگر می خواهید همان عرض را برای sm و md تنظیم کنید، فقط باید sm را مشخص کنید.
دراینجا ساختار پایه سیستم شبکه بندی در Bootstrap 4 ، را قرار داده ایم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- Control the column width, and how they should appear on different devices --> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <!-- Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div> |
در قسمت اول مثال : ایجاد یک ردیف (<div class = "row">
). سپس، تعداد دلخواه ستون را اضافه کنید (برچسب ها با کلاس های مناسب .col-*-*
). ستاره اول (*) نشان دهنده پاسخگویی است: sm، md، lg یا xl، در حالی که ستاره دوم نشان دهنده یک عدد است، که باید برای هر ردیف به ۱۲ عدد اضافه کند.
در قسمت دوم مثال:به جای اضافه کردن یک عدد به هر Col، اجازه دهید. Bootstrap ، متناسب با طرح، ستون هایی با عرض برابر ایجاد کند: دو تا عنصر “col” : با عرض ۵۰% – سه تا “col” :با عرض ۳۳٫۳۳% – چهار تا “col” : ۲۵% و …
1 2 3 4 5 | <div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div> |
1 2 3 4 5 6 | <div class="row"> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> </div> |
مثال : مثال زیر نشان می دهد که چگونه دو ستون عرض مختلف با شروع از دستگاههای تبلت و مقیاس دادن به دسکتاپ های بزرگ اضافی را ایجاد کنید:
1 2 3 4 | <div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div> |
در این بخش از ادامه ی آموزشها ، شروع به آموزش ساختار Bootstrap 4 ، و نحوه ی استفاده از آن در responsive کردن قالب وب سایت، کرده ایم. و در این بخش به بررسی و آموزش سیستم شبکه بندی Bootstrap 4 ، پرداختیم.
امیدوراریم که مباحث فوق ، مورد استفاده کاربران، قرار گرفته باشد.
Moradi
سلام
میخواستم ببینم استفاده از Container داخل container دیگه مشکلی نداره؟
از لحاظ منطقی و استاندارد بودن منظورمه.
ممنون