බූට්ස්ට්‍රැප් ජාල උදාහරණ

Bootstrap ජාල පද්ධතිය තුළ ගොඩනැගීම පිළිබඳව ඔබව හුරු කරවීමට මූලික ජාල පිරිසැලසුම්.

මෙම උදාහරණවල .themed-grid-colයම් තේමා එකතු කිරීම සඳහා පන්තිය තීරුවලට එකතු කරනු ලැබේ. මෙය Bootstrap හි පෙරනිමියෙන් ලබා ගත හැකි පන්තියක් නොවේ.

ජාල තට්ටු පහක්

Bootstrap ජාල පද්ධතියට ස්ථර පහක් ඇත, අපි සහාය දක්වන සෑම උපාංග පරාසයකටම එකක්. සෑම ස්ථරයක්ම අවම දර්ශන ප්‍රමාණයකින් ආරම්භ වන අතර ප්‍රතික්‍ෂේප කරන්නේ නම් මිස ස්වයංක්‍රීයව විශාල උපාංගවලට අදාළ වේ.

.col-4

.col-sm-4

.col-md-4

.col-lg-4

.col-xl-4

.col-xxl-4

සමාන තීරු තුනක්

සමාන-පළල තීරු තුනක් ඩෙස්ක්ටොප් වලින් ආරම්භ කර විශාල ඩෙස්ක්ටොප් දක්වා පරිමාණය කරන්න . ජංගම උපාංග, ටැබ්ලට් සහ පහළින්, තීරු ස්වයංක්‍රීයව ගොඩගැසෙනු ඇත.

.col-md-4

සමාන තීරු තුනක් විකල්ප

පන්ති භාවිතා කිරීමෙන් .row-cols-*, ඔබට පහසුවෙන් සමාන තීරු සහිත ජාලයක් නිර්මාණය කළ හැකිය.

.colදරුවා .row-cols-md-3

අසමාන තීරු තුනක්

ඩෙස්ක්ටොප් වලින් පටන් ගෙන විවිධ පළලින් යුත් විශාල ඩෙස්ක්ටොප් දක්වා විශාලනය කර තීරු තුනක් ලබා ගන්න . මතක තබා ගන්න, තනි තිරස් බ්ලොක් එකක් සඳහා ජාලක තීරු දොළහක් දක්වා එකතු විය යුතුය. ඊට වඩා, සහ දර්ශන තොට කුමක් වුවත් තීරු ගොඩගැසීමට පටන් ගනී.

.col-md-3

.col-md-6

.col-md-3

තීරු දෙකක්

ඩෙස්ක්ටොප් වලින් පටන් ගෙන විශාල ඩෙස්ක්ටොප් දක්වා විශාලනය වන තීරු දෙකක් ලබා ගන්න .

.col-md-8

.col-md-4

සම්පූර්ණ පළල, තනි තීරුව

සම්පූර්ණ පළල මූලද්‍රව්‍ය සඳහා ජාල පන්ති අවශ්‍ය නොවේ.

කූඩු දෙකක් සහිත තීරු දෙකක්

ප්‍රලේඛනයට අනුව, කූඩු තැබීම පහසුය - පවතින තීරුවක් තුළ තීරු පේළියක් දමන්න. මෙය ඔබට ඩෙස්ක්ටොප් වලින් පටන් ගෙන විශාල ඩෙස්ක්ටොප් දක්වා විශාලනය වන තීරු දෙකක් ලබා දෙයි , විශාල තීරුව තුළ තවත් දෙකක් (සමාන පළල) ඇත.

ජංගම උපාංග ප්‍රමාණයන්, ටැබ්ලට් සහ පහළ, මෙම තීරු සහ ඒවායේ කැදැලි තීරු ගොඩගැසෙනු ඇත.

.col-md-8

.col-md-6

.col-md-4

මිශ්‍ර: ජංගම සහ ඩෙස්ක්ටොප්

Bootstrap v5 ජාල පද්ධතියට පන්ති ස්ථර හයක් ඇත: xs (අතිරේක කුඩා, මෙම පන්තියේ infix භාවිතා නොකෙරේ), sm (කුඩා), md (මධ්‍යම), lg (විශාල), xl (x-විශාල) සහ xxl (xx) -මහා). වඩාත් ගතික සහ නම්‍යශීලී පිරිසැලසුම් නිර්මාණය කිරීමට ඔබට මෙම පන්තිවල ඕනෑම සංයෝජනයක් පාහේ භාවිතා කළ හැක.

එක් එක් පන්ති මට්ටම් ඉහළ යයි, එනම් ඔබ md, lg, xl සහ xxl සඳහා එකම පළල සැකසීමට සැලසුම් කරන්නේ නම්, ඔබට md පමණක් සඳහන් කිරීමට අවශ්‍ය වේ.

.col-md-8

.col-6 .col-md-4

.col-6

මිශ්‍ර: ජංගම, ටැබ්ලට් සහ ඩෙස්ක්ටොප්

.col-sm-6 .col-lg-8

.col-6 .col-lg-4

.col-6 .col-sm-4

ගටර්ස්

පන්ති සමඟ .gx-*, තිරස් කාණු සකස් කළ හැකිය.

.col.gx-4කාණු සමග

.gy-*සිරස් කාණු පාලනය කිරීමට පන්ති භාවිතා කරන්න .

.col.gy-4කාණු සමග

පන්ති සමඟ .g-*, දෙපැත්තේ ඇති කාණු සකස් කළ හැකිය.

.col.g-3කාණු සමග

බහාලුම්

Bootstrap v4.4 හි එකතු කරන ලද අමතර පන්ති විශේෂිත කඩඉමක් දක්වා 100% පළල බහාලුම්වලට ඉඩ දෙයි. v5 නව xxlකඩඉමක් එක් කරයි.

.කන්ටේනරය

.container-sm

.container-md

.container-lg

.container-xl

.container-xxl

.කන්ටේනර්-දියර