Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. ਮੋਰਬੀ ਲੀਓ ਰਿਸਸ, ਪੋਰਟਾ ਏਸੀ ਕੰਸੇਕਟੁਰ ਏਸੀ, ਵੈਸਟੀਬੁਲਮ ਐਟ ਈਰੋਸ।
ਬੂਟਸਟਰੈਪ ਟਵਿੱਟਰ ਦੀ ਇੱਕ ਟੂਲਕਿੱਟ ਹੈ ਜੋ ਵੈਬ ਐਪਸ ਅਤੇ ਸਾਈਟਾਂ ਦੇ ਵਿਕਾਸ ਨੂੰ ਕਿੱਕਸਟਾਰਟ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤੀ ਗਈ ਹੈ।
ਇਸ ਵਿੱਚ ਟਾਈਪੋਗ੍ਰਾਫੀ, ਫਾਰਮ, ਬਟਨ, ਟੇਬਲ, ਗਰਿੱਡ, ਨੈਵੀਗੇਸ਼ਨ ਅਤੇ ਹੋਰ ਲਈ ਬੇਸ CSS ਅਤੇ HTML ਸ਼ਾਮਲ ਹਨ।
ਨੀਰਡ ਚੇਤਾਵਨੀ: ਬੂਟਸਟਰੈਪ ਘੱਟ ਨਾਲ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਸਿਰਫ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਨੂੰ ਧਿਆਨ ਵਿੱਚ ਰੱਖ ਕੇ ਗੇਟ ਤੋਂ ਬਾਹਰ ਕੰਮ ਕਰਨ ਲਈ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ।
ਸਭ ਤੋਂ ਤੇਜ਼ ਅਤੇ ਆਸਾਨ ਸ਼ੁਰੂਆਤ ਲਈ, ਬਸ ਇਸ ਸਨਿੱਪਟ ਨੂੰ ਆਪਣੇ ਵੈਬਪੇਜ ਵਿੱਚ ਕਾਪੀ ਕਰੋ।
ਘੱਟ ਵਰਤਣ ਦੇ ਇੱਕ ਪ੍ਰਸ਼ੰਸਕ? ਕੋਈ ਸਮੱਸਿਆ ਨਹੀਂ, ਸਿਰਫ ਰੇਪੋ ਨੂੰ ਕਲੋਨ ਕਰੋ ਅਤੇ ਇਹ ਲਾਈਨਾਂ ਜੋੜੋ:
Github 'ਤੇ ਅਧਿਕਾਰਤ ਬੂਟਸਟਰੈਪ ਰੈਪੋ ਨਾਲ ਡਾਉਨਲੋਡ, ਫੋਰਕ, ਪੁੱਲ, ਫਾਈਲ ਮੁੱਦੇ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ।
ਬੂਟਸਟਰੈਪ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕੀਤਾ ਡਿਫੌਲਟ ਗਰਿੱਡ ਸਿਸਟਮ ਇੱਕ 940px ਚੌੜਾ 16-ਕਾਲਮ ਗਰਿੱਡ ਹੈ। ਇਹ ਪ੍ਰਸਿੱਧ 960 ਗਰਿੱਡ ਸਿਸਟਮ ਦਾ ਸੁਆਦ ਹੈ, ਪਰ ਖੱਬੇ ਅਤੇ ਸੱਜੇ ਪਾਸੇ ਵਾਧੂ ਹਾਸ਼ੀਏ/ਪੈਡਿੰਗ ਤੋਂ ਬਿਨਾਂ।
ਜਿਵੇਂ ਕਿ ਇੱਥੇ ਦਿਖਾਇਆ ਗਿਆ ਹੈ, ਇੱਕ ਬੁਨਿਆਦੀ ਖਾਕਾ ਦੋ "ਕਾਲਮਾਂ" ਨਾਲ ਬਣਾਇਆ ਜਾ ਸਕਦਾ ਹੈ, ਹਰ ਇੱਕ 16 ਬੁਨਿਆਦੀ ਕਾਲਮਾਂ ਦੀ ਇੱਕ ਸੰਖਿਆ ਨੂੰ ਫੈਲਾਉਂਦਾ ਹੈ ਜੋ ਅਸੀਂ ਸਾਡੇ ਗਰਿੱਡ ਸਿਸਟਮ ਦੇ ਹਿੱਸੇ ਵਜੋਂ ਪਰਿਭਾਸ਼ਿਤ ਕੀਤਾ ਹੈ। ਹੋਰ ਭਿੰਨਤਾਵਾਂ ਲਈ ਹੇਠਾਂ ਦਿੱਤੀਆਂ ਉਦਾਹਰਣਾਂ ਦੇਖੋ।
- <div class="row">
- <div ਕਲਾਸ = "span6 ਕਾਲਮ" >
- ...
- </div>
- <div ਕਲਾਸ = "span10 ਕਾਲਮ" >
- ...
- </div>
- </div>
ਕਿਸੇ ਵੀ ਸਾਈਟ ਜਾਂ ਪੰਨੇ ਲਈ ਇੱਕ ਬੁਨਿਆਦੀ 940px ਚੌੜਾ, ਕੇਂਦਰਿਤ ਕੰਟੇਨਰ ਖਾਕਾ।
- <body>
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ" >
- ...
- </div>
- </body>
ਘੱਟੋ-ਘੱਟ ਅਤੇ ਅਧਿਕਤਮ-ਚੌੜਾਈ ਅਤੇ ਖੱਬੇ-ਹੱਥ ਸਾਈਡਬਾਰ ਦੇ ਨਾਲ ਇੱਕ ਲਚਕਦਾਰ ਤਰਲ ਜਾਂ ਤਰਲ ਪੰਨਾ ਬਣਤਰ। ਐਪਸ ਲਈ ਵਧੀਆ।
- <body>
- <div ਕਲਾਸ = "ਕੰਟੇਨਰ-ਤਰਲ" >
- <div ਕਲਾਸ = "ਸਾਈਡਬਾਰ" >
- ...
- </div>
- <div ਕਲਾਸ = "ਸਮੱਗਰੀ" >
- ...
- </div>
- </div>
- </body>
ਤੁਹਾਡੇ ਵੈਬਪੰਨਿਆਂ ਨੂੰ ਢਾਂਚਾ ਬਣਾਉਣ ਲਈ ਇੱਕ ਮਿਆਰੀ ਟਾਈਪੋਗ੍ਰਾਫਿਕ ਲੜੀ।
ਨੱਲਮ ਕਵਿਸ ਰਿਸਸ ਈਗੇਟ ਉਰਨਾ ਮੋਲਿਸ ਓਰਨਾਰੇ ਵੇਲ ਈਯੂ ਲਿਓ. 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
ਅਨੁਮਾਨ ਲਗਾਇਆ ਹੈ!—ਪਤੇ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
ਨੋਟ: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>
dl
<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>
ਪਿਛਲੀ ਉਦਾਹਰਣ ਨੂੰ ਲੈਂਦੇ ਹੋਏ, ਅਸੀਂ 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>
ਸਾਰੇ ਫਾਰਮਾਂ ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸਕੇਲੇਬਲ ਤਰੀਕੇ ਨਾਲ ਪੇਸ਼ ਕਰਨ ਲਈ ਡਿਫੌਲਟ ਸ਼ੈਲੀਆਂ ਦਿੱਤੀਆਂ ਗਈਆਂ ਹਨ। ਸਟਾਈਲ ਟੈਕਸਟ ਇਨਪੁਟਸ, ਚੋਣ ਸੂਚੀਆਂ, ਟੈਕਸਟਰੇਅਸ, ਰੇਡੀਓ ਬਟਨਾਂ ਅਤੇ ਚੈਕਬਾਕਸਾਂ ਅਤੇ ਬਟਨਾਂ ਲਈ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਜਾਂਦੀਆਂ ਹਨ।
ਆਪਣੇ ਫਾਰਮ ਦੇ HTML ਵਿੱਚ ਸ਼ਾਮਲ .form-stacked
ਕਰੋ ਅਤੇ ਤੁਹਾਡੇ ਕੋਲ ਉਹਨਾਂ ਦੇ ਖੱਬੇ ਪਾਸੇ ਦੀ ਬਜਾਏ ਉਹਨਾਂ ਦੇ ਖੇਤਰਾਂ ਦੇ ਉੱਪਰ ਲੇਬਲ ਹੋਣਗੇ। ਇਹ ਵਧੀਆ ਕੰਮ ਕਰਦਾ ਹੈ ਜੇਕਰ ਤੁਹਾਡੇ ਫਾਰਮ ਛੋਟੇ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਕੋਲ ਭਾਰੀ ਫਾਰਮਾਂ ਲਈ ਇਨਪੁਟਸ ਦੇ ਦੋ ਕਾਲਮ ਹਨ।
ਇੱਕ ਕਨਵੈਨਸ਼ਨ ਦੇ ਤੌਰ ਤੇ, ਕਿਰਿਆਵਾਂ ਲਈ ਬਟਨ ਵਰਤੇ ਜਾਂਦੇ ਹਨ ਜਦੋਂ ਕਿ ਲਿੰਕ ਵਸਤੂਆਂ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ। ਉਦਾਹਰਨ ਲਈ, "ਡਾਊਨਲੋਡ" ਇੱਕ ਬਟਨ ਹੋ ਸਕਦਾ ਹੈ ਅਤੇ "ਹਾਲੀਆ ਸਰਗਰਮੀ" ਇੱਕ ਲਿੰਕ ਹੋ ਸਕਦਾ ਹੈ।
ਸਾਰੇ ਬਟਨ ਇੱਕ ਹਲਕੇ ਸਲੇਟੀ ਸਟਾਈਲ ਲਈ ਡਿਫੌਲਟ ਹਨ, ਪਰ ਇੱਕ ਨੀਲੀ .primary
ਸ਼੍ਰੇਣੀ ਉਪਲਬਧ ਹੈ। ਨਾਲ ਹੀ, ਤੁਹਾਡੀਆਂ ਖੁਦ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਨੂੰ ਰੋਲ ਕਰਨਾ ਆਸਾਨ ਹੈ.
ਬਟਨ ਸਟਾਈਲ ਨੂੰ ਲਾਗੂ ਕੀਤੇ ਨਾਲ ਕਿਸੇ ਵੀ ਚੀਜ਼ 'ਤੇ .btn
ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਆਮ ਤੌਰ 'ਤੇ ਤੁਸੀਂ ਇਹਨਾਂ ਨੂੰ ਸਿਰਫ਼ a
, button
, ਅਤੇ ਚੁਣੇ ਹੋਏ input
ਤੱਤਾਂ 'ਤੇ ਲਾਗੂ ਕਰਨਾ ਚਾਹੋਗੇ। ਇਹ ਇਸ ਤਰ੍ਹਾਂ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ:
ਫੈਨਸੀ ਵੱਡੇ ਜਾਂ ਛੋਟੇ ਬਟਨ? ਇਸ 'ਤੇ ਹੈ!
ਉਹਨਾਂ ਬਟਨਾਂ ਲਈ ਜੋ ਕਿਰਿਆਸ਼ੀਲ ਨਹੀਂ ਹਨ ਜਾਂ ਕਿਸੇ ਕਾਰਨ ਕਰਕੇ ਐਪ ਦੁਆਰਾ ਅਸਮਰੱਥ ਹਨ, ਅਯੋਗ ਸਥਿਤੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ਇਹ .disabled
ਲਿੰਕਾਂ ਅਤੇ ਤੱਤਾਂ :disabled
ਲਈ ਹੈ।button
ਅਸਫਲਤਾ, ਸੰਭਵ ਅਸਫਲਤਾ, ਜਾਂ ਕਿਸੇ ਕਾਰਵਾਈ ਦੀ ਸਫਲਤਾ ਨੂੰ ਉਜਾਗਰ ਕਰਨ ਲਈ ਇੱਕ-ਲਾਈਨ ਸੰਦੇਸ਼। ਫਾਰਮ ਲਈ ਖਾਸ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ.
ਉਹਨਾਂ ਸੁਨੇਹਿਆਂ ਲਈ ਜਿਹਨਾਂ ਲਈ ਥੋੜੀ ਵਿਆਖਿਆ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਸਾਡੇ ਕੋਲ ਪੈਰਾਗ੍ਰਾਫ ਸ਼ੈਲੀ ਚੇਤਾਵਨੀਆਂ ਹਨ। ਇਹ ਲੰਬੇ ਗਲਤੀ ਸੁਨੇਹਿਆਂ ਨੂੰ ਬਬਬਲ ਕਰਨ, ਕਿਸੇ ਬਕਾਇਆ ਕਾਰਵਾਈ ਬਾਰੇ ਉਪਭੋਗਤਾ ਨੂੰ ਚੇਤਾਵਨੀ ਦੇਣ, ਜਾਂ ਪੰਨੇ 'ਤੇ ਵਧੇਰੇ ਜ਼ੋਰ ਦੇਣ ਲਈ ਜਾਣਕਾਰੀ ਪੇਸ਼ ਕਰਨ ਲਈ ਸੰਪੂਰਨ ਹਨ।
ਮੋਡਲ—ਡਾਇਲਾਗ ਜਾਂ ਲਾਈਟਬਾਕਸ—ਉਹ ਸਥਿਤੀਆਂ ਵਿੱਚ ਪ੍ਰਸੰਗਿਕ ਕਾਰਵਾਈਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹਨ ਜਿੱਥੇ ਇਹ ਮਹੱਤਵਪੂਰਨ ਹੁੰਦਾ ਹੈ ਕਿ ਬੈਕਗ੍ਰਾਊਂਡ ਸੰਦਰਭ ਬਣਾਈ ਰੱਖਿਆ ਜਾਵੇ।
ਇੱਕ ਵਧੀਆ ਸਰੀਰ...
ਉਲਝਣ ਵਾਲੇ ਉਪਭੋਗਤਾ ਦੀ ਸਹਾਇਤਾ ਕਰਨ ਅਤੇ ਉਹਨਾਂ ਨੂੰ ਸਹੀ ਦਿਸ਼ਾ ਵੱਲ ਇਸ਼ਾਰਾ ਕਰਨ ਲਈ 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" 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 )) ! ਮਹੱਤਵਪੂਰਨ ;
- }