Source

आमुख

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

त्वरित आरम्भ

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

CSS इति

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

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

ज स

अस्माकं बहवः घटकाः कार्यं कर्तुं जावास्क्रिप्ट् इत्यस्य उपयोगस्य आवश्यकतां अनुभवन्ति । विशेषतः, तेषां कृते jQuery , Popper.js , अस्माकं स्वकीयानि JavaScript प्लगिन्स् च आवश्यकानि सन्ति । निम्नलिखित <script>s स्वपृष्ठानां अन्ते समीपे, समापनटैगस्य पूर्वमेव </body>, तान् सक्षमीकरणाय स्थापयन्तु । jQuery प्रथमं अवश्यमेव आगच्छेत्, ततः Popper.js, ततः अस्माकं JavaScript प्लगिन्स्।

वयं jQuery इत्यस्य slim build इत्यस्य उपयोगं कुर्मः , परन्तु पूर्णसंस्करणम् अपि समर्थितम् अस्ति ।

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

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

अस्माकं bootstrap.bundle.jsतथा च Popperbootstrap.bundle.min.js समाविष्टम् , परन्तु jQuery न . Bootstrap मध्ये किं समाविष्टम् इति विषये अधिकसूचनार्थं कृपया अस्माकं सामग्रीविभागं पश्यन्तु ।

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

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

नवीनतम डिजाइन एवं विकास मानकों के साथ अपने पृष्ठों को अवश्य स्थापित करें। तस्य अर्थः अस्ति यत् 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-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

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

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

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

HTML5 doctype इति

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

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

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

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

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

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