ಮೇಲೆ

ಬಿಟ್ಟರು

ಬಲ

ಕೆಳಗೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್, Twitter ನಿಂದ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ವೆಬ್‌ಅಪ್‌ಗಳು ಮತ್ತು ಸೈಟ್‌ಗಳ ಅಭಿವೃದ್ಧಿಯನ್ನು ಕಿಕ್‌ಸ್ಟಾರ್ಟ್ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಿದ Twitter ನಿಂದ ಟೂಲ್‌ಕಿಟ್ ಆಗಿದೆ.
ಇದು ಮುದ್ರಣಕಲೆ, ಫಾರ್ಮ್‌ಗಳು, ಬಟನ್‌ಗಳು, ಟೇಬಲ್‌ಗಳು, ಗ್ರಿಡ್‌ಗಳು, ನ್ಯಾವಿಗೇಷನ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಮೂಲ CSS ಮತ್ತು HTML ಅನ್ನು ಒಳಗೊಂಡಿದೆ.

ನೆರ್ಡ್ ಎಚ್ಚರಿಕೆ: ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಕಡಿಮೆ ನಿರ್ಮಿಸಲಾಗಿದೆ ಮತ್ತು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಗಮನದಲ್ಲಿಟ್ಟುಕೊಂಡು ಗೇಟ್‌ನಿಂದ ಕೆಲಸ ಮಾಡಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ.

CSS ಹಾಟ್‌ಲಿಂಕ್ ಮಾಡಿ

ತ್ವರಿತ ಮತ್ತು ಸುಲಭವಾದ ಪ್ರಾರಂಭಕ್ಕಾಗಿ, ಈ ತುಣುಕನ್ನು ನಿಮ್ಮ ವೆಬ್‌ಪುಟಕ್ಕೆ ನಕಲಿಸಿ.

ಅದನ್ನು ಕಡಿಮೆ ಬಳಸಿ

ಕಡಿಮೆ ಬಳಸುವ ಅಭಿಮಾನಿಯೇ? ಸಮಸ್ಯೆ ಇಲ್ಲ, ರೆಪೊವನ್ನು ಕ್ಲೋನ್ ಮಾಡಿ ಮತ್ತು ಈ ಸಾಲುಗಳನ್ನು ಸೇರಿಸಿ:

GitHub ನಲ್ಲಿ ಫೋರ್ಕ್

Github ನಲ್ಲಿ ಅಧಿಕೃತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ರೆಪೊದೊಂದಿಗೆ ಡೌನ್‌ಲೋಡ್, ಫೋರ್ಕ್, ಪುಲ್, ಫೈಲ್ ಸಮಸ್ಯೆಗಳು ಮತ್ತು ಇನ್ನಷ್ಟು.

GitHub ನಲ್ಲಿ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ »

ಪ್ರಸ್ತುತ v1.3.0

ಇತಿಹಾಸ

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

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

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

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

Chrome, Safari, Internet Explorer ಮತ್ತು Firefox ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಲಾಗಿದೆ ಮತ್ತು ಬೆಂಬಲಿತವಾಗಿದೆ

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

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

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ಲಗಿನ್‌ಗಳು
ಎಲ್ಲಾ ಮೂಲ .ಲೆಸ್ ಫೈಲ್‌ಗಳು
ಸಂಪೂರ್ಣವಾಗಿ ಕಂಪೈಲ್ ಮತ್ತು ಮಿನಿಫೈಡ್ CSS
ಸ್ಟೈಲ್‌ಗೈಡ್ ದಸ್ತಾವೇಜನ್ನು ಪೂರ್ಣಗೊಳಿಸಿ
ವಿಭಿನ್ನ ವಿನ್ಯಾಸಗಳೊಂದಿಗೆ ಮೂರು ಉದಾಹರಣೆ ಪುಟಗಳು

ತ್ವರಿತ-ಪ್ರಾರಂಭದ ಉದಾಹರಣೆಗಳು

ಕೆಲವು ತ್ವರಿತ ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಬೇಕೇ? ನಾವು ಒಟ್ಟುಗೂಡಿಸಿದ ಈ ಮೂಲ ಉದಾಹರಣೆಗಳನ್ನು ಪರಿಶೀಲಿಸಿ:

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

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

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

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

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

1/3

2/3

ಕಾಲಮ್‌ಗಳನ್ನು ಸರಿದೂಗಿಸುವುದು

8 ಆಫ್ಸೆಟ್ 4

1/3 ಆಫ್‌ಸೆಟ್ 2/3 ಸೆ

4 ಆಫ್ಸೆಟ್ 4

5 ಆಫ್‌ಸೆಟ್ 3

10 ಆಫ್‌ಸೆಟ್ 6

ಗೂಡುಕಟ್ಟುವ ಕಾಲಮ್‌ಗಳು

.rowಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಕಾಲಮ್‌ನಲ್ಲಿ ರಚಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ವಿಷಯವನ್ನು ನೆಸ್ಟ್ ಮಾಡಿ .

ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳ ಉದಾಹರಣೆ

ಕಾಲಮ್ನ ಹಂತ 1

ಹಂತ 2

<div class = "row" > 
  <div class = "span12" > 
    ಕಾಲಮ್ನ ಹಂತ 1
    <div class = "row" > 
      <div class = "span6" > 
        ಹಂತ 2
      </div>
      <div class = "span6" > 
        ಹಂತ 2
      </div>
    </div>
  </div>
</div>

ನಿಮ್ಮ ಸ್ವಂತ ಗ್ರಿಡ್ ಅನ್ನು ರೋಲ್ ಮಾಡಿ

ಡೀಫಾಲ್ಟ್ 940px ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಲು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನಲ್ಲಿ ಬೆರಳೆಣಿಕೆಯ ವೇರಿಯಬಲ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲಾಗಿದೆ. ಸ್ವಲ್ಪ ಕಸ್ಟಮೈಸೇಶನ್‌ನೊಂದಿಗೆ, ನೀವು ಕಾಲಮ್‌ಗಳ ಗಾತ್ರ, ಅವುಗಳ ಗಟರ್‌ಗಳು ಮತ್ತು ಅವು ವಾಸಿಸುವ ಕಂಟೇನರ್ ಅನ್ನು ಮಾರ್ಪಡಿಸಬಹುದು.

ಗ್ರಿಡ್ ಒಳಗೆ

ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಮಾರ್ಪಡಿಸಲು ಅಗತ್ಯವಿರುವ ವೇರಿಯೇಬಲ್‌ಗಳು ಪ್ರಸ್ತುತ ಎಲ್ಲಾ ನೆಲೆಸಿದೆ variables.less.

ವೇರಿಯಬಲ್	ಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯ	ವಿವರಣೆ
`@gridColumns`	16	ಗ್ರಿಡ್‌ನಲ್ಲಿರುವ ಕಾಲಮ್‌ಗಳ ಸಂಖ್ಯೆ
`@gridColumnWidth`	40px	ಗ್ರಿಡ್‌ನೊಳಗೆ ಪ್ರತಿ ಕಾಲಮ್‌ನ ಅಗಲ
`@gridGutterWidth`	20px	ಪ್ರತಿ ಕಾಲಮ್ ನಡುವಿನ ಋಣಾತ್ಮಕ ಅಂತರ
`@siteWidth`	ಎಲ್ಲಾ ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಗಟರ್‌ಗಳ ಕಂಪ್ಯೂಟೆಡ್ ಮೊತ್ತ	`.fixed-container()`ಕಾಲಮ್‌ಗಳು ಮತ್ತು ಗಟರ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಎಣಿಸಲು ಮತ್ತು ಮಿಕ್ಸಿನ್‌ನ ಅಗಲವನ್ನು ಹೊಂದಿಸಲು ನಾವು ಕೆಲವು ಮೂಲಭೂತ ಹೊಂದಾಣಿಕೆಗಳನ್ನು ಬಳಸುತ್ತೇವೆ .

ಈಗ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು

ಗ್ರಿಡ್ ಅನ್ನು ಮಾರ್ಪಡಿಸುವುದು ಎಂದರೆ ಮೂರು @grid-*ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬದಲಾಯಿಸುವುದು ಮತ್ತು ಕಡಿಮೆ ಫೈಲ್‌ಗಳನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡುವುದು.

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ 24 ಕಾಲಮ್‌ಗಳೊಂದಿಗೆ ಗ್ರಿಡ್ ವ್ಯವಸ್ಥೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಸಜ್ಜುಗೊಂಡಿದೆ; ಡೀಫಾಲ್ಟ್ ಕೇವಲ 16. ನಿಮ್ಮ ಗ್ರಿಡ್ ವೇರಿಯೇಬಲ್‌ಗಳು 24-ಕಾಲಮ್ ಗ್ರಿಡ್‌ಗೆ ಹೇಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡುತ್ತವೆ ಎಂಬುದು ಇಲ್ಲಿದೆ.

@GridColumns : 24 ;       
@gridColumnWidth : 20px ;   
@gridGutterWidth : 20px ;

ಒಮ್ಮೆ ಮರುಸಂಕಲಿಸಿದ ನಂತರ, ನೀವು ಹೊಂದಿಸಲಾಗುವುದು!

ಸ್ಥಿರ ಲೇಔಟ್

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

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

ದ್ರವ ವಿನ್ಯಾಸ

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

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

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

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

ಸಂಪೂರ್ಣ ಟೈಪೋಗ್ರಾಫಿಕ್ ಗ್ರಿಡ್ ನಮ್ಮ variables.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 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

ಪೂರ್ಣ ಹೆಸರು
[email protected]

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

ಸಂಕ್ಷೇಪಣಗಳು

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

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

<blockquote> <p> <small>

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

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

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

<blockquote>
  <p> ಲೋರೆಮ್ ಇಪ್ಸಮ್ ಡೋಲರ್ ಸಿಟ್ ಅಮೆಟ್, ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಅಡಿಪಿಸ್ಸಿಂಗ್ ಎಲಿಟ್. ಪೂರ್ಣಾಂಕ ಪೊಸುಯೆರೆ ಎರಟ್ ಎ ಆಂಟೆ ವೆನೆನಾಟಿಸ್ ಡಪಿಬಸ್ ಪೊಸುರೆ ವೆಲಿಟ್ ಅಲಿಕ್ವೆಟ್. </p>
  <small> ಡಾ. ಜೂಲಿಯಸ್ ಹಿಬರ್ಟ್ </small>
</blockquote>

ಪಟ್ಟಿಗಳು

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

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

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

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

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

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

ವಿವರಣೆ`dl`

ವಿವರಣೆ ಪಟ್ಟಿಗಳು: ಪದಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ವಿವರಣೆ ಪಟ್ಟಿಯು ಪರಿಪೂರ್ಣವಾಗಿದೆ.
ಯುಯಿಸ್ಮೋಡ್: ವೆಸ್ಟಿಬುಲಮ್ ಐಡಿ ಲಿಗುಲಾ ಪೋರ್ಟಾ ಫೆಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್ ಸೆಂಪರ್ ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್.; ಡೊನೆಕ್ ಐಡಿ ಎಲಿಟ್ ನಾನ್ ಮೈ ಪೋರ್ಟಾ ಗ್ರಾವಿಡಾ ಮತ್ತು ಎಗೆಟ್ ಮೆಟಸ್.
ಮಲೆಸುವಾದ ಪೋರ್ಟಾ: ಎಟಿಯಮ್ ಪೋರ್ಟಾ ಸೆಮ್ ಮಲೆಸುಡಾ ಮ್ಯಾಗ್ನಾ ಮೊಲ್ಲಿಸ್ ಯುಯಿಸ್ಮೋಡ್.

ಕೋಡ್

<code> <pre>

ಎರಡು ಸರಳ ಟ್ಯಾಗ್‌ಗಳೊಂದಿಗೆ ಶೈಲಿಯಲ್ಲಿ ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಪಿಂಪ್ ಮಾಡಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮೂಲಕ ಇನ್ನಷ್ಟು ಅದ್ಭುತಕ್ಕಾಗಿ, Google ನ ಕೋಡ್ ಪ್ರಿಟಿಫೈ ಲೈಬ್ರರಿಯಲ್ಲಿ ಬಿಡಿ ಮತ್ತು ನೀವು ಹೊಂದಿಸಿರುವಿರಿ.

ಕೋಡ್ ಅನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲಾಗುತ್ತಿದೆ

ಕೋಡ್, ಬ್ಲಾಕ್‌ಗಳು ಅಥವಾ ಇನ್‌ಲೈನ್ ತುಣುಕುಗಳು, ಸರಿಯಾದ ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ಶೈಲಿಯೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸಬಹುದು. ಬಹು ಸಾಲುಗಳನ್ನು ವ್ಯಾಪಿಸಿರುವ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳಿಗಾಗಿ, <pre>ಅಂಶವನ್ನು ಬಳಸಿ. ಇನ್ಲೈನ್ ಕೋಡ್ಗಾಗಿ, <code>ಅಂಶವನ್ನು ಬಳಸಿ.

ಅಂಶ ಫಲಿತಾಂಶ

<code> ಈ ರೀತಿಯ ಪಠ್ಯದ ಸಾಲಿನಲ್ಲಿ, ನಿಮ್ಮ ಸುತ್ತುವ ಕೋಡ್ ಈ ಅಂಶದಂತೆ ಕಾಣುತ್ತದೆ <html>.

ಅಂಶ	ಫಲಿತಾಂಶ
`<code>`	ಈ ರೀತಿಯ ಪಠ್ಯದ ಸಾಲಿನಲ್ಲಿ, ನಿಮ್ಮ ಸುತ್ತುವ ಕೋಡ್ ಈ ಅಂಶದಂತೆ ಕಾಣುತ್ತದೆ `<html>`.
`<pre>`	<div> <h1>ಶೀರ್ಷಿಕೆ</h1> <p>ಇಲ್ಲಿಯೇ ಏನೋ...</p> </div> ಗಮನಿಸಿ:`<pre>` ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಎಡಕ್ಕೆ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರ ಇರಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ ; ಇದು ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.
`<pre class="prettyprint">`	google-code-prettify ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದರಿಂದ, ನಿಮ್ಮ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ದೃಶ್ಯ ಶೈಲಿ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟ್ ಅನ್ನು ಪಡೆಯುತ್ತವೆ. <div> <h1> ಶಿರೋನಾಮೆ </h1> <p> ಇಲ್ಲಿಯೇ ಏನೋ... </p> </div> google-code-prettify ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ರೀಡ್‌ಮೀ ಅನ್ನು ವೀಕ್ಷಿಸಿ.

<pre>

<div>
  <h1>ಶೀರ್ಷಿಕೆ</h1>
  <p>ಇಲ್ಲಿಯೇ ಏನೋ...</p>
</div>

ಗಮನಿಸಿ:<pre> ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ಎಡಕ್ಕೆ ಸಾಧ್ಯವಾದಷ್ಟು ಹತ್ತಿರ ಇರಿಸಿಕೊಳ್ಳಲು ಮರೆಯದಿರಿ ; ಇದು ಎಲ್ಲಾ ಟ್ಯಾಬ್‌ಗಳನ್ನು ನಿರೂಪಿಸುತ್ತದೆ.

<pre class="prettyprint">

google-code-prettify ಲೈಬ್ರರಿಯನ್ನು ಬಳಸುವುದರಿಂದ, ನಿಮ್ಮ ಕೋಡ್ ಬ್ಲಾಕ್‌ಗಳು ಸ್ವಲ್ಪ ವಿಭಿನ್ನವಾದ ದೃಶ್ಯ ಶೈಲಿ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಹೈಲೈಟ್ ಅನ್ನು ಪಡೆಯುತ್ತವೆ.

<div> <h1> ಶಿರೋನಾಮೆ </h1> <p> ಇಲ್ಲಿಯೇ ಏನೋ... </p> </div>

google-code-prettify ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ರೀಡ್‌ಮೀ ಅನ್ನು ವೀಕ್ಷಿಸಿ.

ಇನ್ಲೈನ್ ಲೇಬಲ್ಗಳು

<span class="label">

ನಿಮ್ಮ ದೇಹದ ಪಠ್ಯದಲ್ಲಿನ ಯಾವುದೇ ಪದಗುಚ್ಛಕ್ಕೆ ಗಮನ ಕೊಡಿ ಅಥವಾ ಫ್ಲ್ಯಾಗ್ ಮಾಡಿ.

ಯಾವುದನ್ನಾದರೂ ಲೇಬಲ್ ಮಾಡಿ

ಅಂತಹ ಅಲಂಕಾರಿಕ ಹೊಸತರಲ್ಲಿ ಎಂದಾದರೂ ಅಗತ್ಯವಿದೆ ! ಅಥವಾ ಕೋಡ್ ಬರೆಯುವಾಗ ಪ್ರಮುಖ ಧ್ವಜಗಳು? ಸರಿ, ಈಗ ನೀವು ಅವುಗಳನ್ನು ಹೊಂದಿದ್ದೀರಿ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಏನು ಸೇರಿಸಲಾಗಿದೆ ಎಂಬುದು ಇಲ್ಲಿದೆ:

ಲೇಬಲ್	ಫಲಿತಾಂಶ
`<span class="label">Default</span>`	ಡೀಫಾಲ್ಟ್
`<span class="label success">New</span>`	ಹೊಸದು
`<span class="label warning">Warning</span>`	ಎಚ್ಚರಿಕೆ
`<span class="label important">Important</span>`	ಪ್ರಮುಖ
`<span class="label notice">Notice</span>`	ಗಮನಿಸಿ

ಮಾಧ್ಯಮ ಗ್ರಿಡ್

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

ಉದಾಹರಣೆ ಥಂಬ್‌ನೇಲ್‌ಗಳು

ನಲ್ಲಿನ ಥಂಬ್‌ನೇಲ್‌ಗಳು .media-gridಯಾವುದೇ ಗಾತ್ರವಾಗಿರಬಹುದು, ಆದರೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್‌ಗೆ ನೇರವಾಗಿ ಮ್ಯಾಪ್ ಮಾಡಿದಾಗ ಅವು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ. 90, 210, ಮತ್ತು 330 ನಂತಹ ಚಿತ್ರದ ಅಗಲಗಳು ಪ್ಯಾಡಿಂಗ್‌ನ ಕೆಲವು ಪಿಕ್ಸೆಲ್‌ಗಳೊಂದಿಗೆ .span2, .span4, ಮತ್ತು .span6ಕಾಲಮ್ ಗಾತ್ರಗಳಿಗೆ ಸಮನಾಗಿರುತ್ತವೆ.

ದೊಡ್ಡದು

ಮಾಧ್ಯಮ

ಚಿಕ್ಕದು

ಅವುಗಳನ್ನು ಕೋಡಿಂಗ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಮಾಧ್ಯಮ ಗ್ರಿಡ್‌ಗಳು ಬಳಸಲು ಸುಲಭ ಮತ್ತು ಮಾರ್ಕ್‌ಅಪ್ ಭಾಗದಲ್ಲಿ ಸರಳವಾಗಿದೆ. ಅವುಗಳ ಆಯಾಮಗಳು ಒಳಗೊಂಡಿರುವ ಚಿತ್ರಗಳ ಗಾತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಆಧರಿಸಿವೆ.

<ul class = "media-grid" > 
  <li>
    <a href = "#" > 
      <img ವರ್ಗ = "ಥಂಬ್‌ನೇಲ್" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
  <li>
    <a href = "#" > 
      <img ವರ್ಗ = "ಥಂಬ್‌ನೇಲ್" src = "https://placehold.it/330x230" alt = "" >   
    </a>
  </li>
</ul>

ಕಟ್ಟಡ ಕೋಷ್ಟಕಗಳು

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

ಕೋಷ್ಟಕಗಳು ಉತ್ತಮವಾಗಿವೆ - ಬಹಳಷ್ಟು ವಿಷಯಗಳಿಗೆ. ಉತ್ತಮ ಕೋಷ್ಟಕಗಳು, ಆದಾಗ್ಯೂ, ಉಪಯುಕ್ತ, ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ಓದಬಲ್ಲ (ಕೋಡ್ ಮಟ್ಟದಲ್ಲಿ) ಮಾರ್ಕ್ಅಪ್ ಪ್ರೀತಿ ಸ್ವಲ್ಪ ಅಗತ್ಯವಿದೆ. ಸಹಾಯ ಮಾಡಲು ಕೆಲವು ಸಲಹೆಗಳು ಇಲ್ಲಿವೆ.

ನಿಮ್ಮ ಕಾಲಮ್ ಹೆಡರ್‌ಗಳನ್ನು ಯಾವಾಗಲೂ <thead>ಶ್ರೇಣಿ ವ್ಯವಸ್ಥೆಯಲ್ಲಿ ಸುತ್ತಿ <thead>> <tr>> <th>.

ಕಾಲಮ್ ಹೆಡರ್‌ಗಳಂತೆಯೇ, ನಿಮ್ಮ ಎಲ್ಲಾ ಟೇಬಲ್‌ನ ದೇಹ ವಿಷಯವನ್ನು ಒಂದು ಸುತ್ತಿಡಬೇಕು <tbody>ಆದ್ದರಿಂದ ನಿಮ್ಮ ಕ್ರಮಾನುಗತವು <tbody>> <tr>> <td>.

ಉದಾಹರಣೆ: ಡೀಫಾಲ್ಟ್ ಟೇಬಲ್ ಶೈಲಿಗಳು

ಎಲ್ಲಾ ಕೋಷ್ಟಕಗಳು ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಮತ್ತು ರಚನೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಅಗತ್ಯವಾದ ಗಡಿಗಳೊಂದಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲ್ಪಡುತ್ತವೆ. ಹೆಚ್ಚುವರಿ ತರಗತಿಗಳು ಅಥವಾ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.

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

<ಟೇಬಲ್>
  ...
</table>

ಉದಾಹರಣೆ: ಮಂದಗೊಳಿಸಿದ ಕೋಷ್ಟಕ

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

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

ಉದಾಹರಣೆ: ಬಾರ್ಡರ್ಡ್ ಟೇಬಲ್

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

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

<ಟೇಬಲ್ ವರ್ಗ = "ಬೋರ್ಡರ್ಡ್-ಟೇಬಲ್" > 
  ...
</table>

ಉದಾಹರಣೆ: ಜೀಬ್ರಾ ಪಟ್ಟೆ

ಜೀಬ್ರಾ-ಸ್ಟ್ರೈಪಿಂಗ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಟೇಬಲ್‌ಗಳೊಂದಿಗೆ ಸ್ವಲ್ಪ ಅಲಂಕಾರಿಕ ಪಡೆಯಿರಿ-ಕೇವಲ .zebra-stripedವರ್ಗವನ್ನು ಸೇರಿಸಿ.

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

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

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

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

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

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

<script src = "js/jquery/jquery.tablesorter.min.js" ></script> 
<ಸ್ಕ್ರಿಪ್ಟ್ > 
  $ ( ಕಾರ್ಯ () { 
    $ ( "ಕೋಷ್ಟಕ#ವಿಂಗಡಣೆ ಟೇಬಲ್ ಉದಾಹರಣೆ" ). ಟೇಬಲ್ಸಾರ್ಟರ್ ({ sortList : [[ 1 , 0 ]] });  
  });
</script>
<ಟೇಬಲ್ ವರ್ಗ = "ಜೀಬ್ರಾ-ಪಟ್ಟೆ" > 
  ...
</table>

ಸ್ಥಿರ ಟಾಪ್ಬಾರ್

ಏನದು

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

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

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

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

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

ಗಮನಿಸಿ: ಯಾವುದೇ ಪುಟದಲ್ಲಿ ಟಾಪ್‌ಬಾರ್ ಅನ್ನು ಬಳಸುವಾಗ, padding-top: 40px;ನಿಮ್ಮ ಗೆ ಸೇರಿಸುವ ಮೂಲಕ ಅದು ಉಂಟಾಗುವ ಅತಿಕ್ರಮಣವನ್ನು ಗಣನೆಗೆ ತೆಗೆದುಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ body.

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

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

ಬ್ರೆಡ್ ತುಂಡುಗಳು

ಬ್ರೆಡ್ ಕ್ರಂಬ್ ನ್ಯಾವಿಗೇಶನ್ ಅನ್ನು ಬಳಕೆದಾರರು ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ಸೈಟ್‌ನಲ್ಲಿ ಎಲ್ಲಿದ್ದಾರೆ ಎಂಬುದನ್ನು ತೋರಿಸಲು ಒಂದು ಮಾರ್ಗವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ಪ್ರಾಥಮಿಕ ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ ಅಲ್ಲ.

<ul class = "breadcrumb" > 
  <li><a href = "#" > ಮುಖಪುಟ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > ಮಧ್ಯ ಪುಟ </a> <span class = "divider" > / </span></li>   
  <li><a href = "#" > ಇನ್ನೊಂದು </a> <span class = "divider" > / </span></li>   
  <li class = "ಸಕ್ರಿಯ" > ನೀವು ಇಲ್ಲಿದ್ದೀರಿ </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>

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

.alert-message

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ .

ಓಹ್ ಸ್ನ್ಯಾಪ್! ಇದನ್ನು ಮತ್ತು ಅದನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ .

ಚೆನ್ನಾಗಿದೆ! ನೀವು ಈ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ .

ತಲೆ ಎತ್ತಿ! ಇದು ನಿಮ್ಮ ಗಮನಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಎಚ್ಚರಿಕೆಯಾಗಿದೆ, ಆದರೆ ಇದು ಇನ್ನೂ ಹೆಚ್ಚಿನ ಆದ್ಯತೆಯಾಗಿಲ್ಲ .

ಉದಾಹರಣೆ ಕೋಡ್

<div class = "ಎಚ್ಚರಿಕೆ-ಸಂದೇಶ ಎಚ್ಚರಿಕೆ" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! </strong> ನೀವೇ ನೋಡಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. </p>
</div>

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

.alert-message.block-message

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ಇದು ಎಚ್ಚರಿಕೆ! ನೀವೇ ಪರಿಶೀಲಿಸಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಪ್ರೆಸೆಂಟ್ ಕಮೊಡೊ ಕರ್ಸಸ್ ಮ್ಯಾಗ್ನಾ, ಅಥವಾ ಸ್ಕೆಲೆರಿಸ್ಕ್ ನಿಸ್ಲ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಟ್.

ಈ ಕ್ರಮ ಕೈಗೊಳ್ಳಿ ಅಥವಾ ಇದನ್ನು ಮಾಡಿ

ಓಹ್ ಸ್ನ್ಯಾಪ್! ನೀವು ದೋಷವನ್ನು ಹೊಂದಿದ್ದೀರಿ! ಇದನ್ನು ಮತ್ತು ಅದನ್ನು ಬದಲಾಯಿಸಿ ಮತ್ತು ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ .

ಡುಯಿಸ್ ಮೊಲ್ಲಿಸ್ ನಾನ್ ಕಮೊಡೊ ಲಕ್ಟಸ್
ನಿಸಿ ಎರಟ್ ಪೋರ್ಟಿಟರ್ ಲಿಗುಲಾ
ಎಗೆಟ್ ಲ್ಯಾಸಿನಿಯಾ ಓಡಿಯೊ ಸೆಮ್ ನೆಕ್ ಎಲಿಟ್

ಈ ಕ್ರಮ ಕೈಗೊಳ್ಳಿ ಅಥವಾ ಇದನ್ನು ಮಾಡಿ

ಚೆನ್ನಾಗಿದೆ! ನೀವು ಈ ಎಚ್ಚರಿಕೆ ಸಂದೇಶವನ್ನು ಯಶಸ್ವಿಯಾಗಿ ಓದಿದ್ದೀರಿ. ಕಮ್ ಸೊಸೈಸ್ ನ್ಯಾಟೋಕ್ ಪೆನಾಟಿಬಸ್ ಮತ್ತು ಮ್ಯಾಗ್ನಿಸ್ ಡಿಸ್ ಪಾರ್ಚುರಿಯೆಂಟ್ ಮಾಂಟೆಸ್, ನಾಸ್ಸೆಟರ್ ರಿಡಿಕ್ಯುಲಸ್ ಮಸ್. ಮೆಸೆನಾಸ್ ಫೌಸಿಬಸ್ ಮೊಲ್ಲಿಸ್ ಇಂಟರ್ಡಮ್.

ಈ ಕ್ರಮ ಕೈಗೊಳ್ಳಿ ಅಥವಾ ಇದನ್ನು ಮಾಡಿ

ಉದಾಹರಣೆ ಕೋಡ್

<div class = "ಎಚ್ಚರಿಕೆ-ಸಂದೇಶ ಬ್ಲಾಕ್-ಸಂದೇಶ ಎಚ್ಚರಿಕೆ" > 
  <a class = "close" href = "#" > × </a>  
  <p><strong> ಪವಿತ್ರ ಗ್ವಾಕಮೋಲ್! ಇದು ಎಚ್ಚರಿಕೆ! </strong> ನೀವೇ ನೋಡಿ, ನೀವು ತುಂಬಾ ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತಿಲ್ಲ. ನುಲ್ಲಾ ವಿಟೇ ಎಲಿಟ್ ಲಿಬೆರೊ, ಎ ಫಾರೆಟ್ರಾ ಆಗ್. ಪ್ರೆಸೆಂಟ್ ಕಮೊಡೊ ಕರ್ಸಸ್ ಮ್ಯಾಗ್ನಾ, ಅಥವಾ ಸ್ಕೆಲೆರಿಸ್ಕ್ ನಿಸ್ಲ್ ಕಾನ್ಸೆಕ್ಟೆಟರ್ ಎಟ್. </p>
  <div class = "ಎಚ್ಚರಿಕೆ-ಕ್ರಿಯೆಗಳು" > 
    <a class = "btn small" href = "#" > ಈ ಕ್ರಮವನ್ನು ಕೈಗೊಳ್ಳಿ </a> <a class = "btn small" href = "#" > ಅಥವಾ ಇದನ್ನು ಮಾಡಿ </a>     
  </div>
</div>

ಮಾದರಿಗಳು

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ಸಾಧನಸಲಹೆಗಳು

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ಲೊರೆಮ್ ಇಪ್ಸಮ್ ಡಾಲರ್ ಸಿಟ್ ಅಮೆಟ್ ಇಲ್ಲೋ ದೋಷ ಇಪ್ಸಮ್ ವೆರಿಟಾಟಿಸ್ ಅಥವಾ ಇಸ್ಟೆ ಪರ್ಸ್ಪಿಸಿಯಾಟಿಸ್ ಇಸ್ಟೆ ವಾಲ್ಯೂಪ್ಟಾಸ್ ನೇಟಸ್ ಇಲ್ಲೊ ಕ್ವಾಸಿ ಒಡಿಟ್ ಅಥವಾ ನೇಟಸ್ ನ್ಯಾಟಸ್ ಇನ್ ಕ್ವೆಕ್ವೆಂಟರ್ ಪರಿಣಾಮ, ಅಥವಾ ನ್ಯಾಟಸ್ ಇಲ್ಲೊ ವೊಲುಪ್ಟೇಮ್ ಒಡಿಟ್ ಪರ್ಸ್ಪಿಸಿಯಾಟಿಸ್ ಟಮ್ ಡೊಲೊರುಪಾಂಟಿಯಮ್ ಟು ಲೌಡಾಂಟಿಯಮ್. Voluptasdicta eaque betae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accasantium Totam Totam architecto explicabo sit quasi fugit fugit, Totam doloremque unde Sunt sed dicta quae voluptas que voluptas que voluptas .

ಪಾಪೋವರ್ಸ್

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

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಡೆಯಿರಿ »

ಶುರುವಾಗುತ್ತಿದೆ

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಲೈಬ್ರರಿಯೊಂದಿಗೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಸಂಯೋಜಿಸುವುದು ತುಂಬಾ ಸುಲಭ. ಕೆಳಗೆ ನಾವು ಮೂಲಭೂತ ವಿಷಯಗಳ ಮೇಲೆ ಹೋಗುತ್ತೇವೆ ಮತ್ತು ನೀವು ಪ್ರಾರಂಭಿಸಲು ಕೆಲವು ಅದ್ಭುತವಾದ ಪ್ಲಗಿನ್‌ಗಳನ್ನು ನಿಮಗೆ ಒದಗಿಸುತ್ತೇವೆ!

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಡಾಕ್ಸ್ ವೀಕ್ಷಿಸಿ »

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

jQuery ಮತ್ತು Ender ನೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ಹೊಸ ಕಸ್ಟಮ್ ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್‌ನ ಕೆಲವು ಪ್ರಾಥಮಿಕ ಘಟಕಗಳನ್ನು ಜೀವಂತಗೊಳಿಸಿ . ನಿಮ್ಮ ನಿರ್ದಿಷ್ಟ ಅಭಿವೃದ್ಧಿ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ಅವುಗಳನ್ನು ವಿಸ್ತರಿಸಲು ಮತ್ತು ಮಾರ್ಪಡಿಸಲು ನಾವು ನಿಮ್ಮನ್ನು ಪ್ರೋತ್ಸಾಹಿಸುತ್ತೇವೆ.

ಫೈಲ್	ವಿವರಣೆ
bootstrap-modal.js	ನಮ್ಮ ಮೋಡಲ್ ಪ್ಲಗಿನ್ ಸಾಂಪ್ರದಾಯಿಕ ಮೋಡಲ್ JS ಪ್ಲಗಿನ್ ಅನ್ನು ಸೂಪರ್ ಸ್ಲಿಮ್ ಟೇಕ್ ಆಗಿದೆ! ಟ್ವಿಟರ್‌ನಲ್ಲಿ ನಮಗೆ ಅಗತ್ಯವಿರುವ ಬರಿಯ ಕಾರ್ಯವನ್ನು ಮಾತ್ರ ಸೇರಿಸಲು ನಾವು ವಿಶೇಷ ಕಾಳಜಿ ವಹಿಸಿದ್ದೇವೆ.
bootstrap-alerts.js	ಎಚ್ಚರಿಕೆಯ ಪ್ಲಗಿನ್ ಎಚ್ಚರಿಕೆಗಳಿಗೆ ನಿಕಟ ಕಾರ್ಯವನ್ನು ಸೇರಿಸಲು ಒಂದು ಸೂಪರ್ ಸಣ್ಣ ವರ್ಗವಾಗಿದೆ.
bootstrap-dropdown.js	ಈ ಪ್ಲಗಿನ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟಾಪ್‌ಬಾರ್ ಅಥವಾ ಟ್ಯಾಬ್ಡ್ ನ್ಯಾವಿಗೇಷನ್‌ಗಳಿಗೆ ಡ್ರಾಪ್‌ಡೌನ್ ಪರಸ್ಪರ ಕ್ರಿಯೆಯನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿ ಆಗಿದೆ.
bootstrap-scrollspy.js	ScrollSpy ಪ್ಲಗಿನ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟಾಪ್‌ಬಾರ್‌ಗೆ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಸ್ವಯಂ ನವೀಕರಿಸುವ ನ್ಯಾವಿಯನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿದೆ.
bootstrap-buttons.js	ScrollSpy ಪ್ಲಗಿನ್ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಟಾಪ್‌ಬಾರ್‌ಗೆ ಸ್ಕ್ರಾಲ್ ಸ್ಥಾನದ ಆಧಾರದ ಮೇಲೆ ಸ್ವಯಂ ನವೀಕರಿಸುವ ನ್ಯಾವಿಯನ್ನು ಸೇರಿಸುವುದಕ್ಕಾಗಿದೆ.
bootstrap-tabs.js	ಈ ಪ್ಲಗಿನ್ ಸ್ಥಳೀಯ ವಿಷಯದ ಮೂಲಕ ಸೈಕ್ಲಿಂಗ್ ಮಾಡಲು ತ್ವರಿತ, ಡೈನಾಮಿಕ್ ಟ್ಯಾಬ್ ಮತ್ತು ಮಾತ್ರೆ ಕಾರ್ಯವನ್ನು ಸೇರಿಸುತ್ತದೆ.
bootstrap-twipsy.js	ಜೇಸನ್ ಫ್ರೇಮ್ ಬರೆದ ಅತ್ಯುತ್ತಮ jQuery.tipsy ಪ್ಲಗಿನ್ ಆಧರಿಸಿ; twipsy ಒಂದು ನವೀಕರಿಸಿದ ಆವೃತ್ತಿಯಾಗಿದೆ, ಇದು ಚಿತ್ರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿಲ್ಲ, ಅನಿಮೇಷನ್‌ಗಳಿಗಾಗಿ css3 ಮತ್ತು ಸ್ಥಳೀಯ ಶೀರ್ಷಿಕೆ ಸಂಗ್ರಹಣೆಗಾಗಿ ಡೇಟಾ-ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುತ್ತದೆ!
bootstrap-popover.js	ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸೇರಿಸಲು ಪಾಪೋವರ್ ಪ್ಲಗಿನ್ ಸರಳ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು boostrap-twipsy.js ಪ್ಲಗಿನ್ ಅನ್ನು ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನಲ್ಲಿ ಪಾಪೋವರ್‌ಗಳನ್ನು ಸೇರಿಸುವಾಗ ಆ ಫೈಲ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳಲು ಮರೆಯದಿರಿ!

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅಗತ್ಯವಿದೆಯೇ?

ಇಲ್ಲ! ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಮೊದಲ ಮತ್ತು ಅಗ್ರಗಣ್ಯವಾಗಿ ಸಿಎಸ್ಎಸ್ ಲೈಬ್ರರಿಯಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಒಳಗೊಂಡಿರುವ ಶೈಲಿಗಳ ಮೇಲೆ ಮೂಲಭೂತ ಸಂವಾದಾತ್ಮಕ ಪದರವನ್ನು ಒದಗಿಸುತ್ತದೆ.

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

ಹೆಚ್ಚಿನ ಮಾಹಿತಿಗಾಗಿ ಮತ್ತು ಕೆಲವು ಲೈವ್ ಡೆಮೊಗಳನ್ನು ನೋಡಲು, ದಯವಿಟ್ಟು ನಮ್ಮ ಪ್ಲಗಿನ್ ದಸ್ತಾವೇಜನ್ನು ಪುಟವನ್ನು ನೋಡಿ .

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು Preboot ನಿಂದ ನಿರ್ಮಿಸಲಾಗಿದೆ, ಇದು ಮಿಕ್ಸಿನ್‌ಗಳು ಮತ್ತು ವೇರಿಯೇಬಲ್‌ಗಳ ಮುಕ್ತ-ಮೂಲ ಪ್ಯಾಕ್ ಅನ್ನು ಕಡಿಮೆ ಜೊತೆಯಲ್ಲಿ ಬಳಸಬಹುದಾಗಿದೆ , ಇದು ವೇಗವಾದ ಮತ್ತು ಸುಲಭವಾದ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ 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 ; 
  }
  ...
}

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

#ಗ್ರೇಡಿಯಂಟ್ {
  ...
  . ಲಂಬ ( @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 ); // ಮಾನದಂಡ  
  }
  ...
}

ಕಾರ್ಯಾಚರಣೆ

ಕೆಳಗಿನಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಶಕ್ತಿಯುತ ಮಿಕ್ಸಿನ್‌ಗಳನ್ನು ರಚಿಸಲು ಫ್ಯಾನ್ಸಿ ಪಡೆಯಿರಿ ಮತ್ತು ಕೆಲವು ಗಣಿತವನ್ನು ನಿರ್ವಹಿಸಿ.

// ಗ್ರಿಡಿಟ್ಯೂಡ್
@GridColumns : 16 ;       
@GridColumnWidth : 40px ;   
@gridGutterWidth : 20px ;   
@siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));                 
 
// ಕೆಲವು ಕಾಲಮ್‌ಗಳನ್ನು ಮಾಡಿ
. ಕಾಲಮ್‌ಗಳು ( @columnSpan : 1 ) {  
  ಅಗಲ : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));         
}

ಕಂಪೈಲಿಂಗ್ ಕಡಿಮೆ

/lib/ ನಲ್ಲಿ ಫೈಲ್‌ಗಳನ್ನು ಮಾರ್ಪಡಿಸಿದ ನಂತರ .less, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್-*.*.*.css ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್-*.*.*.min.css ಫೈಲ್‌ಗಳನ್ನು ಮರುಸೃಷ್ಟಿಸಲು ನೀವು ಅವುಗಳನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ. ನೀವು GitHub ಗೆ ಪುಲ್ ವಿನಂತಿಯನ್ನು ಸಲ್ಲಿಸುತ್ತಿದ್ದರೆ, ನೀವು ಯಾವಾಗಲೂ ಮರುಕಂಪೈಲ್ ಮಾಡಬೇಕು.

ಕಂಪೈಲ್ ಮಾಡುವ ಮಾರ್ಗಗಳು

ವಿಧಾನ	ಹಂತಗಳು
ಮೇಕ್‌ಫೈಲ್‌ನೊಂದಿಗೆ ನೋಡ್	ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸುವ ಮೂಲಕ npm ನೊಂದಿಗೆ ಕಡಿಮೆ ಕಮಾಂಡ್ ಲೈನ್ ಕಂಪೈಲರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿ: $ npm ಕಡಿಮೆ ಸ್ಥಾಪಿಸಿ ಒಮ್ಮೆ ಸ್ಥಾಪಿಸಿದ `make`ನಂತರ ನಿಮ್ಮ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಡೈರೆಕ್ಟರಿಯ ಮೂಲದಿಂದ ರನ್ ಮಾಡಿ ಮತ್ತು ನೀವು ಸಿದ್ಧರಾಗಿರುವಿರಿ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ನೀವು ವಾಚರ್ ಅನ್ನು ಸ್ಥಾಪಿಸಿದ್ದರೆ, ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಲಿಬ್‌ನಲ್ಲಿ`make watch` ನೀವು ಫೈಲ್ ಅನ್ನು ಎಡಿಟ್ ಮಾಡಿದಾಗಲೆಲ್ಲಾ ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮರುನಿರ್ಮಾಣ ಮಾಡಲು ನೀವು ಓಡಬಹುದು (ಇದು ಅಗತ್ಯವಿಲ್ಲ, ಕೇವಲ ಅನುಕೂಲಕರ ವಿಧಾನ).
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್	ಇತ್ತೀಚಿನ Les.js ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಅದರ ಮಾರ್ಗವನ್ನು (ಮತ್ತು ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್) ನಲ್ಲಿ ಸೇರಿಸಿ `head`. <link rel = "stylesheet/less" href = "/path/to/bootstrap.less" > <script src = "/path/to/less.js" ></script> .less ಫೈಲ್‌ಗಳನ್ನು ಮರುಕಂಪೈಲ್ ಮಾಡಲು, ಅವುಗಳನ್ನು ಉಳಿಸಿ ಮತ್ತು ನಿಮ್ಮ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿ. Less.js ಅವುಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಸಂಗ್ರಹಿಸುತ್ತದೆ.
ಕಮಾಂಡ್ ಲೈನ್	ನೀವು ಈಗಾಗಲೇ ಕಡಿಮೆ ಆಜ್ಞಾ ಸಾಲಿನ ಉಪಕರಣವನ್ನು ಸ್ಥಾಪಿಸಿದ್ದರೆ, ಈ ಕೆಳಗಿನ ಆಜ್ಞೆಯನ್ನು ಚಲಾಯಿಸಿ: $lessc ./lib/bootstrap.less > bootstrap.css `--compress`ನೀವು ಕೆಲವು ಬೈಟ್‌ಗಳನ್ನು ಉಳಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ ಆ ಆಜ್ಞೆಯಲ್ಲಿ ಸೇರಿಸಲು ಮರೆಯದಿರಿ !
ಕಡಿಮೆ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್	ಅನಧಿಕೃತ ಮ್ಯಾಕ್ ಅಪ್ಲಿಕೇಶನ್ .ಲೆಸ್ ಫೈಲ್‌ಗಳ ಡೈರೆಕ್ಟರಿಗಳನ್ನು ವೀಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ವೀಕ್ಷಿಸಿದ .ಲೆಸ್ ಫೈಲ್ ಅನ್ನು ಉಳಿಸಿದ ನಂತರ ಸ್ಥಳೀಯ ಫೈಲ್‌ಗಳಿಗೆ ಕೋಡ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ. ನೀವು ಬಯಸಿದರೆ, ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಚಿಕ್ಕದಾಗಿಸಲು ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ ಆದ್ಯತೆಗಳನ್ನು ಟಾಗಲ್ ಮಾಡಬಹುದು ಮತ್ತು ಸಂಕಲಿಸಿದ ಫೈಲ್‌ಗಳು ಯಾವ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಕೊನೆಗೊಳ್ಳುತ್ತವೆ.

CSS ಹಾಟ್‌ಲಿಂಕ್ ಮಾಡಿ

ಅದನ್ನು ಕಡಿಮೆ ಬಳಸಿ

GitHub ನಲ್ಲಿ ಫೋರ್ಕ್

ಬೂಟ್‌ಸ್ಟ್ರ್ಯಾಪ್ ಸಂಕ್ಷಿಪ್ತ ಇತಿಹಾಸ, ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳ ಬಗ್ಗೆ

ಇತಿಹಾಸ

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

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

ತ್ವರಿತ-ಪ್ರಾರಂಭದ ಉದಾಹರಣೆಗಳು

ಗ್ರಿಡ್ ಸಿಸ್ಟಮ್ ಸ್ಟ್ಯಾಂಡರ್ಡ್ 940px ಅನ್ನು ರಾಕ್ ಮಾಡಿ ಅಥವಾ ನಿಮ್ಮದೇ ಆದ ರೋಲ್ ಮಾಡಿ

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

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

ಕಾಲಮ್‌ಗಳನ್ನು ಸರಿದೂಗಿಸುವುದು

ಗೂಡುಕಟ್ಟುವ ಕಾಲಮ್‌ಗಳು

ನೆಸ್ಟೆಡ್ ಕಾಲಮ್‌ಗಳ ಉದಾಹರಣೆ

ನಿಮ್ಮ ಸ್ವಂತ ಗ್ರಿಡ್ ಅನ್ನು ರೋಲ್ ಮಾಡಿ

ಗ್ರಿಡ್ ಒಳಗೆ

ಈಗ ಕಸ್ಟಮೈಸ್ ಮಾಡಲು

ವೆಬ್‌ಪುಟಗಳನ್ನು ರಚಿಸಲು ಲೇಔಟ್‌ಗಳು ಮೂಲ ಟೆಂಪ್ಲೇಟ್‌ಗಳು

ಸ್ಥಿರ ಲೇಔಟ್

ದ್ರವ ವಿನ್ಯಾಸ

ಮುದ್ರಣಕಲೆ ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು, ಪಟ್ಟಿಗಳು ಮತ್ತು ಇತರ ಇನ್ಲೈನ್ ​​ಪ್ರಕಾರದ ಅಂಶಗಳು

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

h1. ಶಿರೋನಾಮೆ 1

h2. ಶಿರೋನಾಮೆ 2

h3. ಶಿರೋನಾಮೆ 3

h4. ಶಿರೋನಾಮೆ 4

h5. ಶಿರೋನಾಮೆ 5

h6. ಶಿರೋನಾಮೆ 6

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

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

ಇತರೆ. ಅಂಶಗಳು

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

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

ವಿಳಾಸಗಳು

ಸಂಕ್ಷೇಪಣಗಳು

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

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

ಪಟ್ಟಿಗಳು

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

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

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

ವಿವರಣೆdl

ಕೋಡ್

ಕೋಡ್ ಅನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲಾಗುತ್ತಿದೆ

ಇನ್ಲೈನ್ ​​ಲೇಬಲ್ಗಳು

ಯಾವುದನ್ನಾದರೂ ಲೇಬಲ್ ಮಾಡಿ

ಚಿತ್ರಗಳು ಮತ್ತು ವೀಡಿಯೊಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವ ಮಾಧ್ಯಮ

ಮಾಧ್ಯಮ ಗ್ರಿಡ್

ಉದಾಹರಣೆ ಥಂಬ್‌ನೇಲ್‌ಗಳು

ದೊಡ್ಡದು

ಮಾಧ್ಯಮ

ಚಿಕ್ಕದು

ಅವುಗಳನ್ನು ಕೋಡಿಂಗ್ ಮಾಡಲಾಗುತ್ತಿದೆ

ಟೇಬಲ್ಸ್ ಫಾರ್, ನೀವು ಊಹಿಸಿದಂತೆ, ಕೋಷ್ಟಕ ಡೇಟಾ

ಕಟ್ಟಡ ಕೋಷ್ಟಕಗಳು

ಉದಾಹರಣೆ: ಡೀಫಾಲ್ಟ್ ಟೇಬಲ್ ಶೈಲಿಗಳು

ಉದಾಹರಣೆ: ಮಂದಗೊಳಿಸಿದ ಕೋಷ್ಟಕ

ಉದಾಹರಣೆ: ಬಾರ್ಡರ್ಡ್ ಟೇಬಲ್

ಉದಾಹರಣೆ: ಜೀಬ್ರಾ ಪಟ್ಟೆ

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

ರೂಪಗಳು

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

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

ಫಾರ್ಮ್ ಕ್ಷೇತ್ರ ಗಾತ್ರಗಳು

ಗುಂಡಿಗಳು

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

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

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

ಲಿಂಕ್‌ಗಳು

ಗುಂಡಿಗಳು

ನ್ಯಾವಿಗೇಷನ್

ಸ್ಥಿರ ಟಾಪ್ಬಾರ್

ಯೋಜನೆಯ ಹೆಸರು

ಏನದು

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

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

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

ಮೂಲ ಟ್ಯಾಬ್‌ಗಳ ಉದಾಹರಣೆ

ಮೂಲ ಮಾತ್ರೆಗಳ ಉದಾಹರಣೆ

ಬ್ರೆಡ್ ತುಂಡುಗಳು

ಮುದ್ರಣಕಲೆ ಶೀರ್ಷಿಕೆಗಳು, ಪ್ಯಾರಾಗಳು, ಪಟ್ಟಿಗಳು ಮತ್ತು ಇತರ ಇನ್ಲೈನ್ ಪ್ರಕಾರದ ಅಂಶಗಳು

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

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

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

ವಿವರಣೆ`dl`

ಇನ್ಲೈನ್ ಲೇಬಲ್ಗಳು