Bootstrap 5 Me Kya Nya Hai: Bootstrap, professional design web pages, के लिए modern, responsive, और dynamic interfaces design करने के लिए बनाया गया है , most popular front-end framework, एक major update Bootstrap 5 लेकर आ चुका है।
UPDATE : Bootstrap 5 alpha को कई months के refining के बाद officially 16 जून, 2020 को released किया गया था।इस version में सभी major changes के साथ, Boostrap 5 development team ने users को informed किया है कि current version अभी भी alpha version में है।
इस लेख में, Bootstrap 5’s के major updates पर एक नज़र डालें जिसमें integration और modification included हैं। Bootstrap 5 Me Kya Nya Hai ?
Bootstrap 5 Me Kya Nya Hai | What is new in bootstrap 5
changes की एक list है जो हम version 5 पर expect करते हैं जैसे कि jQuery को हटाना जो इस version के लिए एक major lift है।
Awaited changes in Bootstrap 5:
- Removed jQuery
- Responsive Font Sizes
- Drop Internet Explorer 10 and 11 support
- Card Decks Removed
- Navbar Optimization
- Custom SVG icon library
- Class updates
- Switch to Vanilla JavaScript
- Improved grid system
jQuery Removed
jQuery एक library है जो classic web scripting के लिए एक general-purpose abstraction layer offer करती है जो लगभग किसी भी web development requirements में efficient है।
इसकी extensible nature आपको document में elements को access करने की अनुमति देती है, जिसमें बहुत अधिक JavaScript लिखे बिना , जबकि बूटस्ट्रैप 8 से अधिक वर्षों से jQuery का उपयोग कर रहा है, jQuery काफी बड़ा और bloated framework बन गया है, जो कि बूटस्ट्रैप को छोड़कर किसी other plugin द्वारा उपयोग नहीं किया जा सकता है।
Moving forward, बूटस्ट्रैप 5 में pure or vanilla JavaScript code के साथ किसी भी jQuery querying features को करना होगा जो file size or of the framework के weight के साथ मदद करेगा।
इन्हे भी पढ़ें-
- Bootstrap Kya Hai? | What is Bootstrap in Hindi | Features Of Bootstrap
- Bootstrap Progress Bar Kaise Banaye? | Bootstrap Progress Bar
- Bootstrap Grid System Kya Hota Hai ? कैसे काम करता है?
Responsive Font Sizes
Multiple platforms or viewports में अच्छी दिखने वाली website Design करना कुछ डेवलपर्स के लिए काफी challenging हो रहा है। Media queries typography की common problems को solve करने के लिए एक great tool है।
जो developers को एक specific viewport पर typography elements के लिए specific font sizes specifying करके web pages पर typographies की appearance को control करने की अनुमति देता है।
बूटस्ट्रैप 5 by default responsive font sizes को enable करेगा जो RFS engine या Responsive Font Sizes के through user’s viewport के size के according typography element को automatically resize कर देगा।
RFS repository के According, RFS एक unit resizing engine है जिसे originally font sizes के लिए developed किया गया था। RFS units, like margin, padding, border-radius or box-shadow. जैसी किसी भी CSS property के लिए basically हर value को resize करने की ability offer करता है।
यह एक preprocessor या postprocessor-powered-mechanism है जो user’s के screen size or viewport के आधार पर appropriate font-size की value की automatically calculates करता है। यह Sass, Less, Stylus या PostCSS जैसे known preprocessors or postprocessor tools पर काम करता है।
For Example मान लीजिये आपने एक class ली है title नाम की h1 tag element की जिसको आप main title बनाना चाहते है section में।
.title {
font-size: calc(1.525rem + 3.3vw);}
@media (min-width: 1200px) {
.title {
font-size: 4rem;
}
}Drop Internet Explorer 10 and 11 Support
1995 में, Microsoft ने Internet Explorer को released किया जिसने सभी के दिमाग को उड़ा दिया क्योंकि पहली बार एक ब्राउज़र था जिसने CSS and Java applets को support किया था, जिसने इसे 2003 में 95% usage share के साथ सबसे अधिक used किए जाने वाले web browsers में से एक बना दिया था।
Fast forward to 2020, Internet Explorer Chrome, Firefox, and Edge के साथ relevant नहीं रह गया है। वास्तव में, यह web designer’s के बुरे सपने में से एक बन गया क्योंकि यह modern JavaScript standards को support नहीं करता है।
Internet Explorer के साथ काम करने के लिए, यह 10 या 11 हो, JavaScript codes को ES5 instead of ES6 पर compiled करने की आवश्यकता है, जो आपके projects के size को 30% तक increase देता है। यह obviously ES6 or newer JavaScript standards के features का उपयोग करने की आपकी ability को सीमित करता है।
यह even worse है कि यह modern CSS properties को support नहीं करता है जो आपकी modern web design potential को सीमित करता है।
बूटस्ट्रैप 5 में, बूटस्ट्रैप टीम ने Internet Explorer 10 and 11 के लिए support छोड़ने का फैसला किया, जो एक बहुत अच्छा कदम है क्योंकि यह web designers and developers को modern web pages को डिजाइन करने पर अधिक focus करेगा, बिना किसी कोड को तोड़ने की चिंता किए बिना old browsers पर।
Card Decks Removed
बूटस्ट्रैप 4 में, आपके लिए equal width and height वाले cards set करने में able होने के लिए, जो एक दूसरे से जुड़े नहीं हैं, आपको नीचे दिखाए गए अनुसार card decks का use करने की आवश्यकता है।
<div class=”card-deck”>
<div class=”card”>
<img class=”card-img-top” src=”…” alt=”Card image cap”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
</div>
</div>
<div class=”card”>
<img class=”card-img-top” src=”…” alt=”Card image cap”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This card has supporting text below as a natural lead-in to additional content.</p>
<p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
</div>
</div>
<div class=”card”>
<img class=”card-img-top” src=”…” alt=”Card image cap”>
<div class=”card-body”>
<h5 class=”card-title”>Card title</h5>
<p class=”card-text”>This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class=”card-text”><small class=”text-muted”>Last updated 3 mins ago</small></p>
</div>
</div>
</div>Navbar Optimization
Bootstrap navbar component Bootstrap का एक principal part है जो हर समय used किया जाता है। बूटस्ट्रैप के previous versions में, आपको इसे काम कराने के लिए एक decent amount में markup की आवश्यकता होती है।
हालाँकि, बूटस्ट्रैप 4 में उन्होंने एक nav or div HTML element और unordered list के use के through से इसे simplifie बनाया। navbar class वह default class है जिसे हमेशा component पर दिखाना पड़ता है।
By default, Bootstrap 4 अपने display option पर inline-block का use करता है लेकिन बूटस्ट्रैप 5 में, इसे removed कर दिया गया है। उन्होंने flex shorthand का भी use किया और navbars में containers की आवश्यकता के कारण brand margin को हटा दिया।
इसके अलावा, उन्होंने dropdown-menu-dark class के माध्यम से एक dark dropdown को भी implement किया है जो dropdown को एक black background में turns कर देता है जिसे हम usually navbar dropdown items पर देखते हैं।
Custom SVG Icon Library
बूटस्ट्रैप के version 3 में, input groups, alert, dropdowns और other useful Bootstrap components को iconography provide करने के लिए “Glyphicons” नामक font format में 250 reusable icon components हैं।
हालाँकि, बूटस्ट्रैप 4 में यह पूरी तरह से समाप्त हो गया था और web designers and developers को अपने web design में value add करने के लिए Font Awesome जैसे Font icon पर भरोसा करने या अपने स्वयं के custom SVG icons का उपयोग करने की आवश्यकता है।
बूटस्ट्रैप 5 में, बूटस्ट्रैप के co-founder Mark Otto द्वारा एक नए SVG icon library crafted को carefully तैयार किया गया है।अधिक जानने के लिए आप इस page https://icons.getbootstrap.com/ पर जा सकते हैं।
Class updates
<from>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last Name">
</div>
</div>
</form>Of course, बूटस्ट्रैप CSS के नए Class के बिना बूटस्ट्रैप 5 interesting नहीं होगा। बूटस्ट्रैप 4 में 1,500 से अधिक CSS classes हैं। कुछ CSS class होंगे जो अब नए version में available नहीं होंगे और कुछ CSS class जो जोड़े जाएंगे।
बूटस्ट्रैप 5 के official Github project tracking board के according, पहले से removed किये गए कुछ CSS classes हैं :
- form-row
- form-inline
- list-inline
- card-deck
यहां कुछ नए बूटस्ट्रैप 5 CSS class add किये गए हैं :
- gx-* classes control the horizontal/column gutter width
- gy-* classes control the vertical/row gutter width
- g-* classes control the horizontal & vertical gutter width
- row-cols-auto
Switch to Vanilla JavaScript
JavaScript web की programming language है। Most modern websites JavaScript द्वारा संचालित होती हैं और desktops, consoles, tablets, games and mobile phones पर सभी modern web browsers में JavaScript interpreters शामिल होते हैं, जो JavaScript को दुनिया में most universal programming language बनाता है।
बूटस्ट्रैप 5 में jQuery support को हटाने से size के बारे में चिंता किए बिना या किसी other non-essential functions को जोड़ने के बिना efficient vanilla JavaScript code को लिखने का रास्ता मिल गया है।
जबकि jQuery एक लंबे समय के लिए चारों ओर रहा है, अकेले jQuery का use करना पूरी तरह से impossible है क्योंकि अधिकांश भाग के लिए, jQuery जो करता है वह global scope में $ object जोड़ता है, जिसमें बहुत सारे functions हैं।
prototype की तरह more slick libraries भी JavaScript का alternative नहीं हैं, लेकिन common problems को solve करने के लिए केवल extra tools के रूप में मौजूद हैं। यदि आप जानते हैं कि JavaScript root से कैसे काम करता है, तो यह major ch ange आपको बहुत affect नहीं करेगा, लेकिन कुछ developers के लिए जो केवल jQuery का उपयोग करना जानते हैं, यह language सीखने का एक अच्छा मौका हो सकता है।
Conclusion
बूटस्ट्रैप 5 में आने वाले सभी new updates के साथ, यह कहना safe है कि Bootstrap team developer’s के benefit के लिए framework कोlightweight, simple, useful and faster बनाने के लिए विशाल कदम उठा रही है।
