आज हम सीखेंगे Bootstrap क्या है अगर हमें अपने website को आकर्षित बनाना है तो हमें html और CSS के साथ bootstrap का उपयोग करना जरुरी है bootstrap एक framework है यानि की जहाँ पर html css और javascript से मिलकर बना हुआ code store रहता है जिसे हमें केवल copy करके अपने website पर paste करना होता है जिससे हमें बहुत सारा code लिखने की जरुरत नहीं होती है.
जिससे हमारा टाइम बचता है bootstrap का इस्तेमाल responsive website यानि कि mobile , tablet , laptop और desktop के size के लिए design बनाने के लिए किया जाता है. जिससे हम form, button, carousel, navbar, dropdown, table, loader, card, tooltip आदि चीज़ों का इस्तेमाल कर सकते है अभी bootstrap का latest version bootstrap 4 चल रहा है.
Table of Contents
Bootstrap 4 Install और download कैसे करे Bootstrap क्या है
हमें bootstrap को download करने के लिए सबसे पहले bootstrap की website पर जाए. header right side में download button पर click करें. उसके बाद compile CSS and JS के नीचे download button पर click करें bootstrap download हो जाने के बाद हमें एक zip file मिलेगी.
file को right click कर extract कर लें जहां पर आपको एक CSS और JS folder मिलेगा CSS folder से bootstrap.min.css file को copy कर अपने project के CSS folder में paste कर लें इसी तरह JS folder से bootstrap.min.js file को copy कर अपने project के JS folder में paste कर लें..
अब हमें एक text editor जैसे – notepad, notepad++, sublime और VS code में से किसी एक को download करें तथा अपने project को open कर लें. एक new file बनाकर उसे index.html नाम से save कर लें. तथा उसमे html का basic stracture बना लें. हमें <head> tag के अंदर bootstrap.min.css file का link देना है तथा <body> tag के last में bootstrap.min.js का path देना है उदाहरण के माध्यम से नीचे बताया गया है.
bootstrap के साथ हमें jqquery.min.js और popper.min.js link देना बहुत जरुरी है जो हमें dropdown, carousel, button आदि चीज़ो को चलाने के लिए इस्तेमाल किया जाता है.
Bootstrap component का इस्तेमाल कैसे करे
दूसरा तरीका हम अपने index.html file में cdn link लगाकर bootstrap add कर सकते है जिसके बाद हमें bootstrap की file को download करने की जरुरत नहीं होती है. bootstrap की website पर जाकर download button पर click कर हम jqery.min.js, popper.min.js तथा bootstrap.min.js link को copy कर हम अपने index.html file में paste कर सकते है.
अपनी website पर bootstrap के component लगाने के लिए जैसे- button, accordion, modal, table, tooltip, breadcrum आदि हमें हमेशा component की class को index.html में <body> tag के अंदर paste करना होता है. bootstrap के सारे component हमें bootststrap की website में component पर click कर देख सकते है.
component में code के साथ हमें उसका result भी दिखाया गया है जैसे button के code के साथ button भी दर्शाया गया है अपनी आवश्यकतानुसार हम code की copy कर अपने website में paste कर सकते है.
Bootstrap 4 button क्या है
अपनी website में हमें bootstrap के button को लगाने के लिए component में जाकर button पर click करें. अपनी आवश्यकतानुसार किसी एक button का code copy कर अपने html file में <body> tag के अंदर paste कर दे file को save करने के बाद अपनी file को web browser में खोलें जहां पर आपको button का result दिखेगा.
<button type"button" class="btn primary">SEND</button>bootstrap की class में primary button का color by default blue आता है आप CSS के द्वारा button का color बदल सकते है. CSS file में हम .primary class में button का color, size, border, font-size change कर सकते है.
Bootstrap 4 Navbar
navbar का इस्तेमाल करने के component में जाकर navbar को select कर लें तथा अपनी जरुरत के हिसाब से code copy कर अपने index.html file में <body> tag के अंदर paste कर लें तथा file को save कर लें तथा browser में अपने file को देखें.
Bootstrap 4 table
अपनी website में table का इस्तेमाल करने के लिए component में table पर जाकर table का code copy कर अपने html file में लगा लें तथा हम table की class CSS में लिखकर उसकी styling कर सकते है.
Bootstrap 4 form
form का इस्तेमाल करने के लिए bootstrap की website से form का code copy कर अपने website पर paste कर लें तथा form के class की CSS से styling कर सकते है.
Bootstrap 4 carousel
carousel से हम बहुत सारी images को slide कर सकते है जिसके लिए हम component में से carousel code को उठाकर अपने website में लगा लें तथा <img> tag के अंदर image का path दे दें. हमारा carousel तब तक काम नहीं करेगा जब तक हम <body> tag के अंदर jquery और popper cdn link add नहीं करेंगे link add करने के बारे में ऊपर जानकारी दी गई है.
Bootstrap loader क्या है – what is bootstrap loader in Hindi
जब हम अपनी website या उसके अंदर किसी page को खोलते है तो हमें एक round circle घूमता हुआ दिखाई देता है जिसे हम loader कहते है bootstrap में हम loader को spinner भी कहते है जिसका इस्तेमाल हम अपनी website में कर सकते है.
loader का इस्तेमाल करने के लिए component में spinner पर click कर अपना पसंदीदा loader code की copy कर अपने html file में paste कर लें तथा अपने file को browser पर खोलने पर उसमें एक loader घूमता हुआ दिखाई देगा तथा CSS से हम loader की width, height, color, position set कर सकते है.
इसी तरह हम table, badge, breadcrumb, card, dropdown, modal, tooltip, toasts, progress bar आदि चीज़ों को लगाकर हम अपनी website को आकर्षित बना सकते है.
bootstrap क्या है इसका इस्तेमाल और bootstrap component के बारे में बताया गया है अगर bootstrap से संबंधित सवाल है आप नीचे comment box में पूछ सकते है.
