अवयवहरू

नेभिगेसन, अलर्टहरू, पपओभरहरू, र थप धेरै प्रदान गर्नका लागि दर्जनौं पुन: प्रयोज्य कम्पोनेन्टहरू बुटस्ट्र्यापमा निर्मित छन्।

बटन समूहहरू

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

तपाईं थप जटिल परियोजनाहरूको लागि सेटहरू संयोजन गर्न सक्नुहुन्छ <div class="btn-group">।<div class="btn-toolbar">

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

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

<div class = "btn-group" > 
  <a class = "btn" href = "#" > १ </a>  
  <a class = "btn" href = "#" > २ </a>  
  <a class = "btn" href = "#" > ३ </a>  
</div>

र धेरै समूहहरूको लागि उपकरणपट्टीको साथ:

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

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

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

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

हेड अप

बटन समूहहरूको लागि CSS एउटा छुट्टै फाइलमा छ, button-groups.less।

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

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

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

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

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

विभाजित बटन ड्रपडाउनहरू

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

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

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

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

लाइटवेट पूर्वनिर्धारित समान मार्कअप, विभिन्न वर्गहरू

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

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

किन ट्याब र गोली

बुटस्ट्र्यापमा ट्याबहरू र चक्कीहरू <ul>एउटै कोर HTML, लिङ्कहरूको सूचीमा बनाइएका छन्। केवल कक्षाको साथ ट्याबहरू वा चक्कीहरू बीच स्वैप गर्नुहोस्।

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

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

लिङ्कहरूको नियमित लिनुहोस् <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 वर्ग = "ड्रपडाउन-टगल" 
       डाटा-टगल = "ड्रपडाउन"
       href = "#" >
        ड्रपडाउन
        <b class = "caret" ></b> 
      </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      <!-- लिङ्कहरू -->
    </ul>
  </li>
</ul>

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

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

Nav सूचीहरू साधारण स्ट्याक्ड navs बनाउनुहोस्, साइडबारहरूको लागि उत्कृष्ट

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

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

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

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

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

उदाहरण 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>

Tabbable nav जाभास्क्रिप्ट मार्फत ट्याबहरूलाई जीवन्त बनाउनुहोस्

के समावेश छ

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

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

टेबुल उदाहरण

ट्याबहरू ट्याबयोग्य बनाउनको लागि, .nav-tabsकक्षाको साथ अर्को डिभमा बेर्नुहोस् .tabbable।

म खण्ड १ मा छु।

नमस्कार, म खण्ड २ मा छु।

के छ केटी, यो खण्ड 3 हो।

अनुकूलन jQuery प्लगइन

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

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

सीधा मार्कअप

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

<div class = "tabable" > 
  <ul class = "nav nav-tabs" > 
    <li class = "active" ><a href = "#1" data-toggle = "tab" > खण्ड १ </a></li>   
    <li><a href = "#2" data-toggle = "tab" > खण्ड २ </a></li>  
  </ul>
  <div वर्ग = "ट्याब-सामग्री" > 
    <div वर्ग = "ट्याब-फलक सक्रिय" आईडी = "1" >  
      <p> म खण्ड १ मा छु। </p>
    </div>
    <div class = "tab-pane" id = "2" >  
      <p> नमस्ते, म खण्ड २ मा छु। </p>
    </div>
  </div>
</div>

कुनै पनि दिशामा ट्याबबल

तल ट्याबहरू

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

म सेक्शन ए मा छु।

नमस्कार, म खण्ड B मा छु।

के छ केटी, यो खण्ड सी हो।

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

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

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

म सेक्शन ए मा छु।

नमस्कार, म खण्ड B मा छु।

के छ केटी, यो खण्ड सी हो।

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

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

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

म सेक्शन ए मा छु।

नमस्कार, म खण्ड B मा छु।

के छ केटी, यो खण्ड सी हो।

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

स्थिर नवबार उदाहरण

परियोजनाको नाम, नेभिगेसन, र खोज फारमको साथ स्थिर (शीर्षमा निश्चित गरिएको छैन) नेभबारको उदाहरण।

नवबार मचान

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

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

.navbar-fixed-topनेभबारलाई भ्युपोर्टको शीर्षमा फिक्स गर्नको लागि, बाहिरी भागमा थप्नुहोस् .navbar। तपाइँको CSS मा, तपाइँले padding-top: 40px;तपाइँको <body>.

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

ब्रान्ड नाम

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

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

खोज फारम

खोज फारमहरूले क्लासको साथ नवबारमा आफू अनुकूल शैलीहरू प्राप्त गर्छन् .navbar-search। यसलाई पङ्क्तिबद्ध गर्न समावेश गर्नुहोस् .pull-leftवा यसमा।.pull-rightform

<फार्म वर्ग = "navbar-खोज पुल-बायाँ" > 
  <इनपुट प्रकार = "पाठ" वर्ग = "खोज-क्वेरी" प्लेसहोल्डर = "खोज" >   
</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 = "ड्रपडाउन" >
    <a href = "#" 
          वर्ग = "ड्रपडाउन-टगल"
          डाटा-टगल = "ड्रपडाउन" >
          खाता
          <b class = "caret" ></b> 
    </a>
    <ul class = "ड्रपडाउन-मेनु" > 
      ...
    </ul>
  </li>
</ul>

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

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

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

उदाहरणहरू

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

मार्कअप

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

<ul class = "ब्रेडक्रम्ब" > 
  <li>
    <a href = "#" > घर </a> <span class = "divider" > / </span>   
  </li>
  <li>
    <a href = "#" > पुस्तकालय </a> <span class = "divider" > / </span>   
  </li>
  <li class = "सक्रिय" > 
    <a href="#" > डाटा </a> _ _ 
  </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>

छिटो अघिल्लो र अर्को लिङ्कहरूको लागि पेजर

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

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

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

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

<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>

लेबलहरू	मार्कअप
पूर्वनिर्धारित	`<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>`

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

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

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

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

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

चेतावनी!

उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनु भएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

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

प्रासंगिक विकल्पहरू अलर्टको अर्थ परिवर्तन गर्न वैकल्पिक कक्षाहरू थप्नुहोस्

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

× ओह स्न्याप! केहि चीजहरू परिवर्तन गर्नुहोस् र फेरि पेश गर्ने प्रयास गर्नुहोस्।

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

सफलता

× राम्रो काम! तपाईंले यो महत्त्वपूर्ण चेतावनी सन्देश सफलतापूर्वक पढ्नुभयो।

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

जानकारी

× हेड अप! यो अलर्टलाई तपाईंको ध्यान चाहिन्छ, तर यो धेरै महत्त्वपूर्ण छैन।

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

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

आधारभूत

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

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

धारीदार

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

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

एनिमेटेड

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

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

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

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

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

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

वैकल्पिक रूपमा, तपाइँ कम फाइलहरू अनुकूलन गर्न सक्नुहुन्छ र तपाइँको आफ्नै रङ र आकारहरू रोल गर्न सक्नुहुन्छ।

व्यवहार

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

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

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

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

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

वेल्स

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

हेर, म इनारमा छु!

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

ब्याजहरू

नपढिएको गणना वा साधारण सूचकको रूपमा एउटा तत्वमा ब्याज प्रयोग गर्नुहोस्।

<span class = "badge" > 3 </div>

बन्द आइकन

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

<a class = "close" > &time; </a>

बटन समूहहरू थप उपकरणपट्टी-जस्तै कार्यक्षमताका लागि बटनहरूमा सामेल हुनुहोस्

बटन समूहहरू

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

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

हेड अप

बटन ड्रपडाउनहरू बटन समूहहरूमा निर्मित प्रासंगिक ड्रपडाउन मेनुहरू

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

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

विभाजित बटन ड्रपडाउनहरू

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

एनएभि, ट्याबहरू, र चक्कीहरू उच्च अनुकूलन सूची-शैली नेभिगेसन

लाइटवेट पूर्वनिर्धारित समान मार्कअप, विभिन्न वर्गहरू

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

किन ट्याब र गोली

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

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

स्ट्याकयोग्य ट्याबहरू वा चक्कीहरू ठाडो बनाउनुहोस्

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

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

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

उन्नत एनएभि घटकहरूको लागि ड्रपडाउनहरू

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

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

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

Nav सूचीहरू साधारण स्ट्याक्ड navs बनाउनुहोस्, साइडबारहरूको लागि उत्कृष्ट

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

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

उदाहरण nav सूची

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

Tabbable nav जाभास्क्रिप्ट मार्फत ट्याबहरूलाई जीवन्त बनाउनुहोस्

के समावेश छ

टेबुल उदाहरण

अनुकूलन jQuery प्लगइन

सीधा मार्कअप

कुनै पनि दिशामा ट्याबबल

तल ट्याबहरू

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

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

नवबार

स्थिर नवबार उदाहरण

नवबार मचान

ब्रान्ड नाम

खोज फारम

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

Nav लिङ्कहरू

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

ब्रेडक्रम्ब्स

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

उदाहरणहरू

मार्कअप

पृष्ठांकन सामग्री मार्फत पृष्ठिङका लागि दुई विकल्पहरू

मल्टिकोन-पृष्ठ पृष्ठांकन

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

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

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

उदाहरणहरू

मार्कअप

छिटो अघिल्लो र अर्को लिङ्कहरूको लागि पेजर

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

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

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

इनलाइन लेबलहरू लेबल र एनोटेट पाठ

छवि, भिडियो, पाठ, र थप थम्बनेल ग्रिड

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

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

थम्बनेल लेबल

थम्बनेल लेबल

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

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

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

मार्कअप

थप उदाहरणहरू

सफलता, चेतावनी, र त्रुटि सन्देशहरूको लागि अलर्ट शैलीहरू

हल्का डिफल्टहरू

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

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

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

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

चेतावनी!

प्रासंगिक विकल्पहरू अलर्टको अर्थ परिवर्तन गर्न वैकल्पिक कक्षाहरू थप्नुहोस्