नेभिगेसन, अलर्टहरू, पपओभरहरू, र थप धेरै प्रदान गर्नका लागि दर्जनौं पुन: प्रयोज्य कम्पोनेन्टहरू बुटस्ट्र्यापमा निर्मित छन्।
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>
लेबलहरू | मार्कअप |
---|---|
पूर्वनिर्धारित | <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> |
बुटस्ट्र्यापले तपाईंको साइटमा सामग्री प्रदर्शन गर्न नायक इकाई भनिने हल्का, लचिलो कम्पोनेन्ट प्रदान गर्दछ। यसले मार्केटिङ र सामग्री-भारी साइटहरूमा राम्रोसँग काम गर्दछ।
तपाईंको सामग्रीलाई यसरी बेर्नुहोस् div
:
- <div वर्ग = "नायक-इकाई" >
- <h1> शीर्षक </ h1>
- <p> ट्यागलाइन </p>
- <p>
- <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" >
- अझै सिक
- </a>
- </p>
- </div>
यो एक साधारण नायक एकाई हो, एक साधारण जम्बोट्रोन-शैली कम्पोनेन्ट विशेष सामग्री वा जानकारीमा थप ध्यान दिनको लागि।
h1
पृष्ठमा सामग्रीको खण्डहरू उपयुक्त रूपमा स्पेस आउट गर्न र खण्डहरू विभाजन गर्नको लागि एउटा साधारण शेल । यसले h1
पूर्वनिर्धारित small
, तत्व र अन्य धेरै कम्पोनेन्टहरू (अतिरिक्त शैलीहरूसँग) प्रयोग गर्न सक्छ।
- <div class = "page-haeder" >
- <h1> उदाहरण पृष्ठ हेडर </h1>
- </div>
पूर्वनिर्धारित रूपमा, बुटस्ट्र्यापको थम्बनेलहरू न्यूनतम आवश्यक मार्कअपको साथ लिङ्क गरिएका छविहरू प्रदर्शन गर्न डिजाइन गरिएका छन्।
थोरै अतिरिक्त मार्कअपको साथ, थम्बनेलहरूमा शीर्षकहरू, अनुच्छेदहरू, वा बटनहरू जस्ता कुनै पनि प्रकारको HTML सामग्री थप्न सम्भव छ।
थम्बनेलहरू (पहिले .media-grid
v1.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" data-dismiss = "alert" > × </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" data-dismiss = "alert" > × </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>
मोडल र अलर्टहरू जस्ता सामग्री खारेज गर्नका लागि जेनेरिक क्लोज आइकन प्रयोग गर्नुहोस्।
- <a class = "close" > &time; </a>