አምዶች

ለFlexbox ፍርግርግ ስርዓታችን ምስጋና ይግባውና ለማቀናጀት፣ ለማዘዝ እና ለማካካስ በጥቂት አማራጮች አማካኝነት ዓምዶችን እንዴት መቀየር እንደሚችሉ ይወቁ። በተጨማሪም፣ ፍርግርግ ያልሆኑ አባሎችን ስፋቶችን ለማስተዳደር የአምድ ክፍሎችን እንዴት መጠቀም እንደሚቻል ይመልከቱ።

በዚህ ገጽ ላይ

ቀና በል! የፍርግርግ ዓምዶችዎን እንዴት ማሻሻል እና ማበጀት እንደሚችሉ ወደ ውስጥ ከመጥለቅዎ በፊት በመጀመሪያ የፍርግርግ ገጹን ማንበብዎን ያረጋግጡ ።

እንዴት እንደሚሠሩ

አምዶች በፍርግርግ ፍሌክስቦክስ አርክቴክቸር ላይ ይገነባሉ። ፍሌክስቦክስ ማለት አምዶችን የመቀየር እና የአምዶች ቡድኖችን በረድፍ ደረጃ ለመቀየር አማራጮች አሉን ማለት ነው ። ዓምዶች እንዴት እንደሚያድጉ፣ እንደሚቀነሱ ወይም በሌላ መንገድ እንደሚቀየሩ ይመርጣሉ።
የፍርግርግ አቀማመጦችን በሚገነቡበት ጊዜ ሁሉም ይዘቶች በአምዶች ውስጥ ይገባሉ. የBootstrap ግሪድ ተዋረድ ከመያዣ ወደ ረድፍ ወደ አምድ ወደ ይዘትዎ ይሄዳል። አልፎ አልፎ፣ ይዘትን እና አምድን ሊያጣምሩ ይችላሉ፣ ነገር ግን ያልተጠበቁ ውጤቶች ሊኖሩ እንደሚችሉ ይገንዘቡ።
ቡትስትራፕ ፈጣን ምላሽ ሰጪ አቀማመጦችን ለመፍጠር አስቀድሞ የተገለጹ ክፍሎችን ያካትታል። በእያንዳንዱ የፍርግርግ እርከን በስድስት መግቻ ነጥቦች እና በደርዘን አምዶች፣ የሚፈልጉትን አቀማመጦች እንዲፈጥሩ አስቀድመው በደርዘን የሚቆጠሩ ክፍሎች አሉን። ከፈለጉ ይህ በ Sass በኩል ሊሰናከል ይችላል።

አሰላለፍ

ዓምዶችን በአቀባዊ እና በአግድም ለመደርደር የFlexbox አሰላለፍ መገልገያዎችን ይጠቀሙ።

አቀባዊ አሰላለፍ

ከሶስት ዓምዶች አንዱ

html

<div class="container text-center">
  <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>

ከሶስት ዓምዶች አንዱ

html

<div class="container text-center">
  <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>

አግድም አሰላለፍ

ከሁለት አምዶች አንዱ

html

<div class="container text-center">
  <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 class="row justify-content-evenly">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

የአምድ መጠቅለያ

በአንድ ረድፍ ውስጥ ከ12 በላይ ዓምዶች ከተቀመጡ፣ እያንዳንዱ ተጨማሪ ዓምዶች ቡድን እንደ አንድ ክፍል፣ ወደ አዲስ መስመር ይጠቀለላል።

.ቆላ-9

.col-4
ከ 9 + 4 = 13 > 12 ጀምሮ፣ ይህ ባለ 4-አምድ-ሰፊ ዲቪ እንደ አንድ ተከታታይ ክፍል በአዲስ መስመር ላይ ይጠቀለላል።

.col-6
ተከታይ አምዶች በአዲሱ መስመር ይቀጥላሉ.

html

<div class="container">
  <div class="row">
    <div class="col-9">.col-9</div>
    <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 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ዎች ይከናወናል, ነገር ግን እያንዳንዱ የአተገባበር ዘዴ ለዚህ ተጠያቂ ሊሆን አይችልም.

.col-6 .col-sm-3

html

<div class="container text-center">
  <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>

ይህንን እረፍት በልዩ የመግቻ ነጥቦች ላይ በኛ ምላሽ ሰጪ የማሳያ መገልገያ መጠቀም ይችላሉ።

.col-6 .col-sm-4

html

<div class="container text-center">
  <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-215

በመጀመሪያ በDOM ውስጥ፣ ምንም ትዕዛዝ አልተተገበረም።

ሁለተኛ በDOM፣ በትልቁ ትዕዛዝ

ሦስተኛው በDOM፣ ከ1 ትዕዛዝ ጋር

html

<div class="container text-center">
  <div class="row">
    <div class="col">
      First in DOM, no order applied
    </div>
    <div class="col order-5">
      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-lastorderorder: -1order: 6.order-*

መጀመሪያ በDOM፣ የታዘዘ የመጨረሻ

ሁለተኛ በDOM፣ ያልታዘዘ

በDOM ውስጥ ሶስተኛ፣ መጀመሪያ የታዘዘ

html

<div class="container text-center">
  <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

.col-md-4

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

.col-md-3 .offset-md-3

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

html

<div class="container text-center">
  <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>

ምላሽ በሚሰጡ መግቻ ነጥቦች ላይ ከአምድ ማጽዳት በተጨማሪ፣ ማካካሻዎችን ዳግም ማስጀመር ሊኖርብዎ ይችላል። ይህንን በተግባር በፍርግርግ ምሳሌ ውስጥ ይመልከቱ ።

.col-sm-5 .col-md-6

.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0

.col-sm-6 .col-md-5 .col-lg-6

.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0

html

<div class="container text-center">
  <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 በሚደረገው ሽግግር፣ የኅዳግ መገልገያዎችን መጠቀም ትችላለህ፣ እንደ .me-autoወንድም እህት አምዶች እርስ በርሳቸው እንዲራቁ ማስገደድ።

.col-md-4

.col-md-4 .ms-auto

.col-md-3 .ms-md-auto

.col-auto .me-auto

.col-auto

html

<div class="container text-center">
  <div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
  </div>
  <div class="row">
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
    <div class="col-md-3 ms-md-auto">.col-md-3 .ms-md-auto</div>
  </div>
  <div class="row">
    <div class="col-auto me-auto">.col-auto .me-auto</div>
    <div class="col-auto">.col-auto</div>
  </div>
</div>

ገለልተኛ የአምድ ክፍሎች

ለአንድ አካል የተወሰነ ስፋት ለመስጠት .col-*ክፍሎቹ ከሀ ውጭ ሊጠቀሙበት ይችላሉ ። .rowየዓምድ ክፍሎች እንደ ተከታታይ ቀጥተኛ ያልሆኑ ልጆች ጥቅም ላይ በሚውሉበት ጊዜ ሁሉ ንጣፎች ተትተዋል.

.col-3፡ ስፋት 25%

.col-sm-9፡ የ75% ስፋት ከኤስኤምኤስ መሰባበር በላይ

html

<div class="col-3 bg-light p-3 border">
  .col-3: width of 25%
</div>
<div class="col-sm-9 bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</div>

ምላሽ ሰጪ ተንሳፋፊ ምስሎችን ለመፍጠር ክፍሎቹን ከመገልገያዎች ጋር በአንድ ላይ መጠቀም ይችላሉ። .clearfixጽሑፉ አጭር ከሆነ ተንሳፋፊውን ለማጽዳት ይዘቱን በጥቅል መጠቅለልዎን ያረጋግጡ ።

የቦታ ያዥ ጽሑፍ አንቀጽ። የ clearfix ክፍል አጠቃቀምን ለማሳየት እዚህ እየተጠቀምንበት ነው። አምዶች እዚህ ከተንሳፋፊው ምስል ጋር እንዴት እንደሚገናኙ ለማሳየት ጥቂት ትርጉም የሌላቸውን ሀረጎች እዚህ ላይ እየጨመርን ነው።

አንቀጾቹን እንደምታዩት በተንሳፋፊው ምስል ዙሪያ በጸጋ ይጠቀለላሉ። አሁን ይህ አሰልቺ የሆነ የቦታ ያዥ ጽሑፍ ብቻ ሳይሆን የሚቀጥል፣ ነገር ግን ምንም ተጨባጭ መረጃ የማያስተላልፍ፣ እዚህ ካለው አንዳንድ ትክክለኛ ይዘት ጋር እንዴት እንደሚመስል አስቡት። በቀላሉ ቦታ ይወስዳል እና በእውነት መነበብ የለበትም።

እና አሁንም፣ እዚህ፣ አሁንም ይህን የቦታ ያዥ ጽሑፍ በማንበብ በፅናት፣ ለተጨማሪ ግንዛቤዎች፣ ወይም አንዳንድ የተደበቀ የትንሳኤ እንቁላልን ተስፋ በማድረግ ላይ ነዎት። ቀልድ ምናልባት። እንደ አለመታደል ሆኖ እዚህ ምንም የለም።

html

<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">

  <p>
    A paragraph of placeholder text. We're using it here to show the use of the clearfix class. We're adding quite a few meaningless phrases here to demonstrate how the columns interact here with the floated image.
  </p>

  <p>
    As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
  </p>

  <p>
    And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there's none of that here.
  </p>
</div>