ጐዳጉዲ
ጓተርስ ኣብ መንጎ ዓምድታትካ ዘሎ መሸፈኒ ኮይኑ፡ ኣብ ስርዓት ሽቦ ቡትስትራፕ ንትሕዝቶታት ብመልሲ ንምሃብን ንምስላጥን ዝውዕል እዩ።
ከመይ ይሰርሑ
-
ጐዳጉዲ ኣብ መንጎ ትሕዝቶ ዓምዲ ዝርከቡ ክፍተታት እዮም፣ ብኣግማድ ዝፍጠሩ
padding
. ኣብ ነፍሲ ወከፍ ዓምዲን ነቐምጥpadding-right
፣ ትሕዝቶ ንምስምማዕ ድማ ኣብ መጀመርታን መወዳእታን ነፍሲ ወከፍ መስርዕ ንዕኡ ንምምዕርራይpadding-left
ኣሉታዊ ንጥቀም ።margin
-
ጐዳጉዲ ካብ
1.5rem
(24px
) ገፊሕ ይጅምሩ። እዚ ድማ ንሽቦና ምስቲ ናይ ፓዲንግን ማርጅን ስፔሰርስን ስኬል ከነመዓራርዮ የኽእለና። -
ጐዳጉዲ ብመልስታት ክስተኻኸሉ ይኽእሉ እዮም። ንኣግማድ ጐዳጉዲ፣ ቀጥታዊ ጐዳጉዲን ኩሎም ጐዳጉዲን ንምቕያር ንነጥቢ ምብታኽ ዝምልከቱ ክፍልታት ጐዳጉዲ ተጠቐም።
ልኡል ጐዳጉዲ
.gx-*
ክፍልታት ንኣግማድ ስፍሓት ጐዳጉዲ ንምቁጽጻር ክጥቀሙ ይኽእሉ። እቲ .container
ወይ .container-fluid
ወላዲ ዓበይቲ ጐዳጉዲ እውን እንተተጠቒምካ ዘይተደልየ ምፍሳስ ንምክልኻል ምትዕርራይ ከድልዮ ይኽእል እዩ፣ ዝሰማማዕ መሸፈኒ ዩቲሊቲ ብምጥቃም። ንኣብነት ኣብዚ ዝስዕብ ኣብነት ፓዲንግ ብ .px-4
:
<div class="container px-4">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ኣማራጺ ፍታሕ ኣብ ዙርያ እቲ .row
ምስቲ .overflow-hidden
ክፍሊ መጠቕለሊ ምውሳኽ እዩ፤
<div class="container overflow-hidden">
<div class="row gx-5">
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ቀጥ ዝበለ ጐዳጉዲ
.gy-*
ክፍልታት ነቲ ቀጥታዊ ስፍሓት ጐዳጉዲ ንምቁጽጻር ክጥቀሙ ይኽእሉ። ከምቲ ኣግማድ ጐዳጉዲ፡ እቶም ቀጥ ዝበሉ ጐዳጉዲ ገለ ምፍሳስ ኣብ ትሕቲ እቲ .row
ኣብ መወዳእታ ገጽ ዘሎ ከስዕቡ ይኽእሉ። .row
እዚ እንተ ኣጋጢሙ ፡ ምስቲ .overflow-hidden
ክፍሊ ኣብ ዙርያኻ መጠቕለሊ ትውስኽ ፤
<div class="container overflow-hidden">
<div class="row gy-5">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
ልኡል & ቀጥ ዝበለ ጐዳጉዲ
.g-*
.overflow-hidden
classes ንናይ ኣግማድ ስፍሓት ጐዳጉዲ ንምቁጽጻር ክንጥቀመሉ ንኽእል ኢና፣ ነዚ ዝስዕብ ኣብነት ዝነኣሰ ስፍሓት ጐዳጉዲ ንጥቀም፣ ስለዚ ናይ መጠቕለሊ ክፍሊ ምውሳኽ ኣየድልን እዩ ።
<div class="container">
<div class="row g-2">
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col-6">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>
</div>
መስርዕ ዓምድታት ጐዳጉዲ
ኣብ መስርዕ ዓምድታት ’ ውን ናይ ጓተር ክፍልታት ክውሰኹ ይኽእሉ ’ ዮም ። ኣብዚ ዝስዕብ ኣብነት መልሲ ዝህቡ መስርዕ ዓምድታትን ምላሽ ዝህቡ ናይ ጓተር ክፍልታትን ንጥቀም።
<div class="container">
<div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
<div class="col">
<div class="p-3 border bg-light">Row column</div>
</div>
</div>
</div>
ጐዳጉዲ የለን
ኣብቲ ኣቐዲሙ ዝተነጸረ ናይ ሽቦ ክፍልታትና ኣብ መንጎ ዓምድታት ዝርከቡ ጐዳጉዲ ብ .g-0
. እዚ ድማ ነቲ ኣሉታዊ margin
s ካብ ኩሎም ናይ ቀረባ ህጻናት ዓምድታትን .row
ነቲ ኣግማድ ድማ የወግዶ።padding
ካብ ወሰን ናብ ወሰን ዝኸይድ ዲዛይን የድልየካ? ነቲ ወላዲ .container
ወይ .container-fluid
.
ብተግባር እንሆ ከመይ ይመስል። ኣስተውዕል ነዚ ምስ ኩሎም ካልኦት ኣቐዲሞም ዝተነጸሩ ናይ ሽቦ ክፍልታት (ስፍሓት ዓምዲ፣ ምላሽ ዝህቡ ደረጃታት፣ ዳግመ-ምስርዓትን ካልእን ሓዊስካ) ክትጥቀመሉ ትኽእል ኢኻ።
<div class="row g-0">
<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>
ጐዳጉዲ ምቕያር
ክፍልታት ካብቲ ካብ $gutters
ካርታ ሳስ ዝውረስ ካርታ ሳስ ዝህነጹ እዮም $spacers
።
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);