ಇತಿಹಾಸ

ಟ್ವಿಟರ್‌ನ ಹಿಂದಿನ ದಿನಗಳಲ್ಲಿ, ಇಂಜಿನಿಯರ್‌ಗಳು ಮುಂಭಾಗದ ಅವಶ್ಯಕತೆಗಳನ್ನು ಪೂರೈಸಲು ತಮಗೆ ತಿಳಿದಿರುವ ಯಾವುದೇ ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುತ್ತಿದ್ದರು. ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಪ್ರಸ್ತುತಪಡಿಸಿದ ಸವಾಲುಗಳಿಗೆ ಉತ್ತರವಾಗಿ ಪ್ರಾರಂಭವಾಯಿತು ಮತ್ತು ಟ್ವಿಟರ್‌ನ ಮೊದಲ ಹ್ಯಾಕ್‌ವೀಕ್‌ನಲ್ಲಿ ಅಭಿವೃದ್ಧಿ ತ್ವರಿತವಾಗಿ ವೇಗವಾಯಿತು.

Twitter ನಲ್ಲಿನ ಅನೇಕ ಎಂಜಿನಿಯರ್‌ಗಳ ಸಹಾಯ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಮೂಲಭೂತ ಶೈಲಿಗಳನ್ನು ಮಾತ್ರವಲ್ಲದೆ ಹೆಚ್ಚು ಸೊಗಸಾದ ಮತ್ತು ಬಾಳಿಕೆ ಬರುವ ಮುಂಭಾಗದ ವಿನ್ಯಾಸದ ಮಾದರಿಗಳನ್ನು ಒಳಗೊಳ್ಳಲು ಗಮನಾರ್ಹವಾಗಿ ಬೆಳೆದಿದೆ.

dev.twitter.com ನಲ್ಲಿ ಇನ್ನಷ್ಟು ಓದಿ

ಬ್ರೌಸರ್ ಬೆಂಬಲ

Chrome, Safari, Internet Explorer ಮತ್ತು Firefox ನಂತಹ ಪ್ರಮುಖ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಬೆಂಬಲಿಸಲಾಗುತ್ತದೆ.

• ಇತ್ತೀಚಿನ ಸಫಾರಿ
• ಇತ್ತೀಚಿನ Google Chrome
• Firefox 4+
• ಇಂಟರ್ನೆಟ್ ಎಕ್ಸ್‌ಪ್ಲೋರರ್ 7+
• ಒಪೇರಾ 11

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

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಕಂಪೈಲ್ ಮಾಡಿದ CSS, ಕಂಪೈಲ್ ಮಾಡದ ಮತ್ತು ಉದಾಹರಣೆ ಟೆಂಪ್ಲೇಟ್‌ಗಳೊಂದಿಗೆ ಪೂರ್ಣಗೊಳ್ಳುತ್ತದೆ.

• ಎಲ್ಲಾ ಮೂಲ .ಲೆಸ್ ಫೈಲ್‌ಗಳು
• ಸಂಪೂರ್ಣವಾಗಿ ಕಂಪೈಲ್ ಮತ್ತು ಮಿನಿಫೈಡ್ CSS
• ಸ್ಟೈಲ್‌ಗೈಡ್ ದಸ್ತಾವೇಜನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
• ಉದಾಹರಣೆ ಪುಟ ಟೆಂಪ್ಲೇಟ್ (ಇನ್ನಷ್ಟು ಶೀಘ್ರದಲ್ಲೇ ಬರಲಿದೆ)

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

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

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

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

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

ಸ್ಥಿರ ಲೇಔಟ್

ಡೀಫಾಲ್ಟ್ ಮತ್ತು ಸರಳವಾದ 940px-ಅಗಲದ, ಕೇಂದ್ರೀಕೃತ ಲೇಔಟ್ ಅನ್ನು ಯಾವುದೇ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಪುಟಕ್ಕಾಗಿ ಒದಗಿಸಲಾಗಿದೆ <div.container>.

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

ದ್ರವ ವಿನ್ಯಾಸ

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

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

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

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

ಸಂಪೂರ್ಣ ಟೈಪೋಗ್ರಾಫಿಕ್ ಗ್ರಿಡ್ ನಮ್ಮ preboot.less ಫೈಲ್‌ನಲ್ಲಿ ಎರಡು ಕಡಿಮೆ ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಆಧರಿಸಿದೆ: @basefontಮತ್ತು @baseline. ಮೊದಲನೆಯದು ಬೇಸ್ ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಉದ್ದಕ್ಕೂ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಎರಡನೆಯದು ಬೇಸ್ ಲೈನ್-ಎತ್ತರವಾಗಿದೆ.

ನಮ್ಮ ಎಲ್ಲಾ ಪ್ರಕಾರಗಳ ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್‌ಗಳು ಮತ್ತು ಲೈನ್-ಎತ್ತರಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ನಾವು ಆ ವೇರಿಯೇಬಲ್‌ಗಳು ಮತ್ತು ಕೆಲವು ಗಣಿತವನ್ನು ಬಳಸುತ್ತೇವೆ.

h1. ಶಿರೋನಾಮೆ 1

h2. ಶಿರೋನಾಮೆ 2

h3. ಶಿರೋನಾಮೆ 3

h4. ಶಿರೋನಾಮೆ 4

h5. ಶಿರೋನಾಮೆ 5

h6. ಶಿರೋನಾಮೆ 6

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

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

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

ಇತರೆ. ಅಂಶಗಳು

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

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

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

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

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

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

ಗಮನಿಸಿ: HTML5 ನಲ್ಲಿ ಬಳಸಲು <b>ಮತ್ತು <i>ಟ್ಯಾಗ್ ಮಾಡುವುದು ಇನ್ನೂ ಸರಿಯಾಗಿದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಕ್ರಮವಾಗಿ ದಪ್ಪ ಮತ್ತು ಇಟಾಲಿಕ್ ಶೈಲಿಯಲ್ಲಿ ಮಾಡಬೇಕಾಗಿಲ್ಲ (ಹೆಚ್ಚು ಶಬ್ದಾರ್ಥದ ಅಂಶವಿದ್ದರೂ, ಅದನ್ನು ಬಳಸಿ). <b>ಹೆಚ್ಚುವರಿ ಪ್ರಾಮುಖ್ಯತೆಯನ್ನು ತಿಳಿಸದೆಯೇ ಪದಗಳು ಅಥವಾ ಪದಗುಚ್ಛಗಳನ್ನು ಹೈಲೈಟ್ ಮಾಡಲು ಉದ್ದೇಶಿಸಲಾಗಿದೆ, ಆದರೆ <i>ಹೆಚ್ಚಾಗಿ ಧ್ವನಿ, ತಾಂತ್ರಿಕ ಪದಗಳು, ಇತ್ಯಾದಿ.

ವಿಳಾಸಗಳು

ಅಂಶವನ್ನು ಅದರ <address>ಹತ್ತಿರದ ಪೂರ್ವಜರ ಸಂಪರ್ಕ ಮಾಹಿತಿಗಾಗಿ ಅಥವಾ ಸಂಪೂರ್ಣ ಕೆಲಸದ ದೇಹಕ್ಕೆ ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಹೇಗೆ ಕಾಣುತ್ತದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

Twitter, Inc.
795 ಫೋಲ್ಸಮ್ ಏವ್, ಸೂಟ್ 600
ಸ್ಯಾನ್ ಫ್ರಾನ್ಸಿಸ್ಕೋ, CA 94107
P: (123) 456-7890

ಗಮನಿಸಿ: ಒಂದು <address>ಲೈನ್-ಬ್ರೇಕ್ ( ) ನೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳಬೇಕು ಅಥವಾ ವಿಷಯವನ್ನು ಸರಿಯಾಗಿ ರೂಪಿಸಲು <br />ಬ್ಲಾಕ್-ಲೆವೆಲ್ ಟ್ಯಾಗ್‌ನಲ್ಲಿ (ಉದಾ, ) ಸುತ್ತಿಡಬೇಕು .<p>

ಸಂಕ್ಷೇಪಣಗಳು

ಸಂಕ್ಷೇಪಣಗಳು ಮತ್ತು ಪ್ರಥಮಾಕ್ಷರಗಳಿಗಾಗಿ, <abbr>ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸಿ ( HTML5<acronym> ನಲ್ಲಿ ಅಸಮ್ಮತಿಸಲಾಗಿದೆ ). ಟ್ಯಾಗ್‌ನೊಳಗೆ ಸಂಕ್ಷಿಪ್ತ ರೂಪವನ್ನು ಹಾಕಿ ಮತ್ತು ಸಂಪೂರ್ಣ ಹೆಸರಿಗೆ ಶೀರ್ಷಿಕೆಯನ್ನು ಹೊಂದಿಸಿ.

ಬ್ಲಾಕ್‌ಕೋಟ್‌ಗಳು

<blockquote> <p> <small>

ಹೇಗೆ ಉಲ್ಲೇಖಿಸುವುದು

ಬ್ಲಾಕ್‌ಕೋಟ್ ಅನ್ನು ಸೇರಿಸಲು, ಸುತ್ತು <blockquote>ಮತ್ತು <p>ಟ್ಯಾಗ್‌ಗಳನ್ನು <small>ಸೇರಿಸಿ. <small>ನಿಮ್ಮ ಮೂಲವನ್ನು ಉಲ್ಲೇಖಿಸಲು ಅಂಶವನ್ನು ಬಳಸಿ ಮತ್ತು —ಅದರ ಮೊದಲು ನೀವು ಎಮ್ ಡ್ಯಾಶ್ ಅನ್ನು ಪಡೆಯುತ್ತೀರಿ.

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

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

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

• ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
• ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
• ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
• ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
• ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
  • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
  • ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
  • ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
  • ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
• ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
• ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
• ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

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

• ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್
• ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್
• ಪೂರ್ಣಾಂಕ ಮೊಲೆಸ್ಟಿ ಲೋರೆಮ್ ಮತ್ತು ಮಸ್ಸಾ
• ಪ್ರೀಟಿಯಮ್ ನಿಸ್ಲ್ ಅಲಿಕ್ವೆಟ್‌ನಲ್ಲಿ ಸೌಲಭ್ಯ
• ನುಲ್ಲ ವೊಲುಟ್ಪಟ್ ಅಲಿಕಮ್ ವೆಲಿತ್
  • ಫಾಸೆಲ್ಲಸ್ ಐಕ್ಯುಲಿಸ್ ನೆಕ್ವೆ
  • ಪುರುಸ್ ಸೋಡೇಲ್ಸ್ ಅಲ್ಟ್ರಿಸಿಸ್
  • ವೆಸ್ಟಿಬುಲಮ್ ಲಾರೆಟ್ ಪೋರ್ಟಿಟರ್ ಸೆಮ್
  • ಎಸಿ ಟ್ರಿಸ್ಟಿಕ್ ಲಿಬೆರೊ ವಾಲ್ಟ್ಪಾಟ್ ನಲ್ಲಿ
• ಫೌಸಿಬಸ್ ಪೋರ್ಟಾ ಲ್ಯಾಕಸ್ ಫ್ರಿಂಗಿಲ್ಲಾ ವೆಲ್
• ಈಗಿನ ಸಿಟ್ ಅಮೆಟ್ ಈಗ
• ಈಗೆಟ್ ಪೋರ್ಟಿಟರ್ ಲೋರೆಮ್

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

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

ಗಮನಿಸಿ: ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಎನ್ನುವುದು IE8 ಮತ್ತು ಕೆಳಗಿನ ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಲಭ್ಯವಿಲ್ಲದ ಪ್ರಗತಿಶೀಲ ವರ್ಧನೆಯಾಗಿದೆ.

<ಟೇಬಲ್ ವರ್ಗ = "ಜೀಬ್ರಾ-ಪಟ್ಟೆ" > 
...
</table>

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

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

#	ಮೊದಲ ಹೆಸರು	ಕೊನೆಯ ಹೆಸರು	ಭಾಷೆ
1	ನಿಮ್ಮ	ಒಂದು	ಆಂಗ್ಲ
2	ಜೋ	ಸಿಕ್ಸ್ಪ್ಯಾಕ್	ಆಂಗ್ಲ
3	ಸ್ತು	ಡೆಂಟ್	ಕೋಡ್

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

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

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

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

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

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

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

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

ಗುಂಡಿಗಳು

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

ಎಲ್ಲಾ ಬಟನ್‌ಗಳು ತಿಳಿ ಬೂದು ಶೈಲಿಗೆ ಪೂರ್ವನಿಯೋಜಿತವಾಗಿರುತ್ತವೆ, ಆದರೆ ವಿವಿಧ ಬಣ್ಣದ ಶೈಲಿಗಳಿಗೆ ಹಲವಾರು ಕ್ರಿಯಾತ್ಮಕ ವರ್ಗಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು. ಈ ವರ್ಗಗಳಲ್ಲಿ ನೀಲಿ .primaryವರ್ಗ, ತಿಳಿ-ನೀಲಿ .infoವರ್ಗ, ಹಸಿರು .successವರ್ಗ ಮತ್ತು ಕೆಂಪು .dangerವರ್ಗ ಸೇರಿವೆ. ಜೊತೆಗೆ, ನಿಮ್ಮ ಸ್ವಂತ ಶೈಲಿಗಳನ್ನು ರೋಲಿಂಗ್ ಮಾಡುವುದು ಸುಲಭವಾಗಿದೆ.

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

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

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

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

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

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

ಲಿಂಕ್‌ಗಳು

ಗುಂಡಿಗಳು

ಏನದು

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

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

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

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

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

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

ಜೊತೆಗೆ ಸರಳ ದ್ವಿತೀಯ ನ್ಯಾವಿಗೇಷನ್ ರಚಿಸಿ <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>

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

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

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

div.alert-message

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

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

div.alert-message.block-message

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

ಮಾದರಿಗಳು

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

ಉಪಕರಣ ಸಲಹೆಗಳು

ಗೊಂದಲಮಯ ಬಳಕೆದಾರರಿಗೆ ಸಹಾಯ ಮಾಡಲು ಮತ್ತು ಅವರನ್ನು ಸರಿಯಾದ ದಿಕ್ಕಿನಲ್ಲಿ ತೋರಿಸಲು ಟ್ವಿಪ್ಸಿಗಳು ತುಂಬಾ ಉಪಯುಕ್ತವಾಗಿವೆ.

ಪಾಪೋವರ್ಸ್

ಲೇಔಟ್‌ಗೆ ಧಕ್ಕೆಯಾಗದಂತೆ ಪುಟಕ್ಕೆ ಉಪಪಠ್ಯ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ಪಾಪೋವರ್‌ಗಳನ್ನು ಬಳಸಿ.

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

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

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

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

<link rel = "stylesheet/less" href = "less/bootstrap.less" media = "ಎಲ್ಲಾ" />    
<script src = "js/less-1.1.3.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 ;            
 
// ಬೇಸ್‌ಲೈನ್ ಗ್ರಿಡ್
@basefont : 13px ;          
@ಬೇಸ್ಲೈನ್ : 18px ;          

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

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    
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( ಎಡ , @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   
    ಹಿನ್ನೆಲೆ - ಚಿತ್ರ : ರೇಖೀಯ - ಗ್ರೇಡಿಯಂಟ್ ( @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 ಸ್ವಯಂ ;  
  . ಕ್ಲಿಯರ್ಫಿಕ್ಸ್ ();
}
. ಕಾಲಮ್‌ಗಳು ( @columnSpan : 1 ) {  
  ಅಗಲ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}
. ಆಫ್‌ಸೆಟ್ ( @columnOffset : 1 ) {  
  ಅಂಚು - ಎಡ : ( @ಗ್ರಿಡ್‌ಕಾಲಮ್‌ವಿಡ್ತ್ * @ಕಾಲಮ್‌ಆಫ್‌ಸೆಟ್ ) + ( @ಗ್ರಿಡ್‌ಗಟರ್‌ವಿಡ್ತ್ * ( @ಕಾಲಮ್‌ಆಫ್‌ಸೆಟ್ - 1 )) + @ ಎಕ್ಸ್‌ಟ್ರಾಸ್ಪೇಸ್ ;           
}