in English

परिचय

Bootstrap, jsDelivr र टेम्प्लेट स्टार्टर पृष्ठको साथ उत्तरदायी, मोबाइल-पहिलो साइटहरू निर्माण गर्नको लागि विश्वको सबैभन्दा लोकप्रिय फ्रेमवर्कको साथ सुरू गर्नुहोस्।

द्रुत सुरुवात

तपाईको प्रोजेक्टमा बुटस्ट्र्याप छिटो थप्न खोज्दै हुनुहुन्छ? jsDelivr प्रयोग गर्नुहोस्, एक नि:शुल्क खुला स्रोत CDN। प्याकेज प्रबन्धक प्रयोग गर्दै वा स्रोत फाइलहरू डाउनलोड गर्न आवश्यक छ? डाउनलोड पृष्ठमा जानुहोस् ।

CSS

हाम्रो CSS लोड गर्नका लागि अन्य सबै स्टाइलसिटहरू अघि <link>आफ्नो स्टाइलसिटलाई प्रतिलिपि गरेर टाँस्नुहोस् ।<head>

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

JS

हाम्रा धेरै कम्पोनेन्टहरूलाई काम गर्न जाभास्क्रिप्टको प्रयोग चाहिन्छ। विशेष रूपमा, तिनीहरूलाई jQuery , Popper , र हाम्रो आफ्नै JavaScript प्लगइनहरू चाहिन्छ। हामी jQuery को स्लिम बिल्ड प्रयोग गर्छौं , तर पूर्ण संस्करण पनि समर्थित छ।

तिनीहरूलाई सक्षम गर्नको लागि, समापन ट्यागको ठीक अगाडि, तपाईंको पृष्ठहरूको अन्त्यमा निम्न मध्ये एउटा<script> राख्नुहोस् । </body>jQuery पहिले आउनु पर्छ, त्यसपछि Popper, र त्यसपछि हाम्रो JavaScript प्लगइनहरू।

बन्डल

हाम्रा दुई बन्डलहरू मध्ये एउटाको साथ प्रत्येक बुटस्ट्र्याप जाभास्क्रिप्ट प्लगइन समावेश गर्नुहोस्। दुबै bootstrap.bundle.jsर हाम्रो टूलटिपहरू र पपोभरहरूकोbootstrap.bundle.min.js लागि पोपर समावेश गर्दछ , तर jQuery होइन । पहिले jQuery समावेश गर्नुहोस्, त्यसपछि Bootstrap JavaScript बन्डल। बुटस्ट्र्यापमा के समावेश छ भन्ने बारे थप जानकारीको लागि, कृपया हाम्रो सामग्री खण्ड हेर्नुहोस्।

<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 पहिले आउनै पर्छ (यदि तपाइँ टूलटिप्स वा popovers प्रयोग गर्दै हुनुहुन्छ), र त्यसपछि हाम्रो JavaScript प्लगइनहरू।

<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 आवश्यक छ? तल शो कम्पोनेन्ट लिङ्क क्लिक गर्नुहोस्। यदि तपाइँ पृष्ठ संरचनाको बारेमा अनिश्चित हुनुहुन्छ भने, उदाहरण पृष्ठ टेम्प्लेटको लागि पढ्न जारी राख्नुहोस्।

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

स्टार्टर टेम्प्लेट

तपाइँका पृष्ठहरू नवीनतम डिजाइन र विकास मापदण्डहरूसँग सेट अप गर्न निश्चित हुनुहोस्। यसको मतलब HTML5 doctype प्रयोग गर्नु र उचित उत्तरदायी व्यवहारका लागि भ्युपोर्ट मेटा ट्याग सहित। यो सबै सँगै राख्नुहोस् र तपाइँका पृष्ठहरू यस्तो देखिनु पर्छ:

<!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>

समग्र पृष्ठ आवश्यकताहरूको लागि तपाईलाई आवश्यक छ। लेआउट कागजातहरू वा हाम्रो आधिकारिक उदाहरणहरूमा जानुहोस् तपाईंको साइटको सामग्री र कम्पोनेन्टहरू राख्न सुरु गर्न।

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

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

HTML5 doctype

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

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

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

बुटस्ट्र्याप मोबाइल पहिले विकसित गरिएको छ , एउटा रणनीति जसमा हामीले पहिले मोबाइल उपकरणहरूको लागि कोड अप्टिमाइज गर्छौं र त्यसपछि CSS मिडिया क्वेरीहरू प्रयोग गरेर आवश्यक पर्ने कम्पोनेन्टहरू मापन गर्छौं। सबै यन्त्रहरूका लागि उचित रेन्डरिङ र टच जुमिङ सुनिश्चित गर्न, तपाईंको ट्यागमा उत्तरदायी भ्यूपोर्ट मेटा ट्याग थप्नुहोस्<head> ।

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

तपाईंले स्टार्टर टेम्प्लेटमा कार्यमा यसको उदाहरण देख्न सक्नुहुन्छ ।

बक्स आकार

CSS मा थप सीधा आकारको लागि, हामी विश्वव्यापी box-sizingमान बाट मा स्विच content-boxगर्छौं border-box। यसले कुनै तत्वको अन्तिम कम्प्युटेड चौडाइलाई असर गर्दैन भन्ने सुनिश्चित paddingगर्छ, तर यसले Google नक्सा र Google अनुकूलन खोज इन्जिन जस्ता तेस्रो पक्षीय सफ्टवेयरमा समस्या ल्याउन सक्छ।

दुर्लभ अवसरमा तपाईले यसलाई ओभरराइड गर्न आवश्यक छ, निम्न जस्तै केहि प्रयोग गर्नुहोस्:

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

माथिको स्निपेटको साथ, नेस्टेड तत्वहरू - मार्फत उत्पन्न सामग्री सहित ::beforeर - सबै त्यसका लागि ::afterनिर्दिष्ट इनहेरिट हुनेछ ।box-sizing.selector-for-some-widget

CSS Tricks मा बक्स मोडेल र साइजिङ बारे थप जान्नुहोस् ।

रिबुट गर्नुहोस्

सुधारिएको क्रस-ब्राउजर रेन्डरिङको लागि, हामी सामान्य HTML तत्वहरूमा थोरै बढी राय रिसेटहरू प्रदान गर्दा ब्राउजरहरू र उपकरणहरूमा विसंगतिहरू सच्याउन रिबुट प्रयोग गर्छौं।

समुदाय

बुटस्ट्र्यापको विकासमा अद्यावधिक रहनुहोस् र यी सहयोगी स्रोतहरूसँग समुदायमा पुग्नुहोस्।

  • आधिकारिक बुटस्ट्र्याप ब्लग पढ्नुहोस् र सदस्यता लिनुहोस् ।
  • IRC मा सँगी बुटस्ट्र्यापरहरूसँग कुराकानी गर्नुहोस्। irc.libera.chatसर्भरमा, च्यानलमा #bootstrap।
  • bootstrap-4कार्यान्वयन मद्दत स्ट्याक ओभरफ्लो (ट्याग गरिएको ) मा फेला पार्न सकिन्छ ।
  • विकासकर्ताहरूले प्याकेजहरूमा कुञ्जी शब्द प्रयोग गर्नुपर्छ जसले अधिकतम खोज योग्यताको लागि npm वा समान वितरण संयन्त्रहरू bootstrapमार्फत वितरण गर्दा बुटस्ट्र्यापको कार्यक्षमतामा परिमार्जन वा थप गर्दछ ।

तपाईले ट्विटरमा @getbootstrap लाई पनि पछ्याउन सक्नुहुन्छ भर्खरको गफ र अद्भुत संगीत भिडियोहरूको लागि।

CSP र एम्बेडेड SVG हरू

धेरै बुटस्ट्र्याप कम्पोनेन्टहरूले हाम्रो CSS मा एम्बेडेड SVG हरू ब्राउजरहरू र उपकरणहरूमा लगातार र सजिलैसँग शैली घटकहरू समावेश गर्दछ। थप कडा CSP कन्फिगरेसन भएका संस्थाहरूका लागि , हामीले हाम्रा इम्बेडेड SVG हरू (सबै मार्फत लागू गरिएका छन् background-image) को सबै उदाहरणहरू दस्तावेज गरेका छौं ताकि तपाईं आफ्ना विकल्पहरू अझ राम्ररी समीक्षा गर्न सक्नुहुन्छ।

सामुदायिक वार्तालापको आधारमा , तपाईंको आफ्नै कोडबेसमा यसलाई सम्बोधन गर्नका लागि केही विकल्पहरू स्थानीय रूपमा होस्ट गरिएका सम्पत्तिहरूसँग URL हरू प्रतिस्थापन गर्ने, छविहरू हटाउने र इनलाइन छविहरू प्रयोग गर्ने (सबै कम्पोनेन्टहरूमा सम्भव छैन), र तपाईंको CSP परिमार्जन गर्ने समावेश गर्दछ। हाम्रो सिफारिस भनेको आफ्नो सुरक्षा नीतिहरू सावधानीपूर्वक समीक्षा गर्नुहोस् र आवश्यक भएमा अगाडि बढ्ने उत्तम मार्गमा निर्णय गर्नुहोस्।