बूटस्ट्रैप ट्यूटोरियल
ट्विटर बूटस्ट्रैप हाल के समय में सबसे लोकप्रिय फ्रंट एंड फ्रेमवर्क है। यह तेज और आसान वेब विकास के लिए चिकना, सहज और शक्तिशाली मोबाइल पहला फ्रंट-एंड फ्रेमवर्क है। यह HTML, CSS और जावास्क्रिप्ट का उपयोग करता है। यह ट्यूटोरियल आपको बूटस्ट्रैप फ्रेमवर्क की मूल बातें सिखाएगा, जिसके उपयोग से आप आसानी से वेब प्रोजेक्ट बना सकते हैं। ट्यूटोरियल को बूटस्ट्रैप बेसिक स्ट्रक्चर, बूटस्ट्रैप सीएसएस, बूटस्ट्रैप लेआउट कंपोनेंट्स और बूटस्ट्रैप प्लगइन्स जैसे वर्गों में विभाजित किया गया है। इनमें से प्रत्येक खंड में सरल और उपयोगी उदाहरणों से संबंधित विषय हैं।
बूटस्ट्रैप क्यों सीखें?
Mobile first approach - बूटस्ट्रैप 3, फ्रेमवर्क में अलग-अलग फाइलों में उनके बजाय पूरे पुस्तकालय में पहली मोबाइल शैली होती है।
Browser Support - यह सभी लोकप्रिय ब्राउज़रों द्वारा समर्थित है।
Easy to get started- HTML और CSS के ज्ञान से कोई भी बूटस्ट्रैप के साथ शुरुआत कर सकता है। इसके अलावा बूटस्ट्रैप आधिकारिक साइट पर एक अच्छा दस्तावेज है।
Responsive design- बूटस्ट्रैप के संवेदनशील सीएसएस डेस्कटॉप, टैबलेट और मोबाइल को समायोजित करता है। उत्तरदायी डिजाइन के बारे में अधिक अध्याय बूटस्ट्रैप उत्तरदायी डिजाइन में है।
डेवलपर्स के लिए एक इंटरफेस बनाने के लिए एक साफ और एक समान समाधान प्रदान करता है।
इसमें सुंदर और कार्यात्मक अंतर्निहित घटक शामिल हैं जो अनुकूलित करना आसान है।
यह वेब आधारित अनुकूलन भी प्रदान करता है।
और सबसे अच्छी बात यह एक खुला स्रोत है।
हैलो वर्ल्ड बूटस्ट्रैप का उपयोग कर।
बस आपको बूटस्ट्रैप के बारे में थोड़ा सा उत्साह देने के लिए, मैं आपको एक छोटा पारंपरिक बूटस्ट्रैप हैलो वर्ल्ड कार्यक्रम देने जा रहा हूं, आप डेमो लिंक का उपयोग करके इसे आज़मा सकते हैं।
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<!-- Bootstrap -->
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src = "https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src = "https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src = "js/bootstrap.min.js"></script>
</body>
</html>
बूटस्ट्रैप के अनुप्रयोग
Scaffolding- बूटस्ट्रैप ग्रिड सिस्टम, लिंक शैलियों और पृष्ठभूमि के साथ एक बुनियादी संरचना प्रदान करता है। यह अनुभाग में विस्तार से कवर किया गया हैBootstrap Basic Structure
CSS- बूटस्ट्रैप वैश्विक सीएसएस सेटिंग्स, मौलिक एचटीएमएल तत्वों की विशेषता और एक्स्टेंसिबल कक्षाओं और उन्नत ग्रिड सिस्टम के साथ आता है। यह अनुभाग में विस्तार से कवर किया गया हैBootstrap with CSS।
Components- बूटस्ट्रैप में एक दर्जन से अधिक पुन: प्रयोज्य घटक शामिल हैं, जो कि आइकनोग्राफी, ड्रॉपडाउन, नेविगेशन, अलर्ट, पॉप-ओवर और बहुत कुछ प्रदान करने के लिए बनाए गए हैं। यह अनुभाग में विस्तार से कवर किया गया हैLayout Components।
JavaScript Plugins- बूटस्ट्रैप में एक दर्जन से अधिक कस्टम jQuery प्लगइन्स शामिल हैं। आप आसानी से उन सभी को, या एक-एक करके शामिल कर सकते हैं। यह अनुभाग में विवरण में कवर किया गया हैBootstrap Plugins।
Customize - आप बूटस्ट्रैप के घटकों को अनुकूलित कर सकते हैं, अपने बहुत ही संस्करण प्राप्त करने के लिए चर, और jQuery प्लग इन।
दर्शक
यह ट्यूटोरियल उन लोगों के लिए तैयार किया गया है, जिन्हें एचटीएमएल और सीएसएस का बुनियादी ज्ञान है और वेबसाइटों को विकसित करने का आग्रह है। इस ट्यूटोरियल को पूरा करने के बाद आप ट्विटर बूटस्ट्रैप का उपयोग करके वेब परियोजनाओं को विकसित करने में अपने आप को एक मध्यम स्तर की विशेषज्ञता प्राप्त करेंगे।
आवश्यक शर्तें
इससे पहले कि आप इस ट्यूटोरियल के साथ आगे बढ़ना शुरू करें, हम मान रहे हैं कि आप HTML और CSS की मूल बातों के बारे में पहले से ही जानते हैं। यदि आप इन अवधारणाओं के बारे में अच्छी तरह से नहीं जानते हैं तो हम आपको HTML ट्यूटोरियल और सीएसएस ट्यूटोरियल पर हमारे संक्षिप्त ट्यूटोरियल से गुजरने का सुझाव देंगे।