घटकाः
दर्जनशः पुनःप्रयोज्यघटकाः 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 अवश्यं समाविष्टं कुर्वन्तु । वैकल्पिकरूपेण, भवान् <button>data attribute इत्यनेन सह element इत्यस्य उपयोगं कर्तुं शक्नोति, यत् अस्माभिः अस्माकं docs कृते कर्तुं विकल्पितम् अस्ति । , इत्यस्य उपयोगं कुर्वन् <button>भवद्भिः अवश्यमेव समाविष्टं type="button"भवति अथवा भवतः प्रपत्राणि न प्रस्तूयन्ते।
मानकसचेतनासन्देशं द्वयोः वैकल्पिकवर्गयोः सह सहजतया विस्तारयन्तु: .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> इति