ਗਰਿੱਡ ਸਿਸਟਮ
ਬਾਰ੍ਹਾਂ ਕਾਲਮ ਸਿਸਟਮ, ਪੰਜ ਡਿਫੌਲਟ ਜਵਾਬਦੇਹ ਟੀਅਰ, Sass ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ, ਅਤੇ ਦਰਜਨਾਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਕਲਾਸਾਂ ਦੇ ਕਾਰਨ ਸਾਰੇ ਆਕਾਰਾਂ ਅਤੇ ਆਕਾਰਾਂ ਦੇ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਸਾਡੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮੋਬਾਈਲ-ਪਹਿਲੇ ਫਲੈਕਸਬਾਕਸ ਗਰਿੱਡ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਬੂਟਸਟਰੈਪ ਦਾ ਗਰਿੱਡ ਸਿਸਟਮ ਸਮੱਗਰੀ ਨੂੰ ਲੇਆਉਟ ਅਤੇ ਇਕਸਾਰ ਕਰਨ ਲਈ ਕੰਟੇਨਰਾਂ, ਕਤਾਰਾਂ ਅਤੇ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਲੜੀ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਹ flexbox ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਹੈ। ਹੇਠਾਂ ਇੱਕ ਉਦਾਹਰਨ ਅਤੇ ਇੱਕ ਡੂੰਘਾਈ ਨਾਲ ਨਜ਼ਰ ਹੈ ਕਿ ਗਰਿੱਡ ਕਿਵੇਂ ਇਕੱਠੇ ਹੁੰਦੇ ਹਨ।
flexbox ਲਈ ਨਵੇਂ ਜਾਂ ਅਣਜਾਣ ਹੋ? ਪਿਛੋਕੜ, ਸ਼ਬਦਾਵਲੀ, ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ, ਅਤੇ ਕੋਡ ਸਨਿੱਪਟਾਂ ਲਈ ਇਸ CSS ਟ੍ਰਿਕਸ ਫਲੈਕਸਬਾਕਸ ਗਾਈਡ ਨੂੰ ਪੜ੍ਹੋ ।
<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
ਫਿਰ ਨੈਗੇਟਿਵ ਹਾਸ਼ੀਏ ਨਾਲ ਕਤਾਰਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਤਰ੍ਹਾਂ, ਤੁਹਾਡੇ ਕਾਲਮਾਂ ਦੀ ਸਾਰੀ ਸਮੱਗਰੀ ਖੱਬੇ ਪਾਸੇ ਦ੍ਰਿਸ਼ਟੀਗਤ ਤੌਰ 'ਤੇ ਇਕਸਾਰ ਹੁੰਦੀ ਹੈ। - ਇੱਕ ਗਰਿੱਡ ਲੇਆਉਟ ਵਿੱਚ, ਸਮੱਗਰੀ ਨੂੰ ਕਾਲਮਾਂ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ ਅਤੇ ਸਿਰਫ਼ ਕਾਲਮ ਹੀ ਕਤਾਰਾਂ ਦੇ ਤਤਕਾਲੀ ਬੱਚੇ ਹੋ ਸਕਦੇ ਹਨ।
- ਫਲੈਕਸਬਾਕਸ ਦਾ ਧੰਨਵਾਦ, ਬਿਨਾਂ ਦਿੱਤੇ ਗਰਿੱਡ ਕਾਲਮ
width
ਬਰਾਬਰ ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮਾਂ ਦੇ ਰੂਪ ਵਿੱਚ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਲੇਆਉਟ ਹੋਣਗੇ। ਉਦਾਹਰਨ ਲਈ, ਵਿਲ ਦੀਆਂ ਚਾਰ ਉਦਾਹਰਨਾਂ.col-sm
ਹਰ ਇੱਕ ਆਪਣੇ ਆਪ ਹੀ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ਤੋਂ 25% ਚੌੜੀਆਂ ਅਤੇ ਵੱਧ ਹੋਣਗੀਆਂ। ਹੋਰ ਉਦਾਹਰਣਾਂ ਲਈ ਆਟੋ-ਲੇਆਉਟ ਕਾਲਮ ਸੈਕਸ਼ਨ ਦੇਖੋ । - ਕਾਲਮ ਕਲਾਸਾਂ ਉਹਨਾਂ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਦਰਸਾਉਂਦੀਆਂ ਹਨ ਜੋ ਤੁਸੀਂ ਪ੍ਰਤੀ ਕਤਾਰ ਸੰਭਾਵਿਤ 12 ਵਿੱਚੋਂ ਵਰਤਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਸ ਲਈ, ਜੇਕਰ ਤੁਸੀਂ ਤਿੰਨ ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ
.col-4
। - ਕਾਲਮ
width
s ਪ੍ਰਤੀਸ਼ਤ ਵਿੱਚ ਸੈੱਟ ਕੀਤੇ ਗਏ ਹਨ, ਇਸਲਈ ਉਹ ਹਮੇਸ਼ਾ ਤਰਲ ਅਤੇ ਉਹਨਾਂ ਦੇ ਮੂਲ ਤੱਤ ਦੇ ਅਨੁਸਾਰੀ ਆਕਾਰ ਦੇ ਹੁੰਦੇ ਹਨ। padding
ਵਿਅਕਤੀਗਤ ਕਾਲਮਾਂ ਦੇ ਵਿਚਕਾਰ ਗਟਰ ਬਣਾਉਣ ਲਈ ਕਾਲਮ ਹਰੀਜੱਟਲ ਹੁੰਦੇ ਹਨ, ਹਾਲਾਂਕਿ, ਤੁਸੀਂmargin
ਕਤਾਰਾਂpadding
ਤੋਂ ਅਤੇ ਕਾਲਮਾਂ ਤੋਂ.no-gutters
'ਤੇ ਦੇ ਨਾਲ ਹਟਾ ਸਕਦੇ ਹੋ.row
।- ਗਰਿੱਡ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਉਣ ਲਈ, ਪੰਜ ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਹਨ, ਹਰੇਕ ਜਵਾਬਦੇਹ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਇੱਕ : ਸਾਰੇ ਬ੍ਰੇਕਪੁਆਇੰਟ (ਵਾਧੂ ਛੋਟੇ), ਛੋਟੇ, ਦਰਮਿਆਨੇ, ਵੱਡੇ ਅਤੇ ਵਾਧੂ ਵੱਡੇ।
- ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਘੱਟੋ-ਘੱਟ ਚੌੜਾਈ ਵਾਲੇ ਮੀਡੀਆ ਸਵਾਲਾਂ 'ਤੇ ਆਧਾਰਿਤ ਹੁੰਦੇ ਹਨ, ਮਤਲਬ ਕਿ ਉਹ ਉਸ ਇੱਕ ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ ਅਤੇ ਇਸ ਤੋਂ ਉੱਪਰ ਵਾਲੇ ਸਾਰੇ (ਉਦਾਹਰਨ ਲਈ,
.col-sm-4
ਛੋਟੇ, ਦਰਮਿਆਨੇ, ਵੱਡੇ, ਅਤੇ ਵਾਧੂ ਵੱਡੇ ਯੰਤਰਾਂ 'ਤੇ ਲਾਗੂ ਹੁੰਦੇ ਹਨ, ਪਰ ਪਹਿਲੇxs
ਬ੍ਰੇਕਪੁਆਇੰਟ 'ਤੇ ਨਹੀਂ)। - ਤੁਸੀਂ ਹੋਰ ਸਿਮੈਂਟਿਕ ਮਾਰਕਅੱਪ ਲਈ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ (ਜਿਵੇਂ
.col-4
) ਜਾਂ Sass ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ।
flexbox ਦੇ ਆਲੇ-ਦੁਆਲੇ ਦੀਆਂ ਕਮੀਆਂ ਅਤੇ ਬੱਗਾਂ ਬਾਰੇ ਸੁਚੇਤ ਰਹੋ , ਜਿਵੇਂ ਕਿ ਕੁਝ HTML ਤੱਤਾਂ ਨੂੰ ਫਲੈਕਸ ਕੰਟੇਨਰਾਂ ਵਜੋਂ ਵਰਤਣ ਦੀ ਅਯੋਗਤਾ ।
ਜਦੋਂ ਕਿ ਬੂਟਸਟਰੈਪ ਜ਼ਿਆਦਾਤਰ ਆਕਾਰਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ em
s ਜਾਂ s ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, s ਦੀ ਵਰਤੋਂ ਗਰਿੱਡ ਬ੍ਰੇਕਪੁਆਇੰਟ ਅਤੇ ਕੰਟੇਨਰ ਚੌੜਾਈ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇਸ ਲਈ ਹੈ ਕਿਉਂਕਿ ਵਿਊਪੋਰਟ ਦੀ ਚੌੜਾਈ ਪਿਕਸਲ ਵਿੱਚ ਹੈ ਅਤੇ ਫੌਂਟ ਦੇ ਆਕਾਰ ਨਾਲ ਨਹੀਂ ਬਦਲਦੀ ਹੈ ।rem
px
ਦੇਖੋ ਕਿ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਪਹਿਲੂ ਇੱਕ ਸੌਖੀ ਟੇਬਲ ਨਾਲ ਕਈ ਡਿਵਾਈਸਾਂ ਵਿੱਚ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ।
ਵਾਧੂ ਛੋਟਾ <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
। ਤੁਹਾਨੂੰ ਲੋੜੀਂਦੇ ਹਰੇਕ ਬ੍ਰੇਕਪੁਆਇੰਟ ਲਈ ਯੂਨਿਟ-ਘੱਟ ਕਲਾਸਾਂ ਦੀ ਗਿਣਤੀ ਸ਼ਾਮਲ ਕਰੋ ਅਤੇ ਹਰ ਕਾਲਮ ਇੱਕੋ ਚੌੜਾਈ ਦਾ ਹੋਵੇਗਾ।
<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>
ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮਾਂ ਨੂੰ ਕਈ ਲਾਈਨਾਂ ਵਿੱਚ ਵੰਡਿਆ ਜਾ ਸਕਦਾ ਹੈ, ਪਰ ਇੱਕ Safari flexbox ਬੱਗ ਸੀ ਜੋ ਇਸਨੂੰ ਬਿਨਾਂ ਕਿਸੇ ਸਪਸ਼ਟ flex-basis
ਜਾਂ border
. ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰ ਸੰਸਕਰਣਾਂ ਲਈ ਹੱਲ ਹਨ, ਪਰ ਜੇਕਰ ਤੁਸੀਂ ਅੱਪ-ਟੂ-ਡੇਟ ਹੋ ਤਾਂ ਉਹਨਾਂ ਦੀ ਲੋੜ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ।
<div class="container">
<div class="row">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="w-100"></div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
ਫਲੈਕਸਬਾਕਸ ਗਰਿੱਡ ਕਾਲਮਾਂ ਲਈ ਆਟੋ-ਲੇਆਉਟ ਦਾ ਮਤਲਬ ਇਹ ਵੀ ਹੈ ਕਿ ਤੁਸੀਂ ਇੱਕ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਸੈਟ ਕਰ ਸਕਦੇ ਹੋ ਅਤੇ ਇਸ ਦੇ ਆਲੇ-ਦੁਆਲੇ ਸਿਬਲਿੰਗ ਕਾਲਮ ਆਪਣੇ ਆਪ ਮੁੜ ਆਕਾਰ ਦੇ ਸਕਦੇ ਹੋ। ਤੁਸੀਂ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ (ਜਿਵੇਂ ਕਿ ਹੇਠਾਂ ਦਿਖਾਇਆ ਗਿਆ ਹੈ), ਗਰਿੱਡ ਮਿਕਸਿਨ, ਜਾਂ ਇਨਲਾਈਨ ਚੌੜਾਈ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਨੋਟ ਕਰੋ ਕਿ ਦੂਜੇ ਕਾਲਮ ਕੇਂਦਰ ਕਾਲਮ ਦੀ ਚੌੜਾਈ ਦੇ ਬਾਵਜੂਦ ਮੁੜ ਆਕਾਰ ਦੇਣਗੇ।
<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
ਉਹਨਾਂ ਦੀ ਸਮੱਗਰੀ ਦੀ ਕੁਦਰਤੀ ਚੌੜਾਈ ਦੇ ਆਧਾਰ 'ਤੇ ਕਾਲਮਾਂ ਨੂੰ ਆਕਾਰ ਦੇਣ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
<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>
ਬਰਾਬਰ-ਚੌੜਾਈ ਵਾਲੇ ਕਾਲਮ ਬਣਾਓ ਜੋ ਇੱਕ ਤੋਂ ਵੱਧ ਕਤਾਰਾਂ ਨੂੰ ਫੈਲਾਉਂਦੇ ਹਨ .w-100
ਜਿੱਥੇ ਤੁਸੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਕਾਲਮ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਟੁੱਟਣ। .w-100
ਕੁਝ ਜਵਾਬਦੇਹ ਡਿਸਪਲੇਅ ਉਪਯੋਗਤਾਵਾਂ ਦੇ ਨਾਲ ਮਿਲਾ ਕੇ ਬਰੇਕਾਂ ਨੂੰ ਜਵਾਬਦੇਹ ਬਣਾਓ ।
<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>
ਬੂਟਸਟਰੈਪ ਦੇ ਗਰਿੱਡ ਵਿੱਚ ਗੁੰਝਲਦਾਰ ਜਵਾਬਦੇਹ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਕਲਾਸਾਂ ਦੇ ਪੰਜ ਪੱਧਰ ਸ਼ਾਮਲ ਹਨ। ਵਾਧੂ ਛੋਟੇ, ਛੋਟੇ, ਦਰਮਿਆਨੇ, ਵੱਡੇ, ਜਾਂ ਵਾਧੂ ਵੱਡੇ ਯੰਤਰਾਂ 'ਤੇ ਆਪਣੇ ਕਾਲਮਾਂ ਦੇ ਆਕਾਰ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰੋ ਹਾਲਾਂਕਿ ਤੁਸੀਂ ਫਿੱਟ ਦੇਖਦੇ ਹੋ।
ਸਭ ਤੋਂ ਛੋਟੀਆਂ ਡਿਵਾਈਸਾਂ ਤੋਂ ਲੈ ਕੇ ਸਭ ਤੋਂ ਵੱਡੇ ਤੱਕ ਇੱਕੋ ਜਿਹੇ ਗਰਿੱਡਾਂ ਲਈ, .col
ਅਤੇ .col-*
ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਜਦੋਂ ਤੁਹਾਨੂੰ ਕਿਸੇ ਖਾਸ ਆਕਾਰ ਦੇ ਕਾਲਮ ਦੀ ਲੋੜ ਹੋਵੇ ਤਾਂ ਇੱਕ ਨੰਬਰ ਵਾਲੀ ਸ਼੍ਰੇਣੀ ਦਿਓ; ਨਹੀਂ ਤਾਂ, ਨਾਲ ਜੁੜੇ ਰਹਿਣ ਲਈ ਸੁਤੰਤਰ ਮਹਿਸੂਸ ਕਰੋ .col
।
<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>
ਕਲਾਸਾਂ ਦੇ ਇੱਕ ਸਿੰਗਲ ਸੈੱਟ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ .col-sm-*
, ਤੁਸੀਂ ਇੱਕ ਬੁਨਿਆਦੀ ਗਰਿੱਡ ਸਿਸਟਮ ਬਣਾ ਸਕਦੇ ਹੋ ਜੋ ਛੋਟੇ ਬ੍ਰੇਕਪੁਆਇੰਟ ( sm
) ਦੇ ਨਾਲ ਹਰੀਜੱਟਲ ਬਣਨ ਤੋਂ ਪਹਿਲਾਂ ਸਟੈਕਡ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ।
<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>
ਕੀ ਤੁਸੀਂ ਨਹੀਂ ਚਾਹੁੰਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਕਾਲਮ ਕੁਝ ਗਰਿੱਡ ਪੱਧਰਾਂ ਵਿੱਚ ਸਟੈਕ ਹੋਣ? ਲੋੜ ਅਨੁਸਾਰ ਹਰੇਕ ਪੱਧਰ ਲਈ ਵੱਖ-ਵੱਖ ਸ਼੍ਰੇਣੀਆਂ ਦੇ ਸੁਮੇਲ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਸਭ ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ ਇਸ ਬਾਰੇ ਬਿਹਤਰ ਵਿਚਾਰ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀ ਉਦਾਹਰਨ ਦੇਖੋ।
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-12 col-md-8">.col-12 .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 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
.
ਅਭਿਆਸ ਵਿੱਚ, ਇੱਥੇ ਇਹ ਕਿਵੇਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ. ਨੋਟ ਕਰੋ ਕਿ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਹੋਰ ਸਾਰੀਆਂ ਪੂਰਵ-ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ (ਕਾਲਮ ਚੌੜਾਈ, ਜਵਾਬਦੇਹ ਟੀਅਰ, ਰੀਆਰਡਰ ਅਤੇ ਹੋਰ ਸਮੇਤ) ਨਾਲ ਜਾਰੀ ਰੱਖ ਸਕਦੇ ਹੋ।
<div class="row no-gutters">
<div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
ਜੇਕਰ ਇੱਕ ਕਤਾਰ ਵਿੱਚ 12 ਤੋਂ ਵੱਧ ਕਾਲਮ ਰੱਖੇ ਜਾਂਦੇ ਹਨ, ਤਾਂ ਵਾਧੂ ਕਾਲਮਾਂ ਦਾ ਹਰੇਕ ਸਮੂਹ, ਇੱਕ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ, ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਲਪੇਟ ਜਾਵੇਗਾ।
9 + 4 = 13 > 12 ਤੋਂ, ਇਹ 4-ਕਾਲਮ-ਵਿਆਪਕ ਡਿਵ ਇੱਕ ਸੰਮਿਲਿਤ ਯੂਨਿਟ ਦੇ ਰੂਪ ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਉੱਤੇ ਲਪੇਟਿਆ ਜਾਂਦਾ ਹੈ।
ਬਾਅਦ ਦੇ ਕਾਲਮ ਨਵੀਂ ਲਾਈਨ ਦੇ ਨਾਲ ਜਾਰੀ ਰਹਿੰਦੇ ਹਨ।
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 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>
flexbox ਵਿੱਚ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਕਾਲਮਾਂ ਨੂੰ ਤੋੜਨ ਲਈ ਇੱਕ ਛੋਟੀ ਜਿਹੀ ਹੈਕ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: width: 100%
ਜਿੱਥੇ ਵੀ ਤੁਸੀਂ ਆਪਣੇ ਕਾਲਮਾਂ ਨੂੰ ਇੱਕ ਨਵੀਂ ਲਾਈਨ ਵਿੱਚ ਸਮੇਟਣਾ ਚਾਹੁੰਦੇ ਹੋ ਉੱਥੇ ਇੱਕ ਤੱਤ ਸ਼ਾਮਲ ਕਰੋ। ਆਮ ਤੌਰ 'ਤੇ ਇਹ ਮਲਟੀਪਲ .row
s ਨਾਲ ਪੂਰਾ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਪਰ ਹਰ ਲਾਗੂ ਕਰਨ ਦਾ ਤਰੀਕਾ ਇਸਦਾ ਜਵਾਬ ਨਹੀਂ ਦੇ ਸਕਦਾ ਹੈ।
<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 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>
ਆਪਣੀ ਸਮੱਗਰੀ ਦੇ ਵਿਜ਼ੂਅਲ ਆਰਡਰ.order-
ਨੂੰ ਕੰਟਰੋਲ ਕਰਨ ਲਈ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ ਕਲਾਸਾਂ ਜਵਾਬਦੇਹ ਹਨ, ਇਸਲਈ ਤੁਸੀਂ ਬ੍ਰੇਕਪੁਆਇੰਟ ਦੁਆਰਾ ਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ (ਉਦਾਹਰਨ ਲਈ, ). ਸਾਰੇ ਪੰਜ ਗਰਿੱਡ ਪੱਧਰਾਂ ਲਈ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ ।order
.order-1.order-md-2
1
12
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div>
ਇੱਥੇ ਜਵਾਬਦੇਹ .order-first
ਅਤੇ .order-last
ਕਲਾਸਾਂ ਵੀ ਹਨ ਜੋ ਕ੍ਰਮਵਾਰ ਅਤੇ ( ) order
ਨੂੰ ਲਾਗੂ ਕਰਕੇ ਇੱਕ ਤੱਤ ਨੂੰ ਬਦਲਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਕਲਾਸਾਂ ਨੂੰ ਲੋੜ ਅਨੁਸਾਰ ਨੰਬਰ ਵਾਲੀਆਂ ਕਲਾਸਾਂ ਨਾਲ ਵੀ ਮਿਲਾਇਆ ਜਾ ਸਕਦਾ ਹੈ ।order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First, but last
</div>
<div class="col">
Second, but unordered
</div>
<div class="col order-first">
Third, but first
</div>
</div>
</div>
ਤੁਸੀਂ ਗਰਿੱਡ ਕਾਲਮਾਂ ਨੂੰ ਦੋ ਤਰੀਕਿਆਂ ਨਾਲ ਆਫਸੈੱਟ ਕਰ ਸਕਦੇ ਹੋ: ਸਾਡੀਆਂ ਜਵਾਬਦੇਹ .offset-
ਗਰਿੱਡ ਕਲਾਸਾਂ ਅਤੇ ਸਾਡੀਆਂ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ । ਗਰਿੱਡ ਕਲਾਸਾਂ ਨੂੰ ਕਾਲਮਾਂ ਨਾਲ ਮੇਲ ਕਰਨ ਲਈ ਆਕਾਰ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਜਦੋਂ ਕਿ ਹਾਸ਼ੀਏ ਤੇਜ਼ ਲੇਆਉਟ ਲਈ ਵਧੇਰੇ ਉਪਯੋਗੀ ਹੁੰਦੇ ਹਨ ਜਿੱਥੇ ਆਫਸੈੱਟ ਦੀ ਚੌੜਾਈ ਵੇਰੀਏਬਲ ਹੁੰਦੀ ਹੈ।
.offset-md-*
ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮਾਂ ਨੂੰ ਸੱਜੇ ਪਾਸੇ ਲਿਜਾਓ । ਇਹ ਕਲਾਸਾਂ ਇੱਕ ਕਾਲਮ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ *
ਕਾਲਮਾਂ ਦੁਆਰਾ ਵਧਾਉਂਦੀਆਂ ਹਨ। ਉਦਾਹਰਨ ਲਈ, ਚਾਰ ਕਾਲਮਾਂ ਉੱਤੇ .offset-md-4
ਚਲਦਾ ਹੈ।.col-md-4
<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 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>
v4 ਵਿੱਚ flexbox ਵਿੱਚ ਜਾਣ ਦੇ ਨਾਲ, ਤੁਸੀਂ ਮਾਰਜਿਨ ਉਪਯੋਗਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ ਜਿਵੇਂ ਕਿ .mr-auto
ਭੈਣ-ਭਰਾ ਕਾਲਮਾਂ ਨੂੰ ਇੱਕ ਦੂਜੇ ਤੋਂ ਦੂਰ ਕਰਨ ਲਈ।
<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>
ਆਪਣੀ ਸਮਗਰੀ ਨੂੰ ਡਿਫੌਲਟ ਗਰਿੱਡ ਨਾਲ ਨੇਸਟ ਕਰਨ ਲਈ, ਇੱਕ ਮੌਜੂਦਾ ਕਾਲਮ ਦੇ ਅੰਦਰ ਇੱਕ ਨਵਾਂ .row
ਅਤੇ ਕਾਲਮਾਂ ਦਾ ਸੈੱਟ ਸ਼ਾਮਲ ਕਰੋ । ਨੇਸਟਡ ਕਤਾਰਾਂ ਵਿੱਚ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸਮੂਹ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ 12 ਜਾਂ ਘੱਟ ਤੱਕ ਜੋੜਦੇ ਹਨ (ਇਹ ਜ਼ਰੂਰੀ ਨਹੀਂ ਹੈ ਕਿ ਤੁਸੀਂ ਸਾਰੇ 12 ਉਪਲਬਧ ਕਾਲਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ)।.col-sm-*
.col-sm-*
<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>
ਬੂਟਸਟਰੈਪ ਦੇ ਸਰੋਤ Sass ਫਾਈਲਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, ਤੁਹਾਡੇ ਕੋਲ ਕਸਟਮ, ਅਰਥ-ਵਿਵਸਥਾ, ਅਤੇ ਜਵਾਬਦੇਹ ਪੰਨਾ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ Sass ਵੇਰੀਏਬਲ ਅਤੇ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਵਿਕਲਪ ਹੁੰਦਾ ਹੈ। ਸਾਡੀਆਂ ਪੂਰਵ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਤੇਜ਼ ਜਵਾਬਦੇਹ ਖਾਕੇ ਲਈ ਵਰਤੋਂ ਲਈ ਤਿਆਰ ਕਲਾਸਾਂ ਦਾ ਪੂਰਾ ਸੂਟ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਇਹਨਾਂ ਹੀ ਵੇਰੀਏਬਲਾਂ ਅਤੇ ਮਿਸ਼ਰਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀਆਂ ਹਨ।
ਵੇਰੀਏਬਲ ਅਤੇ ਨਕਸ਼ੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ, ਗਟਰ ਦੀ ਚੌੜਾਈ, ਅਤੇ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਬਿੰਦੂ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹਨ ਜਿਸ 'ਤੇ ਫਲੋਟਿੰਗ ਕਾਲਮ ਸ਼ੁਰੂ ਕਰਨੇ ਹਨ। ਅਸੀਂ ਇਹਨਾਂ ਦੀ ਵਰਤੋਂ ਉੱਪਰ ਦਸਤਾਵੇਜ਼ੀ ਤੌਰ 'ਤੇ ਪਹਿਲਾਂ ਤੋਂ ਪਰਿਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਬਣਾਉਣ ਲਈ ਕਰਦੇ ਹਾਂ, ਨਾਲ ਹੀ ਹੇਠਾਂ ਸੂਚੀਬੱਧ ਕਸਟਮ ਮਿਸ਼ਰਣਾਂ ਲਈ।
ਮਿਕਸਿਨਾਂ ਦੀ ਵਰਤੋਂ ਵਿਅਕਤੀਗਤ ਗਰਿੱਡ ਕਾਲਮਾਂ ਲਈ ਸਿਮੈਂਟਿਕ CSS ਬਣਾਉਣ ਲਈ ਗਰਿੱਡ ਵੇਰੀਏਬਲ ਦੇ ਨਾਲ ਕੀਤੀ ਜਾਂਦੀ ਹੈ।
ਤੁਸੀਂ ਵੇਰੀਏਬਲਾਂ ਨੂੰ ਆਪਣੇ ਖੁਦ ਦੇ ਕਸਟਮ ਮੁੱਲਾਂ ਵਿੱਚ ਸੋਧ ਸਕਦੇ ਹੋ, ਜਾਂ ਉਹਨਾਂ ਦੇ ਡਿਫੌਲਟ ਮੁੱਲਾਂ ਦੇ ਨਾਲ ਮਿਕਸਿਨ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ। ਵਿਚਕਾਰ ਇੱਕ ਪਾੜੇ ਦੇ ਨਾਲ ਇੱਕ ਦੋ-ਕਾਲਮ ਲੇਆਉਟ ਬਣਾਉਣ ਲਈ ਡਿਫੌਲਟ ਸੈਟਿੰਗਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇੱਕ ਉਦਾਹਰਣ ਇੱਥੇ ਹੈ।
<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
ਕਿ ਬ੍ਰੇਕਪੁਆਇੰਟ-ਵਿਸ਼ੇਸ਼ ਚੌੜਾਈ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ ਜੋ ਕਿ ਕਾਲਮ ਗਟਰਾਂ ਲਈ ਬਰਾਬਰ ਵੰਡੀਆਂ ਜਾਂਦੀਆਂ padding-left
ਹਨ ।padding-right
ਕਾਲਮਾਂ ਤੋਂ ਅੱਗੇ ਵਧਦੇ ਹੋਏ, ਤੁਸੀਂ ਗਰਿੱਡ ਪੱਧਰਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਵੀ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ। ਜੇ ਤੁਸੀਂ ਸਿਰਫ਼ ਚਾਰ ਗਰਿੱਡ ਟੀਅਰ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਤੁਸੀਂ ਇਸ ਨੂੰ $grid-breakpoints
ਅਤੇ $container-max-widths
ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਅਪਡੇਟ ਕਰੋਗੇ:
ਜਦੋਂ Sass ਵੇਰੀਏਬਲ ਜਾਂ ਨਕਸ਼ੇ ਵਿੱਚ ਕੋਈ ਬਦਲਾਅ ਕਰਦੇ ਹੋ, ਤਾਂ ਤੁਹਾਨੂੰ ਆਪਣੀਆਂ ਤਬਦੀਲੀਆਂ ਨੂੰ ਸੁਰੱਖਿਅਤ ਕਰਨ ਅਤੇ ਦੁਬਾਰਾ ਕੰਪਾਇਲ ਕਰਨ ਦੀ ਲੋੜ ਪਵੇਗੀ। ਅਜਿਹਾ ਕਰਨ ਨਾਲ ਕਾਲਮ ਦੀ ਚੌੜਾਈ, ਆਫਸੈੱਟਾਂ ਅਤੇ ਆਰਡਰਿੰਗ ਲਈ ਪੂਰਵ-ਪ੍ਰਭਾਸ਼ਿਤ ਗਰਿੱਡ ਕਲਾਸਾਂ ਦਾ ਬਿਲਕੁਲ ਨਵਾਂ ਸੈੱਟ ਆਉਟਪੁੱਟ ਹੋਵੇਗਾ। ਕਸਟਮ ਬ੍ਰੇਕਪੁਆਇੰਟਸ ਦੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਜਵਾਬਦੇਹ ਦਿੱਖ ਉਪਯੋਗਤਾਵਾਂ ਨੂੰ ਵੀ ਅਪਡੇਟ ਕੀਤਾ ਜਾਵੇਗਾ। ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਗਰਿੱਡ ਮੁੱਲਾਂ ਨੂੰ px
(ਨਾ rem
, em
, ਜਾਂ %
) ਵਿੱਚ ਸੈਟ ਕਰਨਾ ਯਕੀਨੀ ਬਣਾਓ।