ਟਵਿੱਟਰ ਬੂਟਸਟਰੈਪ

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

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

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

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

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

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

GitHub 'ਤੇ ਫੋਰਕ

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

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

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

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

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

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

<div class="row">
  <div ਕਲਾਸ = "span6 ਕਾਲਮ" > 
    ...
  </div>
  <div ਕਲਾਸ = "span10 ਕਾਲਮ" > 
    ...
  </div>
</div>

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

8 ਆਫਸੈੱਟ 4

4 ਆਫਸੈੱਟ 4

5 ਆਫਸੈੱਟ 3

10 ਆਫਸੈੱਟ 6

ਸਥਿਰ ਖਾਕਾ

ਕਿਸੇ ਵੀ ਸਾਈਟ ਜਾਂ ਪੰਨੇ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ 940px ਚੌੜਾ, ਕੇਂਦਰਿਤ ਕੰਟੇਨਰ ਖਾਕਾ।

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

ਤਰਲ ਖਾਕਾ

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

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

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

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

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>

ਫੁਟਕਲ। ਤੱਤ

ਜ਼ੋਰ, ਪਤੇ, ਅਤੇ ਸੰਖੇਪ ਰੂਪਾਂ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

<strong> <em> <address> <abbr>

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

ਕਿਸੇ ਸ਼ਬਦ ਜਾਂ ਵਾਕਾਂਸ਼ ਅਤੇ ਇਸਦੇ ਆਲੇ ਦੁਆਲੇ ਦੀ ਕਾਪੀ ਦੇ ਵਿਚਕਾਰ ਵਿਜ਼ੂਅਲ ਫਰਕ ਜੋੜਨ ਲਈ ਜ਼ੋਰ ਟੈਗਸ ( <strong>ਅਤੇ ) ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਣੀ ਚਾਹੀਦੀ ਹੈ। ਸਾਦੇ ਪੁਰਾਣੇ ਧਿਆਨ ਅਤੇ ਚੁਸਤ ਧਿਆਨ ਅਤੇ ਸਿਰਲੇਖਾਂ ਲਈ <em>ਵਰਤੋਂ ।<strong><em>

ਇੱਕ ਪੈਰੇ ਵਿੱਚ ਜ਼ੋਰ

ਫਿਊਸ ਡੈਪੀਬਸ , ਟੇਲਸ ਏਸੀ ਕਰਸਸ ਕੋਮੋਡੋ , ਟੋਰਟਰ ਮੌਰੀਸ ਕੰਡੀਮੈਂਟਮ ਨਿਭ , ਯੂਟ ਫਰਮੈਂਟਮ ਮਾਸਾ ਜਸਟ ਅਮੇਟ ਰਿਸਸ । Maecenas faucibus mollis interdum. ਨੱਲਾ ਵਿਟਾਏ ਇਲੀਟ ਲਿਬੇਰੋ, ਇੱਕ ਫਰੇਟਰਾ ਔਗ।

ਪਤੇ

ਤੱਤ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ—ਤੁਸੀਂ ਇਸਦਾ addressਅਨੁਮਾਨ ਲਗਾਇਆ ਹੈ!—ਪਤੇ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:

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

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

ਸੰਖੇਪ ਰੂਪ

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

ਬਲਾਕਕੋਟ

<blockquote> <p> <cite>

blockquoteਆਪਣੇ ਆਲੇ ਦੁਆਲੇ paragraphਅਤੇ citeਟੈਗਸ ਨੂੰ ਸਮੇਟਣਾ ਯਕੀਨੀ ਬਣਾਓ . ਕਿਸੇ ਸਰੋਤ ਦਾ ਹਵਾਲਾ ਦਿੰਦੇ ਸਮੇਂ, citeਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰੋ। CSS ਸਵੈਚਲਿਤ ਤੌਰ 'ਤੇ ਇੱਕ em ਡੈਸ਼ (—) ਨਾਲ ਇੱਕ ਨਾਮ ਦੀ ਪੂਰਵ-ਅਨੁਭਵ ਕਰੇਗਾ।

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...
ਡਾ. ਜੂਲੀਅਸ ਹਿਬਰਟ

ਸੂਚੀਆਂ

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

ਜੇਰੇਮੀ ਬਿਕਸਬੀ
ਰਾਬਰਟ ਡੀਜ਼ੂਰ
ਜੋਸ਼ ਵਾਸ਼ਿੰਗਟਨ
ਐਂਟੋਨ ਕੈਪਰੇਸੀ
ਮੇਰੀ ਟੀਮ ਦੇ ਸਾਥੀ
- ਜਾਰਜ ਕਾਸਟਾਂਜ਼ਾ
- ਜੈਰੀ ਸੀਨਫੀਲਡ
- ਕੋਸਮੋ ਕ੍ਰੈਮਰ
- ਈਲੇਨ ਬੇਨਿਸ
- ਨਿਊਮੈਨ
ਜੌਨ ਜੈਕਬ
ਪਾਲ ਪੀਅਰਸ
ਕੇਵਿਨ ਗਾਰਨੇਟ

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

ਜੇਰੇਮੀ ਬਿਕਸਬੀ
ਰਾਬਰਟ ਡੀਜ਼ੂਰ
ਜੋਸ਼ ਵਾਸ਼ਿੰਗਟਨ
ਐਂਟੋਨ ਕੈਪਰੇਸੀ
ਮੇਰੀ ਟੀਮ ਦੇ ਸਾਥੀ
- ਜਾਰਜ ਕਾਸਟਾਂਜ਼ਾ
- ਜੈਰੀ ਸੀਨਫੀਲਡ
- ਕੋਸਮੋ ਕ੍ਰੈਮਰ
- ਈਲੇਨ ਬੇਨਿਸ
- ਨਿਊਮੈਨ
ਜੌਨ ਜੈਕਬ
ਪਾਲ ਪੀਅਰਸ
ਕੇਵਿਨ ਗਾਰਨੇਟ

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

ਜੇਰੇਮੀ ਬਿਕਸਬੀ
ਰਾਬਰਟ ਡੀਜ਼ੂਰ
ਜੋਸ਼ ਵਾਸ਼ਿੰਗਟਨ
ਐਂਟੋਨ ਕੈਪਰੇਸੀ
ਮੇਰੀ ਟੀਮ ਦੇ ਸਾਥੀ
1. ਜਾਰਜ ਕਾਸਟਾਂਜ਼ਾ
2. ਜੈਰੀ ਸੀਨਫੀਲਡ
3. ਕੋਸਮੋ ਕ੍ਰੈਮਰ
4. ਈਲੇਨ ਬੇਨਿਸ
5. ਨਿਊਮੈਨ
ਜੌਨ ਜੈਕਬ
ਪਾਲ ਪੀਅਰਸ
ਕੇਵਿਨ ਗਾਰਨੇਟ

ਵਰਣਨ`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 class="common-table"> ਕਲਾਸ = "ਕਾਮਨ-ਟੇਬਲ" >
  ...
</table>

ਉਦਾਹਰਨ: ਜ਼ੈਬਰਾ-ਧਾਰੀਦਾਰ

ਜ਼ੈਬਰਾ-ਸਟ੍ਰਿਪਿੰਗ ਜੋੜ ਕੇ ਆਪਣੀਆਂ ਟੇਬਲਾਂ ਨਾਲ ਥੋੜਾ ਜਿਹਾ ਫੈਂਸੀ ਪ੍ਰਾਪਤ ਕਰੋ—ਬੱਸ .zebra-stripedਕਲਾਸ ਨੂੰ ਸ਼ਾਮਲ ਕਰੋ।

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

<table class="common-table zebra-striped"> ਕਲਾਸ = "ਕਾਮਨ-ਟੇਬਲ ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" >
...
</table>

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

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

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

<script type="text/javascript" src="js/jquery/jquery.tablesorter.min.js"></script> type = "text/javascript" src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<ਸਕ੍ਰਿਪਟ ਕਿਸਮ = "ਟੈਕਸਟ/ਜਾਵਾਸਕ੍ਰਿਪਟ" > 
  $ ( ਦਸਤਾਵੇਜ਼ ) ਤਿਆਰ ( ਫੰਕਸ਼ਨ () { 
    $ ( "ਟੇਬਲ#ਸੋਰਟਟੇਬਲ ਉਦਾਹਰਨ" )। ਟੇਬਲਸੌਰਟਰ ( { ਲੜੀਬੱਧ ਸੂਚੀ : [[ 1 , 0 ]]} );   
  });
</script>
<ਟੇਬਲ ਕਲਾਸ = "ਕਾਮਨ-ਟੇਬਲ ਜ਼ੈਬਰਾ-ਸਟਰਿਪਡ" > 
  ...
</table>

ਸਥਿਰ ਟਾਪਬਾਰ

ਇਹ ਕੀ ਹੈ

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

ਅਨੁਕੂਲਿਤ

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

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

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

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

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

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

<ul class="tabs"> ਕਲਾਸ = "ਟੈਬਾਂ" >
  <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 class="ਪੰਨਾਬੰਦੀ"> ਕਲਾਸ = "ਪੰਨਾਬੰਦੀ" >
  <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>

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

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

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

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

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

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

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

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

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

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

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

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

ਬਹੁਤ ਖੂਬ!ਤੁਸੀਂ ਇਸ ਚੇਤਾਵਨੀ ਸੰਦੇਸ਼ ਨੂੰ ਸਫਲਤਾਪੂਰਵਕ ਪੜ੍ਹ ਲਿਆ ਹੈ। 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" type="text/css" href="less/bootstrap.less" media="all" /> rel = "stylesheet/less" type = "text/css" href = "less/bootstrap.less" ਮੀਡੀਆ = "ਸਾਰੇ" />    
<script type = "text/javascript" src = "js/less-1.0.41.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 ;            
// ਬੇਸਲਾਈਨ
@ ਬੇਸਲਾਈਨ : 20px ;

ਟਿੱਪਣੀ ਕਰ ਰਿਹਾ ਹੈ

/* ... */ਘੱਟ 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    
    - ms - ਫਿਲਟਰ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    ਫਿਲਟਰ : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ਅਤੇ IE7 
    ਪਿਛੋਕੜ - ਚਿੱਤਰ : ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( ਖੱਬੇ , @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   
    - ms - ਫਿਲਟਰ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    ਫਿਲਟਰ : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor )); // IE6 ਅਤੇ IE7 
    ਪਿਛੋਕੜ - ਚਿੱਤਰ : ਰੇਖਿਕ - ਗਰੇਡੀਐਂਟ ( @startColor , @endColor ); // ਮਿਆਰੀ  
  }
  . ਦਿਸ਼ਾਤਮਕ ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  }
  . ਵਰਟੀਕਲ - ਤਿੰਨ - ਰੰਗ ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  }
}

ਓਪਰੇਸ਼ਨ ਅਤੇ ਗਰਿੱਡ ਸਿਸਟਮ

ਫੈਂਸੀ ਬਣੋ ਅਤੇ ਹੇਠਾਂ ਦਿੱਤੇ ਵਾਂਗ ਲਚਕਦਾਰ ਅਤੇ ਸ਼ਕਤੀਸ਼ਾਲੀ ਮਿਸ਼ਰਣ ਬਣਾਉਣ ਲਈ ਕੁਝ ਗਣਿਤ ਕਰੋ।

// ਗਰੀਡਿਊਡ
@gridColumns : 16 ;       
@gridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
// ਗਰਿੱਡ ਸਿਸਟਮ
. ਕੰਟੇਨਰ {
  ਚੌੜਾਈ : @siteWidth ; 
  ਹਾਸ਼ੀਏ : 0 ਆਟੋ ;  
  . clearfix ();
}
. ਕਾਲਮ ( @columnSpan : 1 ) {  
  ਡਿਸਪਲੇ : ਇਨਲਾਈਨ ; 
  ਫਲੋਟ : ਖੱਬੇ ;
  ਚੌੜਾਈ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  ਹਾਸ਼ੀਏ - ਖੱਬੇ : @gridGutterWidth ; 
  &: ਪਹਿਲਾ - ਬੱਚਾ {
    ਹਾਸ਼ੀਏ - ਖੱਬੇ : 0 ; 
  }
}
. ਆਫਸੈੱਟ ( @columnOffset : 1 ) {  
  ਹਾਸ਼ੀਏ - ਖੱਬੇ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ਮਹੱਤਵਪੂਰਨ ;          
}

ਬੂਟਸਟਰੈਪ

ਟਵਿੱਟਰ ਬੂਟਸਟਰੈਪ

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

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

GitHub 'ਤੇ ਫੋਰਕ

ਗਰਿੱਡ ਸਿਸਟਮ ਸਟੈਂਡਰਡ 940px ਨੂੰ ਰੌਕ ਕਰੋ ਜਾਂ ਆਪਣਾ ਰੋਲ ਕਰੋ

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

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

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

ਵੈੱਬਪੰਨੇ ਬਣਾਉਣ ਲਈ ਲੇਆਉਟ ਬੇਸਿਕ ਟੈਂਪਲੇਟਸ

ਸਥਿਰ ਖਾਕਾ

ਤਰਲ ਖਾਕਾ

ਟਾਈਪੋਗ੍ਰਾਫੀ ਸਿਰਲੇਖ, ਪੈਰੇ, ਸੂਚੀਆਂ, ਅਤੇ ਹੋਰ ਇਨਲਾਈਨ ਕਿਸਮ ਦੇ ਤੱਤ

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

h1. ਸਿਰਲੇਖ 1

h2. ਸਿਰਲੇਖ 2

h3. ਸਿਰਲੇਖ 3

h4. ਸਿਰਲੇਖ 4

h5. ਸਿਰਲੇਖ 5

h6. ਸਿਰਲੇਖ 6

ਉਦਾਹਰਨ ਪੈਰਾ

ਉਦਾਹਰਨ ਸਿਰਲੇਖ ਵਿੱਚ ਉਪ-ਸਿਰਲੇਖ ਹੈ...

ਫੁਟਕਲ। ਤੱਤ

ਕਦੋਂ ਵਰਤਣਾ ਹੈ

ਇੱਕ ਪੈਰੇ ਵਿੱਚ ਜ਼ੋਰ

ਪਤੇ

ਸੰਖੇਪ ਰੂਪ

ਬਲਾਕਕੋਟ

ਸੂਚੀਆਂ

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

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

ਆਰਡਰ ਕੀਤਾ<ol>

ਵਰਣਨdl

ਟੇਬਲਸ ਲਈ, ਤੁਸੀਂ ਇਸਦਾ ਅਨੁਮਾਨ ਲਗਾਇਆ ਹੈ, ਸਾਰਣੀਬੱਧ ਡੇਟਾ

ਬਿਲਡਿੰਗ ਟੇਬਲ

ਉਦਾਹਰਨ: ਡਿਫੌਲਟ ਟੇਬਲ ਸਟਾਈਲ

ਉਦਾਹਰਨ: ਜ਼ੈਬਰਾ-ਧਾਰੀਦਾਰ

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

ਫਾਰਮ

ਪੂਰਵ-ਨਿਰਧਾਰਤ ਸ਼ੈਲੀਆਂ

ਸਟੈਕਡ ਫਾਰਮ

ਬਟਨ

ਉਦਾਹਰਨ ਬਟਨ

ਬਦਲਵੇਂ ਆਕਾਰ

ਅਪਾਹਜ ਸਥਿਤੀ

ਲਿੰਕ

ਬਟਨ

ਨੇਵੀਗੇਸ਼ਨ

ਸਥਿਰ ਟਾਪਬਾਰ

ਪ੍ਰੋਜੈਕਟ ਦਾ ਨਾਮ

ਇਹ ਕੀ ਹੈ

ਅਨੁਕੂਲਿਤ

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

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

ਪੰਨਾ ਨੰਬਰ

ਸਫਲਤਾ, ਚੇਤਾਵਨੀ, ਅਤੇ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਜਾਂ ਚੇਤਾਵਨੀਆਂ ਲਈ ਚੇਤਾਵਨੀਆਂ ਅਤੇ ਗਲਤੀਆਂ ਦੀਆਂ ਸ਼ੈਲੀਆਂ

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

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

ਮਾਡਲਾਂ, ਟੂਲਟਿਪਸ ਅਤੇ ਪੋਪੋਵਰਾਂ ਵਿੱਚ ਸਮੱਗਰੀ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਪੋਪੋਵਰ ਕੰਪੋਨੈਂਟਸ

ਮਾਡਲਸ

ਮਾਡਲ ਸਿਰਲੇਖ

ਟੂਲ ਸੁਝਾਅ

ਪੋਪੋਵਰਸ

ਪੋਪੋਵਰ ਟਾਈਟਲ

ਵੇਰੀਏਬਲ, ਮਿਕਸਿਨ ਅਤੇ ਫੰਕਸ਼ਨਾਂ ਦੇ ਨਾਲ ਆਪਣੇ CSS ਨੂੰ ਘੱਟ ਸੁਪਰਚਾਰਜ ਨਾਲ ਬੂਟਸਟਰੈਪ ਦੀ ਵਰਤੋਂ ਕਰਨਾ

ਇਸਨੂੰ ਕਿਵੇਂ ਵਰਤਣਾ ਹੈ

ਕੀ ਸ਼ਾਮਲ ਹੈ

ਰੰਗ ਵੇਰੀਏਬਲ

ਟਿੱਪਣੀ ਕਰ ਰਿਹਾ ਹੈ

ਵਜ਼ੂ ਨੂੰ ਮਿਲਾਉਂਦਾ ਹੈ

ਫੌਂਟ ਸਟੈਕ

ਗਰੇਡੀਐਂਟ

ਓਪਰੇਸ਼ਨ ਅਤੇ ਗਰਿੱਡ ਸਿਸਟਮ

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

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

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

ਵਰਣਨ`dl`