Adding Bootstrap With a Website In Hindi:-

आज हम बूटस्ट्रैप को अपने वेबसाइट में जोड़ना सीखेंगे|

Boostrap(बूटस्ट्रैप) को अपने वेबसाइट में जोड़ने के लिए सबसे पहले तो आपको Boostrap(बूटस्ट्रैप) के वेबसाइट से इसे Download (डाउनलोड) करना होगा (इसे कैसे डाउनलोड करना है यह मैंने आपको Boostrap(बूटस्ट्रैप) के पहले पाठ में बता दिया है) |

जब Boostrap(बूटस्ट्रैप) के वेबसाइट से Boostrap(बूटस्ट्रैप) को डाउनलोड कर लेते हैं उसके बाद आपको एक जीप फाइल मिलता है (bootstrap-3.3.7-dist.Zip) आपको उस फाइल पर अपने माउस से राइट क्लिक करके Extract Hear (एक्सट्रेक्ट हेयर) पर क्लिक करना होगा उसके बाद आप उस फोल्डर को खोलें वहां आपको css, font, js नाम के 3 अलग-अलग फोल्डर दिखाई देंगे |

याद रखें कि Boostrap(बूटस्ट्रैप) का उपयोग अपने वेबसाइट पर करने के लिए आपको JQuery को भी अपने वेबसाइट से जोड़ना होगा वरना Boostrap(बूटस्ट्रैप) ठीक से काम नहीं करेगा |

JQuery को कैसे डाउनलोड करना है यह मैंने jquery के ट्यूटोरियल में बता दिया है आप उसे एक बार देख लीजिए |

JQuery को डाउनलोड करने के बाद आपको jquery का जो फाइल मिलता है उसे कॉपी करके आपको बूटस्ट्रैप के इस JS वाले फोल्डर के अंदर पेस्ट कर देना है

अब आपको इस फोल्डर को बंद कर देना है और उसके बाद अपने माउस से राइट बटन क्लिक करके इस फोल्डर Rename करना है और इसका नाम bootstrap-3.3.7-dist से बदलकर bootstrap कर दें|

<!DOCTYPE html>

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

  <script src="bootstrap/js/jquery.min.js"></script>

  <script src="bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

   <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div>

   <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div>

   <div class="col-xs-4"><h1>Web3Tutorial.com</h1></div>

</body>

</html>

अब इसके बाद आपको ऊपर लिखे कोड को कॉपी करके अपने टेक्स्ट एडिटर पर पेस्ट करना है और उसे first.html नाम से save करना है याद रखें कि इस first.html फाइल को वहीं पर सेव करें जहां पर कि आपने बूटस्ट्रैप फोल्डर को रखा है उदाहरण के लिए अगर आपने बूटस्ट्रैप फोल्डर को अपने डेक्सटॉप पर रखा है तो first.html फाइल को भी अपने डेक्सटॉप के ऊपर ही save करना है|

अब first.html पर डबल क्लिक करके उससे खोलिए |

Bootstrap Grid System In Hindi:-