घटकांचो आस्पाव जाता

नेव्हिगेशन, सावधानताय, पॉपओव्हर, आनी हेर जायतें दिवपाक बूटस्ट्रॅपांत डझनभर परत वापरपाक येवपी घटक तयार केल्यात.

बटण गट करतात

एक संमिश्र घटक म्हणून एका परस चड बटणां एकठांय जोडपाक बटण गट वापरात. <a>वा <button>घटकांची माळ घेवन त्यो तयार करात .

उत्तम पद्दती

बटण गट आनी साधनपट्टी वापरपाखातीर आमी सकयल दिल्ल्यो मार्गदर्शक तत्वां शिफारस करतात:

  • सदांच एकाच बटण गटांत एकूच घटक वापरात, <a>वा <button>.
  • एकाच बटण गटांत वेगवेगळ्या रंगांचे बटण मिक्स करूंक नाकात.
  • मजकूर सोडून वा ताचे बदला चिन्नां वापरात, पूण योग्य आसल्यार alt आनी शीर्षक मजकूर समाविष्ट करपाची खात्री करात.

ड्रॉपडावन आशिल्ले संबंदीत बटण गट (सकयल पळयात) वेगळे कॉल करपाक जाय आनी सदांच हेतू आशिल्ली वागणूक दाखोवपाक ड्रॉपडावन कॅरेट आसपावपाक जाय.

मुलभूत उदाहरण

एचटीएमएल एंकर टॅग बटणां सयत तयार केल्लो मानक बटण गट कसो सोदता तें पळयात:

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <बटण वर्ग = "btn" > 1 </बटण>
  3. <बटण वर्ग = "btn" > 2 </बटण>
  4. <बटण वर्ग = "btn" > 3 </बटण>
  5. </div> हें नांव

साधनपट्टीचें उदाहरण

चड गुंतागुंतीच्या घटकांखातीर एकांत संच एकठांय करात <div class="btn-group">.<div class="btn-toolbar">

  1. <div वर्ग = "btn-साधनपट्टी" >
  2. <div वर्ग = "बीटीएन-समूह" >
  3. ...
  4. </div> हें नांव
  5. </div> हें नांव

चेकबॉक्स आनी रेडिओ रूची

बटण गट रेडिओ म्हणूनय काम करूंक शकतात, जंय फकत एक बटण सक्रिय आसूं येता, वा चेकबॉक्स, जंय खंयच्याय संख्येन बटण सक्रिय आसूं येता. ते खातीर जावास्क्रिप्ट डॉक्स पळयात .

जावास्क्रिप्ट मेळोवची »

बटण गटांत ड्रॉपडावन

तकली वयर काडटा! ड्रॉपडावन आशिल्ले बटण योग्य रेंडरींग खातीर .btn-groupएक भितर स्वताच्या बटणांत वैयक्तीक रितीन गुठलावंक जाय ..btn-toolbar

बटण ड्रॉपडावन करतात

नियाळ आनी उदाहरणां

ड्रॉपडावन मेनू a भितर दवरून .btn-groupआनी योग्य मेनू मार्कअप दिवन ट्रिगर करपाक खंयचेंय बटण वापरात.

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

बटण गटा प्रमाणें, आमचो मार्कअप नेमान बटण मार्कअप वापरता, पूण शैली परिष्कृत करपाक आनी Bootstrap च्या ड्रॉपडावन jQuery प्लगइनाक तेंको दिवपाक मुठीभर जोडणीं सयत.

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <a class = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" href = "#" >
  3. कृती
  4. <span वर्ग = "कॅरेट" </span>
  5. </a> हें नांव
  6. <ul वर्ग = "ड्रॉपडावन-मेनू" >
  7. <!-- ड्रॉपडावन मेनू दुवे -->
  8. </ul> हें नांव
  9. </div> हें नांव

सगळ्या बटण आकारां वांगडा काम करता

बटण ड्रॉपडावन खंयच्याय आकाराचेर काम करतात. तुमचे बटण आकार .btn-large, .btn-small, वा .btn-mini.

जावास्क्रिप्ट जाय

बटण ड्रॉपडावन कार्य करपाक बूटस्ट्रॅप ड्रॉपडावन प्लगइनाची गरज आसता.

कांय प्रकरणांनी-मोबायला सारके-ड्रॉपडावन मेनू व्यूपोर्टा भायर विस्तारतले. तुमकां संरेखण हाताळणीन वा सानुकूल जावास्क्रिप्टान सोडोवपाची गरज आसा.


विभाजन बटण ड्रॉपडावन

नियाळ आनी उदाहरणां

बटण गट शैली आनी मार्कअपाचेर उबारून आमी सहजपणान स्प्लिट बटण तयार करूंक शकतात. विभाजीत बटणां डावी वटेन मानक कृती आनी उजवे वटेन संदर्भ दुव्यां सयत ड्रॉपडावन टॉगल दाखयतात.

आकारांचो आस्पाव जाता

अतिरिक्त बटण वर्ग वापरात .btn-mini, .btn-small, वा .btn-largeआकार दिवपाखातीर.

  1. <div वर्ग = "बीटीएन-समूह" >
  2. ...
  3. <ul class = "ड्रॉपडावन-मेनू पुल-उजवें" >
  4. <!-- ड्रॉपडावन मेनू दुवे -->
  5. </ul> हें नांव
  6. </div> हें नांव

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

आमी सामान्य बटण ड्रॉपडावनांचेर विस्तार करतात दुसरी बटण कृती पुरवण करपाक जी वेगळी ड्रॉपडावन ट्रिगर म्हणून काम करता.

  1. <div वर्ग = "बीटीएन-समूह" >
  2. <बटण वर्ग = "btn" > कृती </बटण>
  3. <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >
  4. <span वर्ग = "कॅरेट" </span>
  5. </बटण> हें नांव
  6. <ul वर्ग = "ड्रॉपडावन-मेनू" >
  7. <!-- ड्रॉपडावन मेनू दुवे -->
  8. </ul> हें नांव
  9. </div> हें नांव

ड्रॉपअप मेनू आसात

च्या तात्काळ पालकाक एकूच वर्ग जोडून ड्रॉपडावन मेनू सकयल सावन वयर टॉगल करूंक शकतात .dropdown-menu. तो दिका .caretउलटयतलो आनी मेनू स्वता परतून वयर सकयल वचचे बदला सकयल वयर वचपाक.

  1. <div वर्ग = "btn-समूह ड्रॉपअप" >
  2. <बटण वर्ग = "btn" > ड्रॉपअप </बटण>
  3. <बटण वर्ग = "btn ड्रॉपडावन-टॉगल" डेटा-टॉगल = "ड्रॉपडावन" >
  4. <span वर्ग = "कॅरेट" </span>
  5. </बटण> हें नांव
  6. <ul वर्ग = "ड्रॉपडावन-मेनू" >
  7. <!-- ड्रॉपडावन मेनू दुवे -->
  8. </ul> हें नांव
  9. </div> हें नांव

मल्टीकॉन-पान पृष्ठांकन

केन्ना वापरप

Rdio कडल्यान प्रेरीत केल्लें अल्ट्रा सादें आनी उण्यांत उणें शैलीचें पृष्ठांकन, ऍप्लिकेशनां आनी सोद परिणामां खातीर उत्तम. व्हडलो ब्लॉक चुकप कठीण, सहज मापनीय, आनी व्हड क्लिक क्षेत्र पुरवण करता.

स्टेटफुल पान दुवे

दुवे अनुकूल करपाक येतात आनी योग्य वर्गा वांगडा जायत्या परिस्थितींत काम करतात. .disabledक्लिक करूंक शकना अशा दुव्यां .activeखातीर आनी सद्याच्या पानाक.

लवचीक संरेखण

पृष्ठांकन दुव्यांचो संरेखण बदलपाखातीर दोन पर्यायी वर्गांतलो एकूय वर्ग जोडात: .pagination-centeredआनी .pagination-right.

उदाहरणां

मुलभूत पृष्ठांकन घटक लवचीक आसा आनी जायत्या बदलांनी काम करता.

मार्कअप करप

एकांत गुठलायल्लें <div>, पृष्ठांकन फकत एक <ul>.

  1. <div वर्ग = "पृष्ठांकन" >
  2. <उल> हें नांव
  3. <li><a href = "#" > आदलें </a></li>
  4. <li वर्ग = "सक्रीय" >
  5. <a href = "#" > 1 </a> हें नांव
  6. </li> हें नांव
  7. <li><a href = "#" > </a></li> हें नांव
  8. <li><a href = "#" > </a></li> हें नांव
  9. <li><a href = "#" > </a></li> हें नांव
  10. <li><a href = "#" > फुडें </a></li>
  11. </ul> हें नांव
  12. </div> हें नांव

पेजर बेगीन फाटल्या आनी फुडल्या दुव्यां खातीर

पेजर विशीं

पेजर घटक हो उजवाड मार्कअप आनी आनिकूय हळुवार शैली आशिल्ल्या साद्या पृष्ठांकन कार्यान्वयनांक दुव्यांचो संच आसा. ब्लॉग वा नेमाळीं सारकिल्या साद्या सायटीं खातीर हें बरें.

पर्यायी अक्षम स्थिती

.disabledपेजर दुवे पृष्ठांकनांतल्यान सामान्य वर्गाचोय वापर करतात .

मुलभूत उदाहरण

पूर्वनिर्धारीतपणान, पेजर दुवे केंद्रीत करता.

  1. <ul वर्ग = "पेजर" >
  2. <ली> हें नांव
  3. <a href = "#" > आदलें </a>
  4. </li> हें नांव
  5. <ली> हें नांव
  6. <a href = "#" > फुडें </a>
  7. </li> हें नांव
  8. </ul> हें नांव

संरेखित दुवे

पर्यायान, तुमी दरेक दुवो बाजूंक संरेखित करूंक शकतात:

  1. <ul वर्ग = "पेजर" >
  2. <li वर्ग = "आदले" >
  3. <a href = "#" > आनी लार; जाण्टे </a>
  4. </li> हें नांव
  5. <li वर्ग = "फुडलें" >
  6. <a href = "#" > नवें → </a> हें नांव
  7. </li> हें नांव
  8. </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>

संबंदीं

बॅज हे कांय तरेचो निर्देशक वा गणना दाखोवपाखातीर ल्हान, सादे घटक आसतात. ते सादारणपणान Mail.app सारकिल्या ईमेल क्लायंटांनी वा पुश अधिसुचोवण्यां खातीर मोबायल ऍप्लिकेशनां वयल्यान मेळटात.

उपलब्ध वर्ग

नांव उदारण मार्कअप करप
डिफॉल्ट <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म्हणून:

  1. <div वर्ग = "नायक-एकक" >
  2. <h1> शीर्षक </h1>
  3. <p> टॅगलायन </p>
  4. <p> हें नांव
  5. <a class = "btn btn-प्राथमिक बीटीएन-व्हड" >
  6. चड जाणून घेयात
  7. </a> हें नांव
  8. </p> हें नांव
  9. </div> हें नांव

नमस्कार, संवसार!

हो एक सादो नायक एकक, वैशिश्ट्यपूर्ण सामुग्री वा म्हायतीचेर चड लक्ष ओडपा खातीर एक सादो जंबोट्रॉन शैलीचो घटक.

चड जाणून घेयात

पृष्ठ शीर्षक

h1एक पानाचेर सामुग्री विभाग योग्य रितीन स्पेस करपाक आनी विभागपाक एक सादें शेल . तो h1's default small, घटक तशेंच चडशे हेर घटक (अतिरिक्त शैलीं सयत) वापरूंक शकता.

  1. <div class = "पान-शीर्षक" >
  2. <h1> उदाहरण पान शीर्षक </h1>
  3. </div> हें नांव

मुलभूत लघुप्रतिमा

पूर्वनिर्धारीतपणान, Bootstrap ची लघुप्रतिमा उण्यांत उणी गरज आशिल्ल्या मार्कअपान दुवो केल्लीं प्रतिमा दाखोवपाक तयार केल्यात.

अत्यंत अनुकूलन करपाक येता

थोडें अतिरिक्त मार्कअप आसल्यार, शीर्षकां, परिच्छेद, वा बटणां सारकिल्या खंयच्याय प्रकारची HTML सामुग्री लघुप्रतिमांत जोडप शक्य आसा.

  • लघुप्रतिमा लेबल

    क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

    कृती कृती

  • लघुप्रतिमा लेबल

    क्रास जुस्टो ओडियो, डापिबस असि फेसिलिस इन, एगेस्तास एगेट क्वाम. डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

    कृती कृती

लघुप्रतिमा कित्याक वापरात

लघुप्रतिमा (आदीं .media-gridv1.4 मेरेन) फोटो वा व्हिडियोच्या ग्रिड, प्रतिमा सोद परिणाम, किरकोळ उत्पाद, पोर्टफोलियो, आनी हेर जायत्या खातीर बरे आसात. ते दुवे वा स्थिर सामुग्री आसूं येतात.

सादें, लवचीक मार्कअप

लघुप्रतिमा मार्कअप सादें आसा- ulखंयच्याय संख्येच्या liघटकां सयत एक हें सगळें जाय. तशेंच तो सुपर लवचीक आसा, तुमची सामग्री गुठलावपाक फकत थोडो चड मार्कअप आशिल्ल्या खंयच्याय प्रकारच्या सामुग्रीक परवानगी दिता.

जाळी स्तंभ आकार वापरता

निमाणें, लघुप्रतिमा घटक सद्याचे ग्रिड प्रणाली वर्ग वापरता-जशे .span2वा .span3—लघुप्रतिमा परिमाणांचेर नियंत्रण दवरपाखातीर.

मार्कअप हें

आदीं सांगिल्ले प्रमाण लघुप्रतिमां खातीर गरजेचें मार्कअप हळुवार आनी सरळ आसता. लिंक केल्ल्या प्रतिमां खातीर मुलभूत सेटअप पळयात :

  1. <ul class = "लघुप्रतिमा" >
  2. <li वर्ग = "स्पॅन3" >
  3. <a href = "#" वर्ग = "लघुप्रतिमा" >
  4. <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >
  5. </a> हें नांव
  6. </li> हें नांव
  7. ...
  8. </ul> हें नांव

लघुप्रतिमांतल्या सानुकूल HTML सामुग्री खातीर, मार्कअप मात्सो बदलता. <a>खंयच्याय सुवातेर ब्लॉक पातळेची सामुग्री परवानगी दिवपाक, आमी the for a like so स्वॅप करतात <div>:

  1. <ul class = "लघुप्रतिमा" >
  2. <li वर्ग = "स्पॅन3" >
  3. <div वर्ग = "लघुप्रतिमा" >
  4. <img src = "https://प्लेसहोल्ड.इट/260x180" alt = "" >
  5. <h5> लघुप्रतिमा लेबल </h5>
  6. <p> लघुप्रतिमा कॅप्शन हांगाच... </p>
  7. </div> हें नांव
  8. </li> हें नांव
  9. ...
  10. </ul> हें नांव

आनीक उदाहरणां

तुमकां उपलब्ध आशिल्ल्या वेगवेगळ्या ग्रिड वर्गां सयत तुमचे सगळे पर्याय सोदून काडात. तशेंच वेगवेगळ्या आकारांत मिक्स आनी जुळोवणी करूं येता.

हलके वजनाचे मुलभूत आसतात

बेस क्लास परतून बरयला

बूटस्ट्रॅप 2 वरवीं, आमी बेस क्लास सोंपो केला: .alertबदला .alert-message. आमी उण्यांत उणें गरजेचें मार्कअपय उणें केलां-ना <p>पूर्वनिर्धारीतपणान गरजेचें आसा, फकत भायलें <div>.

एकूच सावधान संदेश

कमी कोड आशिल्ल्या चड टिकाऊ घटका खातीर, आमी ब्लॉक सावधानताय, चड पॅडींग आनी सादारणपणान चड मजकूर आशिल्ले संदेश हांचे खातीर वेगळेपण दिवपी देखावो काडून उडयला. वर्गूय बदलून .alert-block.


जावास्क्रिप्टा वांगडा बरोच वता

बूटस्ट्रॅप एक उत्कृश्ट jQuery प्लगइन घेवन येता जो सावधान संदेशांक तेंको दिता, ताका लागून तांकां न्हयकारप बेगीन आनी सोंपे�� जाता.

प्लगइन मेळोवचें »

देखीक सावधानताय

तुमचो संदेश आनी पर्यायी बंद चिन्न साद्या वर्गा वांगडा div मदीं गुठलायात.

शिटकावणी! बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.
  1. <div वर्ग = "सचेतक" >
  2. <बटण वर्ग = "बंद करचें" data-dismiss = "अलर्ट" > × </बटण>
  3. <strong> शिटकावणी दिता! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना.
  4. </div> हें नांव

तकली वयर काडटा! iOS डिव्हायसांक href="#"सावधानताय काडून उडोवपा खातीर एक गरज आसता. तो आनी एंकर बंद चिन्नांखातीर डेटा गुणधर्म समाविष्ट करपाची खात्री करात. पर्यायीपणान, तुमी डेटा गुणधर्म आशिल्लो घटक वापरूं येता <button>, जो आमी आमच्या डॉक्सां खातीर करपाचो पर्याय घेतला. वापरतना <button>, तुमी समाविष्ट करपाक जाय type="button"वा तुमचे फॉर्म सादर करूंक शकनात.

दोन पर्यायी वर्गां सयत मानक सावधान संदेश सहज विस्तार करचो: .alert-blockचड पॅडींग आनी मजकूर नियंत्रणां .alert-headingखातीर आनी जुळपी शीर्षका खातीर.

शिटकावणी!

बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ.

  1. <div class = "अलर्ट इशारो-अवरोध" >
  2. <a class = "बंद करचें" data-dismiss = "अलर्ट" href = "#" > × </a>
  3. <h4 class = "अलर्ट-शीर्षक" > शिटकावणी! </h4> हें नांव
  4. बेस्ट चेक यो सेल्फ, तूं न्हय...
  5. </div> हें नांव

संदर्भ पर्याय इशाऱ्याचो अर्थ बदलपाक पर्यायी वर्ग जोडात

त्रुटी वा धोको

अरे स्नॅप! कांय गजाली बदलून परतून सादर करपाचो यत्न करात.
  1. <div class = "सचेतना सावधान-त्रुटी" >
  2. ...
  3. </div> हें नांव

येस

बरें केलें! तुमी हो म्हत्वाचो सावधान संदेश यशस्वीपणान वाचला.
  1. <div class = "अलर्ट इशारो-यशस्वी" >
  2. ...
  3. </div> हें नांव

म्हायती

तकली वयर काडटा! ह्या अलर्टाक तुमचें लक्ष जाय, पूण तो सुपर म्हत्वाचो न्हय.
  1. <div class = "अलर्ट इशारो-माहिती" >
  2. ...
  3. </div> हें नांव

उदाहरणां आनी मार्कअप

मुळावें

उब्या ग्रेडियेंट आशिल्ली मुलभूत प्रगती पट्टी.

  1. <div वर्ग = "प्रगती" >
  2. <div वर्ग = "बार".
  3. शैली = " रुंदाय : 60 %; " ></div>
  4. </div> हें नांव

पट्टीदार

पट्टेदार परिणाम तयार करपाखातीर ग्रेडियेंट वापरता (IE ना).

  1. <div class = "प्रगती प्रगती-पट्टीदार" >
  2. <div वर्ग = "बार".
  3. शैली = " रुंदाय : 20 %; " ></div>
  4. </div> हें नांव

एनिमेटेड केल्लें

पट्टेदार उदाहरण घेता आनी ताका एनिमेट करता (आयई ना).

  1. <div class = "प्रगती प्रगती-पट्टीदार."
  2. सक्रिय" >
  3. <div वर्ग = "बार".
  4. शैली = " रुंदाय : 40 %; " ></div>
  5. </div> हें नांव

पर्याय आनी ब्राउझर आदार

अतिरिक्त रंग

प्रगती पट्टी सुसंगत शैलींखातीर कांय समान बटण आनी सावधान वर्ग वापरतात.

पट्टीदार बार

घन रंगां प्रमाण आमी वेगवेगळे पट्टेदार प्रगती पट्टे केल्यात.

वागणूक

प्रगती पट्टी CSS3 संक्रमण वापरतात, देखून तुमी जावास्क्रिप्ट वरवीं रुंदाय गतिशीलपणान समायोजीत केल्यार, तो सुगमतायेन आकार बदलतलो.

तुमी .activeवर्ग वापरल्यार, तुमचीं .progress-stripedप्रगती पट्टी दाव्यान उजव्यान पट्ट्यांक एनिमेट करतले.

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

प्रगती पट्टी तांचे सगळे परिणाम साध्य करपाक CSS3 ग्रेडियेंट, संक्रमण, आनी एनिमेशन वापरतात. IE7-9 वा Firefox च्या पोरन्या आवृत्त्यांनी हीं वैशिश्ट्यां समर्थीत नात.

Opera आनी IE ह्या वेळार एनिमेशनाक तेंको दिना.

वेल्स हांणी केला

घटकाचेर सादो परिणाम म्हणून कुंड वापरून ताका इनसेट परिणाम दिवचो.

पळय, हांव एका कुंडांत आसां!
  1. <div वर्ग = "बरें" >
  2. ...
  3. </div> हें नांव

बंद करचें चिन्ह

मोडल आनी सावधानताय सारकिल्या सामुग्री न्हयकारपा खातीर सामान्य बंद चिन्न वापरात.

  1. <बटण वर्ग = "बंद करचें" > × </बटण> हें नांव

तुमी एंकर वापरप पसंत जाल्यार iOS डिव्हायसांक क्लिक घडणुकां खातीर href="#" जाय.

  1. <a class = "बंद करचें" href = "#" > × </a> हें नांव