ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಭಾಗವಾಗಿ ಒದಗಿಸಲಾದ ಡೀಫಾಲ್ಟ್ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯು 940px ಅಗಲದ 16-ಕಾಲಮ್ ಗ್ರಿಡ್ ಆಗಿದೆ. ಇದು ಜನಪ್ರಿಯ 960 ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನ ಪರಿಮಳವಾಗಿದೆ, ಆದರೆ ಎಡ ಮತ್ತು ಬಲ ಬದಿಗಳಲ್ಲಿ ಹೆಚ್ಚುವರಿ ಅಂಚು/ಪ್ಯಾಡಿಂಗ್ ಇಲ್ಲದೆ.

ಉದಾಹರಣೆ ಗ್ರಿಡ್ ಮಾರ್ಕ್ಅಪ್

ಇಲ್ಲಿ ತೋರಿಸಿರುವಂತೆ, ಮೂಲಭೂತ ವಿನ್ಯಾಸವನ್ನು ಎರಡು "ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ" ರಚಿಸಬಹುದು, ಪ್ರತಿಯೊಂದೂ ನಮ್ಮ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ನ ಭಾಗವಾಗಿ ನಾವು ವ್ಯಾಖ್ಯಾನಿಸಿದ 16 ಅಡಿಪಾಯದ ಕಾಲಮ್‌ಗಳನ್ನು ವ್ಯಾಪಿಸಿದೆ. ಹೆಚ್ಚಿನ ಬದಲಾವಣೆಗಳಿಗಾಗಿ ಕೆಳಗಿನ ಉದಾಹರಣೆಗಳನ್ನು ನೋಡಿ.

<div class="row">
  <div class = "span6 columns" > 
    ...
  </div>
  <div class = "span10 columns" > 
    ...
  </div>
</div>

ಸ್ಥಿರ ಲೇಔಟ್

ಯಾವುದೇ ಸೈಟ್ ಅಥವಾ ಪುಟಕ್ಕಾಗಿ ಮೂಲಭೂತ 940px ಅಗಲ, ಕೇಂದ್ರೀಕೃತ ಕಂಟೇನರ್ ಲೇಔಟ್.

<ದೇಹ>
  <div ವರ್ಗ = "ಧಾರಕ" > 
    ...
  </div>
</body>

ದ್ರವ ವಿನ್ಯಾಸ

ಕನಿಷ್ಠ ಮತ್ತು ಗರಿಷ್ಠ ಅಗಲ ಮತ್ತು ಎಡಗೈ ಸೈಡ್‌ಬಾರ್‌ನೊಂದಿಗೆ ಹೊಂದಿಕೊಳ್ಳುವ ದ್ರವ ಅಥವಾ ದ್ರವ ಪುಟ ರಚನೆ. ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ.

<ದೇಹ>
  <div ವರ್ಗ = "ಧಾರಕ-ದ್ರವ" > 
    <div class = "ಸೈಡ್‌ಬಾರ್" > 
      ...
    </div>
    <div ವರ್ಗ = "ವಿಷಯ" > 
      ...
    </div>
  </div>
</body>

ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ನಕಲು

ನಿಮ್ಮ ವೆಬ್‌ಪುಟಗಳನ್ನು ರಚಿಸುವುದಕ್ಕಾಗಿ ಪ್ರಮಾಣಿತ ಟೈಪೋಗ್ರಾಫಿಕ್ ಕ್ರಮಾನುಗತ.

h1. ಶಿರೋನಾಮೆ 1

h2. ಶಿರೋನಾಮೆ 2

h3. ಶಿರೋನಾಮೆ 3

h4. ಶಿರೋನಾಮೆ 4

h5. ಶಿರೋನಾಮೆ 5

h6. ಶಿರೋನಾಮೆ 6

ಉದಾಹರಣೆ ಪ್ಯಾರಾಗ್ರಾಫ್

ನುಲ್ಲಮ್ ಕ್ವಿಸ್ ರಿಸಸ್ ಈಗೆಟ್ ಉರ್ನಾ ಮೊಲ್ಲಿಸ್ ಒರ್ನಾರೆ ವೆಲ್ ಇಯು ಲಿಯೋ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. Nullam id dolor id nibh ultricies ವೆಹಿಕುಲಾ ut id elit.

ಉದಾಹರಣೆ ಶೀರ್ಷಿಕೆಯು ಉಪ-ಶೀರ್ಷಿಕೆಯನ್ನು ಹೊಂದಿದೆ...

<strong>ಮತ್ತು ಜೊತೆಗೆ ನೀವು ಉಪಶೀರ್ಷಿಕೆಗಳನ್ನು ಕೂಡ ಸೇರಿಸಬಹುದು<em>

ಇತರೆ. ಅಂಶಗಳು

ಒತ್ತು, ವಿಳಾಸಗಳು ಮತ್ತು ಸಂಕ್ಷೇಪಣಗಳನ್ನು ಬಳಸುವುದು

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

ಯಾವಾಗ ಬಳಸಬೇಕು

ಪದ ಅಥವಾ ಪದಗುಚ್ಛ ಮತ್ತು ಅದರ ಸುತ್ತಮುತ್ತಲಿನ ನಕಲು ನಡುವೆ ದೃಶ್ಯ ವ್ಯತ್ಯಾಸವನ್ನು ಸೇರಿಸಲು ಒತ್ತು ಟ್ಯಾಗ್‌ಗಳನ್ನು ( <strong>ಮತ್ತು <em>) ಬಳಸಬೇಕು. <strong>ಸರಳ ಹಳೆಯ ಗಮನಕ್ಕಾಗಿ ಮತ್ತು <em>ನುಣುಪಾದ ಗಮನ ಮತ್ತು ಶೀರ್ಷಿಕೆಗಳಿಗಾಗಿ ಬಳಸಿ .

ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್ನಲ್ಲಿ ಒತ್ತು

ಫ್ಯೂಸ್ ಡ್ಯಾಪಿಬಸ್ , ಟೆಲ್ಲಸ್ ಎಸಿ ಕರ್ಸಸ್ ಕಮೊಡೊ , ಟಾರ್ಟರ್ ಮೌರಿಸ್ ಕಾಂಡಿಮೆಂಟಮ್ ನಿಬ್ , ಯುಟ್ ಫರ್ಮೆಂಟಮ್ ಮಸ್ಸಾ ಜಸ್ಟೊ ಸಿಟ್ ಅಮೆಟ್ ರಿಸಸ್. ಮೆಸೆನಾಸ್ ಫೌಸಿಬಸ್ ಮೊಲ್ಲಿಸ್ ಇಂಟರ್ಡಮ್. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್.

ವಿಳಾಸಗಳು

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 ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಎಮ್ ಡ್ಯಾಶ್ (—) ನೊಂದಿಗೆ ಹೆಸರನ್ನು ಮುನ್ನುಡಿ ಮಾಡುತ್ತದೆ.

ಲೊರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸಿಸಿಂಗ್ ಎಲಿಟ್, ಸೆಡ್ ಡು ಐಯುಸ್ಮೋಡ್ ಟೆಂಪರ್ ಇನ್ಸಿಡಿಡಂಟ್ ಯುಟ್ ಲೇಬರ್ ಎಟ್ ಡೋಲೋರ್ ಮ್ಯಾಗ್ನಾ ಅಲಿಕಾ...

ಡಾ. ಜೂಲಿಯಸ್ ಹಿಬರ್ಟ್

ಆದೇಶವಿಲ್ಲ<ul>

• ಜೆರೆಮಿ ಬಿಕ್ಸ್ಬಿ
• ರಾಬರ್ಟ್ ಡಿಜೂರ್
• ಜೋಶ್ ವಾಷಿಂಗ್ಟನ್
• ಆಂಟನ್ ಕಾಪ್ರೆಸಿ
• ನನ್ನ ತಂಡದ ಸದಸ್ಯರು
  • ಜಾರ್ಜ್ ಕ್ಯಾಸ್ಟಾನ್ಜಾ
  • ಜೆರ್ರಿ ಸೀನ್‌ಫೆಲ್ಡ್
  • ಕಾಸ್ಮೊ ಕ್ರಾಮರ್
  • ಎಲೈನ್ ಬೆನ್ನಿಸ್
  • ಹೊಸ ಮನುಷ್ಯ
• ಜಾನ್ ಜಾಕೋಬ್
• ಪಾಲ್ ಪಿಯರ್ಸ್
• ಕೆವಿನ್ ಗಾರ್ನೆಟ್

ಶೈಲಿಯಿಲ್ಲದ<ul.unstyled>

• ಜೆರೆಮಿ ಬಿಕ್ಸ್ಬಿ
• ರಾಬರ್ಟ್ ಡಿಜೂರ್
• ಜೋಶ್ ವಾಷಿಂಗ್ಟನ್
• ಆಂಟನ್ ಕಾಪ್ರೆಸಿ
• ನನ್ನ ತಂಡದ ಸದಸ್ಯರು
  • ಜಾರ್ಜ್ ಕ್ಯಾಸ್ಟಾನ್ಜಾ
  • ಜೆರ್ರಿ ಸೀನ್‌ಫೆಲ್ಡ್
  • ಕಾಸ್ಮೊ ಕ್ರಾಮರ್
  • ಎಲೈನ್ ಬೆನ್ನಿಸ್
  • ಹೊಸ ಮನುಷ್ಯ
• ಜಾನ್ ಜಾಕೋಬ್
• ಪಾಲ್ ಪಿಯರ್ಸ್
• ಕೆವಿನ್ ಗಾರ್ನೆಟ್

ಆದೇಶಿಸಿದರು<ol>

1. ಜೆರೆಮಿ ಬಿಕ್ಸ್ಬಿ
2. ರಾಬರ್ಟ್ ಡಿಜೂರ್
3. ಜೋಶ್ ವಾಷಿಂಗ್ಟನ್
4. ಆಂಟನ್ ಕಾಪ್ರೆಸಿ
5. ನನ್ನ ತಂಡದ ಸದಸ್ಯರು
   1. ಜಾರ್ಜ್ ಕ್ಯಾಸ್ಟಾನ್ಜಾ
   2. ಜೆರ್ರಿ ಸೀನ್‌ಫೆಲ್ಡ್
   3. ಕಾಸ್ಮೊ ಕ್ರಾಮರ್
   4. ಎಲೈನ್ ಬೆನ್ನಿಸ್
   5. ಹೊಸ ಮನುಷ್ಯ
6. ಜಾನ್ ಜಾಕೋಬ್
7. ಪಾಲ್ ಪಿಯರ್ಸ್
8. ಕೆವಿನ್ ಗಾರ್ನೆಟ್

ವಿವರಣೆ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	ಸ್ತು	ಡೆಂಟ್	ಕೋಡ್

<ಟೇಬಲ್ ಕ್ಲಾಸ್ = "ಸಾಮಾನ್ಯ ಟೇಬಲ್ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪ್ಡ್"> ವರ್ಗ = "ಕಾಮನ್-ಟೇಬಲ್ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪ್ಡ್" >
...
</table>

ಉದಾಹರಣೆ: ಜೀಬ್ರಾ-ಪಟ್ಟೆಯ w/ TableSorter.js

ಹಿಂದಿನ ಉದಾಹರಣೆಯನ್ನು ತೆಗೆದುಕೊಂಡರೆ, jQuery ಮತ್ತು Tablesorter ಪ್ಲಗಿನ್ ಮೂಲಕ ವಿಂಗಡಿಸುವ ಕಾರ್ಯವನ್ನು ಒದಗಿಸುವ ಮೂಲಕ ನಾವು ನಮ್ಮ ಕೋಷ್ಟಕಗಳ ಉಪಯುಕ್ತತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತೇವೆ . ವಿಂಗಡಣೆಯನ್ನು ಬದಲಾಯಿಸಲು ಯಾವುದೇ ಕಾಲಮ್‌ನ ಹೆಡರ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿ.

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
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> 
<ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಕಾರ = "ಪಠ್ಯ/ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್" > 
  $ ( ಡಾಕ್ಯುಮೆಂಟ್ ). ಸಿದ್ಧ ( ಕಾರ್ಯ () { 
    $ ( "ಕೋಷ್ಟಕ#ವಿಂಗಡಣೆ ಟೇಬಲ್ ಉದಾಹರಣೆ" ). ಟೇಬಲ್ಸಾರ್ಟರ್ ( { sortList : [[ 1 , 0 ]]} );   
  });
</script>
<ಟೇಬಲ್ ವರ್ಗ = "ಕಾಮನ್-ಟೇಬಲ್ ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪ್ಡ್" > 
  ...
</table>

ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳು

ಎಲ್ಲಾ ಫಾರ್ಮ್‌ಗಳನ್ನು ಓದಬಲ್ಲ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ ರೀತಿಯಲ್ಲಿ ಪ್ರಸ್ತುತಪಡಿಸಲು ಡೀಫಾಲ್ಟ್ ಶೈಲಿಗಳನ್ನು ನೀಡಲಾಗುತ್ತದೆ. ಪಠ್ಯ ಇನ್‌ಪುಟ್‌ಗಳು, ಆಯ್ದ ಪಟ್ಟಿಗಳು, ಪಠ್ಯ ಪ್ರದೇಶಗಳು, ರೇಡಿಯೊ ಬಟನ್‌ಗಳು ಮತ್ತು ಚೆಕ್‌ಬಾಕ್ಸ್‌ಗಳು ಮತ್ತು ಬಟನ್‌ಗಳಿಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲಾಗಿದೆ.

ಉದಾಹರಣೆ ರೂಪ ದಂತಕಥೆ

X-ದೊಡ್ಡ ಇನ್ಪುಟ್

ಆಯ್ಕೆ ಮಾಡಿ

1 2 3 4 5

ಆಯ್ಕೆ ಮಾಡಿ

1 2 3 4 5

ಸಂಪಾದಿಸಲಾಗದ ಇನ್ಪುಟ್

ಇಲ್ಲಿ ಕೆಲವು ಮೌಲ್ಯಗಳು

ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಇನ್‌ಪುಟ್

X-ದೊಡ್ಡ ಇನ್ಪುಟ್

ಸಹಾಯ ಪಠ್ಯದ ಸಣ್ಣ ತುಣುಕು

ಉದಾಹರಣೆ ರೂಪ ದಂತಕಥೆ

ಪೂರ್ವಭಾವಿ ಪಠ್ಯ

@

ಪೂರ್ವಭಾವಿ ಚೆಕ್ಬಾಕ್ಸ್

ಲಗತ್ತಿಸಲಾದ ಚೆಕ್‌ಬಾಕ್ಸ್

ಫೈಲ್ ಇನ್ಪುಟ್

ಉದಾಹರಣೆ ರೂಪ ದಂತಕಥೆ

ಆಯ್ಕೆಗಳ ಪಟ್ಟಿ

• ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ
• ಆಯ್ಕೆ ಎರಡನ್ನು ಸಹ ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು
• ಆಯ್ಕೆ ಮೂರು ಮಾಡಬಹುದು-ಹೌದು, ನೀವು ಊಹಿಸಿದಂತೆ-ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು
• ನಾಲ್ಕು ಆಯ್ಕೆಯನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿರುವುದರಿಂದ ಪರಿಶೀಲಿಸಲಾಗುವುದಿಲ್ಲ.

ಗಮನಿಸಿ: ಲೇಬಲ್‌ಗಳು ಹೆಚ್ಚು ದೊಡ್ಡ ಕ್ಲಿಕ್ ಪ್ರದೇಶಗಳಿಗೆ ಮತ್ತು ಹೆಚ್ಚು ಬಳಸಬಹುದಾದ ಫಾರ್ಮ್‌ಗಾಗಿ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಸುತ್ತುವರೆದಿವೆ.

ದಿನಾಂಕ ಶ್ರೇಣಿ

ಗೆ ಎಲ್ಲಾ ಸಮಯಗಳನ್ನು ಪೆಸಿಫಿಕ್ ಪ್ರಮಾಣಿತ ಸಮಯ (GMT -08:00) ಎಂದು ತೋರಿಸಲಾಗಿದೆ.

ಟೆಕ್ಸ್ಟೇರಿಯಾ

ಅಗತ್ಯವಿದ್ದರೆ ಮೇಲಿನ ಕ್ಷೇತ್ರವನ್ನು ವಿವರಿಸಲು ಸಹಾಯ ಪಠ್ಯದ ಬ್ಲಾಕ್.

ಆಯ್ಕೆಗಳ ಪಟ್ಟಿ

• ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ
• ಆಯ್ಕೆ ಎರಡನ್ನು ಸಹ ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು

ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸು ರದ್ದುಮಾಡು

ಜೋಡಿಸಲಾದ ರೂಪಗಳು

ನಿಮ್ಮ ಫಾರ್ಮ್‌ನ HTML ಗೆ ಸೇರಿಸಿ .form-stackedಮತ್ತು ನೀವು ಅವರ ಎಡಭಾಗಕ್ಕೆ ಬದಲಾಗಿ ಅವರ ಕ್ಷೇತ್ರಗಳ ಮೇಲೆ ಲೇಬಲ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತೀರಿ. ನಿಮ್ಮ ಫಾರ್ಮ್‌ಗಳು ಚಿಕ್ಕದಾಗಿದ್ದರೆ ಅಥವಾ ಭಾರವಾದ ಫಾರ್ಮ್‌ಗಳಿಗಾಗಿ ನೀವು ಎರಡು ಕಾಲಮ್‌ಗಳ ಇನ್‌ಪುಟ್‌ಗಳನ್ನು ಹೊಂದಿದ್ದರೆ ಇದು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ ರೂಪ ದಂತಕಥೆ

X-ದೊಡ್ಡ ಇನ್ಪುಟ್

ಆಯ್ಕೆ ಮಾಡಿ

1 2 3 4 5

ಉದಾಹರಣೆ ರೂಪ ದಂತಕಥೆ

ಆಯ್ಕೆಗಳ ಪಟ್ಟಿ

• ಆಯ್ಕೆ ಒಂದು ಇದು ಮತ್ತು ಅದು-ಅದು ಏಕೆ ಅದ್ಭುತವಾಗಿದೆ ಎಂಬುದನ್ನು ಸೇರಿಸಲು ಮರೆಯದಿರಿ
• ಆಯ್ಕೆ ಎರಡನ್ನು ಸಹ ಪರಿಶೀಲಿಸಬಹುದು ಮತ್ತು ಫಾರ್ಮ್ ಫಲಿತಾಂಶಗಳಲ್ಲಿ ಸೇರಿಸಬಹುದು

ಗಮನಿಸಿ: ಲೇಬಲ್‌ಗಳು ಹೆಚ್ಚು ದೊಡ್ಡ ಕ್ಲಿಕ್ ಪ್ರದೇಶಗಳಿಗೆ ಮತ್ತು ಹೆಚ್ಚು ಬಳಸಬಹುದಾದ ಫಾರ್ಮ್‌ಗಾಗಿ ಎಲ್ಲಾ ಆಯ್ಕೆಗಳನ್ನು ಸುತ್ತುವರೆದಿವೆ.

ಬದಲಾವಣೆಗಳನ್ನು ಉಳಿಸು ರದ್ದುಮಾಡು

ಗುಂಡಿಗಳು

ಸಂಪ್ರದಾಯದಂತೆ, ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ಗಳನ್ನು ಬಳಸುವಾಗ ಬಟನ್‌ಗಳನ್ನು ಕ್ರಿಯೆಗಳಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, "ಡೌನ್‌ಲೋಡ್" ಒಂದು ಬಟನ್ ಆಗಿರಬಹುದು ಮತ್ತು "ಇತ್ತೀಚಿನ ಚಟುವಟಿಕೆ" ಒಂದು ಲಿಂಕ್ ಆಗಿರಬಹುದು.

ಎಲ್ಲಾ ಬಟನ್‌ಗಳು ತಿಳಿ ಬೂದು ಶೈಲಿಗೆ ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತವೆ, ಆದರೆ ನೀಲಿ .primaryವರ್ಗ ಲಭ್ಯವಿದೆ. ಜೊತೆಗೆ, ನಿಮ್ಮ ಸ್ವಂತ ಶೈಲಿಗಳನ್ನು ರೋಲಿಂಗ್ ಮಾಡುವುದು ಸುಲಭವಾಗಿದೆ.

ಉದಾಹರಣೆ ಗುಂಡಿಗಳು

ಬಟನ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವುದರೊಂದಿಗೆ ಯಾವುದಕ್ಕೂ .btnಅನ್ವಯಿಸಬಹುದು. ವಿಶಿಷ್ಟವಾಗಿ ನೀವು ಇವುಗಳನ್ನು a, button, ಮತ್ತು ಆಯ್ದ inputಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸಲು ಬಯಸುತ್ತೀರಿ. ಇದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

ಪರ್ಯಾಯ ಗಾತ್ರಗಳು

ದೊಡ್ಡ ಅಥವಾ ಚಿಕ್ಕ ಬಟನ್‌ಗಳನ್ನು ಇಷ್ಟಪಡುತ್ತೀರಾ? ಅದನ್ನು ಹೊಂದಿರಿ!

ಅಂಗವಿಕಲ ಸ್ಥಿತಿ

ಒಂದು ಕಾರಣಕ್ಕಾಗಿ ಅಥವಾ ಇನ್ನೊಂದು ಕಾರಣಕ್ಕಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ಸಕ್ರಿಯವಾಗಿರದ ಅಥವಾ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾದ ಬಟನ್‌ಗಳಿಗಾಗಿ, ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಸ್ಥಿತಿಯನ್ನು ಬಳಸಿ. ಅದು .disabledಲಿಂಕ್‌ಗಳಿಗಾಗಿ ಮತ್ತು :disabledಅಂಶಗಳಿಗಾಗಿ button.

ಲಿಂಕ್‌ಗಳು

ಗುಂಡಿಗಳು

ಏನದು

ನಮ್ಮ ಟಾಪ್‌ಬಾರ್ ವೆಬ್‌ಸೈಟ್‌ನ ಲೋಗೋ ಅಥವಾ ಹೆಸರು, ಪ್ರಾಥಮಿಕ ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಹುಡುಕಾಟ ಫಾರ್ಮ್ ಅನ್ನು ಹೊಂದಿರುವ ಸ್ಥಿರ ಪಟ್ಟಿಯಾಗಿದೆ.

ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದಾದ

ಒಳಗಿನ ಎಲ್ಲಾ ಅಂಶಗಳು ಮತ್ತು ಸಂಪೂರ್ಣ ಟಾಪ್‌ಬಾರ್ ಕೂಡ ಐಚ್ಛಿಕವಾಗಿರುತ್ತದೆ. ನೀವು ಲೋಗೋ/ಹೆಸರು, ನ್ಯಾವ್, ಹುಡುಕಾಟ ಮತ್ತು ದ್ವಿತೀಯ ನ್ಯಾವಿ-ಅಥವಾ ಅದರ ಯಾವುದೇ ಸಂಯೋಜನೆಯನ್ನು ಸೇರಿಸಲು ಆಯ್ಕೆ ಮಾಡಬಹುದು.

ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿದೆ

ಮುಖ್ಯ ನ್ಯಾವಿಗೇಷನ್‌ನ ಭಾಗವಾಗಿ, ನಿಮ್ಮ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಡ್ರಾಪ್‌ಡೌನ್‌ಗಳನ್ನು ಸೇರಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ನಾವು ಸೇರಿಸಿದ್ದೇವೆ. ಇದನ್ನು ಹೇಗೆ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಲು ಮೇಲಿನ (ಬಲಕ್ಕೆ ಜೋಡಿಸಲಾಗಿದೆ) ದ್ವಿತೀಯ ನ್ಯಾವಿಯನ್ನು ಪರಿಶೀಲಿಸಿ.

ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ಮಾತ್ರೆಗಳು

ಜೊತೆಗೆ ಸರಳ ದ್ವಿತೀಯ ನ್ಯಾವಿಗೇಷನ್ ರಚಿಸಿ ul. ಸೂಕ್ತವಾದ ವರ್ಗವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಟ್ಯಾಬ್‌ಗಳು ಅಥವಾ ಮಾತ್ರೆಗಳ ನಡುವೆ ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಿ.

ನಮ್ಮ ಖಾತೆ ಸೆಟ್ಟಿಂಗ್‌ಗಳ ಪುಟಗಳಂತಹ ವಿಷಯದ ಉಪ-ವಿಭಾಗಗಳಿಗೆ ಮತ್ತು ಅಂತಹ ವಿಷಯದ ಪುಟಗಳ ನಡುವೆ ಟಾಗಲ್ ಮಾಡಲು ಬಳಕೆದಾರರ ಟೈಮ್‌ಲೈನ್‌ಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ. ಟ್ಯಾಬ್ಡ್ ಅಥವಾ ಮಾತ್ರೆ ಶೈಲಿಗಳಲ್ಲಿ ಲಭ್ಯವಿದೆ.

• ಮುಖಪುಟ
• ಪ್ರೊಫೈಲ್
• ಸಂದೇಶಗಳು
• ಸಂಯೋಜನೆಗಳು
• ಸಂಪರ್ಕಿಸಿ

<ul class="tabs"> ವರ್ಗ = "ಟ್ಯಾಬ್ಗಳು" >
  <li class = "ಸಕ್ರಿಯ" ><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 = "ಸಕ್ರಿಯ" ><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="pagination"> ವರ್ಗ = "ಪೇಜಿನೇಶನ್" >
  <ul>
    <li class = "ಹಿಂದಿನ ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಲಾಗಿದೆ" ><a href = "" > ← ಹಿಂದಿನ </a></li>  
    <li class = "ಸಕ್ರಿಯ" ><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 class = "ಮುಂದೆ" ><a href = "" > ಮುಂದೆ → </a></li>  
  </ul>
</div>

ಮೂಲ ಎಚ್ಚರಿಕೆಗಳು

ಕ್ರಿಯೆಯ ವೈಫಲ್ಯ, ಸಂಭವನೀಯ ವೈಫಲ್ಯ ಅಥವಾ ಯಶಸ್ಸನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಒಂದು ಸಾಲಿನ ಸಂದೇಶಗಳು. ಫಾರ್ಮ್‌ಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.

ಸಂದೇಶಗಳನ್ನು ನಿರ್ಬಂಧಿಸಿ

ಸ್ವಲ್ಪ ವಿವರಣೆಯ ಅಗತ್ಯವಿರುವ ಸಂದೇಶಗಳಿಗಾಗಿ, ನಾವು ಪ್ಯಾರಾಗ್ರಾಫ್ ಶೈಲಿಯ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಹೊಂದಿದ್ದೇವೆ. ದೀರ್ಘವಾದ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಬಬ್ಲಿಂಗ್ ಮಾಡಲು, ಬಾಕಿ ಉಳಿದಿರುವ ಕ್ರಿಯೆಯ ಬಗ್ಗೆ ಬಳಕೆದಾರರಿಗೆ ಎಚ್ಚರಿಕೆ ನೀಡಲು ಅಥವಾ ಪುಟದಲ್ಲಿ ಹೆಚ್ಚಿನ ಒತ್ತು ನೀಡಲು ಮಾಹಿತಿಯನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲು ಇವು ಪರಿಪೂರ್ಣವಾಗಿವೆ.

ಮಾದರಿಗಳು

ಮಾದರಿಗಳು-ಸಂವಾದಗಳು ಅಥವಾ ಲೈಟ್‌ಬಾಕ್ಸ್‌ಗಳು-ಸಂದರ್ಭೋಚಿತ ಕ್ರಿಯೆಗಳಿಗೆ ಹಿನ್ನೆಲೆಯ ಸಂದರ್ಭವನ್ನು ನಿರ್ವಹಿಸುವುದು ಮುಖ್ಯವಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿದೆ.

ಪಾಪೋವರ್ಸ್

ಲೇಔಟ್ ಅನ್ನು ಪ್ರಭಾವಿಸದೆ ಪುಟಕ್ಕೆ ಸಬ್ಟೆಕ್ಸ್ಟ್ಯುಯಲ್ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ಪಾಪೋವರ್ಗಳನ್ನು ಬಳಸಿ.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಪ್ರಿಬೂಟ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳ ಮುಕ್ತ-ಮೂಲ ಪ್ಯಾಕ್ ಅನ್ನು ಲೆಸ್ ಜೊತೆಯಲ್ಲಿ ಬಳಸಲಾಗುವುದು , ವೇಗವಾದ ಮತ್ತು ಸುಲಭವಾದ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ CSS ಪ್ರಿಪ್ರೊಸೆಸರ್.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ನಾವು ಪ್ರಿಬೂಟ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಿದ್ದೇವೆ ಮತ್ತು ನಿಮ್ಮ ಮುಂದಿನ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಕಡಿಮೆ ರನ್ ಮಾಡಲು ನೀವು ಆಯ್ಕೆ ಮಾಡಿದರೆ ನೀವು ಅದನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸಿ.

ಅದನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ CSS ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳು, ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ಗೂಡುಕಟ್ಟುವ ಸಂಪೂರ್ಣ ಬಳಕೆಯನ್ನು ಮಾಡಲು ಈ ಆಯ್ಕೆಯನ್ನು ಬಳಸಿ.

<link rel="stylesheet/less" type="text/css" href="less/bootstrap.less" media="all" /> rel = "ಸ್ಟೈಲ್‌ಶೀಟ್/ಕಡಿಮೆ" ಪ್ರಕಾರ = "ಪಠ್ಯ/ಸಿಎಸ್ಎಸ್" href = "less/bootstrap.less" media = "ಎಲ್ಲಾ" />    
<script type = "text/javascript" src = "js/less-1.0.41.min.js" ></script>  

.js ಪರಿಹಾರವನ್ನು ಅನುಭವಿಸುತ್ತಿಲ್ಲವೇ? ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ನೀವು ನಿಯೋಜಿಸಿದಾಗ ಕಂಪೈಲ್ ಮಾಡಲು ಕಡಿಮೆ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರಯತ್ನಿಸಿ ಅಥವಾ Node.js ಬಳಸಿ.

ಏನು ಒಳಗೊಂಡಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಭಾಗವಾಗಿ Twitter ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಏನನ್ನು ಸೇರಿಸಲಾಗಿದೆ ಎಂಬುದರ ಕೆಲವು ಮುಖ್ಯಾಂಶಗಳು ಇಲ್ಲಿವೆ. ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಗಿಥಬ್ ಪ್ರಾಜೆಕ್ಟ್ ಪುಟಕ್ಕೆ ಹೋಗಿ.

ಬಣ್ಣ ಅಸ್ಥಿರ

ನಿಮ್ಮ CSS ತಲೆನೋವನ್ನು ಮುಕ್ತವಾಗಿ ನಿರ್ವಹಿಸಲು ಮತ್ತು ನವೀಕರಿಸಲು ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳು ಪರಿಪೂರ್ಣವಾಗಿವೆ. ನೀವು ಬಣ್ಣದ ಮೌಲ್ಯವನ್ನು ಅಥವಾ ಆಗಾಗ್ಗೆ ಬಳಸುವ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಲು ಬಯಸಿದಾಗ, ಅದನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ನವೀಕರಿಸಿ ಮತ್ತು ನೀವು ಹೊಂದಿಸಿರುವಿರಿ.

// ಲಿಂಕ್‌ಗಳು
@linkColor : #8b59c2;         
@linkColorHover :     ಗಾಢಗೊಳಿಸು ( @linkColor , 10 ); 
// ಗ್ರೇಸ್
@ಕಪ್ಪು : #000;             
@grayDark :           ಹಗುರಗೊಳಿಸು ( @ಕಪ್ಪು , 25 %); 
@ಬೂದು :               ಹಗುರಗೊಳಿಸು ( @ಕಪ್ಪು , 50 %); 
@grayLight :          ಹಗುರಗೊಳಿಸು ( @ಕಪ್ಪು , 70 %); 
@grayLighter :        ಹಗುರಗೊಳಿಸು ( @ಕಪ್ಪು , 90 %); 
@ಬಿಳಿ : #fff;             
// ಉಚ್ಚಾರಣಾ ಬಣ್ಣಗಳು
@ನೀಲಿ : #08b5fb ;              
@ಹಸಿರು : #46a546 ;             
@ಕೆಂಪು : #9d261d ;               
@ಹಳದಿ : #ffc40d ;            
@ಕಿತ್ತಳೆ : #f89406 ;            
@ಗುಲಾಬಿ : #c3325f ;              
@ನೇರಳೆ : #7a43b6 ;            
// ಬೇಸ್ಲೈನ್
@ಬೇಸ್ಲೈನ್ : 20px ;          

ಕಾಮೆಂಟ್ ಮಾಡುತ್ತಿದ್ದಾರೆ

CSS ನ ಸಾಮಾನ್ಯ /* ... */ಸಿಂಟ್ಯಾಕ್ಸ್ ಜೊತೆಗೆ ಕಾಮೆಂಟ್ ಮಾಡುವ ಇನ್ನೊಂದು ಶೈಲಿಯನ್ನು ಕಡಿಮೆ ಒದಗಿಸುತ್ತದೆ.

// ಇದು ಒಂದು ಕಾಮೆಂಟ್
/* ಇದು ಕೂಡ ಒಂದು ಕಾಮೆಂಟ್ */

ವಾಜೂ ಅನ್ನು ಮಿಶ್ರಣ ಮಾಡುತ್ತದೆ

ಮಿಕ್ಸಿನ್‌ಗಳು ಮೂಲತಃ CSS ಗಾಗಿ ಒಳಗೊಂಡಿರುವ ಅಥವಾ ಭಾಗಶಃ, ಕೋಡ್‌ನ ಬ್ಲಾಕ್ ಅನ್ನು ಒಂದಕ್ಕೆ ಸಂಯೋಜಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. box-shadowಕ್ರಾಸ್-ಬ್ರೌಸರ್ ಗ್ರೇಡಿಯಂಟ್‌ಗಳು, ಫಾಂಟ್ ಸ್ಟ್ಯಾಕ್‌ಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಂತಹ ಮಾರಾಟಗಾರರ ಪೂರ್ವಪ್ರತ್ಯಯ ಗುಣಲಕ್ಷಣಗಳಿಗೆ ಅವು ಉತ್ತಮವಾಗಿವೆ . ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನೊಂದಿಗೆ ಸೇರಿಸಲಾದ ಮಿಕ್ಸಿನ್‌ಗಳ ಮಾದರಿಯನ್ನು ಕೆಳಗೆ ನೀಡಲಾಗಿದೆ.

ಫಾಂಟ್ ಸ್ಟಾಕ್‌ಗಳು

#ಫಾಂಟ್ {
  . ಕಿರುಹೊತ್ತಿಗೆ ( @ತೂಕ : ಸಾಮಾನ್ಯ , @ ಗಾತ್ರ : 14px , @lineHeight : 20px ) {     
    ಫಾಂಟ್ ಗಾತ್ರ : @size ; _ 
    ಫಾಂಟ್ - ತೂಕ : @ ತೂಕ ; 
    ಸಾಲು - ಎತ್ತರ : @lineHeight ; 
  }
  . sans - serif ( @ತೂಕ : ಸಾಮಾನ್ಯ , @ ಗಾತ್ರ : 14px , @lineHeight : 20px ) {     
    ಫಾಂಟ್ - ಕುಟುಂಬ : "ಹೆಲ್ವೆಟಿಕಾ ನ್ಯೂಯು" , ಹೆಲ್ವೆಟಿಕಾ , ಏರಿಯಲ್ , ಸಾನ್ಸ್ - ಸೆರಿಫ್ ;   
    ಫಾಂಟ್ ಗಾತ್ರ : @size ; _ 
    ಫಾಂಟ್ - ತೂಕ : @ ತೂಕ ; 
    ಸಾಲು - ಎತ್ತರ : @lineHeight ; 
  }
  . ಸೆರಿಫ್ ( @ತೂಕ : ಸಾಮಾನ್ಯ , @ ಗಾತ್ರ : 14px , @lineHeight : 20px ) {     
    ಫಾಂಟ್ - ಕುಟುಂಬ : "ಜಾರ್ಜಿಯಾ" , ಟೈಮ್ಸ್ ನ್ಯೂ ರೋಮನ್ , ಟೈಮ್ಸ್ , ಸಾನ್ಸ್ - ಸೆರಿಫ್ ;     
    ಫಾಂಟ್ ಗಾತ್ರ : @size ; _ 
    ಫಾಂಟ್ - ತೂಕ : @ ತೂಕ ; 
    ಸಾಲು - ಎತ್ತರ : @lineHeight ; 
  }
  . ಮಾನೋಸ್ಪೇಸ್ ( @ತೂಕ : ಸಾಮಾನ್ಯ , @ ಗಾತ್ರ : 12px , @lineHeight : 20px ) {     
    ಫಾಂಟ್ - ಕುಟುಂಬ : "ಮೊನಾಕೊ" , ಕೊರಿಯರ್ ನ್ಯೂ , ಮೊನೊಸ್ಪೇಸ್ ;   
    ಫಾಂಟ್ ಗಾತ್ರ : @size ; _ 
    ಫಾಂಟ್ - ತೂಕ : @ ತೂಕ ; 
    ಸಾಲು - ಎತ್ತರ : @lineHeight ; 
  }
}

ಗ್ರೇಡಿಯಂಟ್ಗಳು

#ಗ್ರೇಡಿಯಂಟ್ {
  . ಅಡ್ಡ ( @startColor : #555, @endColor: #333) { 
    ಹಿನ್ನೆಲೆ - ಬಣ್ಣ : @ endColor ; 
    ಹಿನ್ನೆಲೆ - ಪುನರಾವರ್ತನೆ : ಪುನರಾವರ್ತನೆ - x ;
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - khtml - ಗ್ರೇಡಿಯಂಟ್ ( ರೇಖೀಯ , ಎಡ ಮೇಲ್ಭಾಗ , ಬಲ ಮೇಲ್ಭಾಗ , ನಿಂದ ( @startColor ), ಗೆ ( @endColor )); // ಕಾಂಕರರ್   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - moz - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @startColor , @endColor ); // ಎಫ್ಎಫ್ 3.6+    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ms - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @startColor , @endColor ); // IE10    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ವೆಬ್‌ಕಿಟ್ - ಗ್ರೇಡಿಯಂಟ್ ( ರೇಖೀಯ , ಎಡ ಮೇಲ್ಭಾಗ , ಬಲ ಮೇಲ್ಭಾಗ , ಬಣ್ಣ - ಸ್ಟಾಪ್ ( 0 %, @startColor ), ಬಣ್ಣ - ಸ್ಟಾಪ್ ( 100 %, @endColor )); // ಸಫಾರಿ 4+, ಕ್ರೋಮ್ 2+    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ವೆಬ್‌ಕಿಟ್ - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @startColor , @endColor ); // ಸಫಾರಿ 5.1+, ಕ್ರೋಮ್ 10+    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - o - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @startColor , @endColor ); // ಒಪೇರಾ 11.10    
    - ms - ಫಿಲ್ಟರ್ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor ); // IE8+  
    ಫಿಲ್ಟರ್ : ಇ (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)" , @startColor , @endColor )); // IE6 ಮತ್ತು IE7 
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @startColor , @endColor ); // ಲೆ ಸ್ಟ್ಯಾಂಡರ್ಡ್   
  }
  . ಲಂಬ ( @startColor : #555, @endColor: #333) { 
    ಹಿನ್ನೆಲೆ - ಬಣ್ಣ : @ endColor ; 
    ಹಿನ್ನೆಲೆ - ಪುನರಾವರ್ತನೆ : ಪುನರಾವರ್ತನೆ - x ;
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - khtml - ಗ್ರೇಡಿಯಂಟ್ ( ರೇಖೀಯ , ಎಡ ಮೇಲ್ಭಾಗ , ಎಡ ಕೆಳಭಾಗ , ( @startColor ), ಗೆ ( @endColor )) ; // ಕಾಂಕರರ್   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - moz - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( @startColor , @endColor ); // ಎಫ್ಎಫ್ 3.6+   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ms - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( @startColor , @endColor ); // IE10   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ವೆಬ್‌ಕಿಟ್ - ಗ್ರೇಡಿಯಂಟ್ ( ರೇಖೀಯ , ಎಡ ಮೇಲ್ಭಾಗ , ಎಡ ಕೆಳಭಾಗ , ಬಣ್ಣ - ಸ್ಟಾಪ್ ( 0 %, @startColor ), ಬಣ್ಣ - ಸ್ಟಾಪ್ ( 100 %, @endColor )); // ಸಫಾರಿ 4+, ಕ್ರೋಮ್ 2+    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - ವೆಬ್‌ಕಿಟ್ - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( @startColor , @endColor ); // ಸಫಾರಿ 5.1+, ಕ್ರೋಮ್ 10+   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : - o - ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( @startColor , @endColor ); // ಒಪೇರಾ 11.10   
    - ms - ಫಿಲ್ಟರ್ : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)" , @startColor , @endColor ); // IE8+  
    ಫಿಲ್ಟರ್ : ಇ (%( "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 ಸ್ವಯಂ ;  
  . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ();
}
. ಕಾಲಮ್‌ಗಳು ( @columnSpan : 1 ) {  
  ಪ್ರದರ್ಶನ : ಇನ್ಲೈನ್ ; 
  ತೇಲು : ಎಡ ;
  ಅಗಲ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
  ಅಂಚು - ಎಡ : @gridGutterWidth ; 
  &: ಮೊದಲ - ಮಗು {
    ಅಂಚು - ಎಡ : 0 ; 
  }
}
. ಆಫ್‌ಸೆಟ್ ( @columnOffset : 1 ) {  
  ಅಂಚು - ಎಡ : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! ಪ್ರಮುಖ ;          
}