बटन समूहहरू

एक कम्पोजिट कम्पोनेन्टको रूपमा धेरै बटनहरू सामेल हुन बटन समूहहरू प्रयोग गर्नुहोस्। तिनीहरूलाई एक श्रृंखला <a>वा <button>तत्वहरूको साथ बनाउनुहोस्।

उत्तम अभ्यासहरू

हामी बटन समूह र उपकरणपट्टी प्रयोग गर्नका लागि निम्न दिशानिर्देशहरू सिफारिस गर्छौं:

• एकल बटन समूहमा सधैं एउटै तत्व प्रयोग गर्नुहोस्, <a>वा <button>।
• एउटै बटन समूहमा विभिन्न रङका बटनहरू नमिलाउनुहोस्।
• पाठको अतिरिक्त वा सट्टामा आइकनहरू प्रयोग गर्नुहोस्, तर उपयुक्त भएमा alt र शीर्षक पाठ समावेश गर्नुहोस्।

ड्रपडाउनहरूसँग सम्बन्धित बटन समूहहरू (तल हेर्नुहोस्) छुट्टै बोलाइनुपर्छ र इच्छित व्यवहार संकेत गर्न सधैं ड्रपडाउन क्यारेट समावेश गर्नुपर्छ।

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

यहाँ HTML ले एन्कर ट्याग बटनहरूसँग बनाइएको मानक बटन समूहको लागि कस्तो देखिन्छ:

<div class = "btn-group" > 
  <बटन वर्ग = "btn" > १ </ बटन> 
  <बटन वर्ग = "btn" > २ </ बटन> 
  <बटन वर्ग = "btn" > ३ </ बटन> 
</div>

उपकरणपट्टी उदाहरण

थप जटिल कम्पोनेन्टहरूको लागि <div class="btn-group">a मा सेटहरू मिलाउनुहोस् ।<div class="btn-toolbar">

<div class = "btn-उपकरणपट्टी" > 
  <div class = "btn-group" > 
    ...
  </div>
</div>

चेकबक्स र रेडियो स्वादहरू

बटन समूहहरूले रेडियोको रूपमा पनि काम गर्न सक्छन्, जहाँ केवल एक बटन सक्रिय हुन सक्छ, वा चेकबक्सहरू, जहाँ बटनहरूको संख्या सक्रिय हुन सक्छ। यसको लागि जाभास्क्रिप्ट कागजातहरू हेर्नुहोस् ।

जाभास्क्रिप्ट प्राप्त गर्नुहोस् »

बटन समूहहरूमा ड्रपडाउनहरू

हेड अप! उचित रेन्डरिङको लागि ड्रपडाउनहरू भएका बटनहरू व्यक्तिगत रूपमा आफ्नै .btn-groupभित्र बेरिएको हुनुपर्छ।.btn-toolbar

अवलोकन र उदाहरणहरू

ड्रपडाउन मेनुलाई एक भित्र राखेर .btn-groupर उचित मेनु मार्कअप प्रदान गरेर ट्रिगर गर्न कुनै पनि बटन प्रयोग गर्नुहोस्।

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

बटन समूह जस्तै, हाम्रो मार्कअपले नियमित बटन मार्कअप प्रयोग गर्दछ, तर शैलीलाई परिष्कृत गर्न र बुटस्ट्र्यापको ड्रपडाउन jQuery प्लगइनलाई समर्थन गर्न मुट्ठीभर थपहरूको साथ।

<div class = "btn-group" > 
  <a class = "btn dropdown-toggle" data-toggle = "ड्रपडाउन" href = "#" >   
    कार्य
    <span class = "caret" ></span> 
  </a>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

सबै बटन आकारहरूसँग काम गर्दछ

बटन ड्रपडाउनहरू कुनै पनि आकारमा काम गर्दछ। तपाईको बटनको साइज .btn-large, .btn-smallवा .btn-mini.

जाभास्क्रिप्ट चाहिन्छ

बटन ड्रपडाउनहरूलाई कार्य गर्न बुटस्ट्र्याप ड्रपडाउन प्लगइन आवश्यक पर्दछ ।

केहि अवस्थामा - जस्तै मोबाइल - ड्रपडाउन मेनुहरू भ्यूपोर्ट बाहिर विस्तार हुनेछ। तपाईले पङ्क्तिबद्धतालाई म्यानुअल रूपमा वा अनुकूलन जाभास्क्रिप्टसँग समाधान गर्न आवश्यक छ।

अवलोकन र उदाहरणहरू

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

आकारहरू

अतिरिक्त बटन वर्गहरू .btn-mini, .btn-smallवा .btn-largeसाइजिङको लागि प्रयोग गर्नुहोस्।

<div class = "btn-group" > 
  ...
  <ul class = "ड्रपडाउन-मेनु पुल-दायाँ" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

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

हामीले एउटा छुट्टै ड्रपडाउन ट्रिगरको रूपमा सञ्चालन गर्ने दोस्रो बटन कार्य प्रदान गर्न सामान्य बटन ड्रपडाउनहरूमा विस्तार गर्छौं।

<div class = "btn-group" > 
  <बटन वर्ग = "btn" > कार्य </ बटन> 
  <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
    <span class = "caret" ></span> 
  </ बटन>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

ड्रपअप मेनुहरू

ड्रपडाउन मेनुहरू तलबाट माथिको तत्काल अभिभावकमा एकल वर्ग थपेर पनि टगल गर्न सकिन्छ .dropdown-menu। यसले दिशालाई फ्लिप गर्नेछ .caretर माथिल्लो तलको सट्टा तलबाट माथि सार्नको लागि मेनु आफैंलाई पुन: स्थान दिन्छ।

<div वर्ग = "btn-समूह ड्रपअप" > 
  <बटन वर्ग = "btn" > ड्रपअप </ बटन> 
  <बटन वर्ग = "btn ड्रपडाउन-टगल" डेटा-टगल = "ड्रपडाउन" >  
    <span class = "caret" ></span> 
  </ बटन>
  <ul class = "ड्रपडाउन-मेनु" > 
    <!-- ड्रपडाउन मेनु लिङ्कहरू -->
  </ul>
</div>

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

यहाँका सबै एनएभ कम्पोनेन्टहरू - ट्याबहरू, चक्कीहरू, र सूचीहरू - एउटै आधार मार्कअप र शैलीहरू.nav कक्षा मार्फत साझेदारी गर्छन्।

कहिले प्रयोग गर्ने

ट्याबहरू र चक्कीहरू सामग्रीको खण्डहरू वा सम्बन्धित सामग्रीका पृष्ठहरू बीच नेभिगेट गर्नका लागि उत्कृष्ट छन्।

कम्पोनेन्ट पङ्क्तिबद्धता

एनएभि लिङ्कहरू पङ्क्तिबद्ध गर्न, .pull-leftवा .pull-rightउपयोगिता वर्गहरू प्रयोग गर्नुहोस्। दुबै वर्गहरूले निर्दिष्ट दिशामा CSS फ्लोट थप्नेछन्।

आधारभूत ट्याबहरू

लिङ्कहरूको नियमित लिनुहोस् <ul>र थप्नुहोस् .nav-tabs:

• घर
• प्रोफाइल
• सन्देशहरू

<ul class = "nav nav-tabs" > 
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

आधारभूत चक्कीहरू

उही HTML लिनुहोस्, तर .nav-pillsयसको सट्टा प्रयोग गर्नुहोस्:

• घर
• प्रोफाइल
• सन्देशहरू

<ul class = "nav nav-pills" > 
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li><a href = "#" > ... </a></li> 
  <li><a href = "#" > ... </a></li> 
</ul>

तिनीहरूलाई कसरी स्ट्याक गर्ने

ट्याबहरू र चक्कीहरू पूर्वनिर्धारित रूपमा तेर्सो भएकाले, .nav-stackedतिनीहरूलाई ठाडो रूपमा स्ट्याक गरिएको देखाउनको लागि, केवल दोस्रो वर्ग थप्नुहोस्।

स्ट्याक गरिएका ट्याबहरू

• घर
• प्रोफाइल
• सन्देशहरू

<ul class = "nav nav-tabs nav-stacked" > 
  ...
</ul>

स्ट्याक गरिएका चक्कीहरू

• घर
• प्रोफाइल
• सन्देशहरू

<ul class = "nav nav-pills nav-stacked" > 
  ...
</ul>

रिच मेनुहरू सजिलो बनाइयो

बुटस्ट्र्याप ट्याबहरू र चक्कीहरूमा ड्रपडाउन मेनुहरू अति सजिलो छन् र केवल थोरै अतिरिक्त HTML र हल्का jQuery प्लगइन चाहिन्छ।

बुटस्ट्र्यापमा ड्रपडाउनहरू प्रारम्भ गर्ने कागजातहरू पढ्न जाभास्क्रिप्ट पृष्ठमा जानुहोस् ।

ड्रपडाउनका साथ ट्याबहरू

• घर
• मद्दत गर्नुहोस्
• ड्रपडाउन
  • कार्य
  • अर्को कार्य
  • यहाँ अरू केही
  • अलग लिङ्क

<ul class = "nav nav-tabs" > 
  <li class = "ड्रपडाउन" > 
    <a वर्ग = "ड्रपडाउन-टगल" 
       data-toggle = "ड्रपडाउन"
       href = "#" >
        ड्रपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      <!-- लिङ्कहरू -->
    </ul>
  </li>
</ul>

ड्रपडाउन संग गोली

• घर
• मद्दत गर्नुहोस्
• ड्रपडाउन
  • कार्य
  • अर्को कार्य
  • यहाँ अरू केही
  • अलग लिङ्क

<ul class = "nav nav-pills" > 
  <li class = "ड्रपडाउन" > 
    <a वर्ग = "ड्रपडाउन-टगल" 
       data-toggle = "ड्रपडाउन"
       href = "#" >
        ड्रपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      <!-- लिङ्कहरू -->
    </ul>
  </li>
</ul>

अनुप्रयोग शैली नेभिगेसन

Nav सूचीहरूले वैकल्पिक हेडरहरूको साथ एनएभि लिङ्कहरूको समूहहरू निर्माण गर्न सरल र सजिलो तरिका प्रदान गर्दछ। तिनीहरू OS X मा खोजकर्ता जस्तै साइडबारहरूमा राम्रो प्रयोग गरिन्छ।

संरचनात्मक रूपमा, तिनीहरू ट्याबहरू र चक्कीहरू जस्तै कोर एनएभ शैलीहरूमा बनाइएका छन्, त्यसैले प्रयोग र अनुकूलन सीधा छन्।

आइकनहरूको साथ

एनएभि सूचीहरू पनि आइकनहरूसँग लैजान सजिलो छ। कक्षाको साथ उचित <i>ट्याग थप्नुहोस् र तपाईं सेट हुनुहुन्छ।

तेर्सो विभाजक

वर्गसँग खाली सूची वस्तु सिर्जना गरेर तेर्सो विभाजक थप्नुहोस् .divider, जस्तै:

<ul class = "nav nav-list" > 
  ...
  <li वर्ग = "विभाजक" ></li> 
  ...
</ul>

उदाहरण nav सूची

लिङ्कहरूको सूची लिनुहोस् र थप्नुहोस् class="nav nav-list":

<ul class = "nav nav-list" > 
  <li class = "nav-header" > 
    सूची हेडर
  </li>
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li>
    <a href="#" > पुस्तकालय </a> _ _ 
  </li>
  ...
</ul>

प्रतिमा संग उदाहरण

उही उदाहरण, तर <i>आइकनहरूको लागि ट्यागहरूको साथ।

<ul class = "nav nav-list" > 
  ...
  <li>
    <a href = "#" > 
      <i class = "icon-book" ></i> 
      पुस्तकालय
    </a>
  </li>
  ...
</ul>

के समावेश छ

ट्याबहरू मार्फत सामग्री बीच टगल गर्न सरल प्लगइनको साथ आफ्नो ट्याबहरूलाई जीवन्त बनाउनुहोस्। बुटस्ट्र्यापले ट्याबबल ट्याबहरूलाई चार शैलीहरूमा एकीकृत गर्दछ: शीर्ष (पूर्वनिर्धारित), दायाँ, तल र बायाँ।

तिनीहरू बीच परिवर्तन गर्न सजिलो छ र केवल धेरै थोरै मार्कअप परिवर्तन गर्न आवश्यक छ।

ट्याबहरूमा फेड

ट्याबहरू फेड इन बनाउनको लागि, .fadeप्रत्येकमा थप्नुहोस् .tab-pane।

jQuery प्लगइन आवश्यक छ

सबै ट्याबयोग्य ट्याबहरू हाम्रो हल्का jQuery प्लगइनद्वारा संचालित हुन्छन्। जाभास्क्रिप्ट कागजात पृष्ठमा ट्याबयोग्य ट्याबहरू कसरी जीवनमा ल्याउने भन्ने बारे थप पढ्नुहोस् ।

जाभास्क्रिप्ट पाउनुहोस् →

टेबुल उदाहरण

ट्याबहरूलाई ट्याबयोग्य बनाउनको लागि, .tab-paneप्रत्येक ट्याबको लागि एक अद्वितीय आईडी सिर्जना गर्नुहोस् र तिनीहरूलाई र्‍याप गर्नुहोस् .tab-content।

दायाँ वा बायाँ पङ्क्तिबद्ध ट्याबहरूका लागि, .nav-tabsर .tab-contentभित्र र्‍याप गर्नुहोस् .tabbable।

सीधा मार्कअप

ट्याबबल ट्याबहरू प्रयोग गर्नको लागि र्यापिङ डिभ, ट्याबहरूको सेट, र सामग्रीको ट्याबबल प्यानहरूको सेट चाहिन्छ।

<div class = "tabbable" > <!-- बायाँ/दायाँ ट्याबहरूको लागि मात्र आवश्यक छ -->  
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#tab1" data-toggle = "tab" > खण्ड १ </a></li>   
    <li><a href = "#tab2" data-toggle = "tab" > खण्ड २ </a></li>  
  </ul>
  <div वर्ग = "ट्याब-सामग्री" > 
    <div वर्ग = "ट्याब-फलक सक्रिय" आईडी = "ट्याब१" >  
      <p> म खण्ड १ मा छु। </p>
    </div>
    <div class = "tab- pane" id = "tab2" >  
      <p> नमस्ते, म खण्ड २ मा छु। </p>
    </div>
  </div>
</div>

तल ट्याबहरू

HTML को अर्डर फ्लिप गर्नुहोस् र तल ट्याबहरू राख्नको लागि कक्षा थप्नुहोस्।

<div वर्ग = "ट्याबबल ट्याबहरू तल" > 
  <div वर्ग = "ट्याब-सामग्री" > 
    ...
  </div>
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
</div>

बाँयामा ट्याबहरू

बायाँमा ट्याबहरू राख्न कक्षा स्व्याप गर्नुहोस्।

<div वर्ग = "ट्याबयोग्य ट्याबहरू-बायाँ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "ट्याब-सामग्री" > 
    ...
  </div>
</div>

दायाँ ट्याबहरू

दायाँतिर ट्याबहरू राख्न कक्षा स्व्याप गर्नुहोस्।

<div वर्ग = "ट्याबयोग्य ट्याबहरू-दायाँ" > 
  <ul class = "nav nav-tabs" > 
    ...
  </ul>
  <div वर्ग = "ट्याब-सामग्री" > 
    ...
  </div>
</div>

नवबार मचान

नेभबारलाई स्थिर वा स्थिर प्रदर्शनको लागि यसलाई राम्रोसँग संरचना गर्न केही डिभहरू मात्र चाहिन्छ।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div वर्ग = "कन्टेनर" > 
      ...
    </div>
  </div>
</div>

निश्चित नवबार

सबैभन्दा बाहिरी div मा अतिरिक्त वर्गको साथ भ्यूपोर्टको माथि वा तल्लो भागमा नेभबार फिक्स गर्नुहोस् .navbar।

<div class = "navbar navbar-fixed-top" > 
  ...
</div>

<div class = "navbar navbar-fixed-bottom" > 
  ...
</div>

जब तपाइँ नेभबार जोड्नुहुन्छ, तल लुकेको क्षेत्रको लागि खाता गर्न सम्झनुहोस्। मा 40px वा थप प्याडिङ थप्नुहोस् <body>। यो कोर बुटस्ट्र्याप CSS पछि र वैकल्पिक उत्तरदायी CSS अघि थप्न निश्चित हुनुहोस्।

ब्रान्ड नाम

तपाईंको ब्रान्ड वा परियोजनाको नाम देखाउनको लागि एउटा साधारण लिङ्कलाई एङ्कर ट्याग मात्र चाहिन्छ।

<a वर्ग = "ब्रान्ड" href = "#" >  
  परियोजनाको नाम
</a>

नवबारमा फारमहरू

नेभबार भित्र फारमलाई ठीकसँग शैली र स्थिति बनाउन, तल देखाइएको अनुसार उपयुक्त वर्गहरू थप्नुहोस्। पूर्वनिर्धारित फारमको लागि, समावेश गर्नुहोस् .navbar-formर या त .pull-leftवा .pull-rightयसलाई राम्ररी पङ्क्तिबद्ध गर्नुहोस्।

<form वर्ग = "navbar-form पुल-बायाँ" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "span2" >  
</form>

थप अनुकूलित खोज फारमको .navbar-searchलागि , नेभबारमा विशेष शैलीहरूको लागि इनपुटमा formर थप्नुहोस्।.search-query

<फार्म वर्ग = "नवबार-खोज पुल-बायाँ" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</form>

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

तपाइँको शीर्ष पट्टी मा सामग्री को मात्रा मा निर्भर गर्दछ, तपाइँ उत्तरदायी विकल्पहरु लागू गर्न चाहानुहुन्छ। त्यसो गर्नको लागि, आफ्नो nav सामग्री समावेश div .nav-collapse.collapseमा बेर्नुहोस्, र navbar टगल बटन, थप्नुहोस् .btn-navbar।

<div class = "navbar" > 
  <div class = "navbar-inner" > 
    <div वर्ग = "कन्टेनर" > 
 
      <!-- .btn-navbar संक्षिप्त गरिएको नेभबार सामग्रीको लागि टगलको रूपमा प्रयोग गरिन्छ -->
      <a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >   
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
        <span class = "icon-bar" ></span> 
      </a>
 
      <!-- यदि तपाइँ यसलाई देखाउन चाहनुहुन्छ भने त्यहाँ ब्रान्ड छोड्न निश्चित हुनुहोस् -->
      <a वर्ग = "ब्रान्ड" href = "#" > परियोजनाको नाम </a>  
 
      <!-- तपाईले 940px वा कममा लुकाउन चाहनुभएको सबै कुरा यहाँ भित्र राख्नुहोस् -->
      <div class = "nav-collaps" > 
        <!-- .nav, .navbar-search, .navbar-form, etc -->
      </div>
 
    </div>
  </div>
</div>

Nav लिङ्कहरू

नेभी वस्तुहरू क्रमबद्ध सूचीहरू मार्फत थप्न सरल छन्।

<ul class = "nav" > 
  <li class = "सक्रिय" > 
    <a href="#" > घर </a> _ _ 
  </li>
  <li><a href = "#" > लिङ्क </a></li> 
  <li><a href = "#" > लिङ्क </a></li> 
</ul>

तपाईं सजिलैसँग खाली सूची वस्तु र एक साधारण कक्षाको साथ आफ्नो एनएभि लिङ्कहरूमा डिभाइडरहरू थप्न सक्नुहुन्छ। केवल लिङ्कहरू बीच यो थप्नुहोस्:

<ul class = "nav" > 
  ...
  <li class = "divider-vertical" ></li> 
  ...
</ul>

कम्पोनेन्ट पङ्क्तिबद्धता

एनएभि, खोज फारम, वा पाठ पङ्क्तिबद्ध गर्न, .pull-leftवा .pull-rightउपयोगिता वर्गहरू प्रयोग गर्नुहोस्। दुबै वर्गहरूले निर्दिष्ट दिशामा CSS फ्लोट थप्नेछन्।

ड्रपडाउन मेनुहरू थप्दै

एनएभिमा ड्रपडाउनहरू र ड्रपअपहरू थप्न एकदम सरल छ, तर हाम्रो जाभास्क्रिप्ट प्लगइनको प्रयोग आवश्यक छ ।

<ul class = "nav" > 
  <li class = "ड्रपडाउन" > 
    <a href = "#" 
          वर्ग = "ड्रपडाउन-टगल"
          data-toggle = "ड्रपडाउन" >
          खाता
          <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </li>
</ul>

जाभास्क्रिप्ट पाउनुहोस् →

navbar मा पाठ

उचित अग्रगामी र रङको लागि <.navbar-text>सामान्यतया ट्यागमा पाठको स्ट्रिङहरू र्‍याप गर्नुहोस्।<p>

किन तिनीहरूलाई प्रयोग गर्नुहोस्

ब्रेडक्रम्ब नेभिगेसन प्रयोगकर्ताहरूलाई तिनीहरू एप वा साइट भित्र कहाँ छन् भनेर देखाउने तरिकाको रूपमा प्रयोग गरिन्छ, तर प्राथमिक नेभिगेसनका लागि होइन। सबैभन्दा प्रभावकारी हुन तिनीहरूको प्रयोग विरल र संक्षिप्त राख्नुहोस्।

उदाहरणहरू

एकल उदाहरण देखाइएको रूपमा यो धेरै पृष्ठहरूमा प्रदर्शित हुन सक्छ।

• घर

• घर /
• पुस्तकालय

• घर /
• पुस्तकालय /
• डाटा

मार्कअप

एचटीएमएल तपाइँको लिङ्क संग मानक अक्रमित सूची हो।

<ul class = "ब्रेडक्रम्ब" > 
  <li>
    <a href = "#" > घर </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > पुस्तकालय </a> <span class = "divider" > / </span>   
  </li>
  <li वर्ग = "सक्रिय" > डाटा </li> 
</ul>

कहिले प्रयोग गर्ने

Rdio द्वारा प्रेरित अल्ट्रा सरल र न्यूनतम शैलीको पृष्ठांकन, एपहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।

स्टेटफुल पृष्ठ लिङ्कहरू

लिङ्कहरू अनुकूलन योग्य छन् र सही वर्गको साथ धेरै परिस्थितिहरूमा काम गर्दछ। .disabledक्लिक गर्न नसकिने लिङ्कहरू र .activeहालको पृष्ठको लागि।

लचिलो पङ्क्तिबद्धता

पृष्ठांकन लिङ्कहरूको पङ्क्तिबद्धता परिवर्तन गर्न दुई वैकल्पिक कक्षाहरू मध्ये कुनै पनि थप्नुहोस्: .pagination-centeredर .pagination-right।

उदाहरणहरू

पूर्वनिर्धारित पृष्ठांकन कम्पोनेन्ट लचिलो छ र धेरै भिन्नताहरूमा काम गर्दछ।

मार्कअप

एक <div>मा बेरिएको, पृष्ठांकन केवल एक हो <ul>।

<div वर्ग = "पृष्ठांकन" > 
  <ul>
    <li><a href = "#" > अघिल्लो </a></li> 
    <li class = "सक्रिय" > 
      <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>

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

पेजर कम्पोनेन्ट हल्का मार्कअप र अझ हल्का शैलीहरूको साथ सरल पृष्ठांकन कार्यान्वयनका लागि लिङ्कहरूको सेट हो। यो ब्लग वा पत्रिका जस्ता साधारण साइटहरूको लागि उत्कृष्ट छ।

वैकल्पिक असक्षम अवस्था

पेजर लिङ्कहरूले .disabledपृष्ठांकनबाट सामान्य वर्ग पनि प्रयोग गर्दछ।

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

पूर्वनिर्धारित रूपमा, पेजर केन्द्रहरू लिङ्कहरू।

• अघिल्लो
• अर्को

<ul class = "पेजर" > 
  <li>
    <a href="#" > अघिल्लो </a> _ _ 
  </li>
  <li>
    <a href="#" > अर्को </a> _ _ 
  </li>
</ul>

पङ्क्तिबद्ध लिङ्कहरू

वैकल्पिक रूपमा, तपाइँ प्रत्येक लिङ्कलाई छेउमा पङ्क्तिबद्ध गर्न सक्नुहुन्छ:

• ← पुरानो
• नयाँ →

<ul class = "पेजर" > 
  <li वर्ग = "अघिल्लो" > 
    <a href = "#" > ← पुरानो </a> 
  </li>
  <li class = "next" > 
    <a href = "#" > नयाँ → </a> 
  </li>
</ul>

बारे

ब्याजहरू कुनै प्रकारको सूचक वा गणना प्रदर्शन गर्नका लागि साना, सरल कम्पोनेन्टहरू हुन्। तिनीहरू सामान्यतया इमेल क्लाइन्टहरू जस्तै Mail.app वा पुश सूचनाहरूको लागि मोबाइल एपहरूमा पाइन्छ।

उपलब्ध कक्षाहरू

बुटस्ट्र्यापले तपाईंको साइटमा सामग्री प्रदर्शन गर्न नायक इकाई भनिने हल्का, लचिलो कम्पोनेन्ट प्रदान गर्दछ। यसले मार्केटिङ र सामग्री-भारी साइटहरूमा राम्रोसँग काम गर्दछ।

मार्कअप

तपाईंको सामग्रीलाई यसरी बेर्नुहोस् div:

<div वर्ग = "नायक-इकाई" > 
  <h1> शीर्षक </ h1>
  <p> ट्यागलाइन </p>
  <p>
    <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" > 
      अझै सिक
    </a>
  </p>
</div>

h1पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा खाली गर्न र खण्डहरू गर्नको लागि एउटा सरल शेल । यसले h1पूर्वनिर्धारित small, तत्व र अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।

<div वर्ग = "पृष्ठ-हेडर" > 
  <h1> उदाहरण पृष्ठ हेडर </h1>
</div>

पूर्वनिर्धारित थम्बनेलहरू

पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।

उच्च अनुकूलन योग्य

थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।

• 

  थम्बनेल लेबल

  Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

  कार्य कार्य

• 

  थम्बनेल लेबल

  Cras justo odio, dapibus ac facilisis in, egestas eget quam। Donec id elit non mi porta gravida at eget metus। Nullam id dolor id nibh ultricies vehicula ut id elit।

  कार्य कार्य

थम्बनेलहरू किन प्रयोग गर्ने

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

सरल, लचिलो मार्कअप

थम्बनेल मार्कअप सरल छ - तत्वहरूको ulकुनै पनि संख्याको साथ liसबै आवश्यक छ। यो अति लचिलो पनि छ, कुनै पनि प्रकारको सामग्रीलाई तपाईंको सामग्रीहरू र्‍याप गर्न अलि बढी मार्कअपको साथ अनुमति दिँदै।

ग्रिड स्तम्भ आकारहरू प्रयोग गर्दछ

अन्तमा, थम्बनेल कम्पोनेन्टले थम्बनेल आयामहरूको नियन्त्रणको लागि अवस्थित ग्रिड प्रणाली वर्गहरू जस्तै .span2वा — प्रयोग गर्दछ।.span3

मार्कअप

पहिले उल्लेख गरिएझैं, थम्बनेलहरूको लागि आवश्यक मार्कअप हल्का र सीधा छ। यहाँ लिङ्क गरिएका छविहरूको लागि पूर्वनिर्धारित सेटअपमा एक नजर छ :

<ul class = "थम्बनेल" > 
  <li class = "span3" > 
    <a href = "#" वर्ग = "थम्बनेल" >  
      <img src = "https://placehold.it/260x180" alt = "" >  
    </a>
  </li>
  ...
</ul>

थम्बनेलहरूमा अनुकूलन HTML सामग्रीको लागि, मार्कअप थोरै परिवर्तन हुन्छ। ब्लक स्तर सामग्रीलाई कहीं पनि अनुमति दिनको लागि, हामी यस प्रकारको <a>लागि स्वैप गर्छौं <div>:

<ul class = "थम्बनेल" > 
  <li class = "span3" > 
    <div वर्ग = "थम्बनेल" > 
      <img src = "https://placehold.it/260x180" alt = "" >  
      <h5> थम्बनेल लेबल </ h5>
      <p> थम्बनेल क्याप्सन यहाँ... </p>
    </div>
  </li>
  ...
</ul>

थप उदाहरणहरू

तपाईका लागि उपलब्ध विभिन्न ग्रिड कक्षाहरूसँग तपाईका सबै विकल्पहरू अन्वेषण गर्नुहोस्। तपाईं पनि विभिन्न आकारहरू मिलाउन र मिलाउन सक्नुहुन्छ।

पुन: लेखिएको आधार वर्ग

Bootstrap 2 को साथ, हामीले आधार वर्गलाई सरलीकृत गरेका छौं: .alertको सट्टा .alert-message। हामीले न्यूनतम आवश्यक मार्कअपलाई पनि घटाएका छौं - <p>पूर्वनिर्धारित रूपमा आवश्यक छैन, केवल बाहिरी <div>।

एकल चेतावनी सन्देश

कम कोडको साथ अधिक टिकाऊ कम्पोनेन्टको लागि, हामीले ब्लक अलर्टहरू, थप प्याडिङ र सामान्यतया थप पाठको साथ आउने सन्देशहरूका लागि विभेदकारी रूप हटाएका छौं। कक्षा पनि परिवर्तन भएको छ .alert-block।

जाभास्क्रिप्ट संग राम्रो जान्छ

बुटस्ट्र्याप एक उत्कृष्ट jQuery प्लगइनको साथ आउँछ जसले सतर्क सन्देशहरूलाई समर्थन गर्दछ, तिनीहरूलाई छिटो र सजिलो बनाउँदै।

प्लगइन प्राप्त गर्नुहोस् »

उदाहरण अलर्टहरू

सरल कक्षाको साथ डिभमा आफ्नो सन्देश र वैकल्पिक बन्द आइकन बेर्नुहोस्।

<div वर्ग = "सतर्क" > 
  <बटन क्लास = "क्लोज" डाटा-डिसमिस = "अलर्ट" > × </ बटन>  
  <strong> चेतावनी! </strong> सर्वश्रेष्ठ यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।
</div>

हेड अप! iOS यन्त्रहरूलाई href="#"अलर्टहरू खारेज गर्न आवश्यक पर्दछ। एन्कर क्लोज आइकनहरूको लागि यसलाई र डेटा विशेषता समावेश गर्न निश्चित हुनुहोस्। वैकल्पिक रूपमा, तपाईंले <button>डाटा विशेषता भएको तत्व प्रयोग गर्न सक्नुहुन्छ, जुन हामीले हाम्रा कागजातहरूको लागि रोजेका छौं। प्रयोग गर्दा <button>, तपाईंले समावेश गर्नुपर्छ type="button"वा तपाईंको फारमहरू पेश नगर्न सक्छ।

सजिलैसँग दुई वैकल्पिक कक्षाहरूसँग मानक अलर्ट सन्देश विस्तार गर्नुहोस्: .alert-blockथप प्याडिङ र पाठ नियन्त्रणहरू र .alert-headingमिल्दो शीर्षकका लागि।

<div वर्ग = "अलर्ट अलर्ट-ब्लक" > 
  <a class = "close" data-dismiss = "alert" href = "#" > × </a>   
  <h4 class = "alert-heading" > चेतावनी! </ h4> 
  आफैलाई उत्तम जाँच गर्नुहोस्, तपाईं हुनुहुन्न ...
</div>

त्रुटि वा खतरा

<div वर्ग = "सतर्क चेतावनी-त्रुटि" > 
  ...
</div>

सफलता

<div वर्ग = "अलर्ट अलर्ट-सफलता" > 
  ...
</div>

जानकारी

<div वर्ग = "अलर्ट अलर्ट-जानकारी" > 
  ...
</div>

आधारभूत

ठाडो ढाँचाको साथ पूर्वनिर्धारित प्रगति पट्टी।

<div वर्ग = "प्रगति" > 
  <div वर्ग = "पट्टी" 
       शैली = " चौडाइ : 60 %; " ></div> 
</div>

धारीदार

स्ट्रिप गरिएको प्रभाव सिर्जना गर्न ग्रेडियन्ट प्रयोग गर्दछ (आईई छैन)।

<div class = "progress progress-striped" > 
  <div वर्ग = "पट्टी" 
       शैली = " चौडाइ : 20 %; " ></div> 
</div>

एनिमेटेड

स्ट्रिप गरिएको उदाहरण लिन्छ र यसलाई एनिमेट गर्दछ (आईई छैन)।

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

अतिरिक्त रंगहरू

प्रगति पट्टीहरूले समान शैलीहरूका लागि केही समान बटन र अलर्ट कक्षाहरू प्रयोग गर्छन्।

धारीदार बारहरू

ठोस रङहरू जस्तै, हामीसँग विभिन्न धारीदार प्रगति पट्टीहरू छन्।

व्यवहार

प्रोग्रेस बारहरूले CSS3 ट्रान्जिसनहरू प्रयोग गर्छन्, त्यसैले यदि तपाईंले जाभास्क्रिप्ट मार्फत गतिशील रूपमा चौडाइ समायोजन गर्नुभयो भने, यसले सजिलै रिसाइज गर्नेछ।

यदि तपाइँ .activeकक्षा प्रयोग गर्नुहुन्छ भने, तपाइँको .progress-stripedप्रगति पट्टीहरूले बायाँ देखि दायाँ पट्टिहरू एनिमेट गर्नेछ।

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

प्रगति पट्टीहरूले तिनीहरूका सबै प्रभावहरू प्राप्त गर्न CSS3 ढाँचाहरू, संक्रमणहरू, र एनिमेसनहरू प्रयोग गर्छन्। यी सुविधाहरू IE7-9 वा Firefox को पुरानो संस्करणहरूमा समर्थित छैनन्।

Opera र IE ले यस समयमा एनिमेसनहरूलाई समर्थन गर्दैन।

वेल्स

एक तत्व मा एक इनसेट प्रभाव दिन को लागी एक साधारण प्रभाव को रूप मा राम्रो को उपयोग गर्नुहोस्।

<div वर्ग = "राम्रो" > 
  ...
</div>

बन्द आइकन

मोडल र अलर्टहरू जस्ता सामग्री खारेज गर्नका लागि जेनेरिक क्लोज आइकन प्रयोग गर्नुहोस्।

×

<बटन वर्ग = "बन्द" > &समय; </ बटन> 

iOS यन्त्रहरूलाई क्लिक घटनाहरूको लागि एक href="#" आवश्यक छ यदि तपाईं बरु एङ्कर प्रयोग गर्नुहुन्छ।

<a class = "close" href = "#" > × </a>