Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ, ਪੋਰਟਾ ਏਸੀ ਕੰਸੇਕਟੁਰ ਏਸੀ, ਵੈਸਟੀਬੁਲਮ ਐਟ ਈਰੋਸ।
ਬੂਟਸਟਰੈਪ ਟਵਿੱਟਰ ਦੀ ਇੱਕ ਟੂਲਕਿੱਟ ਹੈ ਜੋ ਵੈਬ ਐਪਸ ਅਤੇ ਸਾਈਟਾਂ ਦੇ ਵਿਕਾਸ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀ ਗਈ ਹੈ।
ਇਸ ਵਿੱਚ ਟਾਈਪੋਗ੍ਰਾਫੀ, ਫਾਰਮ, ਬਟਨ, ਟੇਬਲ, ਗਰਿੱਡ, ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਹੋਰ ਲਈ ਬੇਸ CSS ਅਤੇ HTML ਸ਼ਾਮਲ ਹਨ।
ਨੀਰਡ ਚੇਤਾਵਨੀ: ਬੂਟਸਟਰੈਪ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਗੇਟ ਤੋਂ ਬਾਹਰ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।
ਸਭ ਤੋਂ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਸ਼ੁਰੂਆਤ ਲਈ, ਬਸ ਇਸ ਸਨਿੱਪਟ ਨੂੰ ਆਪਣੇ ਵੈਬਪੇਜ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
ਘੱਟ ਵਰਤਣ ਦੇ ਇੱਕ ਪ੍ਰਸ਼ੰਸਕ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ, ਸਿਰਫ ਰੇਪੋ ਨੂੰ ਕਲੋਨ ਕਰੋ ਅਤੇ ਇਹ ਲਾਈਨਾਂ ਜੋੜੋ:
Github 'ਤੇ ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਰੈਪੋ ਨਾਲ ਡਾਉਨਲੋਡ, ਫੋਰਕ, ਪੁੱਲ, ਫਾਈਲ ਮੁੱਦੇ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ।
ਟਵਿੱਟਰ ਦੇ ਪਹਿਲੇ ਦਿਨਾਂ ਵਿੱਚ, ਇੰਜੀਨੀਅਰਾਂ ਨੇ ਫਰੰਟ-ਐਂਡ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਲਗਭਗ ਕਿਸੇ ਵੀ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਿਸ ਤੋਂ ਉਹ ਜਾਣੂ ਸਨ। ਟਵਿੱਟਰ ਦੇ ਪਹਿਲੇ ਹੈਕਵੀਕ ਦੌਰਾਨ ਪੇਸ਼ ਕੀਤੀਆਂ ਗਈਆਂ ਚੁਣੌਤੀਆਂ ਦੇ ਜਵਾਬ ਵਜੋਂ ਬੂਟਸਟਰੈਪ ਸ਼ੁਰੂ ਹੋਇਆ ਅਤੇ ਵਿਕਾਸ ਤੇਜ਼ੀ ਨਾਲ ਤੇਜ਼ ਹੋ ਗਿਆ।
ਟਵਿੱਟਰ 'ਤੇ ਬਹੁਤ ਸਾਰੇ ਇੰਜੀਨੀਅਰਾਂ ਦੀ ਮਦਦ ਅਤੇ ਫੀਡਬੈਕ ਨਾਲ, ਬੂਟਸਟਰੈਪ ਨਾ ਸਿਰਫ਼ ਬੁਨਿਆਦੀ ਸ਼ੈਲੀਆਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਮਹੱਤਵਪੂਰਨ ਤੌਰ 'ਤੇ ਵਧਿਆ ਹੈ, ਸਗੋਂ ਵਧੇਰੇ ਸ਼ਾਨਦਾਰ ਅਤੇ ਟਿਕਾਊ ਫਰੰਟ-ਐਂਡ ਡਿਜ਼ਾਈਨ ਪੈਟਰਨਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ।
dev.twitter.com 'ਤੇ ਹੋਰ ਪੜ੍ਹੋ ›
ਕ੍ਰੋਮ, ਸਫਾਰੀ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ, ਅਤੇ ਫਾਇਰਫਾਕਸ ਵਰਗੇ ਪ੍ਰਮੁੱਖ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਜਾਂਚ ਅਤੇ ਸਮਰਥਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕੀਤੇ CSS, ਅਨਕੰਪਾਈਲਡ, ਅਤੇ ਉਦਾਹਰਨ ਟੈਂਪਲੇਟਸ ਨਾਲ ਪੂਰਾ ਹੁੰਦਾ ਹੈ।
ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 940px ਚੌੜਾ 16-ਕਾਲਮ ਗਰਿੱਡ ਹੈ। ਇਹ ਪ੍ਰਸਿੱਧ 960 ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਸੁਆਦ ਹੈ, ਪਰ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਵਾਧੂ ਹਾਸ਼ੀਏ/ਪੈਡਿੰਗ ਤੋਂ ਬਿਨਾਂ।
ਜਿਵੇਂ ਕਿ ਇੱਥੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਬੁਨਿਆਦੀ ਖਾਕਾ ਦੋ "ਕਾਲਮਾਂ" ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਹਰ ਇੱਕ 16 ਬੁਨਿਆਦੀ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ ਜੋ ਅਸੀਂ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ। ਹੋਰ ਭਿੰਨਤਾਵਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਉਦਾਹਰਣਾਂ ਦੇਖੋ।
- <div ਕਲਾਸ = "ਕਤਾਰ" >
- <div ਕਲਾਸ = "span6 ਕਾਲਮ" >
- ...
- </div>
- <div ਕਲਾਸ = "span10 ਕਾਲਮ" >
- ...
- </div>
- </div>
ਪੂਰਵ-ਨਿਰਧਾਰਤ ਅਤੇ ਸਧਾਰਨ 940px-ਚੌੜਾ, ਸਿਰਫ਼ ਇੱਕ ਸਿੰਗਲ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਕਿਸੇ ਵੀ ਵੈਬਸਾਈਟ ਜਾਂ ਪੰਨੇ ਲਈ ਕੇਂਦਰਿਤ ਖਾਕਾ <div.container>
।
- <body>
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ" >
- ...
- </div>
- </body>
ਘੱਟੋ-ਘੱਟ ਅਤੇ ਅਧਿਕਤਮ-ਚੌੜਾਈ ਅਤੇ ਖੱਬੇ-ਹੱਥ ਸਾਈਡਬਾਰ ਦੇ ਨਾਲ ਇੱਕ ਵਿਕਲਪਕ, ਲਚਕਦਾਰ ਤਰਲ ਪੰਨਾ ਬਣਤਰ। ਐਪਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਵਧੀਆ।
- <body>
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" >
- <div ਕਲਾਸ = "ਸਾਈਡਬਾਰ" >
- ...
- </div>
- <div ਕਲਾਸ = "ਸਮੱਗਰੀ" >
- ...
- </div>
- </div>
- </body>
ਤੁਹਾਡੇ ਵੈਬਪੰਨਿਆਂ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਿਆਰੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਲੜੀ।
ਸਮੁੱਚਾ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ preboot.less ਫਾਈਲ ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ: @basefont
ਅਤੇ @baseline
. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ।
ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਕੁਝ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਹੋਰਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ।
ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲੀਓ. Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.
ਜ਼ੋਰ, ਪਤੇ, ਅਤੇ ਸੰਖੇਪ ਰੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ
<strong>
<em>
<address>
<abbr>
ਜ਼ੋਰ ਟੈਗਸ ( <strong>
ਅਤੇ <em>
) ਦੀ ਵਰਤੋਂ ਕਿਸੇ ਸ਼ਬਦ ਜਾਂ ਵਾਕਾਂਸ਼ ਦੀ ਇਸਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਕਾਪੀ ਦੇ ਸੰਬੰਧ ਵਿੱਚ ਵਾਧੂ ਮਹੱਤਤਾ ਜਾਂ ਜ਼ੋਰ ਨੂੰ ਦਰਸਾਉਣ ਲਈ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ। <strong>
ਮਹੱਤਤਾ ਅਤੇ ਤਣਾਅ<em>
ਦੇ ਜ਼ੋਰ ਲਈ ਵਰਤੋਂ ।
ਫਿਊਸ ਡੈਪੀਬਸ , ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ , ਟੋਰਟਰ ਮੌਰੀਸ ਕੰਡੀਮੈਂਟਮ ਨਿਭ , ਯੂਟ ਫਰਮੈਂਟਮ ਮਾਸਾ ਜਸਟ ਅਮੇਟ ਰਿਸਸ । Maecenas faucibus mollis interdum. ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ।
ਨੋਟ:<b>
HTML5 ਵਿੱਚ ਵਰਤਣਾ ਅਤੇ ਟੈਗ ਕਰਨਾ ਅਜੇ ਵੀ ਠੀਕ ਹੈ <i>
ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਕ੍ਰਮਵਾਰ ਬੋਲਡ ਅਤੇ ਇਟਾਲਿਕ ਸਟਾਈਲ ਕਰਨ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ (ਹਾਲਾਂਕਿ ਜੇਕਰ ਕੋਈ ਹੋਰ ਅਰਥ ਤੱਤ ਹੈ, ਤਾਂ ਇਸਦੀ ਵਰਤੋਂ ਕਰੋ)। <b>
ਵਾਧੂ ਮਹੱਤਵ ਦੱਸੇ ਬਿਨਾਂ ਸ਼ਬਦਾਂ ਜਾਂ ਵਾਕਾਂਸ਼ਾਂ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਹੈ, ਜਦੋਂ <i>
ਕਿ ਜ਼ਿਆਦਾਤਰ ਆਵਾਜ਼, ਤਕਨੀਕੀ ਸ਼ਬਦਾਂ ਆਦਿ ਲਈ ਹੈ।
ਤੱਤ ਦੀ <address>
ਵਰਤੋਂ ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ, ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
ਨੋਟ: ਸਮਗਰੀ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਢਾਂਚਾ ਦੇਣ ਲਈ ਇੱਕ ਵਿੱਚ ਹਰੇਕ ਲਾਈਨ ਨੂੰ <address>
ਇੱਕ ਲਾਈਨ-ਬ੍ਰੇਕ ( <br />
) ਨਾਲ ਖਤਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਟੈਗ (ਉਦਾਹਰਨ ਲਈ, <p>
) ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ, <abbr>
ਟੈਗ ( HTML5<acronym>
ਵਿੱਚ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ ) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਟੈਗ ਦੇ ਅੰਦਰ ਸ਼ਾਰਟਹੈਂਡ ਫਾਰਮ ਪਾਓ ਅਤੇ ਪੂਰੇ ਨਾਮ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਸੈੱਟ ਕਰੋ।
<blockquote>
<p>
<small>
ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <blockquote>
ਆਲੇ ਦੁਆਲੇ ਲਪੇਟੋ <p>
ਅਤੇ <small>
ਟੈਗ ਕਰੋ। ਆਪਣੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ <small>
ਅਤੇ ਤੁਹਾਨੂੰ —
ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਐਮ ਡੈਸ਼ ਮਿਲੇਗਾ।
Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪਜ਼ੂਏਰ ਈਰਾਟ ਏ ਐਂਟੀ ਵੇਨੇਨਾਟਿਸ ਡੈਪੀਬਸ ਪੋਸਯੂਰੇ ਵੇਲੀਟ ਐਲੀਕੇਟ।
ਡਾ. ਜੂਲੀਅਸ ਹਿਬਰਟ
<ul>
<ul.unstyled>
<ol>
dl
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
ਟੇਬਲ ਬਹੁਤ ਵਧੀਆ ਹਨ - ਬਹੁਤ ਸਾਰੀਆਂ ਚੀਜ਼ਾਂ ਲਈ। ਮਹਾਨ ਟੇਬਲਾਂ ਨੂੰ, ਹਾਲਾਂਕਿ, ਉਪਯੋਗੀ, ਸਕੇਲੇਬਲ, ਅਤੇ ਪੜ੍ਹਨਯੋਗ (ਕੋਡ ਪੱਧਰ 'ਤੇ) ਹੋਣ ਲਈ ਥੋੜ੍ਹੇ ਜਿਹੇ ਮਾਰਕਅੱਪ ਪਿਆਰ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ। ਇੱਥੇ ਮਦਦ ਕਰਨ ਲਈ ਕੁਝ ਸੁਝਾਅ ਹਨ।
ਆਪਣੇ ਕਾਲਮ ਸਿਰਲੇਖਾਂ ਨੂੰ ਹਮੇਸ਼ਾ <thead>
ਇਸ ਤਰ੍ਹਾਂ ਲਪੇਟੋ ਕਿ ਲੜੀ <thead>
> <tr>
> ਹੋਵੇ <th>
।
ਕਾਲਮ ਸਿਰਲੇਖਾਂ ਦੇ ਸਮਾਨ, ਤੁਹਾਡੀ ਸਾਰੀ ਸਾਰਣੀ ਦੀ ਮੁੱਖ ਸਮੱਗਰੀ ਨੂੰ ਇੱਕ ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ <tbody>
ਤਾਂ ਕਿ ਤੁਹਾਡੀ ਲੜੀ <tbody>
> <tr>
> ਹੋਵੇ <td>
।
ਸਾਰੀਆਂ ਟੇਬਲਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗਤਾ ਯਕੀਨੀ ਬਣਾਉਣ ਅਤੇ ਢਾਂਚੇ ਨੂੰ ਬਣਾਈ ਰੱਖਣ ਲਈ ਸਿਰਫ਼ ਜ਼ਰੂਰੀ ਬਾਰਡਰਾਂ ਨਾਲ ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਸਟਾਈਲ ਕੀਤਾ ਜਾਵੇਗਾ। ਵਾਧੂ ਕਲਾਸਾਂ ਜਾਂ ਗੁਣਾਂ ਨੂੰ ਜੋੜਨ ਦੀ ਕੋਈ ਲੋੜ ਨਹੀਂ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਭਾਸ਼ਾ |
---|---|---|---|
1 | ਕੁੱਝ | ਇੱਕ | ਅੰਗਰੇਜ਼ੀ |
2 | ਜੋ | ਸਿਕਸ ਪੈਕ | ਅੰਗਰੇਜ਼ੀ |
3 | ਸਟੂ | ਦੰਦ | ਕੋਡ |
- <ਟੇਬਲ>
- ...
- </table>
ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜ ਕੇ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨਾਲ ਥੋੜਾ ਜਿਹਾ ਫੈਂਸੀ ਪ੍ਰਾਪਤ ਕਰੋ—ਬੱਸ .zebra-striped
ਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਭਾਸ਼ਾ |
---|---|---|---|
1 | ਕੁੱਝ | ਇੱਕ | ਅੰਗਰੇਜ਼ੀ |
2 | ਜੋ | ਸਿਕਸ ਪੈਕ | ਅੰਗਰੇਜ਼ੀ |
3 | ਸਟੂ | ਦੰਦ | ਕੋਡ |
ਨੋਟ: ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਇੱਕ ਪ੍ਰਗਤੀਸ਼ੀਲ ਸੁਧਾਰ ਹੈ ਜੋ IE8 ਅਤੇ ਹੇਠਾਂ ਵਾਲੇ ਪੁਰਾਣੇ ਬ੍ਰਾਊਜ਼ਰਾਂ ਲਈ ਉਪਲਬਧ ਨਹੀਂ ਹੈ।
- <ਟੇਬਲ ਕਲਾਸ = "ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" >
- ...
- </table>
ਪਿਛਲੀ ਉਦਾਹਰਣ ਨੂੰ ਲੈਂਦੇ ਹੋਏ, ਅਸੀਂ jQuery ਅਤੇ ਟੇਬਲਸੋਰਟਰ ਪਲੱਗਇਨ ਦੁਆਰਾ ਲੜੀਬੱਧ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਕੇ ਸਾਡੀਆਂ ਟੇਬਲਾਂ ਦੀ ਉਪਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਾਂ । ਲੜੀਬੱਧ ਨੂੰ ਬਦਲਣ ਲਈ ਕਿਸੇ ਵੀ ਕਾਲਮ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।
# | ਪਹਿਲਾ ਨਾਂ | ਆਖਰੀ ਨਾਂਮ | ਭਾਸ਼ਾ |
---|---|---|---|
1 | ਤੁਹਾਡਾ | ਇੱਕ | ਅੰਗਰੇਜ਼ੀ |
2 | ਜੋ | ਸਿਕਸ ਪੈਕ | ਅੰਗਰੇਜ਼ੀ |
3 | ਸਟੂ | ਦੰਦ | ਕੋਡ |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <ਸਕ੍ਰਿਪਟ >
- $ ( ਫੰਕਸ਼ਨ () {
- $ ( "ਟੇਬਲ#ਸੋਰਟਟੇਬਲ ਉਦਾਹਰਨ" )। ਟੇਬਲਸੌਰਟਰ ({ sortList : [[ 1 , 0 ]] });
- });
- </script>
- <ਟੇਬਲ ਕਲਾਸ = "ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" >
- ...
- </table>
ਸਾਰੇ ਫਾਰਮਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸਕੇਲੇਬਲ ਤਰੀਕੇ ਨਾਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਡਿਫੌਲਟ ਸ਼ੈਲੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ। ਸਟਾਈਲ ਟੈਕਸਟ ਇਨਪੁਟਸ, ਚੋਣ ਸੂਚੀਆਂ, ਟੈਕਸਟਰੇਅਸ, ਰੇਡੀਓ ਬਟਨ ਅਤੇ ਚੈਕਬਾਕਸ ਅਤੇ ਬਟਨਾਂ ਲਈ ਪ੍ਰਦਾਨ ਕੀਤੇ ਜਾਂਦੇ ਹਨ।
ਆਪਣੇ ਫਾਰਮ ਦੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ .form-stacked
ਕਰੋ ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਉਹਨਾਂ ਦੇ ਖੱਬੇ ਪਾਸੇ ਦੀ ਬਜਾਏ ਉਹਨਾਂ ਦੇ ਖੇਤਰਾਂ ਦੇ ਉੱਪਰ ਲੇਬਲ ਹੋਣਗੇ। ਇਹ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਛੋਟੇ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਕੋਲ ਭਾਰੀ ਫਾਰਮਾਂ ਲਈ ਇਨਪੁਟਸ ਦੇ ਦੋ ਕਾਲਮ ਹਨ।
ਇੱਕ ਕਨਵੈਨਸ਼ਨ ਦੇ ਤੌਰ ਤੇ, ਕਿਰਿਆਵਾਂ ਲਈ ਬਟਨ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਕਿ ਲਿੰਕ ਵਸਤੂਆਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, "ਡਾਊਨਲੋਡ" ਇੱਕ ਬਟਨ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ "ਹਾਲੀਆ ਸਰਗਰਮੀ" ਇੱਕ ਲਿੰਕ ਹੋ ਸਕਦਾ ਹੈ।
ਸਾਰੇ ਬਟਨ ਇੱਕ ਹਲਕੇ ਸਲੇਟੀ ਸ਼ੈਲੀ ਵਿੱਚ ਡਿਫੌਲਟ ਹੁੰਦੇ ਹਨ, ਪਰ ਵੱਖ-ਵੱਖ ਰੰਗਾਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਲਈ ਕਈ ਕਾਰਜਸ਼ੀਲ ਕਲਾਸਾਂ ਲਾਗੂ ਕੀਤੀਆਂ ਜਾ ਸਕਦੀਆਂ ਹਨ। ਇਹਨਾਂ ਕਲਾਸਾਂ ਵਿੱਚ ਇੱਕ ਨੀਲੀ .primary
ਸ਼੍ਰੇਣੀ, ਇੱਕ ਹਲਕਾ-ਨੀਲਾ .info
ਵਰਗ, ਇੱਕ ਹਰਾ .success
ਵਰਗ ਅਤੇ ਇੱਕ ਲਾਲ .danger
ਸ਼੍ਰੇਣੀ ਸ਼ਾਮਲ ਹੈ। ਨਾਲ ਹੀ, ਤੁਹਾਡੀਆਂ ਖੁਦ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਰੋਲ ਕਰਨਾ ਆਸਾਨ ਹੈ.
ਬਟਨ ਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕੀਤੇ ਨਾਲ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ .btn
ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ <a>
, <button>
, ਅਤੇ ਚੁਣੇ ਹੋਏ <input>
ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੋਗੇ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਇਸ 'ਤੇ ਹੈ!
ਉਹਨਾਂ ਬਟਨਾਂ ਲਈ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਹਨ ਜਾਂ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਐਪ ਦੁਆਰਾ ਅਸਮਰੱਥ ਹਨ, ਅਯੋਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ .disabled
ਲਿੰਕਾਂ ਅਤੇ ਤੱਤਾਂ :disabled
ਲਈ ਹੈ।<button>
div.alert-message
ਅਸਫਲਤਾ, ਸੰਭਾਵੀ ਅਸਫਲਤਾ, ਜਾਂ ਕਿਸੇ ਕਾਰਵਾਈ ਦੀ ਸਫਲਤਾ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਇੱਕ-ਲਾਈਨ ਸੰਦੇਸ਼। ਫਾਰਮ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ.
div.alert-message.block-message
ਉਹਨਾਂ ਸੁਨੇਹਿਆਂ ਲਈ ਜਿਹਨਾਂ ਲਈ ਥੋੜੀ ਵਿਆਖਿਆ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਸਾਡੇ ਕੋਲ ਪੈਰਾਗ੍ਰਾਫ ਸਟਾਈਲ ਅਲਰਟ ਹਨ। ਇਹ ਲੰਬੇ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨੂੰ ਬਬਬਲ ਕਰਨ, ਕਿਸੇ ਬਕਾਇਆ ਕਾਰਵਾਈ ਬਾਰੇ ਉਪਭੋਗਤਾ ਨੂੰ ਚੇਤਾਵਨੀ ਦੇਣ, ਜਾਂ ਪੰਨੇ 'ਤੇ ਵਧੇਰੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹਨ।
ਮੋਡਲ—ਡਾਇਲਾਗ ਜਾਂ ਲਾਈਟਬਾਕਸ—ਉਹ ਸਥਿਤੀਆਂ ਵਿੱਚ ਪ੍ਰਸੰਗਿਕ ਕਾਰਵਾਈਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹਨ ਜਿੱਥੇ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਕਿ ਬੈਕਗ੍ਰਾਊਂਡ ਸੰਦਰਭ ਨੂੰ ਬਣਾਈ ਰੱਖਿਆ ਜਾਵੇ।
ਇੱਕ ਵਧੀਆ ਸਰੀਰ…
ਉਲਝਣ ਵਾਲੇ ਉਪਭੋਗਤਾ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਦਿਸ਼ਾ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਲਈ Twipsies ਬਹੁਤ ਉਪਯੋਗੀ ਹਨ।
Lorem ipsum Dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit fugit accusantium voluptatum que unde sunt sed dicta quae fugit fugit accusantium .
ਲੇਆਉਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ ਕਿਸੇ ਪੰਨੇ ਨੂੰ ਸਬਟੈਕਸਟੁਅਲ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਪੋਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ, ਪੋਰਟਾ ਏਸੀ ਕੰਸੇਕਟੁਰ ਏਸੀ, ਵੈਸਟੀਬੁਲਮ ਐਟ ਈਰੋਸ।
ਬੂਟਸਟਰੈਪ ਪ੍ਰੀਬੂਟ ਦੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਸੀ , ਮਿਕਸਿਨ ਅਤੇ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਓਪਨ-ਸਰੋਤ ਪੈਕ , ਜੋ ਕਿ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਇੱਕ CSS ਪ੍ਰੀਪ੍ਰੋਸੈਸਰ, Less ਦੇ ਨਾਲ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ।
ਦੇਖੋ ਕਿ ਅਸੀਂ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਪ੍ਰੀਬੂਟ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕੀਤੀ ਹੈ ਅਤੇ ਤੁਸੀਂ ਇਸਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰ ਸਕਦੇ ਹੋ ਜੇਕਰ ਤੁਸੀਂ ਆਪਣੇ ਅਗਲੇ ਪ੍ਰੋਜੈਕਟ 'ਤੇ ਘੱਟ ਚਲਾਉਣ ਦੀ ਚੋਣ ਕਰਦੇ ਹੋ।
ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ JavaScript ਰਾਹੀਂ CSS ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੇ ਘੱਟ ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਨੇਸਟਿੰਗ ਦੀ ਪੂਰੀ ਵਰਤੋਂ ਕਰਨ ਲਈ ਇਸ ਵਿਕਲਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।
- <link rel = "stylesheet/less" href = "less/bootstrap.less" ਮੀਡੀਆ = "ਸਾਰੇ" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js ਹੱਲ ਮਹਿਸੂਸ ਨਹੀਂ ਕਰ ਰਹੇ ਹੋ? Less Mac ਐਪ ਨੂੰ ਅਜ਼ਮਾਓ ਜਾਂ ਜਦੋਂ ਤੁਸੀਂ ਆਪਣਾ ਕੋਡ ਤੈਨਾਤ ਕਰਦੇ ਹੋ ਤਾਂ ਕੰਪਾਇਲ ਕਰਨ ਲਈ Node.js ਦੀ ਵਰਤੋਂ ਕਰੋ।
ਇੱਥੇ ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਟਵਿੱਟਰ ਬੂਟਸਟਰੈਪ ਵਿੱਚ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਕੁਝ ਮੁੱਖ ਅੰਸ਼ ਹਨ। ਡਾਉਨਲੋਡ ਕਰਨ ਅਤੇ ਹੋਰ ਜਾਣਨ ਲਈ ਬੂਟਸਟਰੈਪ ਵੈਬਸਾਈਟ ਜਾਂ ਗਿਥਬ ਪ੍ਰੋਜੈਕਟ ਪੰਨੇ 'ਤੇ ਜਾਓ।
ਘੱਟ ਵਿੱਚ ਵੇਰੀਏਬਲ ਤੁਹਾਡੇ CSS ਸਿਰ ਦਰਦ ਤੋਂ ਮੁਕਤ ਬਣਾਈ ਰੱਖਣ ਅਤੇ ਅਪਡੇਟ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹਨ। ਜਦੋਂ ਤੁਸੀਂ ਰੰਗ ਮੁੱਲ ਜਾਂ ਅਕਸਰ ਵਰਤਿਆ ਜਾਣ ਵਾਲਾ ਮੁੱਲ ਬਦਲਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਸਨੂੰ ਇੱਕ ਥਾਂ 'ਤੇ ਅੱਪਡੇਟ ਕਰੋ ਅਤੇ ਤੁਸੀਂ ਸੈੱਟ ਹੋ।
- // ਲਿੰਕ
- @linkColor : #8b59c2;
- @linkColorHover : ਹਨੇਰਾ ( @linkColor , 10 );
- // ਸਲੇਟੀ
- @ਕਾਲਾ : #000;
- @ਗ੍ਰੇਡਾਰਕ : ਹਲਕਾ ( @ਕਾਲਾ , 25 %);
- @ਗ੍ਰੇ : ਹਲਕਾ ( @ਕਾਲਾ , 50 %);
- @ਗ੍ਰੇਲਾਈਟ : ਹਲਕਾ ( @ਕਾਲਾ , 70 %);
- @ਗ੍ਰੇ ਲਾਈਟਰ : ਹਲਕਾ ( @ਕਾਲਾ , 90 %);
- @white : #ffff;
- // ਐਕਸੈਂਟ ਰੰਗ
- @ਨੀਲਾ : #08b5fb ;
- @ਹਰਾ : #46a546 ;
- @ਲਾਲ : #9d261d ;
- @ਪੀਲਾ : #ffc40d ;
- @ਸੰਤਰੀ : #f89406 ;
- @ਪਿੰਕ : #c3325f ;
- @ਜਾਮਨੀ : #7a43b6 ;
- // ਬੇਸਲਾਈਨ ਗਰਿੱਡ
- @basefont : 13px ;
- @ ਬੇਸਲਾਈਨ : 18px ;
/* ... */
ਘੱਟ CSS ਦੇ ਆਮ ਸੰਟੈਕਸ ਤੋਂ ਇਲਾਵਾ ਟਿੱਪਣੀ ਦੀ ਇੱਕ ਹੋਰ ਸ਼ੈਲੀ ਵੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।
- // ਇਹ ਇੱਕ ਟਿੱਪਣੀ ਹੈ
- /* ਇਹ ਵੀ ਇੱਕ ਟਿੱਪਣੀ ਹੈ */
Mixins ਮੂਲ ਰੂਪ ਵਿੱਚ CSS ਲਈ ਸ਼ਾਮਲ ਜਾਂ ਅੰਸ਼ਕ ਹੁੰਦੇ ਹਨ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਕੋਡ ਦੇ ਇੱਕ ਬਲਾਕ ਨੂੰ ਇੱਕ ਵਿੱਚ ਜੋੜ ਸਕਦੇ ਹੋ। ਉਹ ਵਿਕਰੇਤਾ ਪ੍ਰੀਫਿਕਸਡ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਜਿਵੇਂ ਕਿ box-shadow
, ਕਰਾਸ-ਬ੍ਰਾਊਜ਼ਰ ਗਰੇਡੀਐਂਟ, ਫੌਂਟ ਸਟੈਕ ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਲਈ ਵਧੀਆ ਹਨ। ਹੇਠਾਂ ਮਿਕਸਿਨ ਦਾ ਇੱਕ ਨਮੂਨਾ ਹੈ ਜੋ ਬੂਟਸਟਰੈਪ ਨਾਲ ਸ਼ਾਮਲ ਕੀਤੇ ਗਏ ਹਨ।
- #ਫੌਂਟ {
- . ਸ਼ਾਰਟਹੈਂਡ ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ;
- ਫੌਂਟ - ਭਾਰ : @weight ;
- ਲਾਈਨ - ਉਚਾਈ : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ਫੌਂਟ - ਫੈਮਿਲੀ : "ਹੇਲਵੇਟਿਕਾ ਨੀਯੂ" , ਹੇਲਵੇਟਿਕਾ , ਏਰੀਅਲ , ਸੈਨਸ - ਸੇਰੀਫ ;
- ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ;
- ਫੌਂਟ - ਭਾਰ : @weight ;
- ਲਾਈਨ - ਉਚਾਈ : @lineHeight ;
- }
- . serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- ਫੌਂਟ - ਪਰਿਵਾਰ : "ਜਾਰਜੀਆ" , ਟਾਈਮਜ਼ ਨਿਊ ਰੋਮਨ , ਟਾਈਮਜ਼ , ਸੈਨਸ - ਸੇਰੀਫ ;
- ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ;
- ਫੌਂਟ - ਭਾਰ : @weight ;
- ਲਾਈਨ - ਉਚਾਈ : @lineHeight ;
- }
- . ਮੋਨੋਸਪੇਸ ( @weight : normal , @size : 12px , @lineHeight : 20px ) {
- ਫੌਂਟ - ਪਰਿਵਾਰ : "ਮੋਨਾਕੋ" , ਕੋਰੀਅਰ ਨਿਊ , ਮੋਨੋਸਪੇਸ ;
- ਫੌਂਟ - ਆਕਾਰ : @ ਆਕਾਰ ;
- ਫੌਂਟ - ਭਾਰ : @weight ;
- ਲਾਈਨ - ਉਚਾਈ : @lineHeight ;
- }
- }
- #ਢਾਲ {
- . ਹਰੀਜੱਟਲ ( @startColor : #555, @endColor: #333) {
- ਪਿਛੋਕੜ - ਰੰਗ : @endColor ;
- ਪਿਛੋਕੜ - ਦੁਹਰਾਓ : ਦੁਹਰਾਓ - x ;
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - khtml - ਗਰੇਡੀਐਂਟ ( ਰੇਖਿਕ , ਖੱਬਾ ਸਿਖਰ , ਸੱਜੇ ਸਿਖਰ , ( @startColor ) ਤੋਂ ( @endColor ) ਤੱਕ ); // ਕੋਨਕਿਉਰੋਰ
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - moz - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @startColor , @endColor ); // FF 3.6+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ms - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @startColor , @endColor ); // IE10
- ਬੈਕਗਰਾਊਂਡ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਗਰੇਡੀਐਂਟ ( ਰੇਖਿਕ , ਖੱਬਾ ਸਿਖਰ , ਸੱਜਾ ਸਿਖਰ , ਰੰਗ - ਸਟਾਪ ( 0 % , @startColor ), ਰੰਗ - ਸਟਾਪ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - o - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @startColor , @endColor ); // ਓਪੇਰਾ 11.10
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @startColor , @endColor ); // Le ਸਟੈਂਡਰਡ
- }
- . ਲੰਬਕਾਰੀ ( @startColor : #555, @endColor: #333) {
- ਪਿਛੋਕੜ - ਰੰਗ : @endColor ;
- ਪਿਛੋਕੜ - ਦੁਹਰਾਓ : ਦੁਹਰਾਓ - x ;
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - khtml - ਗਰੇਡੀਐਂਟ ( ਰੇਖਿਕ , ਖੱਬਾ ਸਿਖਰ , ਖੱਬਾ ਥੱਲੇ , ( @startColor ) ਤੋਂ ( @endColor ) ਤੱਕ ); // ਕੋਨਕਿਉਰੋਰ
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - moz - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // FF 3.6+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ms - ਲੀਨੀਅਰ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // IE10
- ਬੈਕਗਰਾਊਂਡ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਗਰੇਡੀਐਂਟ ( ਲੀਨੀਅਰ , ਖੱਬਾ ਸਿਖਰ , ਖੱਬਾ ਥੱਲੇ , ਰੰਗ - ਸਟਾਪ ( 0 %, @startColor ), ਰੰਗ - ਸਟਾਪ ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - ਵੈਬਕਿੱਟ - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : - o - ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // ਓਪੇਰਾ 11.10
- ਪਿਛੋਕੜ - ਚਿੱਤਰ : ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // ਮਿਆਰੀ
- }
- . ਦਿਸ਼ਾਤਮਕ ( @startColor : #555, @endColor: #333, @deg: 45deg) {
- ...
- }
- . ਵਰਟੀਕਲ - ਤਿੰਨ - ਰੰਗ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) {
- ...
- }
- }
ਫੈਂਸੀ ਬਣੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਵਾਂਗ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮਿਸ਼ਰਣ ਬਣਾਉਣ ਲਈ ਕੁਝ ਗਣਿਤ ਕਰੋ।
- // ਗਰੀਡਿਊਡ
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // ਗਰਿੱਡ ਸਿਸਟਮ
- . ਕੰਟੇਨਰ {
- ਚੌੜਾਈ : @siteWidth ;
- ਹਾਸ਼ੀਏ : 0 ਆਟੋ ;
- . clearfix ();
- }
- . ਕਾਲਮ ( @columnSpan : 1 ) {
- ਚੌੜਾਈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
- . ਆਫਸੈੱਟ ( @columnOffset : 1 ) {
- ਹਾਸ਼ੀਏ - ਖੱਬੇ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) + @extraSpace ;
- }