ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਉਦਾਹਰਨਾਂ

ਤੁਹਾਨੂੰ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਅੰਦਰ ਬਿਲਡਿੰਗ ਤੋਂ ਜਾਣੂ ਕਰਵਾਉਣ ਲਈ ਮੂਲ ਗਰਿੱਡ ਲੇਆਉਟ।

ਇਹਨਾਂ ਉਦਾਹਰਣਾਂ ਵਿੱਚ .themed-grid-colਕਲਾਸ ਨੂੰ ਕੁਝ ਥੀਮਿੰਗ ਜੋੜਨ ਲਈ ਕਾਲਮਾਂ ਵਿੱਚ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ। ਇਹ ਇੱਕ ਕਲਾਸ ਨਹੀਂ ਹੈ ਜੋ ਮੂਲ ਰੂਪ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਉਪਲਬਧ ਹੈ।

ਪੰਜ ਗਰਿੱਡ ਪੱਧਰਾਂ

ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਪੰਜ ਪੱਧਰ ਹਨ, ਸਾਡੇ ਦੁਆਰਾ ਸਮਰਥਿਤ ਡਿਵਾਈਸਾਂ ਦੀ ਹਰੇਕ ਰੇਂਜ ਲਈ ਇੱਕ। ਹਰੇਕ ਟੀਅਰ ਘੱਟੋ-ਘੱਟ ਵਿਊਪੋਰਟ ਆਕਾਰ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਵੱਡੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਆਪਣੇ ਆਪ ਲਾਗੂ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਓਵਰਰਾਈਡ ਨਹੀਂ ਕੀਤਾ ਜਾਂਦਾ।

.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

ਮਿਕਸਡ: ਮੋਬਾਈਲ ਅਤੇ ਡੈਸਕਟਾਪ

ਬੂਟਸਟਰੈਪ 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