Source

ජාල පද්ධතිය

තීරු දොළහක පද්ධතියක්, පෙරනිමි ප්‍රතිචාරාත්මක ස්ථර පහක්, Sass විචල්‍යයන් සහ මිශ්‍රණයන් සහ පූර්ව නිශ්චිත පන්ති දුසිම් ගණනකට ස්තූතිවන්ත වන පරිදි සියලු හැඩතල සහ ප්‍රමාණයේ පිරිසැලසුම් තැනීමට අපගේ බලවත් ජංගම-පළමු flexbox ජාලකය භාවිතා කරන්න.

එය ක්රියා කරන ආකාරය

Bootstrap හි ජාල පද්ධතිය අන්තර්ගතය පිරිසැලසුම් කිරීමට සහ පෙළගැස්වීමට බහාලුම්, පේළි සහ තීරු මාලාවක් භාවිතා කරයි. එය flexbox සමඟ ගොඩනගා ඇති අතර සම්පූර්ණයෙන්ම ප්‍රතිචාර දක්වයි. පහත දැක්වෙන්නේ ජාලකය එකට එකතු වන ආකාරය පිළිබඳ උදාහරණයක් සහ ගැඹුරු බැල්මකි.

flexbox වලට අලුත් හෝ නුහුරුද? පසුබිම, පාරිභාෂිතය, මාර්ගෝපදේශ සහ කේත කොටස් සඳහා මෙම CSS උපක්‍රම 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.
තීරු widths ප්‍රතිශත වලින් සකසා ඇත, එබැවින් ඒවා සෑම විටම ද්‍රව සහ ඒවායේ මව් මූලද්‍රව්‍යයට සාපේක්ෂව ප්‍රමාණයෙන් යුක්ත වේ.
paddingතනි තීරු අතර කාණු සෑදීමට තීරු තිරස් ඇත, කෙසේ වෙතත්, ඔබට marginපේළි paddingවලින් සහ තීරු වලින් ඉවත් .no-guttersකළ හැක .row.
ජාලකය ප්‍රතිචාර දැක්වීමට, ජාල බිඳුම් ලක්ෂ්‍ය පහක් ඇත, එක් එක් ප්‍රතිචාරාත්මක බිඳුම් ලක්ෂ්‍ය සඳහා එකක් : සියලුම කඩඉම් (අතිරේක කුඩා), කුඩා, මධ්‍යම, විශාල සහ අමතර විශාල.
ජාල බිඳුම් ලක්ෂ්‍ය පදනම් වන්නේ අවම පළල මාධ්‍ය විමසුම් මත වන අතර, එයින් අදහස් වන්නේ ඒවා එම එක් කඩඉම් ලක්ෂයකට සහ ඊට ඉහළින් ඇති සියලුම ඒවාට අදාළ වන බවයි (උදා, .col-sm-4කුඩා, මධ්‍යම, විශාල සහ අමතර විශාල උපාංග සඳහා අදාළ වේ, නමුත් පළමු xsකඩඉම් ලක්ෂ්‍යය නොවේ).
ඔබට වඩාත් අර්ථාන්විත සලකුණු කිරීම සඳහා පූර්ව නිශ්චිත ජාල පන්ති (වැනි .col-4) හෝ Sass mixins භාවිතා කළ හැක.

සමහර HTML මූලද්‍රව්‍ය flex බහාලුම් ලෙස භාවිතා කිරීමට ඇති නොහැකියාව වැනි flexbox අවට ඇති සීමාවන් සහ දෝෂ පිළිබඳව දැනුවත් වන්න .

ජාල විකල්ප

Bootstrap බොහෝ ප්‍රමාණයන් නිර්වචනය කිරීම සඳහා ems හෝ s භාවිතා කරන අතර, s ජාල බිඳුම් ලක්ෂ්‍ය සහ බහාලුම් පළල සඳහා භාවිතා වේ. මෙයට හේතුව වීව්පෝට් පළල පික්සල වලින් වන අතර අකුරු ප්‍රමාණය සමඟ වෙනස් නොවන බැවිනි .rempx

Bootstrap ජාල පද්ධතියේ අංගයන් පහසු වගුවක් සහිත උපාංග කිහිපයක් හරහා ක්‍රියා කරන ආකාරය බලන්න.

	අමතර කුඩා <576px	කුඩා ≥576px	මධ්‍යම ≥768px	විශාල ≥992px	අති විශාල ≥1200px
උපරිම බහාලුම් පළල	කිසිවක් නැත (ස්වයංක්‍රීය)	540px	720px	960px	1140px
පන්ති උපසර්ගය	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`
තීරු #	12
කාණු පළල	30px (තීරුවක සෑම පැත්තකින්ම 15px)
නෙස්ටබල්	ඔව්
තීරු ඇණවුම් කිරීම	ඔව්

ස්වයංක්‍රීය පිරිසැලසුම් තීරු

වැනි පැහැදිලි අංක සහිත පන්තියක් නොමැතිව පහසු තීරු ප්‍රමාණ කිරීම සඳහා කඩඉම්-විශේෂිත තීරු පන්ති භාවිතා කරන්න .col-sm-6.

සමාන-පළල

උදාහරණයක් ලෙස, මෙහි සිට සෑම උපාංගයකටම සහ දර්ශන තොටකටම අදාළ වන ජාල පිරිසැලසුම් දෙකක් xsඇත xl. ඔබට අවශ්‍ය සෑම කඩඉමක් සඳහාම ඒකක අඩු පන්ති සංඛ්‍යාවක් එක් කරන්න, සෑම තීරුවක්ම එකම පළල වේ.

2 න් 1

2 න් 2

3 න් 1

3 න් 2

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-basisහෝ border. පැරණි බ්‍රවුසර අනුවාද සඳහා විසඳුම් ඇත, නමුත් ඔබේ ඉලක්ක බ්‍රවුසර දෝෂ සහිත අනුවාදවලට වැටෙන්නේ නැත්නම් ඒවා අවශ්‍ය නොවේ.

col

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

එක් තීරු පළලක් සැකසීම

ෆ්ලෙක්ස්බොක්ස් ජාලක තීරු සඳහා ස්වයංක්‍රීය පිරිසැලසුම යන්නෙන් අදහස් වන්නේ ඔබට එක් තීරුවක පළල සැකසිය හැකි අතර එය වටා සහෝදර තීරු ස්වයංක්‍රීයව ප්‍රතිප්‍රමාණ කළ හැකි බවයි. ඔබට පූර්ව නිර්වචනය කළ ජාල පන්ති (පහත පෙන්වා ඇති පරිදි), ජාල මිශ්‍රණ හෝ පේළිගත පළල භාවිතා කළ හැක. මැද තීරුවේ පළල කුමක් වුවත් අනෙක් තීරු ප්‍රමාණය වෙනස් වන බව සලකන්න.

3 න් 1

3 න් 2 (පුළුල්)

3 න් 3

3 න් 1

3 න් 2 (පුළුල්)

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ඒවායේ අන්තර්ගතයේ ස්වාභාවික පළල මත පදනම්ව තීරු ප්‍රමාණයට පන්ති භාවිතා කරන්න .

3 න් 1

විචල්ය පළල අන්තර්ගතය

3 න් 3

3 න් 1

විචල්ය පළල අන්තර්ගතය

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>

ප්රතිචාරාත්මක පන්ති

Bootstrap හි ජාලක සංකීර්ණ ප්‍රතිචාරාත්මක පිරිසැලසුම් ගොඩනැගීම සඳහා පූර්ව නිශ්චිත පන්තිවල ස්ථර පහක් ඇතුළත් වේ. ඔබට සුදුසු යැයි පෙනෙන පරිදි අමතර කුඩා, කුඩා, මධ්‍යම, විශාල හෝ අමතර විශාල උපාංග මත ඔබේ තීරු ප්‍රමාණය අභිරුචිකරණය කරන්න.

සියලුම කඩඉම් ලකුණු

කුඩාම උපාංගවල සිට විශාලතම උපාංග දක්වා එකම ජාල සඳහා, .colසහ .col-*පන්ති භාවිතා කරන්න. ඔබට විශේෂයෙන් ප්‍රමාණයේ තීරුවක් අවශ්‍ය වූ විට අංකිත පන්තියක් සඳහන් කරන්න; එසේ නොමැති නම්, රැඳී සිටීමට නිදහස් වන්න .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

.col-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 mixin ද භාවිතා කළ හැකිය 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වලින් සෘණ .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කට වඩා තැබුවහොත්, එක් එක් අමතර තීරු සමූහය, එක් ඒකකයක් ලෙස, නව රේඛාවක් මතට එති.

.col-9

.col-4
9 + 4 = 13 > 12 සිට, මෙම 4-තීරු-පුළුල් div එක යාබද ඒකකයක් ලෙස නව රේඛාවක් මත ඔතා ඇත.

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

තීරු බිඳීම්

flexbox හි නව පේළියකට තීරු බිඳීමට කුඩා හැක් කිරීමක් අවශ්‍ය වේ: width: 100%ඔබට ඔබේ තීරු නව පේළියකට එතීමට අවශ්‍ය ඕනෑම තැනක මූලද්‍රව්‍යයක් එක් කරන්න. සාමාන්‍යයෙන් මෙය බහුවිධ .rows වලින් ඉටු වේ, නමුත් සෑම ක්‍රියාත්මක කිරීමේ ක්‍රමයක්ම මෙයට හේතු විය නොහැක.

.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-lastපන්ති ද ඇත. මෙම පන්ති අවශ්‍ය පරිදි අංකිත පන්ති සමඟ මිශ්‍ර කළ හැකිය.orderorder: -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 උත්පාදනය කිරීම සඳහා ජාලක විචල්‍යයන් සමඟ ඒකාබද්ධව Mixins භාවිතා වේ.

// 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හෝ %) සැකසීමට වග බලා ගන්න.