Bootstrap काफी famous हो रहा है, Web Development में Bootstrap की Demand काफी बढ़ती जा रही है। इसका Reason Bootstrap से Front End Work को काफी आसान बना सकते है। Responsive Website Design में भी इसका काफी अधिक Use होता है। अगर आप एक Front End Designer है, या Web Developer है। तो आपको Bootstrap सीखना चाहिए इसलिए इस Article में Bootstrap क्या है  (What is Bootstrap in Hindi), Bootstrap कैसे काम करता है (How works Bootstrap in Hindi) , Bootstrap कैसे सीखे (How to learn Bootstrap in Hindi) आदि सब कुछ बतायेगे।

Bootstrap क्या है। (What is Bootstrap in Hindi)

Bootstrap क्या है ? Bootstrap एक Open-Source Javascript framework है। इसे HTML CSS Javascript में बनाया गया है। ये Front End Development Framework है | जिसके द्वारा Fast और Responsive website को Design  कर सकते है । ये एक Mobile First Responsive Framework है।

लगभग new जो High Quality की Website आ रही है। उन सभी में Bootstrap का Use हुआ होता है। इस समय Bootstrap के द्वारा Web designer अपने काम को भी काफी आसान बना रहे है। क्युकी यदि HTML CSS के द्वारा Responsive Web design करना हो तो काफी अधिक समय लग जाता है। लेकिन Bootstrap इसी काम को बहुत Easy कर देता है। अब हम History of Bootstrap in Hindi के बारे में जानते है। 

Bootstrap का इतिहास  History of Bootstrap in Hindi

Bootstrap को 2010 में twitter Company के Developer Mark Otto (मार्क ऑटो ) और Jacob Thornton जैकब थॉर्टन ने अपनी Team के साथ मिलकर बनाया था। शुरुआत में इसका नाम Twitter Blueprint रखा गया क्युकी उन्होंने इसे सिर्फ Twitter के लिए बनाया था। लेकिन उसके बाद 19 August 2011 को उन्होंने इसे Github पे Publish कर दिया वह पे इन्होने Bootstrap नाम का एक Open Source Project बनाया था। ये Project बिलकुल फ्री था। वैसे तो और भी बहुत से Framework है। लेकिन ये आसान और fast होने की वजह से कुछ ही समय में बहुत अधिक Popular हो गया।

Bootstrap से क्या – क्या बना सकते है ?

Bootstrap के द्वारा Menu, Header, Dropdown, Typography, Forms, Button, Tables, Navigation, Glyphicons, Pagination, Alert, Progress Bar, tab, Slider आदि Design और Responsive बना सकते है।

Bootstrap कैसे काम करता है ? (How Works Bootstrap in Hindi )

Bootstrap हमें एक Template के रूप में फ्री File Provide करता है जो CSS, Javascript Gliphicon आदि होती है। इनको हम अपने Project में Add कर सकते है। इनकी CSS js को HTML Class से Access कर सकते है। अब मै आपको अच्छे से समझता हूँ। Bootstrap File में क्या – क्या होता है।

CSS –  Bootstrap की CSS File Global setting और सभी Advanced Features के साथ में होती है। इसमें सभी HTML Element को Style करने की क्षमता होती है तथा इसमें Advance level का Grid System होता है।

Components – Bootstrap हमें Reusable Components भी Provide करता है। जिसमे Popup , Dropdown , Navigation , Alert iconography आदि होता है।

Javascript Plugin – Bootstrap हमें Jquery Plugin भी Provide करता है। जिसके द्वारा हम Front End Programing के बहुत सारे Work Bootstrap से आसानी से कर सकते है।

Bootstrap की Files को CDN और Download करके Use कर सकते है। अगर हम इसको CDN के द्वारा Use करते है। तो सिर्फ हम इसको HTML Classes के द्वारा Access कर पाएंगे। लेकिन अगर इसको Download करके Use करते है। तो हम इसको Customize भी कर सकेंगे।

Bootstrap का Use कैसे करे ? How to Use Bootstrap in Hindi

हमने ऊपर बताया है। इसको हम CDN के द्वारा और Download करके Use कर सकते है। तो इसको Use करने के 2 तरीके है।

1. हमें Bootstrap को Download करने के लिए इसकी Official Site पे जाना होगा। इसकी Official Site Getbootstrap.com है।

2. अगर आप बिना Download किये Use करना चाहते है तो आप Get Started पे Click करे। वहाँ पे आपको Link Show होगी।

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>

ये Links आपको Show होगी ये CSS और js की है। जिनको आप अपने HTML Project में लगाकर Bootstrap Use कर सकते है।

3. अगर आप इसे Download करना चाहते है तो Download पे click करे। Bootstrap की File आपको Zip File में मिलेगी। इसको Unzip कर ले। और जहा Use करना चाहते है। उसमे Bootstrap का Folder ले जाये।

4. अगर आप उसका Folder अपने HTML file folder में देते है। तो कुछ इस तरह से Use कर सकते है।

<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/Bootstrap.js"></script>

आपको अब मै आपको एक Simple HTML Example दिखता हूँ।

<!DOCTYPE html>
<html>
<head>
	<title>New with Bootstrap</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" media="screen">
<script src="bootstrap/js/Bootstrap.js"></script>
</head>
<body>
<h1 class="bg-success">Demo</h1>
</body>
</html>

ये आप देख सकते है। इसमें सिर्फ एक Bootstrap की Class लगी है bg-success