in English

ජාල පද්ධතිය

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

මෙම පිටුවේ

උදාහරණයක්

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

flexbox වලට අලුත් හෝ නුහුරුද? පසුබිම, පාරිභාෂිතය, මාර්ගෝපදේශ සහ කේත කොටස් සඳහා මෙම CSS උපක්‍රම 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හතරක් විහිදේ). widths ප්‍රතිශත වලින් සකසා ඇති නිසා ඔබට සැම විටම එකම සාපේක්ෂ ප්‍රමාණය ඇත.
ගටර් ද ප්‍රතිචාරාත්මක සහ අභිරුචිකරණය කළ හැකිය. අපගේ ආන්තිකය සහ පිරවුම් පරතරයට සමාන ප්‍රමාණවලින්, සියලුම කඩඉම් ලකුණු හරහා ගටර් පන්ති තිබේ . පන්ති සහිත තිරස් කාණු , සමඟ සිරස් කාණු හෝ පන්ති සහිත සියලුම කාණු වෙනස් කරන්න . කාණු ඉවත් කිරීමට ද පවතී..gx-*.gy-*.g-*.g-0
Sass විචල්‍යයන්, සිතියම් සහ මිශ්‍රණයන් ජාලකය බලගන්වයි. ඔබට Bootstrap හි පූර්ව නිර්වචනය කළ ජාල පන්ති භාවිතා කිරීමට අවශ්‍ය නැතිනම්, ඔබට අපගේ ජාලයේ මූලාශ්‍රය Sass භාවිතා කර වඩාත් අර්ථකථන සලකුණු සහිතව ඔබේම නිර්මාණයක් කළ හැක. ඔබ සඳහා වඩාත් නම්‍යශීලී බවක් සඳහා මෙම Sass විචල්‍යයන් පරිභෝජනය කිරීමට අපි සමහර CSS අභිරුචි ගුණාංග ද ඇතුළත් කරමු.

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

ජාල විකල්ප

Bootstrap හි ජාල පද්ධතියට පෙරනිමි බිඳුම් ලක්ෂ්‍ය හයම සහ ඔබ අභිරුචිකරණය කරන ඕනෑම බිඳීමක් හරහා අනුවර්තනය විය හැක. පෙරනිමි ජාල ස්ථර හය පහත පරිදි වේ:

අමතර කුඩා (xs)
කුඩා (sm)
මධ්‍යම (md)
විශාල (lg)
අති විශාල (xl)
අති විශාල (xxl)

ඉහත සඳහන් කළ පරිදි, මෙම එක් එක් කඩඉම් ලක්ෂ්‍යවලට තමන්ගේම බහාලුම්, අනන්‍ය පන්ති උපසර්ගය සහ වෙනස් කරන්නන් ඇත. මෙම බිඳුම් ලක්ෂ්‍ය හරහා ජාලකය වෙනස් වන ආකාරය මෙන්න:

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	xl ≥1200px	xxl ≥1400px
කන්ටේනර්`max-width`	කිසිවක් නැත (ස්වයංක්‍රීය)	540px	720px	960px	1140px	1320px
පන්ති උපසර්ගය	`.col-`	`.col-sm-`	`.col-md-`	`.col-lg-`	`.col-xl-`	`.col-xxl-`
තීරු #	12
කාණු පළල	1.5rem (වමේ සහ දකුණේ .75rem)
අභිරුචි කාණු	ඔව්
නෙස්ටබල්	ඔව්
තීරු ඇණවුම් කිරීම	ඔව්

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

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

සමාන-පළල

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

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>

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

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

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>

පේළි තීරු

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

ඔබට මේ සමඟ ඇති 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);
  }
}

කූඩු කිරීම

පෙරනිමි ජාලකය සමඟ ඔබේ අන්තර්ගතය කැදවා ගැනීමට, පවතින තීරුවක් තුළ නව .rowසහ තීරු කට්ටලයක් එක් කරන්න . කැදලි පේළි 12ක් හෝ ඊට අඩුවෙන් එකතු කරන තීරු කට්ටලයක් ඇතුළත් විය යුතුය (ඔබ පවතින තීරු 12ම භාවිත කිරීම අවශ්‍ය නොවේ)..col-sm-*.col-sm-*

1 මට්ටම: .col-sm-3

2 මට්ටම: .col-8 .col-sm-6

2 මට්ටම: .col-4 .col-sm-6

<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 උත්පාදනය කිරීම සඳහා ජාලක විචල්‍යයන් සමඟ ඒකාබද්ධව 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();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

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