नेव्हिगेशन, सावधानताय, पॉपओव्हर, आनी हेर जायतें दिवपाक बूटस्ट्रॅपांत डझनभर परत वापरपाक येवपी घटक तयार केल्यात.
Rdio कडल्यान प्रेरीत केल्लें अल्ट्रा सादें आनी उण्यांत उणें शैलीचें पृष्ठांकन, ऍप्लिकेशनां आनी सोद परिणामां खातीर उत्तम. व्हडलो ब्लॉक चुकप कठीण, सहज मापनीय, आनी व्हड क्लिक क्षेत्र पुरवण करता.
दुवे अनुकूल करपाक येतात आनी योग्य वर्गा वांगडा जायत्या परिस्थितींत काम करतात. .disabled
क्लिक करूंक शकना अशा दुव्यां .active
खातीर आनी सद्याच्या पानाक.
पृष्ठांकन दुव्यांचो संरेखण बदलपाखातीर दोन पर्यायी वर्गांतलो एकूय वर्ग जोडात: .pagination-centered
आनी .pagination-right
.
मुलभूत पृष्ठांकन घटक लवचीक आसा आनी जायत्या बदलांनी काम करता.
एकांत गुठलायल्लें <div>
, पृष्ठांकन फकत एक <ul>
.
- <div वर्ग = "पृष्ठांकन" >
- <उल> हें नांव
- <li><a href = "#" > आदलें </a></li>
- <li वर्ग = "सक्रीय" >
- <a href = "#" > 1 </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> हें नांव
लेबलां | मार्कअप करप |
---|---|
डिफॉल्ट | <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 class = "btn btn-प्राथमिक बीटीएन-व्हड" >
- चड जाणून घेयात
- </a> हें नांव
- </p> हें नांव
- </div> हें नांव
हो एक सादो नायक एकक, वैशिश्ट्यपूर्ण सामुग्री वा म्हायतीचेर चड लक्ष ओडपा खातीर एक सादो जंबोट्रॉन शैलीचो घटक.
h1
एक पानाचेर सामुग्री विभाग योग्य रितीन भायर काडपाक आनी विभागपाक एक सादें कवच . तो h1
's default small
, घटक तशेंच चडशे हेर घटक (अतिरिक्त शैलीं सयत) वापरूंक शकता.
- <div वर्ग = "पान-हेडर" >
- <h1> उदाहरण पान शीर्षक </h1>
- </div> हें नांव
पूर्वनिर्धारीतपणान, Bootstrap ची लघुप्रतिमा उण्यांत उणी गरज आशिल्ल्या मार्कअपान दुवो केल्लीं प्रतिमा दाखोवपाक तयार केल्यात.
थोडें अतिरिक्त मार्कअप आसल्यार, शीर्षकां, परिच्छेद, वा बटणां सारकिल्या खंयच्याय प्रकारची HTML सामुग्री लघुप्रतिमांत जोडप शक्य आसा.
लघुप्रतिमा (पयलीं .media-grid
v1.4 मेरेन) फोटो वा व्हिडियोच्या ग्रिड, प्रतिमा सोद परिणाम, किरकोळ उत्पाद, पोर्टफोलियो, आनी हेर जायत्या खातीर बरे आसात. ते दुवे वा स्थिर सामुग्री आसूं येतात.
लघुप्रतिमा मार्कअप सादें आसा- ul
खंयच्याय संख्येच्या li
घटकां सयत एक हें सगळें जाय. तशेंच तो सुपर लवचीक आसा, तुमची सामग्री गुठलावपाक फकत थोडो चड मार्कअप आशिल्ल्या खंयच्याय प्रकारच्या सामुग्रीक परवानगी दिता.
निमाणें, लघुप्रतिमा घटक सद्याचे ग्रिड प्रणाली वर्ग वापरता-जशे .span2
वा .span3
—लघुप्रतिमा परिमाणांचेर नियंत्रण दवरपाखातीर.
आदीं सांगिल्ले प्रमाण लघुप्रतिमां खातीर गरजेचें मार्कअप हळुवार आनी सरळ आसता. लिंक केल्ल्या प्रतिमां खातीर मुलभूत सेटअप पळयात :
- <ul class = "लघुप्रतिमा" >
- <li वर्ग = "स्पॅन3" >
- <a href = "#" वर्ग = "लघुप्रतिमा" >
- <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >
- </a> हें नांव
- </li> हें नांव
- ...
- </ul> हें नांव
लघुप्रतिमांतल्या सानुकूल HTML सामुग्री खातीर, मार्कअप मात्सो बदलता. <a>
खंयच्याय सुवातेर ब्लॉक पातळेची सामग्री परवानगी दिवपाक, आमी the for a like so स्वॅप करतात <div>
:
- <ul class = "लघुप्रतिमा" >
- <li वर्ग = "स्पॅन3" >
- <div वर्ग = "लघुप्रतिमा" >
- <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >
- <h5> लघुप्रतिमा लेबल </h5>
- <p> लघुप्रतिमा कॅप्शन हांगाच... </p>
- </div> हें नांव
- </li> हें नांव
- ...
- </ul> हें नांव
बूटस्ट्रॅप 2 वरवीं, आमी बेस क्लास सोंपो केला: .alert
बदला .alert-message
. आमी उण्यांत उणें गरजेचें मार्कअपय उणें केलां-ना <p>
पूर्वनिर्धारीतपणान गरजेचें आसा, फकत भायलें <div>
.
कमी कोड आशिल्ल्या चड टिकाऊ घटका खातीर, आमी ब्लॉक सावधानताय, चड पॅडींग आनी सादारणपणान चड मजकूर आशिल्ले संदेश हांचे खातीर वेगळेपण दिवपी देखावो काडून उडयला. वर्गूय बदलून .alert-block
.
बूटस्ट्रॅप एक उत्कृश्ट jQuery प्लगइन घेवन येता जो सावधान संदेशांक तेंको दिता, ताका लागून तांकां न्हयकारप बेगीन आनी सोंपें जाता.
तुमचो संदेश आनी पर्यायी बंद चिन्न साद्या वर्गा वांगडा div मदीं गुठलायात.
- <div वर्ग = "सचेतक" >
- <a class = "बंद करचें" data-dismiss = "अलर्ट" > × </a>
- <strong> शिटकावणी दिता! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.
- </div> हें नांव
दोन पर्यायी वर्गां सयत मानक सावधान संदेश सहज विस्तार करचो: .alert-block
चड पॅडींग आनी मजकूर नियंत्रणां .alert-heading
खातीर आनी जुळपी शीर्षका खातीर.
बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ.
- <div class = "अलर्ट इशारो-अवरोध" >
- <a class = "बंद करचें" data-dismiss = "अलर्ट" > × </a>
- <h4 class = "अलर्ट-शीर्षक" > शिटकावणी! </h4> हें नांव
- बेस्ट चेक यो सेल्फ, तूं न्हय...
- </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 वर्ग = "बरें" >
- ...
- </div> हें नांव
मोडल आनी सावधानताय सारकिल्या सामुग्री न्हयकारपा खातीर सामान्य बंद चिन्न वापरात.
- <a class = "बंद करप" > × </a> हें नांव