मुख्य सामग्री पर जाओ डॉक्स नेविगेशन पर जाओ
Check
in English

बूटस्ट्रैप कन्नै शुरू करो

बूटस्ट्रैप इक शक्तिशाली, फीचर-पैक फ्रंटएंड टूलकिट ऐ। कुसै बी चीज़ दा निर्माण करो-प्रोटोटाइप थमां लेइयै उत्पादन तगर-मिनटें च।

इस पेज पर

जल्दी शुरू करो

बूटस्ट्रैप दे प्रोडक्शन-रेडी सीएसएस ते जावास्क्रिप्ट गी सीडीएन दे राहें बिना कुसै बी बिल्ड स्टेप दी लोड़ दे शामल करियै शुरू करो. इस बूटस्ट्रैप कोडपेन डेमो कन्नै इसगी व्यवहार च दिक्खो .


  1. index.htmlअपने प्रोजेक्ट रूट च इक नमीं फाइल बनाओ । मोबाइल डिवाइस च उचित प्रतिक्रियाशील व्यवहार<meta name="viewport"> आस्तै टैग गी बी शामल करो ।

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

  2. बूटस्ट्रैप दा सीएसएस ते जेएस शामल करो। <link>टैग गी <head>साढ़े CSS आस्तै च रक्खो , ते <script>साढ़े जावास्क्रिप्ट बंडल आस्तै टैग (जिंदे च ड्रॉपडाउन, पॉपर, ते टूलटिप्स गी पोजीशन करने आस्तै पॉपर बी शामल ऐ) गी बंद करने थमां पैह् ले रक्खो </body>. साढ़े सीडीएन लिंक दे बारे च होर जानने लेई .

    <!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

    तुस पॉपर ते साढ़े जेएस गी बी बक्खरा गै शामल करी सकदे ओ। जेकर तुस ड्रॉपडाउन, पोपोवर, जां टूलटिप्स दा इस्तेमाल करने दी योजना नेईं बनांदे ओ तां पॉपर गी शामल नेईं करियै किश किलोबाइट बचाओ.

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

  3. नमस्कार, दुनिया! अपने बूटस्ट्रैप पृष्ठ गी दिक्खने लेई अपनी पसंद दे ब्राउज़र च पृष्ठ खोह् ल्लो. हुण तुस अपना लेआउट बनाइयै , दर्जन भर घटकें गी जोड़ियै , ते साढ़े आधिकारिक उदाहरणें दा उपयोग करियै बूटस्ट्रैप कन्नै निर्माण शुरू करी सकदे ओ .

संदर्भ दे तौर पर, इत्थै साढ़े प्राथमिक सीडीएन लिंक न।

ब्यौरा यूआरएल ऐ
सीएसएस दा https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
जे एस https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js

तुस सामग्री पृष्ठ च सूचीबद्ध साढ़े कुसै बी अतिरिक्त बिल्ड गी आनने लेई बी सीडीएन दा इस्तेमाल करी सकदे ओ .

अगले कदम

जे एस घटक

उत्सुक ऐ जे कुन कुन घटकें गी स्पश्ट रूप कन्नै साढ़ी जावास्क्रिप्ट ते पॉपर दी लोड़ ऐ? हेठ दित्ते गेदे शो घटक लिंक पर क्लिक करो। जेकर तुस सामान्य पृष्ठ संरचना दे बारे च बिल्कुल अनिश्चित ओ तां इक उदाहरण पृष्ठ टेम्पलेट आस्तै पढ़दे रौह्ओ.

जावास्क्रिप्ट दी लोड़ आह् ले घटक दस्सो
  • बर्खास्त करने लेई अलर्ट
  • टॉगल करने आह् ली राज्यें ते चेकबॉक्स/रेडियो कार्यक्षमता आस्तै बटन
  • सारे स्लाइड व्यवहारें, नियंत्रणें, ते संकेतकें लेई हिंडोला
  • सामग्री दी दृश्यता गी टॉगल करने आस्तै संकुचित करो
  • प्रदर्शत करने ते स्थिति आस्तै ड्रॉपडाउन ( पोपर दी बी लोड़ ऐ )
  • प्रदर्शत करने, स्थिति, ते स्क्रॉल व्यवहार आस्तै मोडल
  • उत्तरदायी व्यवहारें गी लागू करने आस्तै साढ़े कोलैप्स ते ऑफकैनवास प्लगइन्स गी विस्तार देने आस्तै नवबार
  • सामग्री फलक गी टॉगल करने आस्तै टैब प्लगइन कन्नै नवें
  • प्रदर्शत करने, स्थिति, ते स्क्रॉल व्यवहार आस्तै ऑफकैनवास
  • स्क्रॉल व्यवहार ते नेविगेशन अपडेट आस्तै स्क्रॉलस्पाई
  • प्रदर्शन ते खारिज करने आस्तै टोस्ट
  • प्रदर्शत करने ते स्थिति आस्तै टूलटिप्स ते पोपोवर ( पोपर दी बी लोड़ ऐ )

महत्वपूर्ण ग्लोबल्स

बूटस्ट्रैप मुट्ठी भर महत्वपूर्ण वैश्विक शैलियें ते सेटिंग्स गी कम्म पर लांदा ऐ, जेह् ड़ी लगभग खास तौर पर क्रॉस ब्राउज़र शैलियें दे सामान्यीकरण आस्तै तैयार ऐ। चलो गोता लगाओ।

एचटीएमएल 5 डॉक्टटाइप ऐ

बूटस्ट्रैप गी HTML5 डॉकटाइप दा इस्तेमाल करने दी लोड़ ऐ. इसदे बिना तुसें गी कुछ फंकी ते अधूरा स्टाइलिंग दिक्खने गी मिलग।

<!doctype html>
<html lang="en">
  ...
</html>

उत्तरदायी मेटा टैग

बूटस्ट्रैप गी मोबाइल पैह् ले विकसित कीता गेआ ऐ , इक रणनीति जिस च अस पैह् ले मोबाइल डिवाइस आस्तै कोड गी अनुकूलित करदे आं ते उसदे बाद CSS मीडिया क्वेरी दा उपयोग करियै जरूरी रूप कन्नै घटकें गी स्केल करदे आं। सारे डिवाइस आस्तै उचित रेंडरिंग ते टच ज़ूमिंग गी सुनिश्चत करने आस्तै, अपने <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

इसदा इक उदाहरण तुस त्वरित शुरूआत च कार्रवाई च दिक्खी सकदे ओ .

बॉक्स-साइज करना

CSS च होर सीधे आकार देने आस्तै, अस ग्लोबल box-sizingवैल्यू content-boxगी border-box. एह् सुनिश्चत paddingकरदा ऐ जे इक तत्व दी अंतिम गणना कीती गेदी चौड़ाई गी प्रभावित नेईं करदा ऐ, पर एह् किश त्रीयें पार्टी दे सॉफ्टवेयर जि’यां गूगल मैप ते गूगल कस्टम सर्च इंजन कन्नै समस्या पैदा करी सकदा ऐ।

दुर्लभ मौके पर तुसेंगी इसगी ओवरराइड करने दी लोड़ ऐ, निम्नलिखित जनेह् कुसै चीज़ दा इस्तेमाल करो:

.selector-for-some-widget {
  box-sizing: content-box;
}

उपर्युक्त स्निपेट कन्नै, नेस्टेड तत्व-जिंदे च ::beforeते दे राहें उत्पन्न कीती गेदी सामग्री बी शामल ऐ-सब उस आस्तै ::afterनिर्दिश्ट गी विरासत च लैंगन .box-sizing.selector-for-some-widget

सीएसएस ट्रिक्स पर बॉक्स मॉडल ते साइजिंग दे बारे च होर जानने लेई .

रिबूट करो

बेहतर क्रॉस-ब्राउज़र रेंडरिंग आस्तै, अस आम HTML तत्वें गी थोह् ड़ी-मती राय आह् ले रीसेट उपलब्ध करोआने दे कन्नै-कन्नै ब्राउज़रें ते डिवाइसें च असंगतिएं गी ठीक करने आस्तै रिबूट दा इस्तेमाल करदे आं।

समुदाय

बूटस्ट्रैप दे विकास दे बारे च जानकारी रक्खो ते इनें मददगार संसाधनें कन्नै समुदाय तगर पुज्जो।

तुस ट्विटर पर @getbootstrap गी बी नवीनतम गपशप ते लाजवाब म्यूजिक वीडियो लेई फॉलो करी सकदे ओ।