नेभिगेसन, अलर्ट, पपओभर, र थप प्रदान गर्नका लागि निर्मित दर्जनौं पुन: प्रयोज्य कम्पोनेन्टहरू।
लिङ्कहरूको सूचीहरू प्रदर्शन गर्नको लागि टगल गर्न मिल्ने, प्रासंगिक मेनु। ड्रपडाउन जाभास्क्रिप्ट प्लगइनसँग अन्तरक्रियात्मक बनाइयो ।
- <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu" >
- <li><a tabindex = "-1" href = "#" > कार्य </a></li>
- <li><a tabindex = "-1" href = "#" > अर्को कार्य </a></li>
- <li><a tabindex = "-1" href = "#" > यहाँ अरू केही </a></li>
- <li class = "डिभाइडर" ></li>
- <li><a tabindex = "-1" href = "#" > अलग लिङ्क </a></li>
- </ul>
केवल ड्रपडाउन मेनु हेर्दै, यहाँ आवश्यक HTML छ। तपाईंले ड्रपडाउनको ट्रिगर र ड्रपडाउन मेनु भित्र र्याप गर्न आवश्यक छ .dropdown
, वा घोषणा गर्ने अर्को तत्व position: relative;
। त्यसपछि मात्र मेनु सिर्जना गर्नुहोस्।
- <div वर्ग = "ड्रपडाउन" >
- <!-- ड्रपडाउन टगल गर्न लिङ्क वा बटन -->
- <ul class = "ड्रपडाउन-मेनु" भूमिका = "मेनु" aria-labelledby = "dLabel" >
- <li><a tabindex = "-1" href = "#" > कार्य </a></li>
- <li><a tabindex = "-1" href = "#" > अर्को कार्य </a></li>
- <li><a tabindex = "-1" href = "#" > यहाँ अरू केही </a></li>
- <li class = "डिभाइडर" ></li>
- <li><a tabindex = "-1" href = "#" > अलग लिङ्क </a></li>
- </ul>
- </div>
दायाँ तिर मेनुहरू पङ्क्तिबद्ध गर्नुहोस् र ड्रपडाउनहरूको अतिरिक्त स्तरहरू समावेश गर्नुहोस्।
ड्रपडाउन मेनुलाई दायाँ पङ्क्तिबद्ध .pull-right
गर्न a मा थप्नुहोस् ।.dropdown-menu
- <ul class = "ड्रपडाउन-मेनु पुल-दायाँ" भूमिका = "मेनु" aria-labelledby = "dLabel" >
- ...
- </ul>
ड्रपडाउन मेनुहरूको अतिरिक्त स्तर थप्नुहोस्, OS X जस्तै होभरमा देखा पर्दै, केही साधारण मार्कअप थपहरू। स्वचालित स्टाइलको लागि अवस्थित ड्रपडाउन मेनुमा .dropdown-submenu
कुनै पनि थप्नुहोस् ।li
- <ul class = "ड्रपडाउन-मेनु" भूमिका = "मेनु" aria-labelledby = "dLabel" >
- ...
- <li class = "ड्रपडाउन-सबमेनु" >
- <a tabindex = "-1" href = "#" > थप विकल्पहरू </a>
- <ul class = "ड्रपडाउन-मेनु" >
- ...
- </ul>
- </li>
- </ul>
Rdio द्वारा प्रेरित सरल पृष्ठांकन, अनुप्रयोगहरू र खोज परिणामहरूको लागि उत्कृष्ट। ठूलो ब्लक हराउन गाह्रो छ, सजिलै मापनयोग्य छ, र ठूलो क्लिक क्षेत्रहरू प्रदान गर्दछ।
- <div वर्ग = "पृष्ठांकन" >
- <ul>
- <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>
लिङ्कहरू विभिन्न परिस्थितिहरूको लागि अनुकूलन योग्य छन्। .disabled
क्लिक गर्न नसकिने लिङ्कहरूको लागि र .active
हालको पृष्ठ संकेत गर्न प्रयोग गर्नुहोस्।
- <div वर्ग = "पृष्ठांकन" >
- <ul>
- <li वर्ग = "असक्षम" ><a href = "#" > अघिल्लो </a></li>
- <li वर्ग = "सक्रिय" ><a href = "#" > १ </a></li>
- ...
- </ul>
- </div>
पृष्ठांकन लिङ्कहरूको पङ्क्तिबद्धता परिवर्तन गर्न दुई वैकल्पिक कक्षाहरू मध्ये एउटा थप्नुहोस्: .pagination-centered
र .pagination-right
।
- <div वर्ग = "पृष्ठांकन पृष्ठांकन-केन्द्रित" >
- ...
- </div>
- <div वर्ग = "पृष्ठांकन पृष्ठांकन-दायाँ" >
- ...
- </div>
हल्का मार्कअप र शैलीहरूको साथ सरल पृष्ठांकन कार्यान्वयनका लागि द्रुत अघिल्लो र अर्को लिङ्कहरू। यो ब्लग वा पत्रिका जस्ता साधारण साइटहरूको लागि उत्कृष्ट छ।
पूर्वनिर्धारित रूपमा, पेजर केन्द्रहरू लिङ्कहरू।
- <ul class = "पेजर" >
- < li><a href="#" > अघिल्लो </a> < / li>
- <li><a href = "#" > अर्को </a></li>
- </ul>
वैकल्पिक रूपमा, तपाइँ प्रत्येक लिङ्कलाई छेउमा पङ्क्तिबद्ध गर्न सक्नुहुन्छ:
- <ul class = "पेजर" >
- <li class = "अघिल्लो" >
- <a href = "#" > ← पुरानो </a>
- </li>
- <li class = "next" >
- <a href = "#" > नयाँ → </a>
- </li>
- </ul>
पेजर लिङ्कहरूले .disabled
पृष्ठांकनबाट सामान्य उपयोगिता वर्ग पनि प्रयोग गर्दछ।
- <ul class = "पेजर" >
- <li वर्ग = "अघिल्लो असक्षम" >
- <a href = "#" > ← पुरानो </a>
- </li>
- ...
- </ul>
लेबलहरू | मार्कअप |
---|---|
पूर्वनिर्धारित | <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> |
नाम | उदाहरण | मार्कअप |
---|---|---|
पूर्वनिर्धारित | १ | <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> |
तपाईंको साइटमा मुख्य सामग्री प्रदर्शन गर्न हल्का, लचिलो कम्पोनेन्ट। यसले मार्केटिङ र सामग्री-भारी साइटहरूमा राम्रोसँग काम गर्दछ।
यो एक साधारण नायक एकाई हो, एक साधारण जम्बोट्रोन-शैली कम्पोनेन्ट विशेष सामग्री वा जानकारीमा थप ध्यान दिनको लागि।
- <div वर्ग = "नायक-इकाई" >
- <h1> शीर्षक </ h1>
- <p> ट्यागलाइन </p>
- <p>
- <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" >
- अझै सिक
- </a>
- </p>
- </div>
h1
पृष्ठमा सामग्रीको खण्डहरू उचित रूपमा स्पेस आउट गर्न र खण्डहरू विभाजन गर्नको लागि एउटा साधारण शेल । यसले h1
पूर्वनिर्धारित small
, तत्व र अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।
- <div वर्ग = "पृष्ठ-हेडर" >
- <h1> उदाहरण पृष्ठ हेडर </h1>
- </div>
पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।
थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।
थम्बनेलहरू (पहिले .media-grid
v1.4 सम्म) तस्बिरहरू वा भिडियोहरू, छवि खोज परिणामहरू, खुद्रा उत्पादनहरू, पोर्टफोलियोहरू, र थपको ग्रिडहरूको लागि उत्कृष्ट छन्। तिनीहरू लिङ्क वा स्थिर सामग्री हुन सक्छन्।
थम्बनेल मार्कअप सरल छ - तत्वहरूको ul
कुनै पनि संख्याको साथ li
सबै आवश्यक छ। यो अति लचिलो पनि छ, कुनै पनि प्रकारको सामग्रीलाई तपाईंको सामग्रीहरू र्याप गर्न अलि बढी मार्कअपको साथ अनुमति दिँदै।
अन्तमा, थम्बनेल कम्पोनेन्टले थम्बनेल आयामहरूको नियन्त्रणको लागि अवस्थित ग्रिड प्रणाली वर्गहरू जस्तै .span2
वा — प्रयोग गर्दछ।.span3
पहिले उल्लेख गरिएझैं, थम्बनेलहरूको लागि आवश्यक मार्कअप हल्का र सीधा छ। यहाँ लिङ्क गरिएका छविहरूको लागि पूर्वनिर्धारित सेटअपमा एक नजर छ :
- <ul class = "थम्बनेल" >
- <li class = "span4" >
- <a href = "#" वर्ग = "थम्बनेल" >
- <img src = "https://placehold.it/300x200" alt = "" >
- </a>
- </li>
- ...
- </ul>
थम्बनेलहरूमा अनुकूलन HTML सामग्रीको लागि, मार्कअप थोरै परिवर्तन हुन्छ। ब्लक स्तर सामग्रीलाई कहीं पनि अनुमति दिनको लागि, हामी यस प्रकारको <a>
लागि स्वैप गर्छौं <div>
:
- <ul class = "थम्बनेल" >
- <li class = "span4" >
- <div वर्ग = "थम्बनेल" >
- <img src = "https://placehold.it/300x200" alt = "" >
- <h3> थम्बनेल लेबल </ h3>
- <p> थम्बनेल क्याप्शन... </p>
- </div>
- </li>
- ...
- </ul>
तपाईका लागि उपलब्ध विभिन्न ग्रिड कक्षाहरूसँग तपाईका सबै विकल्पहरू अन्वेषण गर्नुहोस्। तपाईं पनि विभिन्न आकारहरू मिलाउन र मिलाउन सक्नुहुन्छ।
.alert
आधारभूत चेतावनी चेतावनी सन्देशको लागि कुनै पनि पाठ र वैकल्पिक खारेज बटन लपेट्नुहोस् ।
- <div वर्ग = "सतर्क" >
- <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "सतर्क" > × </ बटन>
- <strong> चेतावनी! </strong> सर्वश्रेष्ठ यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनुभएको छैन।
- </div>
मोबाइल सफारी र मोबाइल ओपेरा ब्राउजरहरू, data-dismiss="alert"
विशेषताको अतिरिक्त, ट्याग href="#"
प्रयोग गर्दा अलर्टहरू खारेज गर्न आवश्यक पर्दछ।<a>
- <a href = "#" वर्ग = "बंद" डाटा-खारिज = "अलर्ट" > × </ बटन>
वैकल्पिक रूपमा, तपाईंले <button>
डाटा विशेषता भएको तत्व प्रयोग गर्न सक्नुहुन्छ, जुन हामीले हाम्रा कागजातहरूको लागि रोजेका छौं। प्रयोग गर्दा <button>
, तपाईंले समावेश गर्नुपर्छ type="button"
वा तपाईंको फारमहरू पेश नगर्न सक्छ।
- <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "सतर्क" > × </ बटन>
अलर्टहरू छिटो र सजिलै खारेज गर्न अलर्टहरू jQuery प्लगइन प्रयोग गर्नुहोस् ।
लामो सन्देशहरूको लागि, थपेर अलर्ट र्यापरको माथि र तल प्याडिङ बढाउनुहोस् .alert-block
।
उत्तम यो आफैलाई जाँच गर्नुहोस्, तपाईं धेरै राम्रो देखिरहनु भएको छैन। Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
- <div वर्ग = "अलर्ट अलर्ट-ब्लक" >
- <बटन प्रकार = "बटन" वर्ग = "बंद" डेटा-खारिज = "सतर्क" > × </ बटन>
- <h4> चेतावनी! </ h4>
- आफैलाई उत्तम जाँच गर्नुहोस्, तपाईं हुनुहुन्न ...
- </div>
अलर्टको अर्थ परिवर्तन गर्न वैकल्पिक कक्षाहरू थप्नुहोस्।
- <div वर्ग = "सतर्क चेतावनी-त्रुटि" >
- ...
- </div>
- <div वर्ग = "अलर्ट अलर्ट-सफलता" >
- ...
- </div>
- <div वर्ग = "अलर्ट अलर्ट-जानकारी" >
- ...
- </div>
ठाडो ढाँचाको साथ पूर्वनिर्धारित प्रगति पट्टी।
- <div वर्ग = "प्रगति" >
- <div class = "bar" शैली = " चौडाइ : 60 %; " ></div>
- </div>
स्ट्रिप गरिएको प्रभाव सिर्जना गर्न ग्रेडियन्ट प्रयोग गर्दछ। IE7-8 मा उपलब्ध छैन।
- <div class = "progress progress-striped" >
- <div वर्ग = "पट्टी" शैली = " चौडाइ : २० %; " ></div>
- </div>
दायाँ देखि बायाँ स्ट्रिपहरू एनिमेसन गर्न मा .active
थप्नुहोस् । .progress-striped
IE को सबै संस्करणहरूमा उपलब्ध छैन।
- <div वर्ग = "प्रगति प्रगति-धारी सक्रिय" >
- <div class = "bar" शैली = " चौडाइ : 40 %; " ></div>
- </div>
.progress
तिनीहरूलाई स्ट्याक गर्न एकै ठाउँमा धेरै बारहरू राख्नुहोस् ।
- <div वर्ग = "प्रगति" >
- <div class = "bar bar-success" शैली = " चौडाइ : 35 %; " ></div>
- <div वर्ग = "पट्टी बार-चेतावनी" शैली = " चौडाइ : २० %; " ></div>
- <div class = "बार बार-खतरनाक" शैली = " चौडाइ : 10 %; " ></div>
- </div>
प्रगति पट्टीहरूले समान शैलीहरूका लागि केही समान बटन र अलर्ट कक्षाहरू प्रयोग गर्छन्।
- <div वर्ग = "प्रगति प्रगति जानकारी" >
- <div वर्ग = "पट्टी" शैली = " चौडाइ : २० % " ></div>
- </div>
- <div वर्ग = "प्रगति प्रगति-सफलता" >
- <div class = "bar" शैली = " चौडाइ : 40 % " ></div>
- </div>
- <div वर्ग = "प्रगति प्रगति चेतावनी" >
- <div class = "bar" शैली = " चौडाइ : 60 % " ></div>
- </div>
- <div वर्ग = "प्रगति प्रगति खतरा" >
- <div class = "bar" शैली = " चौडाइ : 80 % " ></div>
- </div>
ठोस रङहरू जस्तै, हामीसँग विभिन्न धारीदार प्रगति पट्टीहरू छन्।
- <div class = "progress progress-info progress-striped" >
- <div वर्ग = "पट्टी" शैली = " चौडाइ : २० % " ></div>
- </div>
- <div class = "progress progress-success progress-striped" >
- <div class = "bar" शैली = " चौडाइ : 40 % " ></div>
- </div>
- <div class = "progress progress-warning progress-striped" >
- <div class = "bar" शैली = " चौडाइ : 60 % " ></div>
- </div>
- <div वर्ग = "प्रगति प्रगति-खतरा प्रगति-धारीदार" >
- <div class = "bar" शैली = " चौडाइ : 80 % " ></div>
- </div>
प्रगति पट्टीहरूले तिनीहरूका सबै प्रभावहरू प्राप्त गर्न CSS3 ढाँचाहरू, संक्रमणहरू, र एनिमेसनहरू प्रयोग गर्छन्। यी सुविधाहरू IE7-9 वा Firefox को पुरानो संस्करणहरूमा समर्थित छैनन्।
Internet Explorer 10 र Opera 12 भन्दा पहिलेको संस्करणहरूले एनिमेसनहरूलाई समर्थन गर्दैन।
एक तत्व मा एक इनसेट प्रभाव दिन को लागी एक साधारण प्रभाव को रूप मा प्रयोग गर्नुहोस्।
- <div वर्ग = "राम्रो" >
- ...
- </div>
दुई वैकल्पिक परिमार्जक वर्गहरूको साथ प्याडिङ र गोलाकार कुनाहरू नियन्त्रण गर्नुहोस्।
- <div वर्ग = "राम्रो राम्रो-ठूलो" >
- ...
- </div>
- <div वर्ग = "राम्रो राम्रो-सानो" >
- ...
- </div>
मोडल र अलर्टहरू जस्ता सामग्री खारेज गर्नका लागि जेनेरिक क्लोज आइकन प्रयोग गर्नुहोस्।
- <बटन वर्ग = "बन्द" > &समय; </ बटन>
iOS यन्त्रहरूलाई क्लिक घटनाहरूको लागि एक href="#" आवश्यक छ यदि तपाईं बरु एङ्कर प्रयोग गर्नुहुन्छ।
- <a वर्ग = "बंद" href = "#" > &समय; </a>
सानो प्रदर्शन वा व्यवहार ट्वीकका लागि सरल, केन्द्रित कक्षाहरू।
बायाँ तत्व फ्लोट गर्नुहोस्
- वर्ग = "बायाँ तान्नुहोस्"
- । तान्नुहोस् - बायाँ {
- फ्लोट : बायाँ ;
- }
एक तत्व दायाँ फ्लोट गर्नुहोस्
- वर्ग = "दायाँ तान्नुहोस्"
- । तान्नुहोस् - दायाँ {
- फ्लोट : दायाँ ;
- }
तत्वको रङमा परिवर्तन गर्नुहोस्#999
- वर्ग = "म्युट"
- । मौन {
- रंग : #999;
- }
float
कुनै पनि तत्व मा खाली गर्नुहोस्
- वर्ग = "क्लियरफिक्स"
- । क्लियरफिक्स {
- * जुम : 1 ;
- &: पहिले ,
- &: पछि {
- प्रदर्शन : तालिका ;
- सामग्री : "" ;
- }
- &: पछि {
- स्पष्ट : दुबै ;
- }
- }