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

በ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-md-4
.col-md-4
.col-md-4

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

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

.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 v4 ፍርግርግ ስርዓት አምስት የክፍል ደረጃዎች አሉት፡ xs (ተጨማሪ ትንሽ)፣ ኤስኤምኤስ (ትንሽ)፣ ኤምዲ (መካከለኛ)፣ lg (ትልቅ) እና xl (ተጨማሪ ትልቅ)። የበለጠ ተለዋዋጭ እና ተለዋዋጭ አቀማመጦችን ለመፍጠር የእነዚህን ክፍሎች ማናቸውንም ጥምር መጠቀም ይችላሉ።

እያንዳንዱ የክፍሎች እርከኖች ወደ ላይ ይደርሳሉ፣ ይህም ማለት ተመሳሳይ ስፋቶችን ለxs እና sm ለማቀናበር ካቀዱ xsን ብቻ መግለጽ ያስፈልግዎታል።

.col-12 .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-12 .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