बुटस्ट्र्यापको साथ सुरू गर्नुहोस्

बुटस्ट्र्याप एक शक्तिशाली, सुविधा-प्याक फ्रन्टएन्ड टूलकिट हो। केहि पनि बनाउनुहोस् - प्रोटोटाइप देखि उत्पादन सम्म - मिनेट मा।

यस पृष्ठमा

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

बुटस्ट्र्यापको उत्पादन-तयार CSS र JavaScript CDN मार्फत कुनै पनि निर्माण चरणहरूको आवश्यकता बिना समावेश गरेर सुरु गर्नुहोस्। यो बुटस्ट्र्याप कोडपेन डेमोको साथ अभ्यासमा हेर्नुहोस् ।

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

बुटस्ट्र्यापको CSS र JS समावेश गर्नुहोस्। बन्द हुनु अघि हाम्रो CSS <link>को लागि ट्याग, र हाम्रो JavaScript बन्डलको लागि ट्याग ( पोजिसनिङ ड्रपडाउन, पपर्स, र टूलटिप्सको लागि पोपर सहित) राख्नुहोस् । हाम्रो CDN लिङ्कहरूको बारेमा थप जान्नुहोस् ।<head><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>

तपाईंले पप्पर र हाम्रो JS अलग-अलग समावेश गर्न सक्नुहुन्छ। यदि तपाइँ ड्रपडाउनहरू, पपओभरहरू, वा टूलटिपहरू प्रयोग गर्ने योजना बनाउनुहुन्न भने, Popper समावेश नगरी केही किलोबाइटहरू बचत गर्नुहोस्।

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

नमस्कार संसार! तपाईको बुटस्ट्र्याप पृष्ठ हेर्नको लागि तपाईको रोजाइको ब्राउजरमा पृष्ठ खोल्नुहोस्। अब तपाईं आफ्नो लेआउट सिर्जना गरेर , दर्जनौं कम्पोनेन्टहरू थपेर, र हाम्रा आधिकारिक उदाहरणहरू प्रयोग गरेर बुटस्ट्र्यापसँग निर्माण सुरु गर्न सक्नुहुन्छ ।

CDN लिङ्कहरू

सन्दर्भको रूपमा, यहाँ हाम्रो प्राथमिक CDN लिङ्कहरू छन्।

विवरण	URL
CSS	`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`

तपाईंले सामग्री पृष्ठमा सूचीबद्ध हाम्रा कुनै पनि अतिरिक्त निर्माणहरू ल्याउन CDN प्रयोग गर्न सक्नुहुन्छ ।

अर्को चरणहरू

बुटस्ट्र्यापले प्रयोग गर्ने केही महत्त्वपूर्ण विश्वव्यापी वातावरण सेटिङहरूको बारेमा अलि बढि पढ्नुहोस् ।
हाम्रो सामग्री खण्डमा बुटस्ट्र्यापमा के समावेश छ र तल जाभास्क्रिप्ट आवश्यक पर्ने घटकहरूको सूची पढ्नुहोस्।
अलि बढी शक्ति चाहिन्छ? प्याकेज प्रबन्धक मार्फत स्रोत फाइलहरू समावेश गरेर बुटस्ट्र्यापसँग निर्माण गर्ने बारे विचार गर्नुहोस् ।
बुटस्ट्र्यापलाई मोड्युलको रूपमा प्रयोग गर्न खोज्दै हुनुहुन्छ <script type="module">? कृपया मोड्युल खण्डको रूपमा बुटस्ट्र्याप प्रयोग गरेर हाम्रो सन्दर्भ गर्नुहोस्।

जेएस कम्पोनेन्टहरू

जिज्ञासु छ कि कुन कम्पोनेन्टहरूलाई स्पष्ट रूपमा हाम्रो जाभास्क्रिप्ट र पोपर चाहिन्छ? तल शो घटक लिङ्क क्लिक गर्नुहोस्। यदि तपाइँ सामान्य पृष्ठ संरचनाको बारेमा निश्चित हुनुहुन्न भने, उदाहरण पृष्ठ टेम्प्लेटको लागि पढ्न जारी राख्नुहोस्।

जाभास्क्रिप्ट आवश्यक पर्ने कम्पोनेन्टहरू देखाउनुहोस्

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

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

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

HTML5 doctype

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

<!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गर्छ, तर यसले Google नक्सा र Google अनुकूलन खोज इन्जिन जस्ता तेस्रो-पक्ष सफ्टवेयरमा समस्या ल्याउन सक्छ।

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

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Ask and explore our GitHub Discussions.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

You can also follow @getbootstrap on Twitter for the latest gossip and awesome music videos.