ಜಂಬೊಟ್ರಾನ್
ಹೀರೋ ಯುನಿಟ್ ಶೈಲಿಯ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಹಗುರವಾದ, ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕ.
ನಿಮ್ಮ ಸೈಟ್ನಲ್ಲಿ ಪ್ರಮುಖ ಮಾರ್ಕೆಟಿಂಗ್ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ಸಂಪೂರ್ಣ ವೀಕ್ಷಣೆ ಪೋರ್ಟ್ ಅನ್ನು ಐಚ್ಛಿಕವಾಗಿ ವಿಸ್ತರಿಸಬಹುದಾದ ಹಗುರವಾದ, ಹೊಂದಿಕೊಳ್ಳುವ ಘಟಕ.
ಹಲೋ, ವಿಶ್ವ!
ಇದು ಸರಳ ಹೀರೋ ಯೂನಿಟ್ ಆಗಿದೆ, ವೈಶಿಷ್ಟ್ಯಗೊಳಿಸಿದ ವಿಷಯ ಅಥವಾ ಮಾಹಿತಿಗೆ ಹೆಚ್ಚಿನ ಗಮನವನ್ನು ಸೆಳೆಯಲು ಸರಳವಾದ ಜಂಬೊಟ್ರಾನ್ ಶೈಲಿಯ ಘಟಕವಾಗಿದೆ.
ಇದು ಮುದ್ರಣಕಲೆಗಾಗಿ ಯುಟಿಲಿಟಿ ತರಗತಿಗಳನ್ನು ಬಳಸುತ್ತದೆ ಮತ್ತು ದೊಡ್ಡ ಕಂಟೇನರ್ನೊಳಗೆ ಬಾಹ್ಯಾಕಾಶ ವಿಷಯಕ್ಕೆ ಅಂತರವನ್ನು ನೀಡುತ್ತದೆ.
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
ಜಂಬೊಟ್ರಾನ್ ಪೂರ್ಣ ಅಗಲವನ್ನು ಮಾಡಲು, ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳಿಲ್ಲದೆ, .jumbotron-fluid
ಮಾರ್ಪಡಿಸುವ ವರ್ಗವನ್ನು ಸೇರಿಸಿ ಮತ್ತು ಒಂದು .container
ಅಥವಾ .container-fluid
ಒಳಗೆ ಸೇರಿಸಿ.
ದ್ರವ ಜಂಬೊಟ್ರಾನ್
ಇದು ಮಾರ್ಪಡಿಸಿದ ಜಂಬೊಟ್ರಾನ್ ಆಗಿದ್ದು ಅದು ತನ್ನ ಪೋಷಕರ ಸಂಪೂರ್ಣ ಸಮತಲ ಜಾಗವನ್ನು ಆಕ್ರಮಿಸುತ್ತದೆ.
<div class="jumbotron jumbotron-fluid">
<div class="container">
<h1 class="display-4">Fluid jumbotron</h1>
<p class="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
</div>
</div>