የፍርግርግ ስርዓት
ለሁሉም ቅርጾች እና መጠኖች አቀማመጦችን ለመገንባት የእኛን ኃይለኛ የሞባይል-የመጀመሪያው ፍሌክስቦክስ ፍርግርግ ተጠቀም ለአስራ ሁለት አምድ ስርዓት፣ ለአምስት ነባሪ ምላሽ ሰጪ ደረጃዎች፣ የሳስ ተለዋዋጮች እና ድብልቅ ነገሮች እና በደርዘን የሚቆጠሩ አስቀድሞ የተገለጹ ክፍሎች።
እንዴት እንደሚሰራ
የቡትስትራፕ ፍርግርግ ስርዓት ይዘትን ለመቅረጽ እና ለማመጣጠን ተከታታይ መያዣዎችን፣ ረድፎችን እና አምዶችን ይጠቀማል። በ flexbox ነው የተሰራው እና ሙሉ በሙሉ ምላሽ ሰጭ ነው። ከታች አንድ ምሳሌ እና ጥልቀት ያለው ፍርግርግ እንዴት እንደሚመጣ የሚያሳይ ነው.
ለ flexbox አዲስ ወይም የማያውቁት? ለጀርባ፣ የቃላት አገባብ፣ መመሪያዎች እና የኮድ ቅንጥቦች ይህንን የCSS Tricks flexbox መመሪያ ያንብቡ ።
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
ከላይ ያለው ምሳሌ በቅድሚያ የተገለጹትን የፍርግርግ ክፍሎቻችንን በመጠቀም በትንሽ፣ መካከለኛ፣ ትልቅ እና ተጨማሪ ትላልቅ መሳሪያዎች ላይ ሶስት እኩል ስፋት ያላቸውን አምዶች ይፈጥራል። እነዚያ አምዶች ከወላጅ ጋር በገጹ ላይ ያተኮሩ ናቸው .container
።
እሱን ማፍረስ፣ እንዴት እንደሚሰራ እነሆ፡-
- ኮንቴይነሮች የጣቢያዎን ይዘቶች ወደ መሃል እና በአግድም ለመድፈን ዘዴን ያቀርባሉ።
.container
ምላሽ ለሚሰጥ የፒክሰል ስፋት ወይም.container-fluid
ለሁሉምwidth: 100%
መመልከቻ እና የመሳሪያ መጠኖች ተጠቀም ። - ረድፎች ለአምዶች መጠቅለያዎች ናቸው። እያንዳንዱ አምድ
padding
በመካከላቸው ያለውን ክፍተት ለመቆጣጠር አግድም (ጎተራ ይባላል) አለው። ይህpadding
ከዚያ በኋላ አሉታዊ ህዳጎች ባሉት ረድፎች ላይ ምላሽ ይሰጣል። በዚህ መንገድ በአምዶችዎ ውስጥ ያሉት ሁሉም ይዘቶች በግራ በኩል ወደ ታች በምስላዊ መልኩ ይስተካከላሉ። - በፍርግርግ አቀማመጥ፣ ይዘቱ በአምዶች ውስጥ መቀመጥ አለበት እና አምዶች ብቻ የረድፎች ልጆች ሊሆኑ ይችላሉ።
- ለ flexbox ምስጋና ይግባውና ያልተገለጹ የፍርግርግ አምዶች
width
ልክ እንደ እኩል ስፋት አምዶች በራስ-ሰር ይቀመጣሉ። ለምሳሌ፣ አራት አጋጣሚዎች.col-sm
እያንዳንዳቸው በራስ-ሰር ከትንሽ መሰባበር ነጥብ 25% ስፋት እና ከዚያ በላይ ይሆናሉ። ለተጨማሪ ምሳሌዎች የራስ-አቀማመጥ አምዶች ክፍልን ይመልከቱ ። - የአምድ ክፍሎች በአንድ ረድፍ 12 ሊሆኑ ከሚችሉት ውስጥ ሊጠቀሙባቸው የሚፈልጓቸውን የአምዶች ብዛት ያመለክታሉ። ስለዚህ፣ ሶስት እኩል ስፋት ያላቸው አምዶችን ከፈለጉ፣ መጠቀም ይችላሉ
.col-4
። - አምድ
width
ዎች በመቶኛ ተቀናብረዋል፣ ስለዚህ ሁልጊዜ ከወላጆቻቸው ንጥረ ነገር አንፃር ፈሳሽ እና መጠን ያላቸው ናቸው። padding
አምዶች በተናጥል ዓምዶች መካከል ያለውን ቦይ ለመፍጠር አግድም አላቸው፣ነገር ግን ረድፎቹን ከረድፎችmargin
እና በ ላይ ካሉትpadding
አምዶች ማስወገድ ይችላሉ ።.no-gutters
.row
- ፍርግርግ ምላሽ ለመስጠት አምስት የፍርግርግ መግቻ ነጥቦች አሉ፣ አንዱ ለእያንዳንዱ ምላሽ ሰጪ መግቻ ነጥብ ሁሉም መግቻ ነጥቦች (ትልቁ ትንሽ)፣ ትንሽ፣ መካከለኛ፣ ትልቅ እና ትልቅ።
- የፍርግርግ መግቻ ነጥቦች በትንሹ ስፋት የሚዲያ መጠይቆች ላይ የተመሰረቱ ናቸው፣ ይህ ማለት ለዚያ አንድ መግቻ ነጥብ እና ከሱ በላይ ባሉት (ለምሳሌ
.col-sm-4
በትንንሽ፣ መካከለኛ፣ ትልቅ እና ተጨማሪ ትላልቅ መሳሪያዎች ላይ ተፈጻሚ ይሆናል፣ ነገር ግን የመጀመሪያውxs
መግቻ ነጥብ አይደለም)። - ለበለጠ የትርጉም ምልክት ቀድሞ የተገለጹ የፍርግርግ ክፍሎችን (እንደ
.col-4
) ወይም የሳስ ድብልቅን መጠቀም ይችላሉ።
አንዳንድ የኤችቲኤምኤል ክፍሎችን እንደ ተጣጣፊ መያዣዎች መጠቀም አለመቻል በ flexbox ዙሪያ ያሉትን ገደቦች እና ስህተቶች ይወቁ ።
የፍርግርግ አማራጮች
Bootstrap አብዛኞቹን መጠኖች ለመወሰን em
s ወይም s ሲጠቀም፣ s ለፍርግርግ መሰባበር ነጥቦች እና የእቃ መያዢያ ስፋቶች ጥቅም ላይ ይውላሉ። ይህ የሆነበት ምክንያት የመመልከቻው ስፋት በፒክሰሎች ውስጥ ስለሆነ እና በቅርጸ ቁምፊው መጠን አይለወጥም .rem
px
የ Bootstrap ፍርግርግ ስርዓት በብዙ መሳሪያዎች ላይ ምቹ በሆነ ጠረጴዛ ላይ እንዴት እንደሚሰራ ይመልከቱ።
በጣም ትንሽ <576px |
ትንሽ ≥576 ፒክስል |
መካከለኛ ≥768 ፒክስል |
ትልቅ ≥992 ፒክስል |
በጣም ትልቅ ≥1200 ፒክስል |
|
---|---|---|---|---|---|
ከፍተኛው የመያዣ ስፋት | የለም (ራስ-ሰር) | 540 ፒክስል | 720 ፒክስል | 960 ፒክስል | 1140 ፒክስል |
የክፍል ቅድመ ቅጥያ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# የአምዶች | 12 | ||||
የጎርፍ ስፋት | 30 ፒክስል (15 ፒክስል በእያንዳንዱ የአምድ ጎን) | ||||
የተደላደለ | አዎ | ||||
የአምድ ማዘዝ | አዎ |
ራስ-አቀማመጥ አምዶች
ያለ ግልጽ ቁጥር ያለው ክፍል እንደ ቀላል የአምድ መጠን ለመከፋፈል ልዩ የአምድ ክፍሎችን ተጠቀም .col-sm-6
።
እኩል ስፋት
ለምሳሌ፣ እዚህ ሁለት የፍርግርግ አቀማመጦች እዚህ አሉ በእያንዳንዱ መሳሪያ እና መመልከቻ ከ xs
እስከ xl
. ለእያንዳንዱ መግቻ ነጥብ ማንኛውንም ክፍል-ያነሰ ክፍሎችን ያክሉ እና እያንዳንዱ አምድ ተመሳሳይ ስፋት ይሆናል።
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
እኩል ስፋት ባለብዙ መስመር
.w-100
ዓምዶቹ ወደ አዲስ መስመር እንዲሰበሩ የሚፈልጉትን ቦታ በማስገባት ብዙ መስመሮችን የሚሸፍኑ እኩል ስፋት ያላቸውን አምዶች ይፍጠሩ ። .w-100
ከአንዳንድ ምላሽ ሰጪ የማሳያ መገልገያዎች ጋር በመደባለቅ እረፍቶቹን ምላሽ ሰጪ ያድርጉ ።
ይህ ያለግልጽ ወይም ግልጽነት እንዳይሰራ የሚያደርግ የ Safari flexbox ስህተት ነበር ። ለቆዩ የአሳሽ ስሪቶች መፍትሄዎች አሉ፣ ነገር ግን የእርስዎ ዒላማ አሳሾች በጣም አስቸጋሪ በሆኑ ስሪቶች ውስጥ ካልገቡ አስፈላጊ መሆን የለባቸውም።flex-basis
border
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
የአንድ አምድ ስፋት በማዘጋጀት ላይ
ለ flexbox ፍርግርግ አምዶች ራስ-አቀማመጥ ማለት የአንድን አምድ ስፋት ማዘጋጀት እና የወንድም እህት አምዶች በራስ-ሰር በዙሪያው እንዲቀይሩ ማድረግ ይችላሉ። አስቀድመው የተገለጹ የፍርግርግ ክፍሎችን (ከዚህ በታች እንደሚታየው) ፣ የፍርግርግ ድብልቅ ወይም የመስመር ውስጥ ስፋቶችን መጠቀም ይችላሉ። የመካከለኛው አምድ ስፋት ምንም ቢሆን ሌሎቹ ዓምዶች መጠናቸውን እንደሚቀይሩ ልብ ይበሉ።
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
ተለዋዋጭ ስፋት ይዘት
col-{breakpoint}-auto
በይዘታቸው ተፈጥሯዊ ስፋት ላይ በመመስረት ዓምዶችን ለመለካት ክፍሎችን ይጠቀሙ ።
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
ምላሽ ሰጪ ክፍሎች
የቡትስትራፕ ፍርግርግ ውስብስብ ምላሽ ሰጪ አቀማመጦችን ለመገንባት ቀድሞ የተገለጹ አምስት እርከኖችን ያካትታል። የአምዶችዎን መጠን በትልቁ ትንሽ፣ ትንሽ፣ መካከለኛ፣ ትልቅ ወይም በትልቁ መሳሪያዎች ላይ ያብጁ።
ሁሉም መግቻ ነጥቦች
ከትናንሾቹ መሳሪያዎች እስከ ትልቁ ተመሳሳይ ለሆኑ ፍርግርግዎች ፣ ክፍሎችን .col
እና .col-*
ክፍሎችን ይጠቀሙ። ልዩ መጠን ያለው አምድ ሲፈልጉ ቁጥር ያለው ክፍል ይግለጹ; ያለበለዚያ ለመጣበቅ ነፃነት ይሰማዎ .col
።
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
ወደ አግድም የተደረደሩ
ነጠላ የመማሪያ ክፍሎችን በመጠቀም ፣ ተቆልሎ የሚጀምር እና በትንሹ መግቻ ነጥብ ( ) .col-sm-*
ላይ አግድም የሆነ መሰረታዊ የፍርግርግ ስርዓት መፍጠር ትችላለህ ።sm
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
ማደባለቅ እና ማመሳሰል
የእርስዎ አምዶች በቀላሉ በአንዳንድ የፍርግርግ እርከኖች ውስጥ እንዲቆለሉ አይፈልጉም? እንደ አስፈላጊነቱ ለእያንዳንዱ ደረጃ የተለያዩ ክፍሎች ጥምረት ይጠቀሙ። ሁሉም እንዴት እንደሚሰራ ለተሻለ ሀሳብ ከዚህ በታች ያለውን ምሳሌ ይመልከቱ።
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
ጉድጓዶች
ጉድጓዶች በምላሽ ሊስተካከሉ የሚችሉት በሰበር ነጥብ-ተኮር ንጣፍ እና በአሉታዊ የኅዳግ መገልገያ ክፍሎች ነው። በተሰጠው ረድፍ ውስጥ ያሉትን ጋዞች ለመቀየር፣ በ s .row
ላይ ያለውን አሉታዊ የኅዳግ መገልገያ እና ተዛማጅ የመጠቅለያ መገልገያዎችን ያጣምሩ ። .col
ያልተፈለገ የውሃ ፍሰትን ለማስቀረት ወላጁ .container
ወይም .container-fluid
ወላጁ እንደገና ማዛመጃ የመገልገያ መገልገያ መጠቀም ሊያስፈልግ ይችላል።
የ Bootstrap ፍርግርግ በትልቁ ( lg
) መግቻ ነጥብ እና ከዚያ በላይ የማበጀት ምሳሌ እዚህ አለ። .col
መከለያውን ጨምረነዋል ፣ .px-lg-5
ያንን .mx-lg-n5
በወላጅ ላይ በመቃወም .row
እና ከዚያም .container
መጠቅለያውን በ .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
የረድፍ ዓምዶች
.row-cols-*
የእርስዎን ይዘት እና አቀማመጥ በተሻለ ሁኔታ የሚሰጡትን የአምዶች ብዛት በፍጥነት ለማዘጋጀት ምላሽ ሰጪ ክፍሎችን ይጠቀሙ ። መደበኛ .col-*
ክፍሎች ለነጠላ አምዶች (ለምሳሌ፣) ተፈጻሚ ሲሆኑ .col-md-4
፣ የረድፍ ዓምዶች ክፍሎች በወላጅ ላይ .row
እንደ አቋራጭ ተቀናብረዋል።
መሰረታዊ የፍርግርግ አቀማመጦችን በፍጥነት ለመፍጠር ወይም የካርድዎን አቀማመጥ ለመቆጣጠር እነዚህን የረድፍ አምዶች ክፍሎች ይጠቀሙ።
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
እንዲሁም ተጓዳኝ የ Sass ድብልቅን መጠቀም ይችላሉ row-cols()
፡-
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
አሰላለፍ
ዓምዶችን በአቀባዊ እና በአግድም ለመደርደር የFlexbox አሰላለፍ መገልገያዎችን ይጠቀሙ። ኢንተርኔት ኤክስፕሎረር 10-11 ከታች እንደሚታየው ተጣጣፊው ኮንቴይነር ሲኖረው የተለዋዋጭ እቃዎችን በአቀባዊ ማስተካከልን አይደግፍም ። min-height
ለተጨማሪ ዝርዝሮች Flexbugs #3ን ይመልከቱ።
አቀባዊ አሰላለፍ
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
አግድም አሰላለፍ
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
ጉድጓዶች የሉም
በእኛ ቀድሞ በተገለጹት የፍርግርግ ክፍሎቻችን ውስጥ በአምዶች መካከል ያሉት ጉድጓዶች ሊወገዱ ይችላሉ .no-gutters
። ይህ አሉታዊውን margin
s ከ .row
እና አግድም padding
ከሁሉም የቅርብ ልጆች አምዶች ያስወግዳል።
እነዚህን ቅጦች ለመፍጠር የምንጭ ኮድ ይኸውና። የአምድ መሻሮች ለመጀመሪያዎቹ ልጆች አምዶች ብቻ የተከለሉ እና በባህሪ መራጭ በኩል ያነጣጠሩ መሆናቸውን ልብ ይበሉ ። ይህ የበለጠ የተለየ መራጭን ቢያመነጭም፣ የአምድ ንጣፍ አሁንም በክፍት መገልገያዎች የበለጠ ሊበጅ ይችላል ።
ከጫፍ እስከ ጫፍ ንድፍ ይፈልጋሉ? ወላጅ .container
ወይም .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
በተግባር ፣ እንዴት እንደሚመስል እነሆ። ይህንን ከሌሎች አስቀድሞ ከተገለጹት የፍርግርግ ክፍሎች (የአምድ ስፋቶችን፣ ምላሽ ሰጭ ደረጃዎችን፣ ዳግም ማዘዣዎችን እና ሌሎችንም ጨምሮ) መጠቀሙን መቀጠል እንደሚችሉ ልብ ይበሉ።
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
የአምድ መጠቅለያ
በአንድ ረድፍ ውስጥ ከ12 በላይ ዓምዶች ከተቀመጡ፣ እያንዳንዱ ተጨማሪ ዓምዶች ቡድን እንደ አንድ ክፍል፣ ወደ አዲስ መስመር ይጠቀለላል።
ከ 9 + 4 = 13 > 12 ጀምሮ፣ ይህ ባለ 4-አምድ-ሰፊ ዲቪ እንደ አንድ ተከታታይ ክፍል በአዲስ መስመር ላይ ይጠቀለላል።
ተከታይ አምዶች በአዲሱ መስመር ይቀጥላሉ.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
የአምድ መግቻዎች
ዓምዶችን ወደ አዲስ መስመር በፍሌክስቦክስ መስበር ትንሽ ጠለፋ ያስፈልገዋል፡ ዓምዶችዎን ወደ አዲስ መስመር width: 100%
ለመጠቅለል በፈለጉበት ቦታ ላይ አንድ ኤለመንት ይጨምሩ። በተለምዶ ይህ በበርካታ .row
ዎች ይከናወናል, ነገር ግን እያንዳንዱ የአተገባበር ዘዴ ለዚህ ተጠያቂ ሊሆን አይችልም.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
ይህንን እረፍት በልዩ የመግቻ ነጥቦች ላይ በኛ ምላሽ ሰጪ የማሳያ መገልገያ መጠቀም ይችላሉ።
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
እንደገና በማዘዝ ላይ
ክፍሎችን ይዘዙ
የይዘትህን ምስላዊ ቅደም ተከተል.order-
ለመቆጣጠር ክፍሎችን ተጠቀም ። እነዚህ ክፍሎች ምላሽ ሰጭ ናቸው፣ ስለዚህ ነጥቡን በእረፍት ነጥብ (ለምሳሌ ፣ ) ማዘጋጀት ይችላሉ። በአምስቱ የፍርግርግ እርከኖች ሁሉ ድጋፍን ያካትታል ።order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
እንዲሁም የአንድን ንጥረ ነገር በመተግበር እና ( ) የሚቀይሩ ምላሽ ሰጪ .order-first
እና ክፍሎች አሉ። እነዚህ ክፍሎች እንደ አስፈላጊነቱ ከተቆጠሩት ክፍሎች ጋር ሊጣመሩ ይችላሉ ..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
አምዶችን በማካካስ ላይ
የፍርግርግ አምዶችን በሁለት መንገዶች ማካካስ ይችላሉ፡ የእኛ ምላሽ ሰጪ .offset-
የፍርግርግ ክፍሎቻችን እና የኅዳግ መገልገያዎች . የፍርግርግ ክፍሎች መጠናቸው ከአምዶች ጋር እንዲመሳሰል ሲደረግ ህዳጎች የማካካሻው ስፋት ተለዋዋጭ ለሆኑ ፈጣን አቀማመጦች የበለጠ ጠቃሚ ናቸው።
የማካካሻ ክፍሎች
.offset-md-*
ክፍሎችን በመጠቀም ዓምዶችን ወደ ቀኝ ያንቀሳቅሱ ። እነዚህ ክፍሎች የአንድ አምድ የግራ ህዳግ *
በአምዶች ይጨምራሉ። ለምሳሌ፣ ከአራት አምዶች በላይ .offset-md-4
ይንቀሳቀሳል ።.col-md-4
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
ምላሽ በሚሰጡ መግቻ ነጥቦች ላይ ከአምድ ማጽዳት በተጨማሪ፣ ማካካሻዎችን ዳግም ማስጀመር ሊኖርብዎ ይችላል። ይህንን በተግባር በፍርግርግ ምሳሌ ውስጥ ይመልከቱ ።
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
የኅዳግ መገልገያዎች
በ v4 ውስጥ ወደ flexbox በሚደረገው እንቅስቃሴ፣ .mr-auto
የወንድም እህት አምዶችን እርስ በእርስ እንዲራቁ ማድረግ ያሉ የኅዳግ መገልገያዎችን መጠቀም ይችላሉ።
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
መክተቻ
ይዘትዎን ከነባሪው ፍርግርግ ጋር ለመክተት አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .row
ስብስብ ያክሉ። የጎጆ ረድፎች እስከ 12 ወይም ከዚያ በታች የሚጨምሩ የአምዶች ስብስብ ማካተት አለባቸው (ሁሉንም ያሉትን 12 አምዶች መጠቀም አያስፈልግም)።.col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
የሳስ ቅልቅል
የBootstrap ምንጭ Sass ፋይሎችን ሲጠቀሙ፣ ብጁ፣ የትርጉም እና ምላሽ ሰጪ ገጽ አቀማመጦችን ለመፍጠር Sass ተለዋዋጮችን እና ድብልቅ ነገሮችን የመጠቀም አማራጭ ይኖርዎታል። ለፈጣን ምላሽ ሰጪ አቀማመጦች አጠቃላይ ለአገልግሎት ዝግጁ የሆኑ ክፍሎችን ለማቅረብ የእኛ አስቀድሞ የተገለጹ የፍርግርግ ክፍሎቻችን እነዚህን ተመሳሳይ ተለዋዋጮች እና ድብልቆች ይጠቀማሉ።
ተለዋዋጮች
ተለዋዋጮች እና ካርታዎች ተንሳፋፊ ዓምዶች የሚጀምሩበት የአምዶች ብዛት፣ የጉድጓድ ስፋት እና የሚዲያ መጠይቁን ይወስናሉ። ከላይ የተዘረዘሩትን አስቀድሞ የተገለጹትን የፍርግርግ ክፍሎችን እና እንዲሁም ከዚህ በታች ለተዘረዘሩት ብጁ ድብልቅ ነገሮች ለማምረት እነዚህን እንጠቀማለን።
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
ቅልቅል
ሚክሰኖች ከግሪድ ተለዋዋጮች ጋር በጥምረት ጥቅም ላይ የሚውሉት ለግል ፍርግርግ አምዶች የፍቺ CSS ነው።
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
የአጠቃቀም ምሳሌ
ተለዋዋጮቹን ወደ ራስህ ብጁ እሴቶች መቀየር ትችላለህ፣ ወይም ድብልቁን ከነባሪ እሴቶቻቸው ጋር ብቻ ተጠቀም። ባለ ሁለት አምድ አቀማመጥ በመካከላቸው ክፍተት ለመፍጠር ነባሪ ቅንብሮችን የመጠቀም ምሳሌ እዚህ አለ።
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
ፍርግርግ ማበጀት
አብሮ የተሰራውን የSass ተለዋዋጮችን እና ካርታዎችን በመጠቀም፣ አስቀድሞ የተገለጹትን የፍርግርግ ክፍሎችን ሙሉ ለሙሉ ማበጀት ይቻላል። የደረጃዎች ብዛት፣ የሚዲያ መጠይቅ ልኬቶችን እና የመያዣውን ስፋቶችን ይቀይሩ—ከዚያም እንደገና ያሰባስቡ።
አምዶች እና ጉድጓዶች
የፍርግርግ ዓምዶች ብዛት በ Sass ተለዋዋጮች በኩል ሊስተካከል ይችላል። $grid-columns
የእያንዳንዱን አምድ ስፋቶችን (በመቶኛ) ለማመንጨት ጥቅም ላይ የሚውል ሲሆን ለዓምዱ ወራጆች $grid-gutter-width
ስፋቱን ሲያዘጋጅ።
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
የፍርግርግ ደረጃዎች
ከአምዶች እራሳቸው አልፈው በመሄድ፣ የፍርግርግ እርከኖችን ብዛት ማበጀት ይችላሉ። አራት የፍርግርግ እርከኖችን ብቻ ከፈለጉ፣ ይህን $grid-breakpoints
እና ወደሚከተለው $container-max-widths
ነገር አዘምነው ነበር።
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
በ Sass ተለዋዋጮች ወይም ካርታዎች ላይ ማናቸውንም ለውጦች ሲያደርጉ ለውጦችዎን ማስቀመጥ እና እንደገና ማሰባሰብ ያስፈልግዎታል። ይህን ማድረግ ለአምድ ስፋቶች፣ ማካካሻዎች እና ቅደም ተከተሎች አዲስ የተገለጹ የፍርግርግ ክፍሎችን ያወጣል። ምላሽ ሰጪ የታይነት መገልገያዎች ብጁ መግቻ ነጥቦችን ለመጠቀም እንዲሁ ይዘመናሉ። px
የፍርግርግ እሴቶችን በ (አይደለም rem
፣ em
፣ ወይም %
) ውስጥ ማቀናበሩን ያረጋግጡ ።