घटकाः
दर्जनशः पुनःप्रयोज्यघटकाः Bootstrap इत्यस्मिन् निर्मिताः सन्ति येन नेविगेशनं, अलर्ट्स्, पोपोवर्स्, इत्यादीनि बहुधा प्रदातुं शक्यन्ते ।
Pagination सामग्रीद्वारा पृष्ठीकरणार्थं द्वौ विकल्पौ
बहुकॉन्-पृष्ठ पृष्ठांकन
कदा प्रयोगः कर्तव्यः
Rdio द्वारा प्रेरित अल्ट्रा सरल एवं न्यूनतम शैली पृष्ठांकन, एप्स एवं खोज परिणामों के लिए महान। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।
स्टेटफुल पृष्ठ लिंक
लिङ्कानि अनुकूलनीयानि सन्ति तथा च समीचीनवर्गेण सह अनेकपरिस्थितौ कार्यं कुर्वन्ति । .disabledअक्लिक् कर्तुं शक्यते लिङ्कानां .activeकृते वर्तमानपृष्ठस्य च कृते।
लचीला संरेखण
पृष्ठकरणलिङ्कानां संरेखणं परिवर्तयितुं द्वयोः वैकल्पिकवर्गयोः एकं योजयन्तु: .pagination-centeredतथा च .pagination-right.
उदाहरणानि
पूर्वनिर्धारितपृष्ठीकरणघटकः लचीलः अस्ति तथा च अनेकविविधतासु कार्यं करोति ।
मार्कअप
एकस्मिन् वेष्टितं <div>, पृष्ठकरणं केवलं एकं <ul>.
- <div वर्ग = "पृष्ठांकन" >
- <उल> इति
- <li><a href = "#" > पूर्व </a></li>
- <li वर्ग = "सक्रिय" >
- <a href = "#" > १ </a> इति
- </li> इति
- <li><a href = "#" > २ </a></li> इति
- <li><a href = "#" > ३ </a></li> इति
- <li><a href = "#" > ४ </a></li> इति
- <li><a href = "#" > अग्रिमम् </a></li>
- </ul> इति
- </div> इति
Pager त्वरित पूर्व एवं अगले लिंक के लिए
पेजर के बारे में
पेजर घटकः लघु मार्कअप इत्यनेन सह सरलपृष्ठीकरणकार्यन्वयनानां कृते लिङ्कानां समुच्चयः अस्ति तथा च हल्कतरशैल्याः सह । ब्लॉग् वा पत्रिका इत्यादीनां सरलसाइट्-स्थानानां कृते इदं महान् अस्ति।
वैकल्पिक अक्षम अवस्था
पेजर लिङ्क्स् पृष्ठकरणात् सामान्यवर्गस्य अपि उपयोगं कुर्वन्ति .disabled।
पूर्वनिर्धारितं उदाहरणम्
पूर्वनिर्धारितरूपेण, पेजरः लिङ्कान् केन्द्रयति ।
- <ul वर्ग = "पेजर" >
- <लि> इति
- <a href = "#" > पूर्वम् </a>
- </li> इति
- <लि> इति
- <a href = "#" > अग्रिमम् </a>
- </li> इति
- </ul> इति
Inline labels पाठं लेबलं कृत्वा एनोटेट् कुर्वन्तु
| लेबल | मार्कअप |
|---|---|
| मूलभूतम् | <span class="label">Default</span> |
| सफलता | <span class="label label-success">Success</span> |
| चेतवानी | <span class="label label-warning">Warning</span> |
| महत्वपूर्णः | <span class="label label-important">Important</span> |
| इन्फो | <span class="label label-info">Info</span> |
| विलोम | <span class="label label-inverse">Inverse</span> |
बैज सूचक एवं अपठित गिनती
विषये
बिल्लाः किञ्चित् प्रकारस्य सूचकं वा गणना वा प्रदर्शयितुं लघु, सरलघटकाः भवन्ति । ते सामान्यतया Mail.app इत्यादिषु ईमेल-ग्राहकेषु अथवा पुश-सूचनार्थं मोबाईल-अनुप्रयोगेषु दृश्यन्ते ।
उपलब्ध कक्षाएँ
| नामः | उदाहरण | मार्कअप |
|---|---|---|
| मूलभूतम् | १ | <span class="badge">1</span> |
| सफलता | २ | <span class="badge badge-success">2</span> |
| चेतवानी | ४ | <span class="badge badge-warning">4</span> |
| महत्वपूर्णः | ६ | <span class="badge badge-important">6</span> |
| इन्फो | ८ | <span class="badge badge-info">8</span> |
| विलोम | १० | <span class="badge badge-inverse">10</span> |
मुद्रणघटकाः सामग्रीविभाजनार्थं पृष्ठशीर्षकं नायकैककं च
नायक इकाई
Bootstrap भवतः साइट् मध्ये सामग्रीं प्रदर्शयितुं hero unit इति नामकं लघु, लचीलं घटकं प्रदाति । विपणन-सामग्री-भारयुक्तेषु साइट्-स्थानेषु इदं सम्यक् कार्यं करोति ।
मार्कअप
divस्वस्य सामग्रीं like so इत्यनेन वेष्टयन्तु :
- <div class = "नायक-एकक" >
- <h1> शीर्षकम् </h1>
- <p> टैग्लाइन् </p> इति
- <प> इति
- <a class = "btn btn-प्राथमिक btn-बड़े" >
- अधिकं ज्ञातुं शक्नुवन्ति
- </a> इति
- </p> इति
- </div> इति
नमस्कार, जगत् !
इदं सरलं नायक-एककं, विशेष-सामग्री-सूचनायां वा अतिरिक्तं ध्यानं आकर्षयितुं सरलं जम्बोट्रॉन्-शैली-घटकम् अस्ति ।
पृष्ठ शीर्षक
h1पृष्ठे सामग्रीखण्डान् समुचितरूपेण स्पेस आउट् कर्तुं खण्डयितुं च सरलं शेल् । h1इदं 's default , element इत्यस्य उपयोगं कर्तुं शक्नोति smallतथा च अन्येषां अधिकांशघटकानाम् (अतिरिक्तशैल्याः सह) ।
उदाहरणं पृष्ठशीर्षकं शीर्षकस्य उपपाठः
- <div class = "पृष्ठ-शीर्षक" >
- <h1> उदाहरणं पृष्ठशीर्षकं </h1>
- </div> इति
लघुचित्रम् चित्राणि, विडियो, पाठः, इत्यादीनां जालपुटानि
पूर्वनिर्धारित लघुचित्र
पूर्वनिर्धारितरूपेण, Bootstrap इत्यस्य लघुचित्रं न्यूनतमेन आवश्यकेन मार्कअपेन सह लिङ्क् कृतानि चित्राणि प्रदर्शयितुं डिजाइनं कृतम् अस्ति ।
अत्यधिक अनुकूलन योग्य
किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, लघुचित्रेषु शीर्षकं, अनुच्छेदं, बटनं वा इत्यादीनां किमपि प्रकारस्य HTML सामग्रीं योजयितुं शक्यते ।
लघुचित्रस्य प्रयोगः किमर्थम्
लघुचित्रं (पूर्वं .media-gridv1.4 पर्यन्तं) फोटोनां वा विडियोनां वा जालपुटानां, चित्रसन्धानपरिणामानां, खुदरा-उत्पादानाम्, पोर्टफोलियोनां, इत्यादीनां कृते महान् अस्ति । ते लिङ्क् अथवा स्थिरसामग्री भवितुम् अर्हन्ति ।
सरल, लचीला मार्कअप
लघुचित्रचिह्नं सरलम् अस्ति— ulकिमपि संख्यायां liतत्त्वैः सह a इति सर्वं आवश्यकम् । इदमपि सुपर लचीला अस्ति, यत् भवतः सामग्रीं लपेटयितुं केवलं किञ्चित् अधिकं मार्कअपेन सह किमपि प्रकारस्य सामग्रीं अनुमन्यते।
जालस्तम्भ आकाराणां उपयोगं करोति
अन्तिमे, लघुचित्रघटकः लघुचित्रपरिमाणानां नियन्त्रणार्थं विद्यमानजालप्रणालीवर्गाणां उपयोगं करोति—यथा .span2वा — ।.span3
मार्कअपः
यथा पूर्वं उक्तं, लघुचित्रस्य कृते आवश्यकं मार्कअपं लघु, सरलं च भवति । अत्र लिङ्क् कृतानां चित्राणां पूर्वनिर्धारितं सेटअपं पश्यन्तु :
- <ul class = "लघुचित्रम्" >
- <li वर्ग = "span3" >
- <a href = "#" वर्ग = "लघुचित्र" >
- <img src = "https://placehold.it/260x180" alt = "" >
- </a> इति
- </li> इति
- ...
- </ul> इति
लघुचित्रेषु कस्टम् HTML सामग्रीं कृते, मार्कअप किञ्चित् परिवर्तते । कुत्रापि ब्लॉक् लेवल सामग्रीं अनुमन्यते, वयं the <a>for a <div>like so इति स्वैप् कुर्मः:
- <ul class = "लघुचित्रम्" >
- <li वर्ग = "span3" >
- <div class = "लघुचित्र" >
- <img src = "https://placehold.it/260x180" alt = "" >
- <h5> लघुचित्रलेबल </h5>
- <p> अत्रैव लघुचित्रलेखनम्... </p>
- </div> इति
- </li> इति
- ...
- </ul> इति
अधिकानि उदाहरणानि
भवतः कृते उपलब्धैः विविधैः जालवर्गैः सह भवतः सर्वान् विकल्पान् अन्वेष्टुम् अर्हति । भवन्तः भिन्न-भिन्न-आकारानाम् अपि मिश्रणं मेलनं च कर्तुं शक्नुवन्ति ।
सफलता, चेतावनी, त्रुटिसन्देशानां च कृते शैल्याः अलर्ट् करोति
लघु पूर्वनिर्धारित
पुनर्लिखित आधार वर्ग
Bootstrap 2 इत्यनेन सह वयं आधारवर्गं सरलीकृतवन्तः: .alertस्थाने .alert-message। वयं न्यूनतमं आवश्यकं मार्कअपं अपि न्यूनीकृतवन्तः—न <p>पूर्वनिर्धारितरूपेण आवश्यकम्, केवलं बाह्यम् <div>.
एकल अलर्ट सन्देश
न्यूनसङ्केतयुक्तस्य अधिकस्थायिघटकस्य कृते, वयं ब्लॉकसचेतनानां, अधिकपैडिंगेन सह आगच्छन्तः सन्देशाः सामान्यतया अधिकपाठस्य च कृते भेदकरूपं निष्कासितवन्तः। वर्गः अपि परिवर्तितः अस्ति .alert-block.
जावास्क्रिप्ट् सह महान् गच्छति
Bootstrap एकं महान् jQuery प्लगिन् सह आगच्छति यत् चेतावनीसन्देशान् समर्थयति, तान् निराकरणं द्रुतं सुलभं च करोति।
उदाहरण सचेतना
सरलवर्गेण सह div मध्ये स्वसन्देशं वैकल्पिकं च निकटचिह्नं लपेटयन्तु ।
- <div वर्ग = "सचेतना" >
- <button class = "बन्द करें" data-dismiss = "सचेतना" > × </button>
- <strong> चेतावनी ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
- </div> इति
शिरः उपरि ! iOS उपकरणेषु href="#"सचेतनानां निराकरणार्थं एकस्य आवश्यकता भवति। तत् तथा anchor close icons कृते data attribute अवश्यं समाविष्टं कुर्वन्तु । वैकल्पिकरूपेण, भवान् buttondata attribute इत्यनेन सह element इत्यस्य उपयोगं कर्तुं शक्नोति, यत् अस्माभिः अस्माकं docs कृते कर्तुं विकल्पितम् अस्ति ।
मानकसचेतनासन्देशं द्वयोः वैकल्पिकवर्गयोः सह सहजतया विस्तारयन्तु: .alert-blockअधिकपैडिंग् तथा पाठनियन्त्रणानां .alert-headingकृते तथा च मेलयुक्तशीर्षकस्य कृते ।
चेतवानी!
Best check yo self, त्वं बहु उत्तमं न दृश्यते। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट.
- <div class = "सचेतना-सचेतना-अवरोध" >
- <a class = "बन्द" data-dismiss = "सचेतना" href = "#" > × </a>
- <h4 class = "alert-heading" > चेतावनी! </h4> इति
- Best check yo self, त्वं न...
- </div> इति
सन्दर्भविकल्पाः अलर्टस्य अर्थं परिवर्तयितुं वैकल्पिकवर्गान् योजयन्तु
दोषः संकटः वा
- <div class = "सचेतना-सचेतना-त्रुटि" >
- ...
- </div> इति
सफलता
- <div class = "सचेतना चेतावनी-सफलता" >
- ...
- </div> इति
सूचना
- <div class = "सचेतना-सचेतना-सूचना" >
- ...
- </div> इति
प्रगतिपट्टिकाः लोडिंग्, पुनर्निर्देशन, अथवा क्रियास्थितेः कृते
उदाहरण एवं मार्कअप
आधारभूत
ऊर्ध्वाधरढालयुक्तं पूर्वनिर्धारितं प्रगतिपट्टिका ।
- <div वर्ग = "प्रगति" >
- <div वर्ग = "बार"।
- शैली = " चौड़ाई : 60 %; " ></div>
- </div> इति
धारीदारः
पट्टिकायुक्तं प्रभावं निर्मातुं ढालस्य उपयोगं करोति (कोऽपि IE नास्ति) ।
- <div class = "प्रगति प्रगति-धारी" >
- <div वर्ग = "बार"।
- शैली = " चौड़ाई : 20 %; " ></div>
- </div> इति
सजीवः
पट्टिकायुक्तं उदाहरणं गृहीत्वा तत् सजीवं करोति (no IE)।
- <div class = "प्रगति-प्रगति-पट्टिका।"
- सक्रिय" >
- <div वर्ग = "बार"।
- शैली = " चौड़ाई : 40 %; " ></div>
- </div> इति
विकल्पाः ब्राउजर् समर्थनं च
अतिरिक्त रंग
प्रगतिपट्टिकाः सुसंगतशैल्याः कृते केषाञ्चन समानबटनस्य अलर्टवर्गाणां च उपयोगं कुर्वन्ति ।
धारीदार पट्टियाँ
ठोसवर्णानां सदृशं अस्माकं विविधाः पट्टिकायुक्ताः प्रगतिपट्टिकाः सन्ति ।
व्यवहार
प्रगतिपट्टिकाः CSS3 संक्रमणानां उपयोगं कुर्वन्ति, अतः यदि भवान् जावास्क्रिप्ट् मार्गेण विस्तारं गतिशीलरूपेण समायोजयति तर्हि तत् सुचारुतया आकारं परिवर्तयिष्यति ।
यदि भवान् .activeवर्गस्य उपयोगं करोति तर्हि भवतः .progress-stripedप्रगतिपट्टिकाः वामतः दक्षिणत: पट्टिकाः एनिमेट् करिष्यन्ति ।
ब्राउज़र समर्थन
प्रगतिपट्टिकाः स्वस्य सर्वान् प्रभावान् प्राप्तुं CSS3 ढालस्य, संक्रमणस्य, एनिमेशनस्य च उपयोगं कुर्वन्ति । एतानि विशेषतानि IE7-9 अथवा Firefox इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति ।
Opera तथा IE इत्येतौ अस्मिन् समये एनिमेशनस्य समर्थनं न कुर्वन्ति ।
विविध हल्के उपयोगिता घटक
वेल्स इति
कस्मिंश्चित् तत्वे इन्सेट् प्रभावं दातुं कूपस्य उपयोगं सरलप्रभावरूपेण कुर्वन्तु ।
- <div class = "अच्छा" >
- ...
- </div> इति
चिह्न को बंद करें
मोडाल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यनिरोधचिह्नस्य उपयोगं कुर्वन्तु ।
- <बटन वर्ग = "बंद करें" > × </बटन> इति
iOS-यन्त्राणां कृते क्लिक्-घटनानां कृते href="#" इत्यस्य आवश्यकता भवति यदि भवान् एङ्कर्-इत्यस्य उपयोगं करोति ।
- <a class = "बंद करें" href = "#" > × </a> इति