የፍርግርግ ስርዓት
ለሁሉም ቅርጾች እና መጠኖች አቀማመጦችን ለመገንባት የእኛን ኃይለኛ የሞባይል-የመጀመሪያ ፍሌክስቦክስ ፍርግርግ ተጠቀም ለአስራ ሁለት አምድ ስርዓት፣ ለስድስት ነባሪ ምላሽ ሰጭ ደረጃዎች፣ የ Sass ተለዋዋጮች እና ድብልቅ ነገሮች እና በደርዘን የሚቆጠሩ አስቀድሞ የተገለጹ ክፍሎች።
ለምሳሌ
የቡትስትራፕ ፍርግርግ ስርዓት ይዘትን ለመቅረጽ እና ለማመጣጠን ተከታታይ መያዣዎችን፣ ረድፎችን እና አምዶችን ይጠቀማል። በ flexbox ነው የተሰራው እና ሙሉ በሙሉ ምላሽ ሰጭ ነው። ከታች ያለው ምሳሌ እና የፍርግርግ ስርዓቱ እንዴት እንደሚመጣ ጥልቅ ማብራሪያ ነው.
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
ከላይ ያለው ምሳሌ ቀድመው የተገለጹትን የፍርግርግ ክፍሎቻችንን በመጠቀም በሁሉም መሳሪያዎች እና መመልከቻዎች ላይ ሶስት እኩል ስፋት ያላቸውን አምዶች ይፈጥራል። እነዚያ አምዶች ከወላጅ ጋር በገጹ ላይ ያተኮሩ ናቸው .container
።
እንዴት እንደሚሰራ
እሱን ማፍረስ፣ የፍርግርግ ስርዓቱ እንዴት እንደሚሰበሰብ እነሆ፡-
-
የእኛ ፍርግርግ ስድስት ምላሽ ሰጪ መግቻ ነጥቦችን ይደግፋል ። መግቻ ነጥቦች በሚዲያ ጥያቄዎች ላይ የተመሰረቱ ናቸው
min-width
፣ ይህ ማለት በዛ ነጥብ እና ከሱ በላይ ባሉት (ለምሳሌ፣ ለ ፣፣፣፣ እና ).col-sm-4
ተፈጻሚ ይሆናሉ ። ይህ ማለት የእቃ መያዢያ እና የአምድ መጠንን እና ባህሪን በእያንዳንዱ መግቻ ነጥብ መቆጣጠር ይችላሉ።sm
md
lg
xl
xxl
-
ኮንቴይነሮች ይዘትዎን ወደ መሃል እና በአግድም ይሸፍኑ። ለፈሳሽ እና ለፒክሰል ስፋቶች ጥምር
.container
ምላሽ ለሚሰጥ የፒክሰል ስፋት፣.container-fluid
ለሁሉምwidth: 100%
የእይታ እይታዎች እና መሳሪያዎች፣ ወይም ምላሽ ሰጪ መያዣ (ለምሳሌ፣ ) ይጠቀሙ።.container-md
-
ረድፎች ለአምዶች መጠቅለያዎች ናቸው። እያንዳንዱ አምድ
padding
በመካከላቸው ያለውን ክፍተት ለመቆጣጠር አግድም (ጎተራ ይባላል) አለው። ይህpadding
በአምዶችዎ ውስጥ ያለው ይዘት በግራ በኩል በምስላዊ መልኩ መያዙን ለማረጋገጥ በአሉታዊ ህዳጎች ረድፎች ላይ ምላሽ ይሰጣል። ረድፎች የይዘትዎን ክፍተት ለመለወጥ የአምድ መጠንን እና የጋተር ክፍሎችን በተመሳሳይ መልኩ እንዲተገብሩ የመቀየሪያ ክፍሎችን ይደግፋሉ ። -
አምዶች በማይታመን ሁኔታ ተለዋዋጭ ናቸው። በአንድ ረድፍ ውስጥ 12 የአብነት አምዶች ይገኛሉ፣ ይህም ማንኛውንም የአምዶች ብዛት የሚሸፍኑ የተለያዩ ንጥረ ነገሮችን ውህዶች እንዲፈጥሩ ያስችልዎታል። የአምድ ክፍሎች የሚዘረጋውን የአብነት ዓምዶች ብዛት ያመለክታሉ (ለምሳሌ
col-4
፡ አራቱን ይሸፍናል)።width
s በፐርሰንት ተቀናብረዋል ስለዚህም ሁልጊዜ ተመሳሳይ አንጻራዊ መጠን እንዲኖርዎት። -
ጉድጓዶች እንዲሁ ምላሽ ሰጪ እና ሊበጁ የሚችሉ ናቸው። የጎተር ክፍሎች በሁሉም መግቻ ነጥቦች ላይ ይገኛሉ፣ ሁሉም ልክ እንደ ህዳግ እና ንጣፍ ክፍተት ተመሳሳይ መጠን ያላቸው ። አግዳሚ ወንዞችን
.gx-*
በክፍል፣ ቀጥ ያሉ ቦይዎችን በ.gy-*
, ወይም ሁሉንም ጋጣዎች በክፍል ይለውጡ.g-*
።.g-0
ጉድጓዶችን ለማስወገድ እንዲሁ ይገኛል። -
Sass ተለዋዋጮች፣ ካርታዎች እና ድብልቆች ፍርግርግ ያጎላሉ። አስቀድመው የተገለጹትን የፍርግርግ ክፍሎችን በBootstrap ውስጥ ለመጠቀም ካልፈለጉ፣ የእራስዎን በበለጠ የትርጉም ማርክ ለመፍጠር የኛን የፍርግርግ ምንጭ Sass መጠቀም ይችላሉ። እንዲሁም እነዚህን የ Sass ተለዋዋጮች ለእርስዎ የበለጠ ተለዋዋጭነት ለመጠቀም አንዳንድ የሲኤስኤስ ብጁ ንብረቶችን እናካትታለን።
አንዳንድ የኤችቲኤምኤል ክፍሎችን እንደ ተጣጣፊ መያዣዎች መጠቀም አለመቻል በ flexbox ዙሪያ ያሉትን ገደቦች እና ስህተቶች ይወቁ ።
የፍርግርግ አማራጮች
የቡትስትራፕ ፍርግርግ ሲስተም በሁሉም ስድስት ነባሪ መግቻ ነጥቦች እና በማናቸውም ማበጀት ይችላሉ። ስድስቱ ነባሪ የፍርግርግ ደረጃዎች እንደሚከተለው ናቸው
- በጣም ትንሽ (xs)
- ትንሽ (ኤስኤም)
- መካከለኛ (ሚዲ)
- ትልቅ (lg)
- በጣም ትልቅ (xl)
- በጣም ትልቅ (xxl)
ከላይ እንደተገለጸው፣ እነዚህ መግቻ ነጥቦች እያንዳንዳቸው የራሳቸው መያዣ፣ ልዩ የክፍል ቅድመ ቅጥያ እና ማስተካከያዎች አሏቸው። በእነዚህ መግቻ ነጥቦች ላይ ፍርግርግ እንዴት እንደሚቀየር እነሆ፦
xs <576 ፒክስል |
ኤስኤምኤስ ≥576 ፒክስል |
ኤምዲ ≥768 ፒክስል |
lg ≥992 ፒክስል |
xl ≥1200 ፒክስል |
xxl ≥1400 ፒክስል |
|
---|---|---|---|---|---|---|
መያዣmax-width |
የለም (ራስ-ሰር) | 540 ፒክስል | 720 ፒክስል | 960 ፒክስል | 1140 ፒክስል | 1320 ፒክስል |
የክፍል ቅድመ ቅጥያ | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
.col-xxl- |
# የአምዶች | 12 | |||||
የጎርፍ ስፋት | 1.5rem (.75rem በግራ እና በቀኝ) | |||||
ብጁ ጉድጓዶች | አዎ | |||||
የተደላደለ | አዎ | |||||
የአምድ ማዘዝ | አዎ |
ራስ-አቀማመጥ አምዶች
ያለ ግልጽ ቁጥር ያለው እንደ ክፍል ያለ ቀላል የአምድ መጠን ለመግፈፍ ነጥብ-ተኮር የአምድ ክፍሎችን ተጠቀም .col-sm-6
።
እኩል ስፋት
ለምሳሌ፣ እዚህ ሁለት የፍርግርግ አቀማመጦች እዚህ አሉ በእያንዳንዱ መሳሪያ እና መመልከቻ ከ xs
እስከ xxl
. ለእያንዳንዱ መግቻ ነጥብ ማንኛውንም ክፍል-ያነሰ ክፍሎችን ያክሉ እና እያንዳንዱ አምድ ተመሳሳይ ስፋት ይሆናል።
<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>
የአንድ አምድ ስፋት በማዘጋጀት ላይ
ለ 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>
የረድፍ ዓምዶች
.row-cols-*
የእርስዎን ይዘት እና አቀማመጥ በተሻለ ሁኔታ የሚሰጡትን የአምዶች ብዛት በፍጥነት ለማዘጋጀት ምላሽ ሰጪ ክፍሎችን ይጠቀሙ ። መደበኛ .col-*
ክፍሎች ለነጠላ አምዶች (ለምሳሌ፣) ተፈጻሚ ሲሆኑ .col-md-4
፣ የረድፍ ዓምዶች ክፍሎች በወላጅ ላይ .row
ለተያዙ ዓምዶች እንደ ነባሪ ይቀመጣሉ። በእሱ አማካኝነት .row-cols-auto
ዓምዶቹን ተፈጥሯዊ ስፋታቸውን መስጠት ይችላሉ.
መሰረታዊ የፍርግርግ አቀማመጦችን በፍጥነት ለመፍጠር ወይም የካርድ አቀማመጦችን ለመቆጣጠር እና በአምድ ደረጃ ሲያስፈልግ ለመሻር እነዚህን የረድፍ አምዶች ክፍሎች ተጠቀም።
<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-auto">
<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>
<div class="container">
<div class="row row-cols-2 row-cols-lg-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">Column</div>
<div class="col-4 col-lg-2">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);
}
}
መክተቻ
ይዘትዎን ከነባሪው ፍርግርግ ጋር ለመክተት አሁን ባለው አምድ ውስጥ አዲስ እና የአምዶች .row
ስብስብ ያክሉ። የጎጆ ረድፎች እስከ 12 ወይም ከዚያ በታች የሚጨምሩ የአምዶች ስብስብ ማካተት አለባቸው (ሁሉንም ያሉትን 12 አምዶች መጠቀም አያስፈልግም)።.col-sm-*
.col-sm-*
<div class="container">
<div class="row">
<div class="col-sm-3">
Level 1: .col-sm-3
</div>
<div class="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: 1.5rem;
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1320px
);
ቅልቅል
ሚክሰኖች ከግሪድ ተለዋዋጮች ጋር በጥምረት ጥቅም ላይ የሚውሉት ለግል ፍርግርግ አምዶች የፍቺ 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();
// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@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: 1.5rem !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
፣ ወይም %
) ውስጥ ማቀናበሩን ያረጋግጡ ።