Source

परिचय

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

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

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

CSS

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

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

JS

हाम्रा धेरै कम्पोनेन्टहरूलाई काम गर्न जाभास्क्रिप्टको प्रयोग चाहिन्छ। विशेष रूपमा, उनीहरूलाई jQuery , Popper.js , र हाम्रो आफ्नै JavaScript प्लगइनहरू चाहिन्छ। तिनीहरूलाई सक्षम गर्नको लागि, <script>समापन ट्यागको ठीक अगाडि, तपाइँको पृष्ठहरूको अन्त्यको छेउमा निम्नहरू राख्नुहोस्। </body>jQuery पहिले आउनु पर्छ, त्यसपछि Popper.js, र त्यसपछि हाम्रो JavaScript प्लगइनहरू।

हामी jQuery को स्लिम बिल्ड प्रयोग गर्छौं , तर पूर्ण संस्करण पनि समर्थित छ।

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

हाम्रो bootstrap.bundle.jsर Popperbootstrap.bundle.min.js समावेश छ , तर jQuery होइन । बुटस्ट्र्यापमा के समावेश छ भन्ने बारे थप जानकारीको लागि, कृपया हाम्रो सामग्री खण्ड हेर्नुहोस्।

जाभास्क्रिप्ट आवश्यक पर्ने कम्पोनेन्टहरू देखाउनुहोस्
  • खारेजको लागि अलर्टहरू
  • राज्यहरू र चेकबक्स/रेडियो कार्यक्षमता टगल गर्ने बटनहरू
  • सबै स्लाइड व्यवहार, नियन्त्रण, र सूचकहरूको लागि क्यारोसेल
  • सामग्रीको दृश्यता टगल गर्नका लागि संक्षिप्त गर्नुहोस्
  • प्रदर्शन र स्थितिको लागि ड्रपडाउनहरू ( Popper.js पनि आवश्यक छ )
  • प्रदर्शन, स्थिति, र स्क्रोल व्यवहारका लागि मोडलहरू
  • उत्तरदायी व्यवहार लागू गर्न हाम्रो संक्षिप्त प्लगइन विस्तार गर्न नवबार
  • प्रदर्शन र स्थितिको लागि टूलटिपहरू र पोपोभरहरू ( Popper.js पनि चाहिन्छ )
  • स्क्रोल व्यवहार र नेभिगेसन अद्यावधिकहरूको लागि 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-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>

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

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

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

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 तत्वहरूमा थोरै बढी राय रिसेटहरू प्रदान गर्दा ब्राउजरहरू र उपकरणहरूमा विसंगतिहरू सच्याउन रिबुट प्रयोग गर्छौं।

समुदाय

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

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

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