बटन समूह

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

उत्तम अभ्यास

बटनसमूहानां साधनपट्टिकानां च उपयोगाय वयं निम्नलिखितमार्गदर्शिकाः अनुशंसयामः ।

• एकस्मिन् बटनसमूहे सर्वदा समानतत्त्वस्य उपयोगं कुर्वन्तु, <a>अथवा <button>.
• एकस्मिन् बटनसमूहे भिन्नवर्णानां बटन् न मिश्रयन्तु ।
• पाठस्य अतिरिक्तं वा स्थाने वा चिह्नानां उपयोगं कुर्वन्तु, परन्तु यत्र उचितं तत्र alt तथा ​​title पाठं अवश्यं समाविष्टं कुर्वन्तु ।

ड्रॉपडाउन-युक्ताः सम्बन्धिताः Button समूहाः (अधः पश्यन्तु) पृथक् पृथक् आह्वयितव्याः तथा च अभिप्रेतव्यवहारं सूचयितुं सदैव ड्रॉपडाउन-कैरेट् समाविष्टाः भवेयुः ।

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

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

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

उपकरणपट्टिका उदाहरणम्

अधिकजटिलघटकानाम् कृते <div class="btn-group">एकं मध्ये सेट्स् संयोजयन्तु ।<div class="btn-toolbar">

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

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

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

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

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

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

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

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

शिरः उपरि ! बटन् ड्रॉप् डाउन्स् कार्यं कर्तुं Bootstrap ड्रॉप् डाउन प्लगिन् इत्यस्य आवश्यकता भवति ।

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

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

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

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

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

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

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

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

शक्तिशाली आधार वर्ग

अत्र सर्वे nav घटकाः—टैब्स्, गोलियां, सूचीः च—वर्गस्य माध्यमेन समानं आधारमार्कअपं शैल्यां च साझां कुर्वन्ति.nav ।

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

सामग्रीविभागानाम् अथवा सम्बन्धितसामग्रीपृष्ठानां मध्ये नेविगेट् कर्तुं टैब्स् तथा गोलियां महान् भवन्ति।

घटक संरेखण

nav लिङ्क्स् संरेखयितुं, .pull-leftor .pull-rightutility classes इत्यस्य उपयोगं कुर्वन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति ।

मूलभूत ट्याब्स्

लिङ्कानां नियमितं गृहीत्वा <ul>योजयन्तु .nav-tabs:

• गृहम्‌
• रूपरेखा
• सन्देशाः

<ul class = "नव नव-टैब्स" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > गृहम् </a> 
  </li> इति
  <li><a href = "#" > ... </a></li> इति 
  <li><a href = "#" > ... </a></li> इति 
</ul> इति

मूलभूत गोलियाँ

तदेव HTML गृह्यताम्, परन्तु .nav-pillsतस्य स्थाने उपयुज्यताम् :

• गृहम्‌
• रूपरेखा
• सन्देशाः

<ul class = "नव नव-गोलियाँ" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > गृहम् </a> 
  </li> इति
  <li><a href = "#" > ... </a></li> इति 
  <li><a href = "#" > ... </a></li> इति 
</ul> इति

'एम् कथं स्तम्भयितव्यम्

यतः ट्याब्स् तथा गोलियां पूर्वनिर्धारितरूपेण क्षैतिजाः सन्ति, केवलं द्वितीयवर्गं योजयन्तु, .nav-stacked, येन ते लम्बवत् स्तम्भिताः दृश्यन्ते ।

स्तम्भित ट्याब्स्

• गृहम्‌
• रूपरेखा
• सन्देशाः

<ul class = "नव नव-टैब्स नव-स्तम्भित" > 
  ...
</ul> इति

स्तम्भित गोलियाँ

• गृहम्‌
• रूपरेखा
• सन्देशाः

<ul class = "नव नव-गोलियाँ नव-स्तम्भित" > 
  ...
</ul> इति

समृद्ध मेनू सुलभ बना

Bootstrap ट्याब्स् तथा गोलियां मध्ये ड्रॉपडाउन मेनू सुपर इजी अस्ति तथा च केवलं किञ्चित् अतिरिक्तं HTML तथा हल्कं jQuery प्लगिन् आवश्यकम् अस्ति।

Bootstrap मध्ये dropdowns इत्यस्य आरम्भस्य विषये docs पठितुं Javascript पृष्ठं प्रति गच्छन्तु ।

ड्रॉपडाउन सहित ट्याब्स

• गृहम्‌
• रूपरेखा
• ड्रॉपडाउन
  • नामपत्र
  • अन्यत् कर्म
  • अत्र किञ्चिदन्यत्
  • पृथक् लिङ्क्

<ul class = "नव नव-टैब्स" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल"। 
       data-toggle = "अवरोहण"।
       href = "#" >
        ड्रॉपडाउन
        <b class = "कैरेट्" </b> 
      </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <!-- लिङ्कानि -->
    </ul> इति
  </li> इति
</ul> इति

ड्रॉपडाउन सहित गोलियाँ

• गृहम्‌
• रूपरेखा
• ड्रॉपडाउन
  • नामपत्र
  • अन्यत् कर्म
  • अत्र किञ्चिदन्यत्
  • पृथक् लिङ्क्

<ul class = "नव नव-गोलियाँ" > 
  <li class = "ड्रॉपडाउन" > 
    <a class = "ड्रॉपडाउन-टॉगल"। 
       data-toggle = "अवरोहण"।
       href = "#" >
        ड्रॉपडाउन
        <b class = "कैरेट्" </b> 
      </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      <!-- लिङ्कानि -->
    </ul> इति
  </li> इति
</ul> इति

अनुप्रयोग-शैली नेविगेशन

Nav सूचीः वैकल्पिकशीर्षकैः सह nav लिङ्कानां समूहानां निर्माणस्य सरलं सुलभं च मार्गं प्रदास्यन्ति । ते OS X इत्यस्मिन् Finder इत्यादिषु पार्श्वपट्टिकासु सर्वोत्तमरूपेण उपयुज्यन्ते ।

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

चिह्नों के साथ

नव सूची अपि चिह्नैः सुसज्जितं कर्तुं सुलभम् अस्ति । क्लास् इत्यनेन सह सम्यक् <i>टैग् योजयन्तु ततः भवन्तः सेट् भवन्ति ।

उदाहरण nav list

लिङ्कानां सूचीं गृहीत्वा योजयन्तु class="nav nav-list":

<ul class = "नव नव-सूची" > 
  <li class = "नव-शीर्षक" > 
    सूची शीर्षक
  </li> इति
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > गृहम् </a> 
  </li> इति
  <लि> इति
    <a href = "#" > पुस्तकालयः </a> 
  </li> इति
  ...
</ul> इति

चिह्नैः सह उदाहरणम्

समानम् उदाहरणम्, परन्तु <i>चिह्नानां कृते टैग्-सहितम् ।

<ul class = "नव नव-सूची" > 
  ...
  <लि> इति
    <a href = "#" > इति 
      <i class = "चिह्न-पुस्तक" </i> 
      पुस्तकालय
    </a> इति
  </li> इति
  ...
</ul> इति

किं समाविष्टम् अस्ति

ट्याब्स् मार्गेण सामग्रीनां मध्ये टॉगल कर्तुं सरलेन प्लगिन् इत्यनेन स्वस्य ट्याब्स् जीवनं आनयन्तु। बूटस्ट्रैप् चतुर्षु शैल्यासु टैबबल् ट्याब्स् एकीकृतं करोति: उपरि (पूर्वनिर्धारितं), दक्षिणं, अधः, वामम् च ।

तयोः मध्ये परिवर्तनं सुलभं भवति तथा च केवलं अत्यल्पं मार्कअपं परिवर्तयितुं आवश्यकम् अस्ति ।

टैबबल् उदाहरणम्

ट्याब्स् टैबबल् कर्तुं, .nav-tabsclass इत्यनेन सह अन्यस्मिन् div मध्ये the wrap कुर्वन्तु .tabbable।

कस्टम jQuery प्लगइन

सर्वे टैबबल् ट्याब्स् अस्माकं लघु jQuery प्लगिन् द्वारा संचालिताः सन्ति। javascript docs पृष्ठे tabbable ट्याब्स् कथं जीवन्तं कर्तुं शक्यते इति विषये अधिकं पठन्तु।

जावास्क्रिप्ट् प्राप्तुम् →

अधः ट्याब्स्

HTML इत्यस्य क्रमं पलट्य अधः ट्याब्स् स्थापयितुं वर्गं योजयन्तु ।

<div class = "टैबबल टैब्स-नीचे" > 
  <div class = "टैब-सामग्री" > 
    ...
  </div> इति
  <ul class = "नव नव-टैब्स" > 
    ...
  </ul> इति
</div> इति

वामभागे ट्याब्स्

वामभागे ट्याब्स् स्थापयितुं वर्गं स्वैप् कुर्वन्तु ।

<div class = "टैबबल टैब्स-वाम" > 
  <ul class = "नव नव-टैब्स" > 
    ...
  </ul> इति
  <div class = "टैब-सामग्री" > 
    ...
  </div> इति
</div> इति

दक्षिणे ट्याब्स्

दक्षिणभागे ट्याब्स् स्थापयितुं वर्गं स्वैप् कुर्वन्तु ।

<div class = "टैबबल टैब्स-दक्षिण" > 
  <ul class = "नव नव-टैब्स" > 
    ...
  </ul> इति
  <div class = "टैब-सामग्री" > 
    ...
  </div> इति
</div> इति

नवबार मचान

नवबारस्य स्थिरस्य अथवा स्थिरप्रदर्शनस्य कृते सम्यक् संरचनाय केवलं कतिपयानि divs आवश्यकानि सन्ति ।

<div class = "नवबार" > 
  <div class = "नवबार-अन्तर्गत" > 
    <div class = "पात्र" > 
      ...
    </div> इति
  </div> इति
</div> इति

नवबार स्थिर

viewport इत्यस्य उपरि navbar इत्येतत् स्थिरं कर्तुं, .navbar-fixed-topexermost div इत्यत्र योजयन्तु, .navbar.

<div class = "नवबार नवबार-नियत-शीर्ष" > 
  ...
</div> इति

भवतः CSS मध्ये, भवतः कृते 40px अथवा अधिकं पैडिंग् योजयित्वा तस्य कारणस्य ओवरलैप् इत्यस्य लेखा अपि भवतः कृते आवश्यकं भविष्यति <body>। कोर Bootstrap CSS इत्यस्य अनन्तरं वैकल्पिकप्रतिसादी CSS इत्यस्मात् पूर्वं च एतत् अवश्यं योजयन्तु ।

ब्रांड नाम

स्वस्य ब्राण्ड् अथवा परियोजनानाम दर्शयितुं सरलं लिङ्क् केवलं एंकर टैग् आवश्यकम् अस्ति।

<a class = "ब्राण्ड" href = "#" >  
  परियोजना नाम
</a> इति

खोज प्रपत्र

अन्वेषणप्रपत्राणि वर्गेण सह नवबारमध्ये इष्टशैल्याः प्राप्नुवन्ति .navbar-search। Include .pull-leftor .pull-righton the formको संरेखित करने के लिए।

<form class = "नवबार-खोज पुल-वाम" > 
  <input type = "text" class = "खोज-प्रश्न" स्थानधारक = "खोज" >   
</form> इति

वैकल्पिक प्रतिक्रियाशील भिन्नता

भवतः शीर्षपट्टिकायां सामग्रीयाः परिमाणस्य आधारेण, भवान् प्रतिक्रियाशीलविकल्पान् कार्यान्वितुं इच्छति । तदर्थं, स्वस्य nav सामग्रीं div, .nav-collapse.collapse, युक्ते लपेट्य navbar toggle बटनं योजयन्तु, .btn-navbar.

<div class = "नवबार" > 
  <div class = "नवबार-अन्तर्गत" > 
    <div class = "पात्र" > 
 
      <!-- .btn-navbar इत्यस्य उपयोगः संकुचितस्य navbar सामग्रीयाः टॉगलरूपेण भवति -->
      <a class = "btn btn-navbar" डेटा-टॉगल = "संकुचित" डेटा-लक्ष्य = ".nav-संकुचित" >   
        <span class = "चिह्न-पट्टिका" </span> 
        <span class = "चिह्न-पट्टिका" </span> 
        <span class = "चिह्न-पट्टिका" </span> 
      </a> इति
 
      <!-- यदि भवान् दर्शयितुम् इच्छति तर्हि ब्राण्डं तत्र बहिः अवश्यं त्यजतु -->
      <a class = "brand" href = "#" > परियोजना नाम </a>  
 
      <!-- यत्किमपि भवन्तः इच्छन्ति तत् 940px अथवा न्यूनतरं निगूढं भवतु, अत्र अन्तः स्थापयन्तु -->
      <div class = "नव-संकुचन" > 
        <!-- .नव, .नवबर-अन्वेषण, .नवबर-रूप इत्यादि -->
      </div> इति
 
    </div> इति
  </div> इति
</div> इति

नव लिङ्क्

Nav आइटम्स् अक्रमितसूचीद्वारा योजयितुं सरलाः सन्ति।

<उल वर्ग = "नव" > 
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > गृहम् </a> 
  </li> इति
  <li><a href = "#" > लिङ्क </a></li> 
  <li><a href = "#" > लिङ्क </a></li> 
</ul> इति

रिक्तसूचीवस्तुनः सरलवर्गस्य च सह भवान् स्वस्य nav लिङ्केषु विभाजकान् सहजतया योजयितुं शक्नोति । केवलं लिङ्कानां मध्ये एतत् योजयन्तु:

<उल वर्ग = "नव" > 
  ...
  <li class = "विभाजक-ऊर्ध्वाधर" </li> 
  ...
</ul> इति

घटक संरेखण

nav, अन्वेषणप्रपत्रं, पाठं वा संरेखयितुं, .pull-leftor .pull-rightutility classes इत्यस्य उपयोगं कुर्वन्तु । उभयवर्गः निर्दिष्टदिशि CSS float योजयिष्यति ।

ड्रॉपडाउन्स् योजयित्वा

nav मध्ये dropdowns योजयितुं सुपर सरलम् अस्ति, परन्तु अस्माकं javascript plugin इत्यस्य उपयोगस्य आवश्यकता अस्ति .

<उल वर्ग = "नव" > 
  <li class = "ड्रॉपडाउन" > 
    <a href = "#" इति । 
          class = "ड्रॉपडाउन-टॉगल"।
          data-toggle = "ड्रॉपडाउन" >
          वृतांत्तः
          <b class = "कैरेट्" </b> 
    </a> इति
    <ul class = "ड्रॉपडाउन-मेनू" > 
      ...
    </ul> इति
  </li> इति
</ul> इति

जावास्क्रिप्ट् प्राप्तुम् →

तेषां प्रयोगः किमर्थम्

ब्रेडक्रम्ब् नेविगेशनस्य उपयोगः उपयोक्तृभ्यः एप् अथवा साइट् अन्तः कुत्र सन्ति इति दर्शयितुं मार्गरूपेण उपयुज्यते, परन्तु प्राथमिक नेविगेशनार्थं न। अत्यन्तं प्रभावी भवितुं तेषां उपयोगं विरलं संक्षिप्तं च स्थापयन्तु।

उदाहरणानि

एकं उदाहरणं दर्शितं यथा बहुपृष्ठेषु प्रदर्शितं भवेत्।

• गृहम्‌

• गृहम् / .
• पुस्तकालय

• गृहम् / .
• पुस्तकालयः / .
• दत्तांश

मार्कअप

HTML इति भवतः मानकम् अक्रमितसूची अस्ति लिङ्कैः सह ।

<ul class = "ब्रेडक्रम्ब" > 
  <लि> इति
    <a href = "#" > गृहम् </a> <span class = "विभाजकः" > / </span>   
  </li> इति
  <लि> इति
    <a href = "#" > पुस्तकालयः </a> <span class = "विभाजकः" > / </span>   
  </li> इति
  <li वर्ग = "सक्रिय" > 
    <a href = "#" > दत्तांशः </a> 
  </li> इति
</ul> इति

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

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> इति

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

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

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

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

• पूर्वतनम्‌
• अग्रिम

<ul वर्ग = "पेजर" > 
  <लि> इति
    <a href = "#" > पूर्वम् </a> 
  </li> इति
  <लि> इति
    <a href = "#" > अग्रिमम् </a> 
  </li> इति
</ul> इति

संरेखित लिंक

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

• ← वृद्धः
• नवीनतर →

<ul वर्ग = "पेजर" > 
  <li वर्ग = "पूर्व" > 
    <a href = "#" > ← वृद्धः </a> 
  </li> इति
  <li वर्ग = "अगला" > 
    <a href = "#" > नवीनतम → </a> इति 
  </li> इति
</ul> इति

Bootstrap भवतः साइट् मध्ये सामग्रीं प्रदर्शयितुं hero unit इति नामकं लघु, लचीलं घटकं प्रदाति । विपणन-सामग्री-भारयुक्तेषु साइट्-स्थानेषु इदं सम्यक् कार्यं करोति ।

मार्कअप

divस्वस्य सामग्रीं like so इत्यनेन वेष्टयन्तु :

<div class = "नायक-एकक" > 
  <h1> शीर्षकम् </h1>
  <p> टैग्लाइन् </p> इति
  <प> इति
    <a class = "btn btn-प्राथमिक btn-बड़े" > 
      अधिकं ज्ञातुं शक्नुवन्ति
    </a> इति
  </p> इति
</div> इति

एकं सरलं शेल् एकं h1to appropratiely space out and segment sections of content on a page. h1इदं 's default , element इत्यस्य उपयोगं कर्तुं शक्नोति smallतथा च अन्येषां अधिकांशघटकानाम् (अतिरिक्तशैल्याः सह) ।

<div class = "पृष्ठ-हेडर" > 
  <h1> उदाहरणं पृष्ठशीर्षकं </h1>
</div> इति

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

पूर्वनिर्धारितरूपेण, 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—लघुचित्रपरिमाणानां नियन्त्रणार्थं ।

मार्कअपः

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

<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 वर्ग = "सचेतना" > 
  <a class = "बन्द" data-dismiss = "सचेतना" > × </a>  
  <strong> चेतावनी ! </strong> Best check yo self, त्वं बहु उत्तमं न दृश्यते।
</div> इति

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

<div class = "सचेतना-सचेतना-अवरोध" > 
  <a class = "बन्द" data-dismiss = "सचेतना" > × </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> इति

धारीदारः

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

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

सजीवः

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

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

अतिरिक्त रंग

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

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

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

व्यवहार

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

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

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

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

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

वेल्स इति

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

<div class = "अच्छा" > 
  ...
</div> इति

बैज

अपठितगणनायाः कृते अथवा सरलसूचकरूपेण कस्मिन् अपि तत्त्वे बिल्लायाः उपयोगं कुर्वन्तु ।

<span class = "बिल्ला" > ३ </div> 

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

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

×

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