बूटस्ट्रैप

घटकाः

दर्जनशः पुनःप्रयोज्यघटकाः Bootstrap इत्यस्मिन् निर्मिताः सन्ति येन नेविगेशनं, अलर्ट्स्, पोपोवर्स्, इत्यादीनि बहुधा प्रदातुं शक्यन्ते ।

बटनसमूहाः अधिकसाधनपट्टिकासदृशकार्यक्षमतायै बटन्स् सम्मिलितं कुर्वन्तु

बटन समूह

एकस्य समष्टिघटकरूपेण अनेकबटन् एकत्र संयोजयितुं बटनसमूहानां उपयोगं कुर्वन्तु । <a>तान् वा <button>तत्त्वानां श्रृङ्खलाया: निर्माणं कुरुत ।

अधिकजटिलप्रकल्पानां कृते <div class="btn-group">a into a इत्यस्य सेट् अपि संयोजयितुं शक्नुवन्ति ।<div class="btn-toolbar">

वामः मध्यं दक्षिणः
१ २ ३ ४
५ ६ ७
८

उदाहरण मार्कअप

अत्र HTML कथं एंकर टैग् बटन् सह निर्मितं मानक बटन समूहं पश्यति:

  1. <div वर्ग = "btn-समूह" > 
  2.   <a class = "btn" href = "#" > १ </a>  
  3.   <a class = "btn" href = "#" > २ </a>  
  4.   <a class = "btn" href = "#" > ३ </a> इति  
  5. </div> इति

तथा च बहुसमूहानां कृते साधनपट्टिकायाः ​​सह:

  1. <div वर्ग = "btn-उपकरणपट्टिका" > 
  2.   <div वर्ग = "btn-समूह" > 
  3.     ...
  4.   </div> इति
  5. </div> इति

चेकबॉक्स एवं रेडियो स्वाद

बटनसमूहाः रेडियोरूपेण अपि कार्यं कर्तुं शक्नुवन्ति, यत्र केवलं एकं बटनं सक्रियं भवितुम् अर्हति, अथवा चेकबॉक्स, यत्र किमपि संख्यायां बटनं सक्रियं भवितुम् अर्हति । तदर्थं जावास्क्रिप्ट् डॉक्स पश्यन्तु ।

जावास्क्रिप्ट प्राप्त करें »

शिरः उपरि करोति

बटनसमूहानां कृते CSS पृथक् सञ्चिकायां अस्ति, button-groups.less ।

बटन ड्रॉपडाउन बटन समूहों पर निर्मित सन्दर्भ ड्रॉप डाउन मेनू

बटन ड्रॉपडाउन

a इत्यस्य अन्तः स्थापयित्वा .btn-groupसम्यक् मेनू मार्कअपं प्रदातुं ड्रॉप् डाउन मेनू ट्रिगर कर्तुं कस्यापि बटनस्य उपयोगं कुर्वन्तु ।

नामपत्र
नामपत्र
संकट
सफलता
इन्फो

उदाहरण मार्कअप

बटनसमूहस्य सदृशं, अस्माकं मार्कअप नियमितबटनमार्कअपस्य उपयोगं करोति, परन्तु शैलीं परिष्कृत्य Bootstrap इत्यस्य ड्रॉपडाउन jQuery प्लगइन् समर्थयितुं मुष्टिभ्यां परिवर्तनैः सह ।

  1. <div वर्ग = "btn-समूह" > 
  2.   <a class = "btn ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" >   
  3.     नामपत्र
  4.     <span class = "कैरेट्" </span> 
  5.   </a> इति
  6.   <ul class = "ड्रॉपडाउन-मेनू" > 
  7.     <!-- ड्रॉपडाउन मेनू लिंक -->
  8.   </ul> इति
  9. </div> इति

बटन ड्रॉपडाउन विभाजित करें

बटन समूहशैल्याः मार्कअप च आधारेण वयं सहजतया विभक्तबटनं निर्मातुं शक्नुमः । विभक्तबटन् वामभागे मानकक्रिया तथा दक्षिणभागे सन्दर्भलिङ्कैः सह ड्रॉपडाउन टॉगलं दर्शयति ।

नामपत्र
नामपत्र
संकट
सफलता
इन्फो

उदाहरण मार्कअप

वयं सामान्यबटन् ड्रॉप् डाउन्स् इत्यत्र विस्तारं कुर्मः यत् द्वितीयं बटन् क्रिया प्रदातुं शक्नुमः यत् पृथक् ड्रॉप् डाउन ट्रिगर इत्यस्य रूपेण कार्यं करोति ।

  1. <div वर्ग = "btn-समूह" > 
  2.   <a class = "btn" href = "#" > क्रिया </a>  
  3.   <a class = "btn ड्रॉपडाउन-टॉगल" data-toggle = "ड्रॉपडाउन" href = "#" >   
  4.     <span class = "कैरेट्" </span> 
  5.   </a> इति
  6.   <ul class = "ड्रॉपडाउन-मेनू" > 
  7.     <!-- ड्रॉपडाउन मेनू लिंक -->
  8.   </ul> इति
  9. </div> इति

Pagination सामग्रीद्वारा पृष्ठीकरणार्थं द्वौ विकल्पौ

बहुकॉन्-पृष्ठ पृष्ठांकन

कदा प्रयोगः कर्तव्यः

Rdio द्वारा प्रेरित अल्ट्रा सरल एवं न्यूनतम शैली पृष्ठांकन, एप्स एवं खोज परिणामों के लिए महान। विशालः खण्डः कठिनः त्यक्तुं शक्यते, सुलभतया स्केल-करणीयः, बृहत् क्लिक्-क्षेत्राणि च प्रदाति ।

स्टेटफुल पृष्ठ लिंक

लिङ्कानि अनुकूलनीयानि सन्ति तथा च समीचीनवर्गेण सह अनेकपरिस्थितौ कार्यं कुर्वन्ति । .disabledअक्लिक् कर्तुं शक्यते लिङ्कानां .activeकृते वर्तमानपृष्ठस्य च कृते।

लचीला संरेखण

पृष्ठकरणलिङ्कानां संरेखणं परिवर्तयितुं द्वयोः वैकल्पिकवर्गयोः एकं योजयन्तु: .pagination-centeredतथा च .pagination-right.

उदाहरणानि

पूर्वनिर्धारितपृष्ठीकरणघटकः लचीलः अस्ति तथा च अनेकविविधतासु कार्यं करोति ।

मार्कअप

एकस्मिन् वेष्टितं <div>, पृष्ठकरणं केवलं एकं <ul>.

  1. <div वर्ग = "पृष्ठांकन" > 
  2.   <उल> इति
  3.     <li><a href = "#" > पूर्व </a></li> 
  4.     <li वर्ग = "सक्रिय" > 
  5.       <a href = "#" > १ </a> इति 
  6.     </li> इति
  7.     <li><a href = "#" > २ </a></li> इति 
  8.     <li><a href = "#" > ३ </a></li> इति 
  9.     <li><a href = "#" > ४ </a></li> इति 
  10.     <li><a href = "#" > अग्रिमम् </a></li> 
  11.   </ul> इति
  12. </div> इति

Pager त्वरित पूर्व एवं अगले लिंक के लिए

पेजर के बारे में

पेजर घटकः लघुमार्कअप इत्यनेन सह सरलपृष्ठीकरणप्रवर्तनार्थं लिङ्कानां समुच्चयः अस्ति तथा च हल्कतरशैल्याः सह । ब्लॉग् वा पत्रिका इत्यादीनां सरलसाइट्-स्थानानां कृते इदं महान् अस्ति।

पूर्वनिर्धारितं उदाहरणम्

पूर्वनिर्धारितरूपेण, पेजरः लिङ्कान् केन्द्रयति ।

  1. <ul वर्ग = "पेजर" > 
  2.   <लि> इति
  3.     <a href = "#" > पूर्वम् </a> 
  4.   </li> इति
  5.   <लि> इति
  6.     <a href = "#" > अग्रिमम् </a> 
  7.   </li> इति
  8. </ul> इति

संरेखित लिंक

वैकल्पिकरूपेण, भवान् प्रत्येकं लिङ्कं पार्श्वेषु संरेखयितुं शक्नोति:

  1. <ul वर्ग = "पेजर" > 
  2.   <li वर्ग = "पूर्व" > 
  3.     <a href = "#" > ← वृद्धः </a> 
  4.   </li> इति
  5.   <li वर्ग = "अगला" > 
  6.     <a href = "#" > नवीनतम → </a> इति 
  7.   </li> इति
  8. </ul> इति

Inline labels पाठं लेबलं कृत्वा एनोटेट् कुर्वन्तु

लेबल मार्कअप
मूलभूतम्‌ <span class="label">Default</span>
नूतनम्‌ <span class="label label-success">New</span>
चेतवानी <span class="label label-warning">Warning</span>
महत्वपूर्णः <span class="label label-important">Important</span>
इन्फो <span class="label label-info">Info</span>

लघुचित्रम् चित्राणि, विडियो, पाठः, इत्यादीनां जालपुटानि

पूर्वनिर्धारित लघुचित्र

पूर्वनिर्धारितरूपेण, Bootstrap इत्यस्य लघुचित्रं न्यूनतमेन आवश्यकेन मार्कअपेन सह लिङ्क् कृतानि चित्राणि प्रदर्शयितुं डिजाइनं कृतम् अस्ति ।

अत्यधिक अनुकूलन योग्य

किञ्चित् अतिरिक्तं मार्कअपं कृत्वा, लघुचित्रेषु शीर्षकं, अनुच्छेदं, बटनं वा इत्यादीनां किमपि प्रकारस्य HTML सामग्रीं योजयितुं शक्यते ।

  • लघुचित्र लेबल

    Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

    नामपत्र नामपत्र

  • लघुचित्र लेबल

    Cras justo odio, dapibus ac facilisis में, egestas eget quam. Donec id elit नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस. Nullam id dolor id nibh ultrices vehicula उत id elit.

    नामपत्र नामपत्र

लघुचित्रस्य प्रयोगः किमर्थम्

लघुचित्रं (पूर्वं .media-gridv1.4 पर्यन्तं) फोटोनां वा विडियोनां वा जालपुटानां, चित्रसन्धानपरिणामानां, खुदरा-उत्पादानाम्, पोर्टफोलियोनां, इत्यादीनां कृते महान् अस्ति । ते लिङ्क् अथवा स्थिरसामग्री भवितुम् अर्हन्ति ।

सरल, लचीला मार्कअप

लघुचित्रचिह्नं सरलम् अस्ति— ulकिमपि संख्यायां liतत्त्वैः सह a इति सर्वं आवश्यकम् अस्ति । इदमपि सुपर लचीला अस्ति, यत् भवतः सामग्रीं लपेटयितुं केवलं किञ्चित् अधिकं मार्कअपं कृत्वा किमपि प्रकारस्य सामग्रीं अनुमन्यते।

जालस्तम्भ आकाराणां उपयोगं करोति

अन्तिमे, लघुचित्रघटकः लघुचित्रपरिमाणानां नियन्त्रणार्थं विद्यमानजालप्रणालीवर्गाणां उपयोगं करोति—यथा .span2वा .span3—लघुचित्रपरिमाणानां नियन्त्रणार्थं ।

मार्कअपः

यथा पूर्वं उक्तं, लघुचित्रस्य कृते आवश्यकं मार्कअपं लघु, सरलं च भवति । अत्र लिङ्क् कृतानां चित्राणां पूर्वनिर्धारितं सेटअपं पश्यन्तु :

  1. <ul class = "लघुचित्रम्" > 
  2.   <li वर्ग = "span3" > 
  3.     <a href = "#" वर्ग = "लघुचित्र" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a> इति
  6.   </li> इति
  7.   ...
  8. </ul> इति

लघुचित्रेषु कस्टम् HTML सामग्रीं कृते, मार्कअप किञ्चित् परिवर्तते । कुत्रापि ब्लॉक् लेवल सामग्रीं अनुमन्यते, वयं the <a>for a <div>like so इति स्वैप् कुर्मः:

  1. <ul class = "लघुचित्रम्" > 
  2.   <li वर्ग = "span3" > 
  3.     <div class = "लघुचित्र" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> लघुचित्रलेबल </h5>
  6.       <p> अत्रैव लघुचित्रलेखनम्... </p>
  7.     </div> इति
  8.   </li> इति
  9.   ...
  10. </ul> इति

अधिकानि उदाहरणानि

भवतः कृते उपलब्धैः विविधैः जालवर्गैः सह भवतः सर्वान् विकल्पान् अन्वेष्टुम् अर्हति । भवन्तः भिन्न-भिन्न-आकारानाम् अपि मिश्रणं मेलनं च कर्तुं शक्नुवन्ति ।

सफलता, चेतावनी, त्रुटिसन्देशानां च कृते शैल्याः अलर्ट् करोति

लघु पूर्वनिर्धारित

पुनर्लिखित आधार वर्ग

Bootstrap 2 इत्यनेन सह वयं आधारवर्गं सरलीकृतवन्तः: .alertस्थाने .alert-message। वयं न्यूनतमं आवश्यकं मार्कअपं अपि न्यूनीकृतवन्तः—न <p>पूर्वनिर्धारितरूपेण आवश्यकम्, केवलं outter <div>.

एकल अलर्ट सन्देश

न्यूनसङ्केतयुक्तस्य अधिकस्थायिघटकस्य कृते, वयं ब्लॉकसचेतनानां, अधिकपैडिंगेन सह आगच्छन्तः सन्देशाः सामान्यतया अधिकपाठस्य च कृते भेदकरूपं निष्कासितवन्तः। वर्गः अपि परिवर्तितः अस्ति .alert-block.

जावास्क्रिप्ट् सह महान् गच्छति

Bootstrap एकं महान् jQuery प्लगिन् सह आगच्छति यत् सचेतनासन्देशान् समर्थयति, तान् निराकरणं द्रुतं सुलभं च करोति।

प्लगइन प्राप्त करें »

उदाहरण सचेतना

सरलवर्गेण सह div मध्ये स्वसन्देशं वैकल्पिकं च निकटचिह्नं लपेटयन्तु ।

× चेतवानी! Best check yo self, त्वं बहु उत्तमं न दृश्यते। 
  1. <div वर्ग = "सचेतना" > 
  2.   <a class = "बन्द" > × </a> 
  3.   <strong> चेतावनी ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
  4. </div> इति

मानकसचेतनासन्देशं द्वयोः वैकल्पिकवर्गयोः सह सहजतया विस्तारयन्तु: .alert-blockअधिकपैडिंग् तथा पाठनियन्त्रणानां .alert-headingकृते तथा च मेलयुक्तशीर्षकस्य कृते ।

×

चेतवानी!

Best check yo self, त्वं बहु उत्तमं न दृश्यते। नुल्ला विटाए एलिट् लिबेरो, एक फारेत्र औगुए। Praesent commodo cursus मैग्ना, वेल scelerisque nisl consectetur एट.

  1. <div class = "सचेतना-सचेतना-अवरोध" > 
  2.   <a class = "बन्द" > × </a> 
  3.   <h4 class = "alert-heading" > चेतावनी! </h4> इति 
  4.   Best check yo self, त्वं न...
  5. </div> इति

सन्दर्भविकल्पाः अलर्टस्य अर्थं परिवर्तयितुं वैकल्पिकवर्गान् योजयन्तु

दोषः संकटः वा

× अहो स्नैप ! कतिपयानि वस्तूनि परिवर्त्य पुनः प्रस्तुतुं प्रयतध्वम्। 
  1. <div class = "सचेतना-सचेतना-त्रुटि" > 
  2.   ...
  3. </div> इति

सफलता

× सद् कृत! भवान् एतत् महत्त्वपूर्णं सचेतनासन्देशं सफलतया पठितवान्। 
  1. <div class = "सचेतना चेतावनी-सफलता" > 
  2.   ...
  3. </div> इति

सूचना

× शिरः उपरि ! अस्य अलर्टस्य भवतः ध्यानस्य आवश्यकता वर्तते, परन्तु एतत् सुपर महत्त्वपूर्णं नास्ति। 
  1. <div class = "सचेतना-सचेतना-सूचना" > 
  2.   ...
  3. </div> इति

प्रगतिपट्टिकाः लोडिंग्, पुनर्निर्देशन, अथवा क्रियास्थितेः कृते

उदाहरण एवं मार्कअप

आधारभूत

ऊर्ध्वाधरढालयुक्तं पूर्वनिर्धारितं प्रगतिपट्टिका ।

  1. <div वर्ग = "प्रगति" > 
  2.   <div वर्ग = "बार"। 
  3.        शैली = " चौड़ाई : 60 %; " ></div> 
  4. </div> इति

धारीदारः

पट्टिकायुक्तं प्रभावं निर्मातुं ढालस्य उपयोगं करोति ।

  1. <div class = "प्रगति-प्रगति-सूचना।" 
  2.      प्रगति-पट्टिका" >
  3.   <div वर्ग = "बार"। 
  4.        शैली = " चौड़ाई : 20 %; " ></div> 
  5. </div> इति

सजीवः

पट्टिकां उदाहरणं गृहीत्वा सजीवं करोति।

  1. <div class = "प्रगति-प्रगति-संकट।" 
  2.      प्रगति-पट्टिका सक्रिय" >
  3.   <div वर्ग = "बार"। 
  4.        शैली = " चौड़ाई : 40 %; " ></div> 
  5. </div> इति

विकल्पाः ब्राउजर् समर्थनं च

अतिरिक्त रंग

प्रगतिपट्टिकाः समानशैल्याः कृते बटन्स् तथा अलर्ट् इव केषाञ्चन समानवर्गनामानां उपयोगं कुर्वन्ति ।

  • .progress-info
  • .progress-success
  • .progress-danger

वैकल्पिकरूपेण, भवान् LESS सञ्चिकाः अनुकूलितुं शक्नोति तथा च स्वकीयवर्णान् आकारान् च रोल कर्तुं शक्नोति ।

व्यवहार

प्रगतिपट्टिकाः CSS3 संक्रमणानां उपयोगं कुर्वन्ति, अतः यदि भवान् जावास्क्रिप्ट् मार्गेण विस्तारं गतिशीलरूपेण समायोजयति तर्हि तत् सुचारुतया आकारं परिवर्तयिष्यति ।

यदि भवान् .activeवर्गस्य उपयोगं करोति तर्हि भवतः .progress-stripedप्रगतिपट्टिकाः वामतः दक्षिणत: पट्टिकाः एनिमेट् करिष्यन्ति ।

ब्राउज़र समर्थन

प्रगतिपट्टिकाः स्वस्य सर्वान् प्रभावान् प्राप्तुं CSS3 ढालस्य, संक्रमणस्य, एनिमेशनस्य च उपयोगं कुर्वन्ति । एतानि विशेषतानि IE7-8 अथवा Firefox इत्यस्य प्राचीनसंस्करणेषु समर्थितानि न सन्ति ।

अस्मिन् समये ओपेरा एनिमेशनं समर्थयति नास्ति ।

विविध कुण्ड, बैज, एवं निकट आइकन

वेल्स इति

कस्मिंश्चित् तत्वे इन्सेट् प्रभावं दातुं कूपस्य उपयोगं सरलप्रभावरूपेण कुर्वन्तु ।

पश्यतु, अहं कूपे अस्मि! 
  1. <div class = "अच्छा" > 
  2.   ...
  3. </div> इति

चिह्न को बंद करें

मोडाल्स् तथा अलर्ट् इत्यादीनां सामग्रीं निराकरणार्थं सामान्यनिरोधचिह्नस्य उपयोगं कुर्वन्तु ।

×

  1. <a class = "बन्द करें" > × </a> इति