in English

आमुख

Bootstrap इत्यनेन आरभत, यत् प्रतिक्रियाशीलं, मोबाईल-प्रथम-साइट्-निर्माणार्थं विश्वस्य सर्वाधिकं लोकप्रियं रूपरेखा अस्ति, jsDelivr इत्यनेन सह तथा च टेम्पलेट्-स्टार्टर-पृष्ठेन सह।

त्वरित आरम्भ

Bootstrap इत्येतत् शीघ्रं स्वस्य परियोजनायां योजयितुं इच्छति वा? jsDelivr, एकं निःशुल्कं मुक्तस्रोत CDN उपयुज्यताम् । संकुलप्रबन्धकस्य उपयोगेन वा स्रोतसञ्चिकानां डाउनलोड् कर्तुं आवश्यकता अस्ति वा? डाउनलोड् पृष्ठं प्रति गच्छन्तु .

CSS इति

अस्माकं CSS लोड् कर्तुं अन्येभ्यः सर्वेभ्यः शैलीपत्रेभ्यः पूर्वं <link>स्वस्य मध्ये stylesheet प्रतिलिपि-चिनोतु ।<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

ज स

अस्माकं बहवः घटकाः कार्यं कर्तुं जावास्क्रिप्ट् इत्यस्य उपयोगस्य आवश्यकतां अनुभवन्ति । विशेषतः, तेषां कृते jQuery , Popper , अस्माकं स्वकीयानि JavaScript प्लगिन्स् च आवश्यकानि सन्ति । वयं jQuery इत्यस्य slim build इत्यस्य उपयोगं कुर्मः , परन्तु पूर्णसंस्करणम् अपि समर्थितम् अस्ति ।

निम्नलिखित <script>s मध्ये एकं स्वपृष्ठस्य अन्ते समीपे, समापनटैगस्य पूर्वमेव , </body>तान् सक्षमीकरणाय स्थापयन्तु । jQuery प्रथमं आगच्छेत्, ततः Popper, ततः अस्माकं JavaScript प्लगिन्स्।

पोटलिका

अस्माकं द्वयोः बण्डल्योः एकेन सह प्रत्येकं Bootstrap JavaScript प्लगिन् समावेशयन्तु । उभयम् अपि bootstrap.bundle.jsच अस्माकं टूल्टिप्स तथा पोपोवर्स् कृते Popperbootstrap.bundle.min.js समाविष्टम् , परन्तु jQuery न । प्रथमं jQuery, ततः Bootstrap JavaScript बण्डल् समावेशयन्तु । Bootstrap मध्ये किं समाविष्टम् इति विषये अधिकसूचनार्थं कृपया अस्माकं सामग्रीविभागं पश्यन्तु ।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

पृथक्

यदि भवान् पृथक् स्क्रिप्ट् समाधानेन सह गन्तुं निश्चयति तर्हि Popper प्रथमं आगन्तुं अर्हति (यदि भवान् tooltips अथवा popovers इत्यस्य उपयोगं करोति), ततः अस्माकं JavaScript plugins इत्यस्य उपयोगं करोति।

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

घटकाः

जिज्ञासुः यत् केषां घटकानां स्पष्टतया jQuery, अस्माकं JavaScript, Popper च आवश्यकम् अस्ति? अधः show components इति लिङ्क् नुदन्तु । यदि भवान् पृष्ठसंरचनायाः विषये अनिश्चितः अस्ति तर्हि उदाहरणपृष्ठसारूप्यस्य कृते पठन् एव भवतु ।

जावास्क्रिप्ट् आवश्यकं घटकं दर्शयतु
  • निष्कासनार्थं सचेतनाः
  • टॉग्लिंग् स्टेट्स् कृते बटन्स् तथा चेकबॉक्स/रेडियो कार्यक्षमता
  • सर्वेषां स्लाइड् व्यवहाराणां, नियन्त्रणानां, सूचकानाम् च कृते हिंडोला
  • सामग्रीस्य दृश्यतां टॉगल कर्तुं संकुचयन्तु
  • प्रदर्शनार्थं स्थाननिर्धारणार्थं च ड्रॉपडाउन्स् ( Popper इत्यस्य अपि आवश्यकता अस्ति )
  • प्रदर्शनाय, स्थितिनिर्धारणाय, स्क्रॉलव्यवहाराय च मोडाल्स्
  • प्रतिक्रियाशीलव्यवहारं कार्यान्वितुं अस्माकं Collapse प्लगइन् विस्तारयितुं नवबारः
  • स्क्रॉल व्यवहारस्य नेविगेशन अद्यतनस्य च कृते Scrollspy
  • प्रदर्शयितुं स्थाननिर्धारणाय च टूलटिप्स तथा पोपोवर्स् ( Popper इत्यस्य अपि आवश्यकता अस्ति )

प्रारम्भिक टेम्पलेट

नवीनतम डिजाइन एवं विकास मानकों के साथ अपने पृष्ठों को अवश्य स्थापित करें। तस्य अर्थः अस्ति यत् HTML5 doctype इत्यस्य उपयोगः भवति तथा च सम्यक् प्रतिक्रियाशीलव्यवहारस्य कृते viewport meta tag इत्यस्य समावेशः भवति । सर्वं एकत्र स्थापयतु तर्हि भवतः पृष्ठानि एतादृशानि भवेयुः।

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

समग्रपृष्ठावश्यकतानां कृते भवतः केवलं तत् एव आवश्यकम्। स्वस्य साइट् इत्यस्य सामग्रीं घटकानि च विन्यस्तुं आरभ्यतुं Layout docs अथवा अस्माकं आधिकारिकं उदाहरणं पश्यन्तु ।

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

बूटस्ट्रैप् महत्त्वपूर्णवैश्विकशैल्याः सेटिंग्स् च मुष्टिभ्यां नियोजयति येषां विषये भवन्तः तस्य उपयोगं कुर्वन् अवगताः भवितुम् अर्हन्ति, ये सर्वे प्रायः अनन्यतया क्रॉस् ब्राउज़रशैल्याः सामान्यीकरणं प्रति सज्जीकृताः सन्ति आवाम् अन्तः गोतां कुर्मः।

HTML5 doctype इति

बूटस्ट्रैप् कृते HTML5 doctype इत्यस्य उपयोगः आवश्यकः अस्ति । तद्विना, भवन्तः किञ्चित् फन्की अपूर्णं स्टाइलिंग् पश्यन्ति, परन्तु तत् समावेशयित्वा किमपि पर्याप्तं हिचकी न भवेत्।

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

प्रतिक्रियाशील मेटा टैग

Bootstrap is developed mobile first , एकः रणनीतिः यस्मिन् वयं प्रथमं मोबाईल-उपकरणानाम् कृते कोडं अनुकूलयामः ततः CSS मीडिया-प्रश्नानां उपयोगेन आवश्यकरूपेण घटकान् स्केल अप कुर्मः। सर्वेषां उपकरणानां कृते सम्यक् प्रतिपादनं स्पर्शजूमिंग् च सुनिश्चित्य, प्रतिक्रियाशीलं viewport मेटा टैग् स्वस्य मध्ये योजयन्तु <head>।

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

अस्य उदाहरणं भवन्तः starter template मध्ये क्रियारूपेण द्रष्टुं शक्नुवन्ति |

पेटी-आकारः

CSS मध्ये अधिकं सरलं आकारनिर्धारणाय, वयं वैश्विकमूल्यं box-sizingto content-box- मध्ये परिवर्तयामः border-box। एतेन सुनिश्चितं paddingभवति यत् कस्यचित् तत्त्वस्य अन्तिमगणितविस्तारं न प्रभावितं करोति, परन्तु एतत् Google Maps तथा Google Custom Search Engine इत्यादिषु केषुचित् तृतीयपक्षसॉफ्टवेयरेषु समस्यां जनयितुं शक्नोति

दुर्लभे अवसरे भवद्भिः तत् अधिलिखितुं आवश्यकं भवति, तस्मिन् निम्नलिखितवत् किमपि उपयुज्यताम् ।

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

उपर्युक्तेन स्निपेट् इत्यनेन सह, नेस्टेड् तत्त्वानि—माध्यमेन उत्पन्ना सामग्री सहितम्— ::beforeसर्वे तदर्थं ::afterनिर्दिष्टं उत्तराधिकारं प्राप्नुयुः ।box-sizing.selector-for-some-widget

CSS Tricks इत्यत्र बॉक्स मॉडल् तथा साइजिंग् विषये अधिकं ज्ञातुं शक्नुवन्ति .

पुनः आरभत

उन्नत-क्रॉस्-ब्राउजर-प्रतिपादनार्थं, वयं ब्राउजर्-यन्त्राणां मध्ये असङ्गतिं सम्यक् कर्तुं Reboot इत्यस्य उपयोगं कुर्मः तथा च सामान्य-HTML-तत्त्वेभ्यः किञ्चित् अधिकं मतयुक्तं रीसेट्-प्रदानं कुर्मः

समुदाय

Bootstrap इत्यस्य विकासस्य विषये अद्यतनं भवन्तु तथा च एतैः सहायकसंसाधनैः समुदायं प्रति गच्छन्तु।

  • The Official Bootstrap Blog इति पठित्वा सदस्यतां गृह्यताम् .
  • IRC मध्ये सहकारिभिः Bootstrappers इत्यनेन सह गपशपं कुर्वन्तु। सर्वरे irc.libera.chat, #bootstrapचैनले।
  • कार्यान्वयन सहायता Stack Overflow (tagged bootstrap-4) इत्यत्र प्राप्यते ।
  • विकासकाः अधिकतम-आविष्कार- क्षमतायै npmbootstrap अथवा तत्सदृश-वितरण-तन्त्राणां माध्यमेन वितरणं कुर्वन् Bootstrap इत्यस्य कार्यक्षमतां परिवर्तयन्ति वा योजयन्ति वा इति संकुलेषु कीवर्डस्य उपयोगं कुर्वन्तु

नवीनतमं गपशपं भयानकं संगीतविडियो च द्रष्टुं भवान् ट्विट्टरे @getbootstrap इत्यस्य अनुसरणं अपि कर्तुं शक्नोति ।

CSPs तथा एम्बेडेड SVGs

ब्राउजर्-यन्त्रेषु च घटकान् निरन्तरं सुलभतया च शैलीं कर्तुं अस्माकं CSS मध्ये एम्बेडेड् SVG-इत्येतत् अनेकाः Bootstrap घटकाः समाविष्टाः सन्ति । अधिककठोर CSP विन्यासयुक्तानां संस्थानां कृते , वयं अस्माकं एम्बेडेड् SVGs इत्यस्य सर्वाणि उदाहरणानि दस्तावेजितवन्तः (यत् सर्वे मार्गेण प्रयुक्ताः सन्ति background-image) येन भवान् स्वविकल्पानां अधिकतया समीक्षां कर्तुं शक्नोति।

Based on community conversation , स्वस्य कोडबेस् मध्ये एतत् सम्बोधयितुं केचन विकल्पाः सन्ति यथा URLs स्थानीयतया होस्ट् कृतानि सम्पत्तिभिः प्रतिस्थापयितुं, चित्राणि निष्कासयितुं तथा च इनलाइन चित्राणां उपयोगः (सर्वघटकेषु सम्भवं नास्ति), तथा च भवतः CSP परिवर्तयितुं अस्माकं अनुशंसा अस्ति यत् स्वकीयानां सुरक्षानीतीनां सावधानीपूर्वकं समीक्षां कुर्वन्तु तथा च आवश्यके सति अग्रे गन्तुं उत्तममार्गस्य निर्णयं कुर्वन्तु।