CSS ජාලකය

උදාහරණ සහ කේත කොටස් සමඟ CSS ජාලකය මත ගොඩනගා ඇති අපගේ විකල්ප පිරිසැලසුම් පද්ධතිය සක්‍රීය කිරීම, භාවිතා කිරීම සහ අභිරුචිකරණය කරන්නේ කෙසේදැයි ඉගෙන ගන්න.

මෙම පිටුවේ

බූට්ස්ට්‍රැප් හි පෙරනිමි ජාල පද්ධතිය, මිලියන සංඛ්‍යාත පුද්ගලයින් විසින් උත්සාහ කර පරීක්ෂා කරන ලද, දශකයකට අධික CSS පිරිසැලසුම් ශිල්පීය ක්‍රමවල උච්චතම අවස්ථාව නියෝජනය කරයි. නමුත්, එය නව CSS ජාලකය වැනි බ්‍රවුසරවල අප දකින බොහෝ නවීන CSS විශේෂාංග සහ තාක්ෂණික ක්‍රම නොමැතිව නිර්මාණය කර ඇත.

පෙරනිමිති-අපගේ CSS ජාල පද්ධතිය පර්යේෂණාත්මක වන අතර v5.1.0 ලෙස තෝරා ගැනීමයි! අපි එය ඔබට ප්‍රදර්ශනය කිරීම සඳහා අපගේ ලේඛනගත CSS වෙත ඇතුළත් කළ නමුත් එය පෙරනිමියෙන් අබල කර ඇත. ඔබේ ව්‍යාපෘති තුළ එය සක්‍රීය කරන්නේ කෙසේදැයි ඉගෙන ගැනීමට දිගටම කියවන්න.

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

Bootstrap 5 සමඟින්, අපි CSS Grid මත ගොඩනගා ඇති නමුත් Bootstrap twist එකක් සහිත වෙනම ජාල පද්ධතියක් සක්‍රීය කිරීමේ විකල්පය එකතු කර ඇත. ඔබට තවමත් ප්‍රතිචාරාත්මක පිරිසැලසුම් තැනීමට අවශ්‍ය පරිදි අයදුම් කළ හැකි පන්ති ලැබේ, නමුත් ආවරණය යටතේ වෙනස් ප්‍රවේශයක් සමඟ.

CSS ජාලකය තෝරාගෙන ඇත. සැකසීමෙන් පෙරනිමි ජාල පද්ධතිය අක්‍රිය කරන්න $enable-grid-classes: falseසහ සැකසීමෙන් CSS ජාලකය සක්‍රීය කරන්න $enable-cssgrid: true. ඉන්පසු, ඔබේ Sass නැවත සම්පාදනය කරන්න.
.rowසමඟ අවස්ථා ආදේශ කරන්න .grid. පන්තිය ඔබ ඔබේ HTML සමඟ ගොඩනඟන එකක් .gridසකසා display: gridනිර්මාණය කරයි .grid-template
.col-*පන්ති සමඟ පන්ති ආදේශ කරන්න .g-col-*. මෙයට හේතුව අපගේ CSS ජාලක තීරු grid-columnවෙනුවට දේපල භාවිතා කිරීමයි width.
CSS විචල්‍යයන් හරහා තීරු සහ කාණු ප්‍රමාණය සකසා ඇත. මේවා මාපියන් මත සකසන්න .gridසහ ඔබට අවශ්‍ය පරිදි අභිරුචිකරණය කරන්න, පේළිගතව හෝ මෝස්තර පත්‍රිකාවකින්, --bs-columnsසහ --bs-gap.

gapඅනාගතයේදී, දේපල flexbox සඳහා සම්පූර්ණ බ්‍රවුසර සහාය ලබා ගෙන ඇති බැවින් Bootstrap දෙමුහුන් විසඳුමකට මාරු වනු ඇත .

ප්රධාන වෙනස්කම්

පෙරනිමි ජාල පද්ධතියට සාපේක්ෂව:

Flex උපයෝගිතා CSS ජාලක තීරු වලට එකම ආකාරයෙන් බලපාන්නේ නැත.
හිඩැස් කාණු ආදේශ කරයි. දේපල අපගේ පෙරනිමි ජාල පද්ධතියෙන් gapතිරස් ප්‍රතිස්ථාපනය කරන අතර වඩාත් ක්‍රියා කරයි .paddingmargin
එනිසා, s මෙන් නොව .row, .grids වලට සෘණ ආන්තික නොමැති අතර ජාලක කාණු වෙනස් කිරීමට ආන්තික උපයෝගිතා භාවිතා කළ නොහැක. ජාලක හිඩැස් පෙරනිමියෙන් තිරස් අතට සහ සිරස් අතට යොදනු ලැබේ. වැඩි විස්තර සඳහා අභිරුචිකරණ කොටස බලන්න.
පේළිගත සහ අභිරුචි විලාසයන් නවීකරණ පන්ති සඳහා ප්‍රතිස්ථාපන ලෙස බැලිය යුතුය (උදා, style="--bs-columns: 3;"එදිරිව class="row-cols-3").
කැදැලි කිරීම ඒ හා සමානව ක්‍රියා කරයි, නමුත් කැදැල්ලක එක් එක් අවස්ථාවෙහි ඔබේ තීරු ගණන් නැවත සැකසීමට ඔබට අවශ්‍ය විය හැක .grid. විස්තර සඳහා කූඩු කොටස බලන්න.

උදාහරණ

තීරු තුනක්

.g-col-4පන්ති භාවිතා කිරීමෙන් සියලුම දර්ශන තොට සහ උපාංග හරහා සමාන පළල තීරු තුනක් සෑදිය හැක . දර්ශන ප්‍රමාණය අනුව පිරිසැලසුම වෙනස් කිරීමට ප්‍රතිචාරාත්මක පන්ති එක් කරන්න .

.g-col-4

html

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

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

දර්ශන තොට හරහා ඔබේ පිරිසැලසුම සකස් කිරීමට ප්‍රතිචාරාත්මක පන්ති භාවිත කරන්න. මෙහිදී අපි පටුම දර්ශන තොටුපළවල තීරු දෙකකින් පටන් ගනිමු, පසුව මධ්‍යම දර්ශන තොටුපළවල සහ ඊට ඉහළින් තීරු තුනක් දක්වා වර්ධනය වෙමු.

.g-col-6 .g-col-md-4

html

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

සියලුම දර්ශන තොටුපලවල මෙම තීරු දෙකේ පිරිසැලසුම සමඟ එය සසඳන්න.

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

එතීම

තිරස් අතට තවත් ඉඩක් නොමැති විට ජාල අයිතම ස්වයංක්‍රීයව ඊළඟ පේළියට ඔතා. gapජාල අයිතම අතර තිරස් සහ සිරස් හිඩැස්වලට අදාළ වන බව සලකන්න .

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

ආරම්භ වේ

පන්ති අරඹන්න අපගේ පෙරනිමි ජාලක ඕෆ්සෙට් පන්ති ප්‍රතිස්ථාපනය කිරීම අරමුණු කරයි, නමුත් ඒවා සම්පූර්ණයෙන්ම සමාන නොවේ. CSS Grid "මෙම තීරුවෙන් ආරම්භ කරන්න" සහ "මෙම තීරුවෙන් අවසන් කරන්න" යනුවෙන් බ්‍රවුසරවලට පවසන මෝස්තර හරහා ජාලක අච්චුවක් නිර්මාණය කරයි. එම ගුණාංග grid-column-startසහ grid-column-end. ආරම්භක පන්ති යනු හිටපු අය සඳහා කෙටි යෙදුමකි. ඔබට අවශ්‍ය පරිදි ඔබේ තීරු ප්‍රමාණයට සහ පෙළගස්වීමට තීරු පන්ති සමඟ ඒවා යුගල කරන්න. මෙම ගුණාංග සඳහා වලංගු නොවන අගයක් 1ලෙස පන්ති ආරම්භ කරන්න .0

.g-col-3 .g-start-2

.g-col-4 .g-start-6

html

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

ස්වයංක්‍රීය තීරු

ජාල අයිතමවල පන්ති නොමැති විට (a හි ආසන්න දරුවන් .grid), සෑම ජාල අයිතමයක්ම ස්වයංක්‍රීයව එක් තීරුවකට ප්‍රමාණ කෙරේ.

html

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

මෙම හැසිරීම ජාල තීරු පන්ති සමඟ මිශ්‍ර කළ හැක.

.g-col-6

html

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

කූඩු කිරීම

අපගේ පෙරනිමි ජාල පද්ධතියට සමානව, අපගේ CSS ජාලකය පහසුවෙන් කූඩු කිරීමට ඉඩ සලසයි .grid. කෙසේ වෙතත්, පෙරනිමිය මෙන් නොව, මෙම ජාලකය පේළි, තීරු සහ හිඩැස්වල වෙනස්කම් උරුම කරයි. පහත උදාහරණය සලකා බලන්න:

අපි දේශීය CSS විචල්‍යයක් සමඟින් පෙරනිමි තීරු ගණන අභිබවා යමු: --bs-columns: 3.
පළමු ස්වයංක්‍රීය තීරුවේ, තීරු ගණන උරුම වී ඇති අතර සෑම තීරුවක්ම පවතින පළලින් තුනෙන් එකක් වේ.
දෙවන ස්වයංක්‍රීය තීරුවේ, අපි කැදැල්ලෙහි තීරු ගණන .grid12 (අපගේ පෙරනිමිය) වෙත නැවත සකස් කර ඇත.
තෙවන ස්වයංක්‍රීය තීරුවේ කැදලි අන්තර්ගතයක් නොමැත.

ප්‍රායෝගිකව මෙය අපගේ පෙරනිමි ජාල පද්ධතිය හා සසඳන විට වඩාත් සංකීර්ණ සහ අභිරුචි පිරිසැලසුම් සඳහා ඉඩ සලසයි.

පළමු ස්වයං-තීරුව

ස්වයං-තීරුව

දෙවන ස්වයං-තීරුව

12 න් 6

12 න් 4

12 න් 2

තෙවන ස්වයං-තීරුව

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Third auto-column</div>
</div>

අභිරුචිකරණය

දේශීය CSS විචල්‍යයන් සමඟ තීරු ගණන, පේළි ගණන සහ හිඩැස්වල පළල අභිරුචිකරණය කරන්න.

විචල්ය	පසුබැසීමේ අගය	විස්තර
`--bs-rows`	`1`	ඔබගේ ජාල අච්චුවේ ඇති පේළි ගණන
`--bs-columns`	`12`	ඔබගේ ජාල අච්චුවේ ඇති තීරු ගණන
`--bs-gap`	`1.5rem`	තීරු අතර පරතරයේ විශාලත්වය (සිරස් සහ තිරස්)

මෙම CSS විචල්‍යයන්ට පෙරනිමි අගයක් නොමැත; ඒ වෙනුවට, ඔවුන් දේශීය අවස්ථාවක් ලබා දෙන තෙක් භාවිතා කරන පසුබැසීමේ අගයන් යොදයි . උදාහරණයක් ලෙස, අපි var(--bs-rows, 1)අපගේ CSS ජාල පේළි සඳහා භාවිතා කරමු, එය --bs-rowsතවමත් කොතැනකවත් සකසා නොමැති නිසා නොසලකා හරිනු ලැබේ. එය වූ පසු, .gridනිදසුනෙහි පසුබැසීමේ අගය වෙනුවට එම අගය භාවිතා කරනු ඇත 1.

ජාල පන්ති නොමැත

ක්ෂණික ළමා මූලද්‍රව්‍ය ජාල අයිතම වේ, එබැවින් ඒවා පැහැදිලිවම පන්තියක් .gridඑක් නොකර ප්‍රමාණ කරනු ඇත ..g-col

ස්වයං-තීරුව

html

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

තීරු සහ හිඩැස්

තීරු ගණන සහ පරතරය සකස් කරන්න.

.g-col-2

html

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

.g-col-6

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

පේළි එකතු කිරීම

තවත් පේළි එකතු කිරීම සහ තීරු ස්ථානගත කිරීම වෙනස් කිරීම:

ස්වයං-තීරුව

html

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

හිඩැස්

සිරස් හිඩැස් වෙනස් කිරීමෙන් පමණක් වෙනස් කරන්න row-gap. අපි s gapමත භාවිතා කරන .gridනමුත් row-gapඅවශ්‍ය column-gapපරිදි වෙනස් කළ හැකි බව සලකන්න.

.g-col-6

html

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

gapඑම නිසා, ඔබට තනි අගයක් (සියලු පැති) හෝ අගයන් යුගලයක් (සිරස් සහ තිරස්) ගත හැකි විවිධ සිරස් සහ තිරස් s තිබිය හැක. gapමෙය සඳහා පේළිගත විලාසයක් සමඟ හෝ අපගේ --bs-gapCSS විචල්‍යය සමඟ යෙදිය හැක .

.g-col-6

html

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>

  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

සාස්

CSS ජාලකයේ එක් සීමාවක් වන්නේ අපගේ පෙරනිමි පන්ති තවමත් Sass විචල්‍ය දෙකකින් ජනනය වීමයි, $grid-columnsසහ $grid-gutter-width. මෙය අපගේ සම්පාදනය කරන ලද CSS තුළ ජනනය වන පන්ති සංඛ්‍යාව ඵලදායී ලෙස පූර්ව නිර්ණය කරයි. ඔබට මෙහි විකල්ප දෙකක් තිබේ:

එම පෙරනිමි Sass විචල්‍යයන් වෙනස් කර ඔබේ CSS නැවත සම්පාදනය කරන්න.
සපයන ලද පන්ති වැඩි කිරීමට පේළිගත හෝ අභිරුචි මෝස්තර භාවිතා කරන්න.

උදාහරණයක් ලෙස, ඔබට තීරු ගණන වැඩි කර පරතරයේ ප්‍රමාණය වෙනස් කළ හැකිය, ඉන්පසු පේළිගත මෝස්තර සහ පූර්ව නිශ්චිත CSS ජාලක තීරු පන්ති (උදා, .g-col-4) මිශ්‍රණයකින් ඔබේ “තීරු” ප්‍රමාණය කරන්න.

තීරු 14 ක්

.g-col-4

html

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>