Source

የፍርግርግ ስርዓት

ለሁሉም ቅርጾች እና መጠኖች አቀማመጦችን ለመገንባት የእኛን ኃይለኛ የሞባይል-የመጀመሪያው ፍሌክስቦክስ ፍርግርግ ተጠቀም ለአስራ ሁለት አምድ ስርዓት፣ ለአምስት ነባሪ ምላሽ ሰጪ ደረጃዎች፣ የሳስ ተለዋዋጮች እና ድብልቅ ነገሮች እና በደርዘን የሚቆጠሩ አስቀድሞ የተገለጹ ክፍሎች።

እንዴት እንደሚሰራ

የቡትስትራፕ ፍርግርግ ስርዓት ይዘትን ለመቅረጽ እና ለማመጣጠን ተከታታይ መያዣዎችን፣ ረድፎችን እና አምዶችን ይጠቀማል። በ 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 አብዛኞቹን መጠኖች ለመወሰን ems ወይም s ሲጠቀም፣ s ለፍርግርግ መሰባበር ነጥቦች እና የእቃ መያዢያ ስፋቶች ጥቅም ላይ ይውላሉ። ይህ የሆነበት ምክንያት የመመልከቻው ስፋት በፒክሰሎች ውስጥ ስለሆነ እና በቅርጸ ቁምፊው መጠን አይለወጥም .rempx

የ 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. ለእያንዳንዱ መግቻ ነጥብ ማንኛውንም ክፍል-ያነሰ ክፍሎችን ያክሉ እና እያንዳንዱ አምድ ተመሳሳይ ስፋት ይሆናል።

1 ከ 2

2 ከ 2

1 ከ 3

2 ከ 3

3 ከ 3

<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-basisborder

ቆላ

<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 ፍርግርግ አምዶች ራስ-አቀማመጥ ማለት የአንድን አምድ ስፋት ማዘጋጀት እና የወንድም እህት አምዶች በራስ-ሰር በዙሪያው እንዲቀይሩ ማድረግ ይችላሉ። አስቀድመው የተገለጹ የፍርግርግ ክፍሎችን (ከዚህ በታች እንደሚታየው) ፣ የፍርግርግ ድብልቅ ወይም የመስመር ውስጥ ስፋቶችን መጠቀም ይችላሉ። የመካከለኛው አምድ ስፋት ምንም ቢሆን ሌሎቹ ዓምዶች መጠናቸውን እንደሚቀይሩ ልብ ይበሉ።

1 ከ 3

2 ከ 3 (ሰፊ)

3 ከ 3

1 ከ 3

2 ከ 3 (ሰፊ)

3 ከ 3

<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በይዘታቸው ተፈጥሯዊ ስፋት ላይ በመመስረት ዓምዶችን ለመለካት ክፍሎችን ይጠቀሙ ።

1 ከ 3

ተለዋዋጭ ስፋት ይዘት

3 ከ 3

1 ከ 3

ተለዋዋጭ ስፋት ይዘት

3 ከ 3

<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።

ቆላ

ቆላ-8

col-4

<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

col-sm-8

col-sm-4

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

ማደባለቅ እና ማመሳሰል

የእርስዎ አምዶች በቀላሉ በአንዳንድ የፍርግርግ እርከኖች ውስጥ እንዲቆለሉ አይፈልጉም? እንደ አስፈላጊነቱ ለእያንዳንዱ ደረጃ የተለያዩ ክፍሎችን ጥምረት ይጠቀሙ. ሁሉም እንዴት እንደሚሰራ የተሻለ ሀሳብ ለማግኘት ከታች ያለውን ምሳሌ ይመልከቱ።

.col-md-8

.col-6 .col-md-4

.ቆላ-6

<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። ይህ አሉታዊውን margins ከ .rowእና አግድም paddingከሁሉም የቅርብ ልጆች አምዶች ያስወግዳል።

እነዚህን ቅጦች ለመፍጠር የምንጭ ኮድ ይኸውና። የአምድ መሻሮች ለመጀመሪያዎቹ ልጆች አምዶች ብቻ የተከለሉ እና በባህሪ መራጭ በኩል ያነጣጠሩ መሆናቸውን ልብ ይበሉ ። ይህ የበለጠ የተለየ መራጭ ቢያመነጭም፣ የአምድ ንጣፍ አሁንም በክፍት መገልገያዎች የበለጠ ሊበጅ ይችላል ።

ከጫፍ እስከ ጫፍ ንድፍ ይፈልጋሉ? ወላጅ .containerወይም .container-fluid.

.no-gutters {
  margin-right: 0;
  margin-left: 0;

  > .col,
  > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
  }
}

በተግባር ፣ እንዴት እንደሚመስል እነሆ። ይህንን ከሌሎች አስቀድሞ ከተገለጹት የፍርግርግ ክፍሎች (የአምድ ስፋቶች፣ ምላሽ ሰጪ ደረጃዎች፣ ዳግም ማዘዣዎች እና ሌሎችንም ጨምሮ) መጠቀምዎን መቀጠል እንደሚችሉ ልብ ይበሉ።

.col-sm-6 .col-md-8

.col-6 .col-md-4

<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

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

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

<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

<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>

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

.col-6 .col-sm-4

<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-2112

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

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

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

<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-lastorderorder: -1order: 13order: $columns + 1.order-*

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

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

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

<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

.col-md-4

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

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

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

<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>

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

.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

<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የወንድም እህት አምዶችን እርስ በእርስ እንዲራቁ ማድረግ ያሉ የኅዳግ መገልገያዎችን መጠቀም ይችላሉ።

.col-md-4

.col-md-4 .ml-auto

.col-md-3 .ml-md-auto

.col-auto .mr-auto

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

ደረጃ 1: .col-sm-9

ደረጃ 2፡.col-8 .col-sm-6

ደረጃ 2፡ .col-4 .col-sm-6

<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 {
  width: 800px;
  @include make-container();
}

.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፣ ወይም %) ውስጥ ማቀናበሩን ያረጋግጡ ።