የማስነሻ ፍርግርግ ምሳሌዎች

በBootstrap ፍርግርግ ስርዓት ውስጥ ስለመገንባት እርስዎን ለመተዋወቅ መሰረታዊ የፍርግርግ አቀማመጦች።

በእነዚህ ምሳሌዎች ውስጥ .themed-grid-colአንዳንድ ጭብጦችን ለመጨመር ክፍሉ ወደ አምዶች ይታከላል. ይህ በነባሪ በ Bootstrap ውስጥ የሚገኝ ክፍል አይደለም።

አምስት የፍርግርግ ደረጃዎች

ለBootstrap ግሪድ ሲስተም አምስት እርከኖች አሉ፣ አንድ ለእያንዳንዱ የምንደግፈው መሳሪያ። እያንዳንዱ ደረጃ በትንሹ የመመልከቻ መጠን ይጀምራል እና ካልተሻረ በቀር በትልልቅ መሳሪያዎች ላይ በራስ-ሰር ይተገበራል።

.ቆላ-4
.ቆላ-4
.ቆላ-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

ሶስት እኩል ዓምዶች

ከዴስክቶፕ ጀምሮ ሦስት እኩል ስፋት ያላቸውን አምዶች አግኝ እና ወደ ትላልቅ ዴስክቶፖች ስኬል ። በተንቀሳቃሽ መሣሪያዎች፣ ታብሌቶች እና ከዚያ በታች፣ ዓምዶቹ በራስ-ሰር ይደረደራሉ።

.col-md-4
.col-md-4
.col-md-4

ሶስት እኩል አምዶች አማራጭ

ክፍሎቹን በመጠቀም .row-cols-*, እኩል የሆኑ ዓምዶች ያለው ፍርግርግ በቀላሉ መፍጠር ይችላሉ.

.colልጅ የ .row-cols-md-3
.colልጅ የ .row-cols-md-3
.colልጅ የ .row-cols-md-3

ሶስት እኩል ያልሆኑ አምዶች

ከዴስክቶፕ ጀምሮ ሶስት አምዶችን ያግኙ እና ወደ ትላልቅ ዴስክቶፖች የተለያየ ስፋት ያቅርቡ። ያስታውሱ፣ የፍርግርግ አምዶች ለአንድ አግድም ብሎክ እስከ አስራ ሁለት ድረስ መጨመር አለባቸው። ከዚያ በላይ፣ እና ዓምዶች የእይታ ቦታው ምንም ይሁን ምን መደራረብ ይጀምራሉ።

.col-md-3
.col-md-6
.col-md-3

ሁለት ዓምዶች

ከዴስክቶፕ ጀምሮ ሁለት ዓምዶችን ያግኙ እና ወደ ትላልቅ ዴስክቶፖች ማመጣጠን

.col-md-8
.col-md-4

ሙሉ ስፋት፣ ነጠላ አምድ

ለሙሉ ስፋት አባሎች ምንም የፍርግርግ ክፍሎች አያስፈልጉም።


ሁለት የጎጆ አምዶች ያሉት ሁለት አምዶች

በሰነዱ መሰረት፣ መክተቻ ቀላል ነው - የአምዶች ረድፍ አሁን ባለው አምድ ውስጥ ብቻ ያስቀምጡ። ይህ በዴስክቶፕ ላይ የሚጀምሩ ሁለት አምዶችን ይሰጥዎታል እና ወደ ትላልቅ ዴስክቶፖች ማመጣጠን ፣ በትልቁ አምድ ውስጥ ከሌላ ሁለት (እኩል ስፋቶች) ጋር።

በተንቀሳቃሽ መሣሪያ መጠኖች፣ ታብሌቶች እና ታች፣ እነዚህ ዓምዶች እና የተከማቸባቸው አምዶች ይደረደራሉ።

.col-md-8
.col-md-6
.col-md-6
.col-md-4

የተቀላቀለ: ሞባይል እና ዴስክቶፕ

የ Bootstrap v5 ፍርግርግ ስርዓት ስድስት የክፍል ደረጃዎች አሉት፡ xs (ተጨማሪ ትንሽ፣ ይህ ክፍል infix ጥቅም ላይ አልዋለም)፣ sm (ትንሽ)፣ ኤምዲ (መካከለኛ)፣ lg (ትልቅ)፣ xl (x-ትልቅ) እና xxl (xx) - ትልቅ)። የበለጠ ተለዋዋጭ እና ተለዋዋጭ አቀማመጦችን ለመፍጠር የእነዚህን ክፍሎች ማናቸውንም ጥምር መጠቀም ይችላሉ።

እያንዳንዱ የክፍል ደረጃ ወደ ላይ ከፍ ይላል፣ ይህም ማለት ተመሳሳይ ስፋቶችን ለኤምዲ፣ lg፣ xl እና xxl ለማዘጋጀት ካቀዱ፣ ኤምዲ ብቻ መግለጽ ያስፈልግዎታል።

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.ቆላ-6
.ቆላ-6

የተቀላቀለ፡ ሞባይል፣ ታብሌት እና ዴስክቶፕ

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

ጉድጓዶች

በክፍሎች .gx-*, አግድም አግዳሚዎች ሊስተካከሉ ይችላሉ.

.col.gx-4ከጉድጓዶች ጋር
.col.gx-4ከጉድጓዶች ጋር
.col.gx-4ከጉድጓዶች ጋር
.col.gx-4ከጉድጓዶች ጋር
.col.gx-4ከጉድጓዶች ጋር
.col.gx-4ከጉድጓዶች ጋር

.gy-*ቀጥ ያሉ ቧንቧዎችን ለመቆጣጠር ክፍሎቹን ይጠቀሙ ።

.col.gy-4ከጉድጓዶች ጋር
.col.gy-4ከጉድጓዶች ጋር
.col.gy-4ከጉድጓዶች ጋር
.col.gy-4ከጉድጓዶች ጋር
.col.gy-4ከጉድጓዶች ጋር
.col.gy-4ከጉድጓዶች ጋር

ከመማሪያ .g-*ክፍሎች ጋር, በሁለቱም አቅጣጫዎች የሚገኙትን ቦይዎች ማስተካከል ይቻላል.

.col.g-3ከጉድጓዶች ጋር
.col.g-3ከጉድጓዶች ጋር
.col.g-3ከጉድጓዶች ጋር
.col.g-3ከጉድጓዶች ጋር
.col.g-3ከጉድጓዶች ጋር
.col.g-3ከጉድጓዶች ጋር

ኮንቴይነሮች

በ Bootstrap v4.4 ውስጥ የተጨመሩ ተጨማሪ ክፍሎች 100% ስፋት ያላቸው ኮንቴይነሮችን እስከ አንድ የተወሰነ መግቻ ድረስ ይፈቅዳሉ። v5 አዲስ xxlመግቻ ነጥብ ይጨምራል።

.መያዣ
.ኮንቴይነር-ኤስኤም
.ኮንቴይነር-ኤምዲ
.ኮንቴይነር-lg
.መያዣ-xl
.መያዣ-xxl
.መያዣ-ፈሳሽ