أمثلة شبكة التمهيد

تخطيطات الشبكة الأساسية لتعريفك بالبناء داخل نظام شبكة Bootstrap.

في هذه الأمثلة .themed-grid-colيتم إضافة الفصل إلى الأعمدة لإضافة بعض السمات. هذه ليست فئة متوفرة في Bootstrap افتراضيًا.

خمس طبقات شبكية

هناك خمسة مستويات لنظام شبكة Bootstrap ، واحدة لكل مجموعة من الأجهزة التي ندعمها. تبدأ كل طبقة بأدنى حجم لإطار العرض وتنطبق تلقائيًا على الأجهزة الأكبر حجمًا ما لم يتم تجاوزها.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

ثلاثة أعمدة متساوية

احصل على ثلاثة أعمدة متساوية العرض بدءًا من أجهزة سطح المكتب وتغيير حجمها إلى أجهزة كمبيوتر سطح المكتب الكبيرة . على الأجهزة المحمولة والأجهزة اللوحية وما دونها ، سيتم تكديس الأعمدة تلقائيًا.

.col-md-4

ثلاثة أعمدة بديلة

By using the .row-cols-* classes, you can easily create a grid with equal columns.

.col child of .row-cols-md-3

Three unequal columns

Get three columns starting at desktops and scaling to large desktops of various widths. Remember, grid columns should add up to twelve for a single horizontal block. More than that, and columns start stacking no matter the viewport.

.col-md-3

.col-md-6

.col-md-3

Two columns

Get two columns starting at desktops and scaling to large desktops.

.col-md-8

.col-md-4

Full width, single column

No grid classes are necessary for full-width elements.

Two columns with two nested columns

Per the documentation, nesting is easy—just put a row of columns within an existing column. This gives you two columns starting at desktops and scaling to large desktops, with another two (equal widths) within the larger column.

At mobile device sizes, tablets and down, these columns and their nested columns will stack.

.col-md-8

.col-md-6

.col-md-4

Mixed: mobile and desktop

The Bootstrap v4 grid system has five tiers of classes: xs (extra small, this class infix is not used), sm (small), md (medium), lg (large), and xl (extra large). You can use nearly any combination of these classes to create more dynamic and flexible layouts.

Each tier of classes scales up, meaning if you plan on setting the same widths for md, lg and xl, you only need to specify md.

.col-md-8

.col-6 .col-md-4

.col-6

مختلط: الهاتف المحمول والجهاز اللوحي وسطح المكتب

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

المزاريب

مع .gx-*الفصول ، يمكن ضبط المزاريب الأفقية.

.colمع .gx-4المزاريب

استخدم .gy-*الفئات للتحكم في المزاريب الرأسية.

.colمع .gy-4المزاريب

مع .g-*الفصول ، يمكن ضبط المزاريب في كلا الاتجاهين.

.colمع .g-3المزاريب

حاويات

تسمح الفئات الإضافية المضافة في Bootstrap v4.4 بحاويات بعرض 100٪ حتى نقطة توقف معينة. v5 يضيف xxlنقطة توقف جديدة.

.وعاء

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.container-fluid