ਬੂਟਸਟਰੈਪ, ਟਵਿੱਟਰ ਤੋਂ

ਬੂਟਸਟਰੈਪ ਟਵਿੱਟਰ ਦੀ ਇੱਕ ਟੂਲਕਿੱਟ ਹੈ ਜੋ ਵੈਬ ਐਪਸ ਅਤੇ ਸਾਈਟਾਂ ਦੇ ਵਿਕਾਸ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀ ਗਈ ਹੈ।
ਇਸ ਵਿੱਚ ਟਾਈਪੋਗ੍ਰਾਫੀ, ਫਾਰਮ, ਬਟਨ, ਟੇਬਲ, ਗਰਿੱਡ, ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਹੋਰ ਲਈ ਬੇਸ CSS ਅਤੇ HTML ਸ਼ਾਮਲ ਹਨ।

ਨੀਰਡ ਚੇਤਾਵਨੀ: ਬੂਟਸਟਰੈਪ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖਦੇ ਹੋਏ ਗੇਟ ਤੋਂ ਬਾਹਰ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।

CSS ਨੂੰ ਹੌਟਲਿੰਕ ਕਰੋ

ਸਭ ਤੋਂ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਸ਼ੁਰੂਆਤ ਲਈ, ਬਸ ਇਸ ਸਨਿੱਪਟ ਨੂੰ ਆਪਣੇ ਵੈਬਪੇਜ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।

ਇਸ ਦੀ ਵਰਤੋਂ ਘੱਟ ਨਾਲ ਕਰੋ

ਘੱਟ ਵਰਤਣ ਦੇ ਇੱਕ ਪ੍ਰਸ਼ੰਸਕ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ, ਸਿਰਫ ਰੇਪੋ ਨੂੰ ਕਲੋਨ ਕਰੋ ਅਤੇ ਇਹ ਲਾਈਨਾਂ ਜੋੜੋ:

GitHub 'ਤੇ ਫੋਰਕ

Github 'ਤੇ ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਰੈਪੋ ਨਾਲ ਡਾਉਨਲੋਡ, ਫੋਰਕ, ਪੁੱਲ, ਫਾਈਲ ਮੁੱਦੇ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ।

GitHub 'ਤੇ ਬੂਟਸਟਰੈਪ »

ਇਤਿਹਾਸ

ਟਵਿੱਟਰ ਦੇ ਪਹਿਲੇ ਦਿਨਾਂ ਵਿੱਚ, ਇੰਜੀਨੀਅਰਾਂ ਨੇ ਫਰੰਟ-ਐਂਡ ਲੋੜਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਲਗਭਗ ਕਿਸੇ ਵੀ ਲਾਇਬ੍ਰੇਰੀ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਿਸ ਤੋਂ ਉਹ ਜਾਣੂ ਸਨ। ਟਵਿੱਟਰ ਦੇ ਪਹਿਲੇ ਹੈਕਵੀਕ ਦੌਰਾਨ ਪੇਸ਼ ਕੀਤੀਆਂ ਗਈਆਂ ਚੁਣੌਤੀਆਂ ਦੇ ਜਵਾਬ ਵਜੋਂ ਬੂਟਸਟਰੈਪ ਸ਼ੁਰੂ ਹੋਇਆ ਅਤੇ ਵਿਕਾਸ ਤੇਜ਼ੀ ਨਾਲ ਤੇਜ਼ ਹੋ ਗਿਆ।

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

dev.twitter.com 'ਤੇ ਹੋਰ ਪੜ੍ਹੋ ›

ਬਰਾਊਜ਼ਰ ਸਹਿਯੋਗ

ਕ੍ਰੋਮ, ਸਫਾਰੀ, ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ, ਅਤੇ ਫਾਇਰਫਾਕਸ ਵਰਗੇ ਪ੍ਰਮੁੱਖ ਆਧੁਨਿਕ ਬ੍ਰਾਊਜ਼ਰਾਂ ਵਿੱਚ ਬੂਟਸਟਰੈਪ ਦੀ ਜਾਂਚ ਅਤੇ ਸਮਰਥਨ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

ਨਵੀਨਤਮ ਸਫਾਰੀ
ਨਵੀਨਤਮ ਗੂਗਲ ਕਰੋਮ
ਫਾਇਰਫਾਕਸ 4+
ਇੰਟਰਨੈੱਟ ਐਕਸਪਲੋਰਰ 7+
ਓਪੇਰਾ 11

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਬੂਟਸਟਰੈਪ ਕੰਪਾਇਲ ਕੀਤੇ CSS, ਅਨਕੰਪਾਈਲਡ, ਅਤੇ ਉਦਾਹਰਨ ਟੈਂਪਲੇਟਸ ਨਾਲ ਪੂਰਾ ਹੁੰਦਾ ਹੈ।

ਸਾਰੀਆਂ ਮੂਲ .less ਫ਼ਾਈਲਾਂ
ਪੂਰੀ ਤਰ੍ਹਾਂ ਕੰਪਾਇਲ ਕੀਤਾ ਅਤੇ ਮਿਨੀਫਾਈਡ CSS
ਸਟਾਈਲ ਗਾਈਡ ਦਸਤਾਵੇਜ਼ਾਂ ਨੂੰ ਪੂਰਾ ਕਰੋ
ਉਦਾਹਰਨ ਪੰਨਾ ਟੈਮਪਲੇਟ (ਜਲਦ ਆਉਣ ਲਈ ਹੋਰ)

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਗਰਿੱਡ

ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 940px ਚੌੜਾ 16-ਕਾਲਮ ਗਰਿੱਡ ਹੈ। ਇਹ ਪ੍ਰਸਿੱਧ 960 ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਸੁਆਦ ਹੈ, ਪਰ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਵਾਧੂ ਹਾਸ਼ੀਏ/ਪੈਡਿੰਗ ਤੋਂ ਬਿਨਾਂ।

ਗਰਿੱਡ ਮਾਰਕਅੱਪ ਦੀ ਉਦਾਹਰਨ

ਜਿਵੇਂ ਕਿ ਇੱਥੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਬੁਨਿਆਦੀ ਖਾਕਾ ਦੋ "ਕਾਲਮਾਂ" ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਹਰ ਇੱਕ 16 ਬੁਨਿਆਦੀ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ ਜੋ ਅਸੀਂ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ। ਹੋਰ ਭਿੰਨਤਾਵਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਉਦਾਹਰਣਾਂ ਦੇਖੋ।

<div ਕਲਾਸ = "ਕਤਾਰ" > 
  <div ਕਲਾਸ = "span6 ਕਾਲਮ" > 
    ...
  </div>
  <div ਕਲਾਸ = "span10 ਕਾਲਮ" > 
    ...
  </div>
</div>

1/3

2/3

ਔਫਸੈਟਿੰਗ ਕਾਲਮਾਂ

8 ਆਫਸੈੱਟ 4

1/3 ਔਫਸੈੱਟ 2/3s

4 ਆਫਸੈੱਟ 4

5 ਆਫਸੈੱਟ 3

10 ਆਫਸੈੱਟ 6

ਸਥਿਰ ਖਾਕਾ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਅਤੇ ਸਧਾਰਨ 940px-ਚੌੜਾ, ਸਿਰਫ਼ ਇੱਕ ਸਿੰਗਲ ਦੁਆਰਾ ਪ੍ਰਦਾਨ ਕੀਤੀ ਗਈ ਕਿਸੇ ਵੀ ਵੈਬਸਾਈਟ ਜਾਂ ਪੰਨੇ ਲਈ ਕੇਂਦਰਿਤ ਖਾਕਾ <div.container>।

<body>
  <div ਕਲਾਸ = "ਕੰਟੇਨਰ" > 
    ...
  </div>
</body>

ਤਰਲ ਖਾਕਾ

ਘੱਟੋ-ਘੱਟ ਅਤੇ ਅਧਿਕਤਮ-ਚੌੜਾਈ ਅਤੇ ਖੱਬੇ-ਹੱਥ ਸਾਈਡਬਾਰ ਦੇ ਨਾਲ ਇੱਕ ਵਿਕਲਪਕ, ਲਚਕਦਾਰ ਤਰਲ ਪੰਨਾ ਬਣਤਰ। ਐਪਾਂ ਅਤੇ ਦਸਤਾਵੇਜ਼ਾਂ ਲਈ ਵਧੀਆ।

<body>
  <div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" > 
    <div ਕਲਾਸ = "ਸਾਈਡਬਾਰ" > 
      ...
    </div>
    <div ਕਲਾਸ = "ਸਮੱਗਰੀ" > 
      ...
    </div>
  </div>
</body>

ਸਿਰਲੇਖ ਅਤੇ ਕਾਪੀ

ਤੁਹਾਡੇ ਵੈਬਪੰਨਿਆਂ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਿਆਰੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਲੜੀ।

ਸਮੁੱਚਾ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਗਰਿੱਡ ਸਾਡੀ preboot.less ਫਾਈਲ ਵਿੱਚ ਦੋ ਘੱਟ ਵੇਰੀਏਬਲਾਂ 'ਤੇ ਅਧਾਰਤ ਹੈ: @basefontਅਤੇ @baseline. ਪਹਿਲਾ ਹੈ ਬੇਸ ਫੌਂਟ-ਸਾਈਜ਼ ਜੋ ਕਿ ਭਰ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਅਤੇ ਦੂਜਾ ਬੇਸ ਲਾਈਨ-ਉਚਾਈ ਹੈ।

ਅਸੀਂ ਉਹਨਾਂ ਵੇਰੀਏਬਲਾਂ, ਅਤੇ ਕੁਝ ਗਣਿਤ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਸਾਡੀਆਂ ਸਾਰੀਆਂ ਕਿਸਮਾਂ ਅਤੇ ਹੋਰਾਂ ਦੇ ਹਾਸ਼ੀਏ, ਪੈਡਿੰਗ ਅਤੇ ਲਾਈਨ-ਹਾਈਟਸ ਬਣਾਉਣ ਲਈ।

h1. ਸਿਰਲੇਖ 1

h2. ਸਿਰਲੇਖ 2

h3. ਸਿਰਲੇਖ 3

h4. ਸਿਰਲੇਖ 4

h5. ਸਿਰਲੇਖ 5

h6. ਸਿਰਲੇਖ 6

ਉਦਾਹਰਨ ਪੈਰਾ

ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲੀਓ. 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>ਵਰਤੋਂ ਇਸਦੇ ਨਜ਼ਦੀਕੀ ਪੂਰਵਜ, ਜਾਂ ਕੰਮ ਦੇ ਪੂਰੇ ਸਰੀਰ ਲਈ ਸੰਪਰਕ ਜਾਣਕਾਰੀ ਲਈ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ਨੋਟ: ਸਮਗਰੀ ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਢਾਂਚਾ ਦੇਣ ਲਈ ਇੱਕ ਵਿੱਚ ਹਰੇਕ ਲਾਈਨ ਨੂੰ <address>ਇੱਕ ਲਾਈਨ-ਬ੍ਰੇਕ ( <br />) ਨਾਲ ਖਤਮ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ ਜਾਂ ਇੱਕ ਬਲਾਕ-ਪੱਧਰ ਦੇ ਟੈਗ (ਉਦਾਹਰਨ ਲਈ, <p>) ਵਿੱਚ ਲਪੇਟਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

ਸੰਖੇਪ ਰੂਪ

ਸੰਖੇਪ ਅਤੇ ਸੰਖੇਪ ਸ਼ਬਦਾਂ ਲਈ, <abbr>ਟੈਗ ( HTML5<acronym> ਵਿੱਚ ਬਰਤਰਫ਼ ਕੀਤਾ ਗਿਆ ਹੈ ) ਦੀ ਵਰਤੋਂ ਕਰੋ। ਟੈਗ ਦੇ ਅੰਦਰ ਸ਼ਾਰਟਹੈਂਡ ਫਾਰਮ ਪਾਓ ਅਤੇ ਪੂਰੇ ਨਾਮ ਲਈ ਇੱਕ ਸਿਰਲੇਖ ਸੈੱਟ ਕਰੋ।

ਬਲਾਕਕੋਟ

<blockquote> <p> <small>

ਹਵਾਲਾ ਕਿਵੇਂ ਦੇਣਾ ਹੈ

ਬਲਾਕਕੋਟ ਨੂੰ ਸ਼ਾਮਲ ਕਰਨ ਲਈ, <blockquote>ਆਲੇ ਦੁਆਲੇ ਲਪੇਟੋ <p>ਅਤੇ <small>ਟੈਗ ਕਰੋ। ਆਪਣੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦੇਣ ਲਈ ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ <small>ਅਤੇ ਤੁਹਾਨੂੰ —ਇਸ ਤੋਂ ਪਹਿਲਾਂ ਇੱਕ ਐਮ ਡੈਸ਼ ਮਿਲੇਗਾ।

Lorem ipsum dolor sit amet, consectetur adipiscing elit. ਪੂਰਨ ਅੰਕ ਪਜ਼ੂਏਰ ਈਰਾਟ ਏ ਐਂਟੀ ਵੇਨੇਨਾਟਿਸ ਡੈਪੀਬਸ ਪੋਸਯੂਰੇ ਵੇਲੀਟ ਐਲੀਕੇਟ।
ਡਾ. ਜੂਲੀਅਸ ਹਿਬਰਟ

ਸੂਚੀਆਂ

ਬਿਨਾਂ ਕ੍ਰਮਬੱਧ`<ul>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
- ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
- ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
- ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
- ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

ਅਨਸਟਾਇਲਡ`<ul.unstyled>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
- ਫੇਸੇਲਸ ਆਈਕੁਲਿਸ ਨੇਕ
- ਪਰਸ ਸੋਡੇਲਸ ਅਲਟ੍ਰੀਸਿਸ
- ਵੈਸਟੀਬੁਲਮ ਲਾਓਰੇਟ ਪੋਰਟਟੀਟਰ ਸੇਮ
- ਏਸੀ ਟ੍ਰਿਸਟਿਕ ਲਿਬੇਰੋ ਵੋਲਟਪੈਟ 'ਤੇ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

ਆਰਡਰ ਕੀਤਾ`<ol>`

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
ਮਾਸਾ ਤੇ ਪੂਰਨ ਅੰਕ ਮੋਲੇਸਟੀ ਲੋਰੇਮ
ਪ੍ਰੀਟਿਅਮ ਨਿਸਲ ਐਲੀਕੇਟ ਵਿੱਚ ਫੈਸਿਲਿਸਿਸ
ਨੂਲਾ ਵੁਲਟਪਟ ਅਲੀਕਮ ਵੇਲੀਟ
Faucibus porta lacus fringilla vel
ਏਨੇਨ ਬੈਠ ਅਮੇਤ ਏਰਤ ਨੰਕ
Eget porttitor lorem

ਵਰਣਨ`dl`

ਵਰਣਨ ਸੂਚੀਆਂ: ਇੱਕ ਵਰਣਨ ਸੂਚੀ ਸ਼ਰਤਾਂ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹੈ।
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
ਮਲੇਸੁਆਡਾ ਪੋਰਟਾ: Etiam porta sem malesuada magna mollis euismod.

ਬਿਲਡਿੰਗ ਟੇਬਲ

<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>

ਉਦਾਹਰਨ: Zebra-ਧਾਰੀ ਵਾਲੇ w/ TableSorter.js

ਪਿਛਲੀ ਉਦਾਹਰਣ ਨੂੰ ਲੈਂਦੇ ਹੋਏ, ਅਸੀਂ jQuery ਅਤੇ ਟੇਬਲਸੋਰਟਰ ਪਲੱਗਇਨ ਦੁਆਰਾ ਲੜੀਬੱਧ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰਕੇ ਸਾਡੀਆਂ ਟੇਬਲਾਂ ਦੀ ਉਪਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦੇ ਹਾਂ । ਲੜੀਬੱਧ ਨੂੰ ਬਦਲਣ ਲਈ ਕਿਸੇ ਵੀ ਕਾਲਮ ਦੇ ਸਿਰਲੇਖ 'ਤੇ ਕਲਿੱਕ ਕਰੋ।

#	ਪਹਿਲਾ ਨਾਂ	ਆਖਰੀ ਨਾਂਮ	ਭਾਸ਼ਾ
1	ਤੁਹਾਡਾ	ਇੱਕ	ਅੰਗਰੇਜ਼ੀ
2	ਜੋ	ਸਿਕਸ ਪੈਕ	ਅੰਗਰੇਜ਼ੀ
3	ਸਟੂ	ਦੰਦ	ਕੋਡ

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<ਸਕ੍ਰਿਪਟ > 
  $ ( ਫੰਕਸ਼ਨ () { 
    $ ( "ਟੇਬਲ#ਸੋਰਟਟੇਬਲ ਉਦਾਹਰਨ" )। ਟੇਬਲਸੌਰਟਰ ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<ਟੇਬਲ ਕਲਾਸ = "ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" > 
  ...
</table>

ਸਥਿਰ ਟਾਪਬਾਰ

ਇਹ ਕੀ ਹੈ

ਸਾਡਾ ਟੌਪਬਾਰ ਇੱਕ ਸਥਿਰ ਪੱਟੀ ਹੈ ਜਿਸ ਵਿੱਚ ਇੱਕ ਵੈਬਸਾਈਟ ਦਾ ਲੋਗੋ ਜਾਂ ਨਾਮ, ਪ੍ਰਾਇਮਰੀ ਨੈਵੀਗੇਸ਼ਨ, ਅਤੇ ਖੋਜ ਫਾਰਮ ਹੁੰਦਾ ਹੈ।

ਅਨੁਕੂਲਿਤ

ਅੰਦਰਲੇ ਸਾਰੇ ਤੱਤ, ਅਤੇ ਪੂਰੀ ਟੌਪਬਾਰ ਵੀ, ਵਿਕਲਪਿਕ ਹਨ। ਤੁਸੀਂ ਇੱਕ ਲੋਗੋ/ਨਾਮ, ਨੇਵੀ, ਖੋਜ, ਅਤੇ ਇੱਕ ਸੈਕੰਡਰੀ ਨੈਵੀ—ਜਾਂ ਇਸ ਦਾ ਕੋਈ ਵੀ ਸੁਮੇਲ ਸ਼ਾਮਲ ਕਰਨਾ ਚੁਣ ਸਕਦੇ ਹੋ।

ਡ੍ਰੌਪਡਾਊਨ ਸ਼ਾਮਲ ਹਨ

ਮੁੱਖ ਨੈਵੀਗੇਸ਼ਨ ਦੇ ਹਿੱਸੇ ਵਜੋਂ, ਅਸੀਂ ਤੁਹਾਡੇ ਲਈ ਤੁਹਾਡੀ ਨੇਵੀਗੇਸ਼ਨ ਵਿੱਚ ਡ੍ਰੌਪਡਾਊਨ ਜੋੜਨ ਦੀ ਯੋਗਤਾ ਸ਼ਾਮਲ ਕੀਤੀ ਹੈ। ਇਹ ਦੇਖਣ ਲਈ ਕਿ ਇਹ ਕਿਵੇਂ ਕੀਤਾ ਗਿਆ ਹੈ (ਸੱਜੇ ਇਕਸਾਰ) ਉੱਪਰ ਸੈਕੰਡਰੀ ਨੇਵੀ ਦੇਖੋ।

ਨੋਟ: ਕਿਸੇ ਵੀ ਪੰਨੇ 'ਤੇ ਟੌਪਬਾਰ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਸਮੇਂ, padding-top: 40px;ਆਪਣੇ body.

ਟੈਬਾਂ ਅਤੇ ਗੋਲੀਆਂ

ਇੱਕ ਨਾਲ ਸਧਾਰਨ ਸੈਕੰਡਰੀ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਓ <ul>। ਢੁਕਵੀਂ ਕਲਾਸ ਜੋੜ ਕੇ ਟੈਬਾਂ ਜਾਂ ਗੋਲੀਆਂ ਵਿਚਕਾਰ ਸਵੈਪ ਕਰੋ।

ਸਮੱਗਰੀ ਦੇ ਉਪ-ਭਾਗਾਂ ਜਿਵੇਂ ਕਿ ਸਾਡੇ ਖਾਤਾ ਸੈਟਿੰਗਾਂ ਪੰਨਿਆਂ ਅਤੇ ਸਮਾਨ ਸਮੱਗਰੀ ਦੇ ਪੰਨਿਆਂ ਦੇ ਵਿਚਕਾਰ ਟੌਗਲ ਕਰਨ ਲਈ ਉਪਭੋਗਤਾ ਸਮਾਂ-ਸੀਮਾਵਾਂ ਲਈ ਵਧੀਆ। ਟੈਬਡ ਜਾਂ ਗੋਲੀ ਸਟਾਈਲ ਵਿੱਚ ਉਪਲਬਧ।

<ul ਕਲਾਸ = "ਟੈਬਾਂ" > 
  <li class = "active" ><a href = "#" > ਘਰ </a></li>  
  <li><a href = "#" > ਪ੍ਰੋਫਾਈਲ </a></li> 
  <li><a href = "#" > ਸੁਨੇਹੇ </a></li> 
  <li><a href = "#" > ਸੈਟਿੰਗਾਂ </a></li> 
  <li><a href = "#" > ਸੰਪਰਕ </a></li> 
</ul>

<ul class = "ਗੋਲੀਆਂ" > 
  <li class = "active" ><a href = "#" > ਘਰ </a></li>  
  <li><a href = "#" > ਪ੍ਰੋਫਾਈਲ </a></li> 
  <li><a href = "#" > ਸੁਨੇਹੇ </a></li> 
  <li><a href = "#" > ਸੈਟਿੰਗਾਂ </a></li> 
  <li><a href = "#" > ਸੰਪਰਕ </a></li> 
</ul>

ਪੰਨਾ ਨੰਬਰ

Rdio ਦੁਆਰਾ ਪ੍ਰੇਰਿਤ ਅਤਿ ਸਰਲ ਅਤੇ ਘੱਟੋ-ਘੱਟ ਸਟਾਈਲ ਵਾਲਾ ਪੰਨਾਬੰਦੀ। ਵੱਡੇ ਬਲਾਕ ਨੂੰ ਮਿਸ ਕਰਨਾ ਔਖਾ ਹੈ, ਆਸਾਨੀ ਨਾਲ ਸਕੇਲੇਬਲ ਹੈ, ਅਤੇ ਵੱਡੇ ਕਲਿਕ ਖੇਤਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ।

<div ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" > 
  <ul>
    <li ਕਲਾਸ = "ਪਿਛਲੀ ਅਯੋਗ" ><a href = "#" > ← ਪਿਛਲਾ </a></li>  
    <li class = "active" ><a href = "#" > 1 </a></li>  
    <li><a href = "#" > 2 </a></li> 
    <li><a href = "#" > 3 </a></li> 
    <li><a href = "#" > 4 </a></li> 
    <li><a href = "#" > 5 </a></li> 
    <li ਕਲਾਸ = "ਅਗਲਾ" ><a href = "#" > ਅਗਲਾ → </a></li>  
  </ul>
</div>

ਬੁਨਿਆਦੀ ਚੇਤਾਵਨੀਆਂ

div.alert-message

ਅਸਫਲਤਾ, ਸੰਭਾਵੀ ਅਸਫਲਤਾ, ਜਾਂ ਕਿਸੇ ਕਾਰਵਾਈ ਦੀ ਸਫਲਤਾ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਇੱਕ-ਲਾਈਨ ਸੰਦੇਸ਼। ਫਾਰਮ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ.

ਪਵਿੱਤਰ guacamole! ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਚੰਗੇ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ।

ਓ ਸਨੈਪ! ਇਸ ਅਤੇ ਉਸ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ।

ਸਿਰ! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ ਜਿਸ 'ਤੇ ਤੁਹਾਡੇ ਧਿਆਨ ਦੀ ਲੋੜ ਹੈ, ਪਰ ਇਹ ਅਜੇ ਤੱਕ ਇੱਕ ਵੱਡੀ ਤਰਜੀਹ ਨਹੀਂ ਹੈ।

ਸੁਨੇਹਿਆਂ ਨੂੰ ਬਲੌਕ ਕਰੋ

div.alert-message.block-message

ਉਹਨਾਂ ਸੁਨੇਹਿਆਂ ਲਈ ਜਿਹਨਾਂ ਲਈ ਥੋੜੀ ਵਿਆਖਿਆ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਸਾਡੇ ਕੋਲ ਪੈਰਾਗ੍ਰਾਫ ਸਟਾਈਲ ਅਲਰਟ ਹਨ। ਇਹ ਲੰਬੇ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨੂੰ ਬਬਬਲ ਕਰਨ, ਕਿਸੇ ਬਕਾਇਆ ਕਾਰਵਾਈ ਬਾਰੇ ਉਪਭੋਗਤਾ ਨੂੰ ਚੇਤਾਵਨੀ ਦੇਣ, ਜਾਂ ਪੰਨੇ 'ਤੇ ਵਧੇਰੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹਨ।

ਪਵਿੱਤਰ guacamole! ਇਹ ਇੱਕ ਚੇਤਾਵਨੀ ਹੈ! ਆਪਣੇ ਆਪ ਦੀ ਜਾਂਚ ਕਰੋ, ਤੁਸੀਂ ਬਹੁਤ ਚੰਗੇ ਨਹੀਂ ਲੱਗ ਰਹੇ ਹੋ। ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ। Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ

ਓ ਸਨੈਪ! ਤੁਹਾਨੂੰ ਇੱਕ ਗਲਤੀ ਮਿਲੀ ਹੈ! ਇਸ ਅਤੇ ਉਸ ਨੂੰ ਬਦਲੋ ਅਤੇ ਦੁਬਾਰਾ ਕੋਸ਼ਿਸ਼ ਕਰੋ। Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras Mattis consectetur purus sit amet fermentum.

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ

ਬਹੁਤ ਖੂਬ! ਤੁਸੀਂ ਇਸ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ। Cum sociis natoque penatibus et magnis dis parturient Montes, nascetur ridiculus mus. Maecenas faucibus mollis interdum.

ਇਹ ਕਾਰਵਾਈ ਕਰੋ ਜਾਂ ਇਹ ਕਰੋ

ਮਾਡਲਸ

ਮੋਡਲ—ਡਾਇਲਾਗ ਜਾਂ ਲਾਈਟਬਾਕਸ—ਉਹ ਸਥਿਤੀਆਂ ਵਿੱਚ ਪ੍ਰਸੰਗਿਕ ਕਾਰਵਾਈਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹਨ ਜਿੱਥੇ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਕਿ ਬੈਕਗ੍ਰਾਊਂਡ ਸੰਦਰਭ ਨੂੰ ਬਣਾਈ ਰੱਖਿਆ ਜਾਵੇ।

ਟੂਲ ਸੁਝਾਅ

ਉਲਝਣ ਵਾਲੇ ਉਪਭੋਗਤਾ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਦਿਸ਼ਾ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਲਈ 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 .

ਹੇਠਾਂ!

ਸਹੀ!

ਛੱਡ ਦਿੱਤਾ!

ਉੱਪਰ!

ਪੋਪੋਵਰਸ

ਲੇਆਉਟ ਨੂੰ ਪ੍ਰਭਾਵਿਤ ਕੀਤੇ ਬਿਨਾਂ ਕਿਸੇ ਪੰਨੇ ਨੂੰ ਸਬਟੈਕਸਟੁਅਲ ਜਾਣਕਾਰੀ ਪ੍ਰਦਾਨ ਕਰਨ ਲਈ ਪੋਪਓਵਰ ਦੀ ਵਰਤੋਂ ਕਰੋ।

ਬੂਟਸਟਰੈਪ ਪ੍ਰੀਬੂਟ ਦੇ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਸੀ , ਮਿਕਸਿਨ ਅਤੇ ਵੇਰੀਏਬਲਾਂ ਦਾ ਇੱਕ ਓਪਨ-ਸਰੋਤ ਪੈਕ , ਜੋ ਕਿ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਵੈੱਬ ਵਿਕਾਸ ਲਈ ਇੱਕ 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 ;           
}