ਬੂਟਸਟਰੈਪ ਜਵਾਬਦੇਹ 12-ਕਾਲਮ ਗਰਿੱਡਾਂ, ਖਾਕੇ ਅਤੇ ਭਾਗਾਂ 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ।
ਬੂਟਸਟਰੈਪ ਕੁਝ HTML ਤੱਤਾਂ ਅਤੇ CSS ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਲਈ HTML5 doctype ਦੀ ਵਰਤੋਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇਸਨੂੰ ਆਪਣੇ ਸਾਰੇ ਪ੍ਰੋਜੈਕਟਾਂ ਦੀ ਸ਼ੁਰੂਆਤ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ।
- <!DOCTYPE html>
- <html lang = "en" >
- ...
- </html>
ਬੂਟਸਟਰੈਪ ਬੁਨਿਆਦੀ ਗਲੋਬਲ ਡਿਸਪਲੇ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਅਤੇ ਲਿੰਕ ਸਟਾਈਲ ਸੈੱਟ ਕਰਦਾ ਹੈ। ਖਾਸ ਤੌਰ 'ਤੇ, ਅਸੀਂ:
margin
ਸਰੀਰ 'ਤੇ ਹਟਾਓbackground-color: white;
'ਤੇ ਸੈੱਟ ਕਰੋbody
@baseFontFamily
, @baseFontSize
, ਅਤੇ ਗੁਣਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ@baseLineHeight
@linkColor
ਅਤੇ ਲਿੰਕ ਅੰਡਰਲਾਈਨਾਂ ਨੂੰ ਲਾਗੂ ਕਰੋ:hover
ਇਹ ਸ਼ੈਲੀਆਂ scaffolding.less ਦੇ ਅੰਦਰ ਲੱਭੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ ।
Bootstrap 2 ਦੇ ਨਾਲ, ਪੁਰਾਣੇ ਰੀਸੈਟ ਬਲਾਕ ਨੂੰ Normalize.css ਦੇ ਹੱਕ ਵਿੱਚ ਛੱਡ ਦਿੱਤਾ ਗਿਆ ਹੈ, ਜੋ ਕਿ ਨਿਕੋਲਸ ਗੈਲਾਘਰ ਦੁਆਰਾ ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ HTML5 ਬੋਇਲਰਪਲੇਟ ਨੂੰ ਵੀ ਸ਼ਕਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ । ਜਦੋਂ ਕਿ ਅਸੀਂ ਆਪਣੇ reset.less ਦੇ ਅੰਦਰ Normalize ਦੀ ਜ਼ਿਆਦਾ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ , ਅਸੀਂ ਖਾਸ ਤੌਰ 'ਤੇ ਬੂਟਸਟਰੈਪ ਲਈ ਕੁਝ ਤੱਤ ਹਟਾ ਦਿੱਤੇ ਹਨ।
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਬੂਟਸਟਰੈਪ ਗਰਿੱਡ ਸਿਸਟਮ 12 ਕਾਲਮਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਜਵਾਬਦੇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸਮਰੱਥ ਕੀਤੇ ਬਿਨਾਂ 940px ਚੌੜਾ ਕੰਟੇਨਰ ਬਣਾਉਂਦਾ ਹੈ । ਜਵਾਬਦੇਹ CSS ਫਾਈਲ ਦੇ ਨਾਲ, ਗਰਿੱਡ ਤੁਹਾਡੇ ਵਿਊਪੋਰਟ ਦੇ ਆਧਾਰ 'ਤੇ 724px ਅਤੇ 1170px ਚੌੜਾ ਹੋਣ ਲਈ ਅਨੁਕੂਲ ਹੁੰਦਾ ਹੈ। 767px ਵਿਊਪੋਰਟ ਦੇ ਹੇਠਾਂ, ਕਾਲਮ ਤਰਲ ਬਣ ਜਾਂਦੇ ਹਨ ਅਤੇ ਲੰਬਕਾਰੀ ਸਟੈਕ ਹੁੰਦੇ ਹਨ।
ਇੱਕ ਸਧਾਰਨ ਦੋ ਕਾਲਮ ਲੇਆਉਟ ਲਈ, ਇੱਕ ਬਣਾਓ ਅਤੇ ਕਾਲਮਾਂ .row
ਦੀ ਢੁਕਵੀਂ ਸੰਖਿਆ ਜੋੜੋ । .span*
ਕਿਉਂਕਿ ਇਹ ਇੱਕ 12-ਕਾਲਮ ਗਰਿੱਡ ਹੈ, ਹਰ .span*
ਇੱਕ ਉਹਨਾਂ 12 ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ, ਅਤੇ ਹਰ ਕਤਾਰ (ਜਾਂ ਮੂਲ ਵਿੱਚ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ) ਲਈ ਹਮੇਸ਼ਾਂ 12 ਤੱਕ ਜੋੜਨਾ ਚਾਹੀਦਾ ਹੈ।
- <div ਕਲਾਸ = "ਕਤਾਰ" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ਇਸ ਉਦਾਹਰਨ ਦੇ ਮੱਦੇਨਜ਼ਰ, ਸਾਡੇ ਕੋਲ ਹੈ .span4
ਅਤੇ .span8
, ਕੁੱਲ 12 ਕਾਲਮਾਂ ਅਤੇ ਇੱਕ ਪੂਰੀ ਕਤਾਰ ਬਣਾਉਣਾ।
.offset*
ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਕਾਲਮਾਂ ਨੂੰ ਖੱਬੇ ਪਾਸੇ ਲਿਜਾਓ । ਹਰੇਕ ਕਲਾਸ ਇੱਕ ਕਾਲਮ ਦੇ ਖੱਬੇ ਹਾਸ਼ੀਏ ਨੂੰ ਇੱਕ ਪੂਰੇ ਕਾਲਮ ਦੁਆਰਾ ਵਧਾਉਂਦੀ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਚਾਰ ਕਾਲਮਾਂ ਉੱਤੇ .offset4
ਚਲਦਾ ਹੈ।.span4
- <div ਕਲਾਸ = "ਕਤਾਰ" >
- <div class = "span4" > ... </div>
- <div class = "span3 offset2" > ... </div>
- </div>
ਆਪਣੀ ਸਮਗਰੀ ਨੂੰ ਡਿਫੌਲਟ ਗਰਿੱਡ ਨਾਲ ਨੇਸਟ ਕਰਨ ਲਈ, ਇੱਕ ਮੌਜੂਦਾ ਕਾਲਮ ਦੇ ਅੰਦਰ ਇੱਕ ਨਵਾਂ .row
ਅਤੇ ਕਾਲਮਾਂ ਦਾ ਸੈੱਟ ਸ਼ਾਮਲ ਕਰੋ । ਨੇਸਟਡ ਕਤਾਰਾਂ ਵਿੱਚ ਕਾਲਮਾਂ ਦਾ ਇੱਕ ਸੈੱਟ ਸ਼ਾਮਲ ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ ਜੋ ਇਸਦੇ ਪੇਰੈਂਟ ਦੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਤੱਕ ਜੋੜਦਾ ਹੈ।.span*
.span*
ਇੱਥੇ ਦੋ ਨੇਸਟਡ .span4
ਕਾਲਮ ਇੱਕ ਦੇ ਅੰਦਰ ਰੱਖੇ ਗਏ ਹਨ .span8
।
- <div ਕਲਾਸ = "ਕਤਾਰ" >
- <div ਕਲਾਸ = "span9" >
- ਪੱਧਰ 1 ਕਾਲਮ
- <div ਕਲਾਸ = "ਕਤਾਰ" >
- <div class = "span6" > ਪੱਧਰ 2 </div>
- <div class = "span3" > ਪੱਧਰ 2 </div>
- </div>
- </div>
- </div>
ਤਰਲ ਗਰਿੱਡ ਸਿਸਟਮ ਕਾਲਮ ਚੌੜਾਈ ਲਈ ਪਿਕਸਲ ਦੀ ਬਜਾਏ ਪ੍ਰਤੀਸ਼ਤ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ। ਇਸ ਵਿੱਚ ਸਾਡੇ ਫਿਕਸਡ ਗਰਿੱਡ ਸਿਸਟਮ ਵਾਂਗ ਹੀ ਜਵਾਬਦੇਹ ਸਮਰੱਥਾ ਹੈ, ਮੁੱਖ ਸਕ੍ਰੀਨ ਰੈਜ਼ੋਲਿਊਸ਼ਨ ਅਤੇ ਡਿਵਾਈਸਾਂ ਲਈ ਉਚਿਤ ਅਨੁਪਾਤ ਨੂੰ ਯਕੀਨੀ ਬਣਾਉਂਦਾ ਹੈ।
.row
ਵਿੱਚ ਬਦਲ ਕੇ ਕਿਸੇ ਵੀ ਕਤਾਰ ਨੂੰ "ਤਰਲ" ਬਣਾਓ .row-fluid
। ਕਾਲਮ ਕਲਾਸਾਂ ਬਿਲਕੁਲ ਉਸੇ ਤਰ੍ਹਾਂ ਰਹਿੰਦੀਆਂ ਹਨ, ਜਿਸ ਨਾਲ ਸਥਿਰ ਅਤੇ ਤਰਲ ਗਰਿੱਡਾਂ ਵਿਚਕਾਰ ਫਲਿੱਪ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
- <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" >
- <div class = "span4" > ... </div>
- <div class = "span8" > ... </div>
- </div>
ਫਿਕਸਡ ਗਰਿੱਡ ਸਿਸਟਮ ਆਫਸੈਟਿੰਗ ਵਾਂਗ ਹੀ ਕੰਮ ਕਰਦਾ ਹੈ: .offset*
ਬਹੁਤ ਸਾਰੇ ਕਾਲਮਾਂ ਦੁਆਰਾ ਆਫਸੈੱਟ ਕਰਨ ਲਈ ਕਿਸੇ ਵੀ ਕਾਲਮ ਵਿੱਚ ਜੋੜੋ।
- <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" >
- <div class = "span4" > ... </div>
- <div class = "span4 offset2" > ... </div>
- </div>
ਤਰਲ ਗਰਿੱਡਾਂ ਨਾਲ ਨੇਸਟ ਕਰਨਾ ਥੋੜਾ ਵੱਖਰਾ ਹੈ: ਨੇਸਟਡ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਕਾਲਮਾਂ ਦੀ ਸੰਖਿਆ ਨਾਲ ਮੇਲ ਨਹੀਂ ਖਾਂਦੀ। ਇਸਦੀ ਬਜਾਏ, ਨੇਸਟਡ ਕਾਲਮਾਂ ਦੇ ਹਰੇਕ ਪੱਧਰ ਨੂੰ ਰੀਸੈਟ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਹਰੇਕ ਕਤਾਰ ਮੂਲ ਕਾਲਮ ਦਾ 100% ਹਿੱਸਾ ਲੈਂਦੀ ਹੈ।
- <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" >
- <div ਕਲਾਸ = "span12" >
- ਕਾਲਮ ਦਾ ਪੱਧਰ 1
- <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" >
- <div class = "span6" > ਪੱਧਰ 2 </div>
- <div class = "span6" > ਪੱਧਰ 2 </div>
- </div>
- </div>
- </div>
<div class="container">
ਸਿਰਫ਼ ਲੋੜੀਂਦੇ ਨਾਲ ਇੱਕ ਆਮ ਸਥਿਰ-ਚੌੜਾਈ (ਅਤੇ ਵਿਕਲਪਿਕ ਤੌਰ 'ਤੇ ਜਵਾਬਦੇਹ) ਖਾਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ।
- <body>
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ" >
- ...
- </div>
- </body>
ਇੱਕ ਤਰਲ, ਦੋ-ਕਾਲਮ ਵਾਲਾ ਪੰਨਾ ਬਣਾਓ — <div class="container-fluid">
ਐਪਲੀਕੇਸ਼ਨਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਬਹੁਤ ਵਧੀਆ।
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" >
- <div ਕਲਾਸ = "ਰੋ-ਤਰਲ" >
- <div ਕਲਾਸ = "span2" >
- <!--ਸਾਈਡਬਾਰ ਸਮੱਗਰੀ-->
- </div>
- <div ਕਲਾਸ = "span10" >
- <!--ਸਰੀਰ ਦੀ ਸਮੱਗਰੀ-->
- </div>
- </div>
- </div>
<head>
ਆਪਣੇ ਦਸਤਾਵੇਜ਼ ਦੇ ਅੰਦਰ ਸਹੀ ਮੈਟਾ ਟੈਗ ਅਤੇ ਵਾਧੂ ਸਟਾਈਲਸ਼ੀਟ ਸ਼ਾਮਲ ਕਰਕੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਜਵਾਬਦੇਹ CSS ਨੂੰ ਚਾਲੂ ਕਰੋ । ਜੇਕਰ ਤੁਸੀਂ ਕਸਟਮਾਈਜ਼ ਪੰਨੇ ਤੋਂ ਬੂਟਸਟਰੈਪ ਨੂੰ ਕੰਪਾਇਲ ਕੀਤਾ ਹੈ, ਤਾਂ ਤੁਹਾਨੂੰ ਸਿਰਫ਼ ਮੈਟਾ ਟੈਗ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੈ।
- <ਮੈਟਾ ਨਾਮ = "ਵਿਊਪੋਰਟ" ਸਮੱਗਰੀ = "ਚੌੜਾਈ=ਡਿਵਾਈਸ-ਚੌੜਾਈ, ਸ਼ੁਰੂਆਤੀ-ਸਕੇਲ=1.0" >
- <link href = "assets/css/bootstrap-responsive.css" rel = "stylesheet" >
ਸਿਰ! ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਇਸ ਸਮੇਂ ਮੂਲ ਰੂਪ ਵਿੱਚ ਜਵਾਬਦੇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਨਹੀਂ ਹਨ ਕਿਉਂਕਿ ਹਰ ਚੀਜ਼ ਨੂੰ ਜਵਾਬਦੇਹ ਹੋਣ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ। ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਇਸ ਵਿਸ਼ੇਸ਼ਤਾ ਨੂੰ ਹਟਾਉਣ ਲਈ ਉਤਸ਼ਾਹਿਤ ਕਰਨ ਦੀ ਬਜਾਏ, ਅਸੀਂ ਲੋੜ ਅਨੁਸਾਰ ਇਸਨੂੰ ਸਮਰੱਥ ਬਣਾਉਣਾ ਸਭ ਤੋਂ ਵਧੀਆ ਸਮਝਦੇ ਹਾਂ।
ਮੀਡੀਆ ਪੁੱਛਗਿੱਛਾਂ ਕਈ ਸ਼ਰਤਾਂ-ਅਨੁਪਾਤ, ਚੌੜਾਈ, ਡਿਸਪਲੇ ਦੀ ਕਿਸਮ, ਆਦਿ ਦੇ ਆਧਾਰ 'ਤੇ ਕਸਟਮ CSS ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦੀਆਂ ਹਨ-ਪਰ ਆਮ ਤੌਰ 'ਤੇ ਆਲੇ-ਦੁਆਲੇ min-width
ਅਤੇ max-width
.
ਮੀਡੀਆ ਸਵਾਲਾਂ ਨੂੰ ਜ਼ਿੰਮੇਵਾਰੀ ਨਾਲ ਅਤੇ ਸਿਰਫ਼ ਆਪਣੇ ਮੋਬਾਈਲ ਦਰਸ਼ਕਾਂ ਲਈ ਸ਼ੁਰੂਆਤ ਵਜੋਂ ਵਰਤੋ। ਵੱਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਲਈ, ਸਮਰਪਿਤ ਕੋਡ ਬੇਸ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ਨਾ ਕਿ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦੀਆਂ ਪਰਤਾਂ।
ਬੂਟਸਟਰੈਪ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ ਅਤੇ ਸਕ੍ਰੀਨ ਰੈਜ਼ੋਲਿਊਸ਼ਨਾਂ 'ਤੇ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਨੂੰ ਹੋਰ ਢੁਕਵਾਂ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਨ ਲਈ ਇੱਕ ਸਿੰਗਲ ਫਾਈਲ ਵਿੱਚ ਕੁਝ ਮੀਡੀਆ ਸਵਾਲਾਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਇੱਥੇ ਕੀ ਸ਼ਾਮਲ ਕੀਤਾ ਗਿਆ ਹੈ:
ਲੇਬਲ | ਖਾਕਾ ਚੌੜਾਈ | ਕਾਲਮ ਦੀ ਚੌੜਾਈ | ਗਟਰ ਦੀ ਚੌੜਾਈ |
---|---|---|---|
ਫ਼ੋਨ | 480px ਅਤੇ ਹੇਠਾਂ | ਤਰਲ ਕਾਲਮ, ਕੋਈ ਸਥਿਰ ਚੌੜਾਈ ਨਹੀਂ | |
ਫ਼ੋਨਾਂ ਤੋਂ ਲੈ ਕੇ ਟੈਬਲੇਟਾਂ ਤੱਕ | 767px ਅਤੇ ਹੇਠਾਂ | ਤਰਲ ਕਾਲਮ, ਕੋਈ ਸਥਿਰ ਚੌੜਾਈ ਨਹੀਂ | |
ਪੋਰਟਰੇਟ ਗੋਲੀਆਂ | 768px ਅਤੇ ਵੱਧ | 42px | 20px |
ਡਿਫਾਲਟ | 980px ਅਤੇ ਵੱਧ | 60px | 20px |
ਵੱਡਾ ਡਿਸਪਲੇ | 1200px ਅਤੇ ਵੱਧ | 70px | 30px |
- /* ਲੈਂਡਸਕੇਪ ਫੋਨ ਅਤੇ ਡਾਊਨ */
- @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 480px ) { ... }
- /* ਲੈਂਡਸਕੇਪ ਫੋਨ ਤੋਂ ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ */
- @ਮੀਡੀਆ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 767px ) { ... }
- /* ਲੈਂਡਸਕੇਪ ਅਤੇ ਡੈਸਕਟੌਪ ਲਈ ਪੋਰਟਰੇਟ ਟੈਬਲੇਟ */
- @ਮੀਡੀਆ ( ਘੱਟੋ - ਘੱਟ ਚੌੜਾਈ : 768px ) ਅਤੇ ( ਅਧਿਕਤਮ - ਚੌੜਾਈ : 979px ) { ... }
- /* ਵੱਡਾ ਡੈਸਕਟਾਪ */
- @ਮੀਡੀਆ ( ਮਿੰਟ - ਚੌੜਾਈ : 1200px ) { ... }
ਤੇਜ਼ ਮੋਬਾਈਲ-ਅਨੁਕੂਲ ਵਿਕਾਸ ਲਈ, ਡਿਵਾਈਸ ਦੁਆਰਾ ਸਮੱਗਰੀ ਨੂੰ ਦਿਖਾਉਣ ਅਤੇ ਲੁਕਾਉਣ ਲਈ ਇਹਨਾਂ ਉਪਯੋਗਤਾ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਹੇਠਾਂ ਉਪਲਬਧ ਕਲਾਸਾਂ ਦੀ ਇੱਕ ਸਾਰਣੀ ਹੈ ਅਤੇ ਇੱਕ ਦਿੱਤੇ ਮੀਡੀਆ ਪੁੱਛਗਿੱਛ ਲੇਆਉਟ (ਡਿਵਾਈਸ ਦੁਆਰਾ ਲੇਬਲ) 'ਤੇ ਉਹਨਾਂ ਦਾ ਪ੍ਰਭਾਵ ਹੈ। ਉਹ ਵਿੱਚ ਲੱਭੇ ਜਾ ਸਕਦੇ ਹਨ responsive.less
.
ਕਲਾਸ | ਫ਼ੋਨ767px ਅਤੇ ਹੇਠਾਂ | ਗੋਲੀਆਂ979px ਤੋਂ 768px ਤੱਕ | ਡੈਸਕਟਾਪਡਿਫਾਲਟ |
---|---|---|---|
.visible-phone |
ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ |
.visible-tablet |
ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ |
.visible-desktop |
ਲੁਕਿਆ ਹੋਇਆ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ |
.hidden-phone |
ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ |
.hidden-tablet |
ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ | ਦਿਸਦਾ ਹੈ |
.hidden-desktop |
ਦਿਸਦਾ ਹੈ | ਦਿਸਦਾ ਹੈ | ਲੁਕਿਆ ਹੋਇਆ |
ਸੀਮਤ ਆਧਾਰ 'ਤੇ ਵਰਤੋਂ ਅਤੇ ਉਸੇ ਸਾਈਟ ਦੇ ਬਿਲਕੁਲ ਵੱਖਰੇ ਸੰਸਕਰਣ ਬਣਾਉਣ ਤੋਂ ਬਚੋ। ਇਸ ਦੀ ਬਜਾਏ, ਹਰੇਕ ਡਿਵਾਈਸ ਦੀ ਪੇਸ਼ਕਾਰੀ ਨੂੰ ਪੂਰਕ ਕਰਨ ਲਈ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਉਪਰੋਕਤ ਕਲਾਸਾਂ ਦੀ ਜਾਂਚ ਕਰਨ ਲਈ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦਾ ਆਕਾਰ ਬਦਲੋ ਜਾਂ ਵੱਖ-ਵੱਖ ਡਿਵਾਈਸਾਂ 'ਤੇ ਲੋਡ ਕਰੋ।
ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਲਾਸ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਦਿਖਾਈ ਦੇ ਰਹੀ ਹੈ।
ਇੱਥੇ, ਹਰੇ ਚੈੱਕਮਾਰਕ ਦਰਸਾਉਂਦੇ ਹਨ ਕਿ ਕਲਾਸ ਤੁਹਾਡੇ ਮੌਜੂਦਾ ਵਿਊਪੋਰਟ ਵਿੱਚ ਲੁਕੀ ਹੋਈ ਹੈ।