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

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

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

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

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

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4

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

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

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

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

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

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

තීරු දෙකක්

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

.col-md-8
.col-md-4

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

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


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

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

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

.col-md-8
.col-md-6
.col-md-6
.col-md-4

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

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

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

.col-12 .col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6
.col-6

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

.col-12 .col-sm-6 .col-lg-8
.col-6 .col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4