ಬೂಟ್ ಸ್ಟ್ರಾಪ್ 2.3.2: ಪ್ರಾರಂಭಿಕ ಮಾರ್ಗದರ್ಶಿ

ಟ್ವಿಟರ್ ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ಲಾಂ .ನ

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ಒಂದು ಸಿಎಸ್ಎಸ್ ಫ್ರೇಮ್ವರ್ಕ್ ಅದು ನೆಟ್‌ವರ್ಕ್‌ನಾದ್ಯಂತ ಬಹಳ ಜನಪ್ರಿಯವಾಗಿದೆ. ಅವರ ಶೈಲಿಗಳು ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ಸಾಮಾಜಿಕ ನೆಟ್ವರ್ಕ್ಗಳಲ್ಲಿ ನೋಡಲಾಗುತ್ತದೆ ಟುಯೆಂಟಿ y ಟ್ವಿಟರ್. ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುವಾಗ ಇದರ ಬಳಕೆಯು ನಮಗೆ ಸಾಕಷ್ಟು ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ ಏಕೆಂದರೆ ಇದು ಎಲ್ಲಾ ಸಾಧನಗಳಿಗೆ ಸೂಕ್ತವಾದ ಸ್ವಚ್ page ವಾದ ಪುಟ ಶೈಲಿಯನ್ನು ರಚಿಸುವಲ್ಲಿನ ಎಲ್ಲಾ ಕೆಲಸ ಮತ್ತು ಶ್ರಮವನ್ನು ಉಳಿಸುತ್ತದೆ. ಈ ಚೌಕಟ್ಟಿನಲ್ಲಿ ಬಳಸಲಾದ ಶೈಲಿಗಳನ್ನು ಸಮಾಲೋಚಿಸುವಾಗ, ಅವು ನಮಗೆ ಪರಿಚಿತವಾಗಿವೆ ಎಂದು ನಾವು ಅರಿತುಕೊಳ್ಳುತ್ತೇವೆ, ಏಕೆಂದರೆ ಇಂದು ಅನೇಕ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿವೆ.

ರಚನೆ

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ರಚನೆ ಚಿತ್ರ

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ದ್ರವ ರಚನೆ

ನಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಮೊಬೈಲ್ ಫೋನ್ ಮತ್ತು ಟ್ಯಾಬ್ಲೆಟ್‌ಗಳಿಂದ ಪ್ರವೇಶಿಸಲು, ಬೂಟ್‌ಸ್ಟ್ರಾಪ್ ನಮಗೆ ನೀಡುವ ದ್ರವ ರಚನೆಯನ್ನು ನಾವು ಬಳಸಬೇಕಾಗುತ್ತದೆ. ಈ ರಚನೆಯ ಬಳಕೆ ತುಂಬಾ ಸರಳವಾಗಿದೆ, ಎಲ್ಲವೂ ಅಂಶಗಳನ್ನು ಆಧರಿಸಿದೆ span ಅದು ನಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ ಲೆಔಟ್ ನಮ್ಮ ವೆಬ್ ವಿನ್ಯಾಸ. ನಂತರ, ನಾವು ಈ ವಿನ್ಯಾಸವನ್ನು a ನಿಂದ ಪ್ರವೇಶಿಸಿದಾಗ ಸ್ಮಾರ್ಟ್ಫೋನ್ o ಟ್ಯಾಬ್ಲೆಟ್, ಇದು ನ್ಯಾವಿಗೇಷನ್‌ನ ಗುಣಮಟ್ಟವನ್ನು ಗಣನೀಯವಾಗಿ ಸುಧಾರಿಸುವ ಸಾಧನಕ್ಕೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ನಾವು ಬಳಸುತ್ತೇವೆ span ದ್ರವ ರಚನೆಯೊಳಗಿನ ತಾರ್ಕಿಕ ವಿಭಾಗಗಳಲ್ಲಿನ ವರ್ಗಗಳೊಂದಿಗೆ, ಅಂದರೆ :.

<div class="row-fluid">
   <div class="span2">Contenido</div>
</div>

ಅಲ್ಲಿ ಸಂಖ್ಯೆ 2 ಸ್ಪ್ಯಾನ್‌ನ ಗಾತ್ರವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಪ್ರತಿಯೊಂದು ಸಾಲಿನಲ್ಲಿ ಗಾತ್ರ 12 ರ 1 ವ್ಯಾಪ್ತಿಗಳು ಅಥವಾ 2 ರ ಗಾತ್ರ 6 ಕ್ಕೆ ಸಾಕಷ್ಟು ಸ್ಥಳಾವಕಾಶವಿದೆ, ಇದನ್ನು ನೀವು ಬಯಸಿದಂತೆ ವಿತರಿಸಬಹುದು. ಒಂದು ಸಾಲಿನ ಜಾಗವನ್ನು ಮೀರಿದ ನಂತರ ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮುಂದಿನದಕ್ಕೆ ಹೋಗುತ್ತದೆ, ಇದು ನಮಗೆ ಬಳಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ span ಲೈನ್ ವಿರಾಮವನ್ನು ರಚಿಸಲು ಗಾತ್ರ 12. ನಾವು ಕೆಲವು ಬಿಟ್ಟುಬಿಡಲು ಬಯಸಿದರೆ span ಒಂದನ್ನು ರಚಿಸುವಾಗ, ಅಂದರೆ 4 ರಿಂದ ಪ್ರಾರಂಭಿಸಿ span, ಮತ್ತು 3 ಗಾತ್ರವನ್ನು ಅನ್ವಯಿಸಿ, ನಾವು ಈ ಕೋಡ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ:

<div class="span2 offset4">Contenido</div>

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

ಸ್ಕಿಪ್ಪಿಂಗ್ ಆಫ್‌ಸೆಟ್ ವರ್ಗದೊಂದಿಗೆ ವ್ಯಾಪಿಸಿದೆ

ಸ್ಕಿಪ್ಪಿಂಗ್ ಆಫ್‌ಸೆಟ್ ವರ್ಗದೊಂದಿಗೆ ವ್ಯಾಪಿಸಿದೆ

ಪ್ರತಿ ಸಾಧನಕ್ಕೆ ವಿಭಿನ್ನ ವಿನ್ಯಾಸ

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ಸಾಧನಗಳಿಗಾಗಿ ವಿಶೇಷ ತರಗತಿಗಳೊಂದಿಗೆ ಚಿತ್ರ

ಪ್ರತಿ ಸಾಧನವನ್ನು ಪ್ರತ್ಯೇಕಿಸಲು ಸಿಎಸ್ಎಸ್ ತರಗತಿಗಳು

ಪ್ರತಿಯೊಂದು ರೀತಿಯ ಸಾಧನಗಳಿಗೆ ವಿಭಿನ್ನ ವಿನ್ಯಾಸವನ್ನು ಅನ್ವಯಿಸಲು ನಾವು ಪ್ರತಿ ತಾರ್ಕಿಕ ವಿಭಾಗವನ್ನು ಯಾವ ಸಾಧನಕ್ಕೆ ಆಧಾರಿತವಾಗಿದೆ ಎಂದು ಹೇಳುತ್ತೇವೆ, ಈ ಕೆಳಗಿನ ವರ್ಗಗಳನ್ನು ಬಳಸಿ:

ಈ ರೀತಿಯಾಗಿ, ಒಂದೇ URL ಹೊಂದಿರುವ ಪ್ರತಿ ಸಾಧನಕ್ಕೂ ನಾವು ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನ ವಿನ್ಯಾಸವನ್ನು ತೋರಿಸಬಹುದು.

ಗುಂಡಿಗಳು

ಬಣ್ಣ ಗುಂಡಿಗಳು

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ನೀಡುವ ಗುಂಡಿಗಳ ಪಟ್ಟಿ

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ನಮಗೆ ಬಣ್ಣದ ಗುಂಡಿಗಳ ಸ್ವಚ್ ಸಂಗ್ರಹವನ್ನು ನೀಡುತ್ತದೆ, ಇದರ ಬಳಕೆ ತುಂಬಾ ಸರಳವಾಗಿದೆ:

<a class="btn btn-success" href="URL">
   Nombre del Botón
</a>

ಎಲ್ಲಿ btn btn-success ಗುಂಡಿಯ ಬಣ್ಣವನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಅದನ್ನು ಬದಲಾಯಿಸಲು, ನಾವು ಅದನ್ನು ಹಿಂದಿನ ಚಿತ್ರದಲ್ಲಿ ತೋರಿಸಿರುವ ತರಗತಿಗಳೊಂದಿಗೆ ಮಾತ್ರ ಬದಲಾಯಿಸಬೇಕಾಗುತ್ತದೆ.

ಬೂಟ್ ಸ್ಟ್ರಾಪ್ ಅನ್ನು ಸ್ಥಾಪಿಸಲಾಗುತ್ತಿದೆ

ಈ ಸಿಎಸ್ಎಸ್ ಫ್ರೇಮ್‌ವರ್ಕ್ ಸ್ಥಾಪನೆಗಾಗಿ, ಪೋಸ್ಟ್‌ನ ಕೊನೆಯಲ್ಲಿ ನಾನು ಬಿಡುವ ಲಿಂಕ್‌ನಿಂದ ನಾವು ಜಿಪ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ನಾವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ ನಮ್ಮ HTML ಫೈಲ್‌ನ ತಲೆಯಲ್ಲಿ.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="./css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="./js/bootstrap.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>

ಸಿಎಸ್ಎಸ್ ಮತ್ತು ಜೆಎಸ್ ಫೈಲ್‌ಗಳು ನಮ್ಮ HTML ಫೈಲ್‌ನಂತೆಯೇ ಒಂದೇ ಫೋಲ್ಡರ್‌ನಲ್ಲಿವೆ ಎಂದು ನಾವು ಖಚಿತಪಡಿಸಿಕೊಂಡ ನಂತರ, ನಾವು ನಮ್ಮ ಪ್ರತಿಕ್ರಿಯಾಶೀಲರಾಗಿರುತ್ತಾರೆ ವೆಬ್‌ಸೈಟ್ ವಿನ್ಯಾಸವನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು.

ಹೆಚ್ಚಿನ ಮಾಹಿತಿ - ಫಾರ್ಮ್ ಮೌಲ್ಯಮಾಪನ

ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ - ಬೂಟ್ ಸ್ಟ್ರಾಪ್: ಸಿಎಸ್ಎಸ್ ಫ್ರೇಮ್ವರ್ಕ್


ನಿಮ್ಮ ಅಭಿಪ್ರಾಯವನ್ನು ಬಿಡಿ

ನಿಮ್ಮ ಈಮೇಲ್ ವಿಳಾಸ ಪ್ರಕಟವಾದ ಆಗುವುದಿಲ್ಲ. ಅಗತ್ಯವಿರುವ ಜಾಗ ಗುರುತಿಸಲಾಗಿದೆ *

*

*

  1. ಡೇಟಾಗೆ ಜವಾಬ್ದಾರಿ: ಮಿಗುಯೆಲ್ ಏಂಜೆಲ್ ಗಟಾನ್
  2. ಡೇಟಾದ ಉದ್ದೇಶ: ನಿಯಂತ್ರಣ SPAM, ಕಾಮೆಂಟ್ ನಿರ್ವಹಣೆ.
  3. ಕಾನೂನುಬದ್ಧತೆ: ನಿಮ್ಮ ಒಪ್ಪಿಗೆ
  4. ಡೇಟಾದ ಸಂವಹನ: ಕಾನೂನುಬದ್ಧ ಬಾಧ್ಯತೆಯನ್ನು ಹೊರತುಪಡಿಸಿ ಡೇಟಾವನ್ನು ಮೂರನೇ ವ್ಯಕ್ತಿಗಳಿಗೆ ಸಂವಹನ ಮಾಡಲಾಗುವುದಿಲ್ಲ.
  5. ಡೇಟಾ ಸಂಗ್ರಹಣೆ: ಆಕ್ಸೆಂಟಸ್ ನೆಟ್‌ವರ್ಕ್‌ಗಳು (ಇಯು) ಹೋಸ್ಟ್ ಮಾಡಿದ ಡೇಟಾಬೇಸ್
  6. ಹಕ್ಕುಗಳು: ಯಾವುದೇ ಸಮಯದಲ್ಲಿ ನೀವು ನಿಮ್ಮ ಮಾಹಿತಿಯನ್ನು ಮಿತಿಗೊಳಿಸಬಹುದು, ಮರುಪಡೆಯಬಹುದು ಮತ್ತು ಅಳಿಸಬಹುದು.

  1.   ಅಲೆಜಾಂದ್ರ ಡಿಜೊ

    ಈ ಚೌಕಟ್ಟಿನಲ್ಲಿ ನೀವು ಹೆಚ್ಚಿನ ಟ್ಯುಟೋರಿಯಲ್ ಹೊಂದಿದ್ದೀರಾ ???