बूटस्ट्रॅप

घटक

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

अधिक टूलबार सारख्या कार्यक्षमतेसाठी बटण गट सामील व्हा

बटण गट

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

चांगला सराव

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

  • एकाच बटणाच्या गटामध्ये नेहमी समान घटक वापरा <a>किंवा <button>.
  • एकाच बटणाच्या गटात वेगवेगळ्या रंगांची बटणे मिसळू नका.
  • मजकूराच्या व्यतिरिक्त किंवा त्याऐवजी चिन्ह वापरा, परंतु योग्य असेल तेथे Alt आणि शीर्षक मजकूर समाविष्ट करा.

ड्रॉपडाउनसह संबंधित बटण गट (खाली पहा) स्वतंत्रपणे बोलावले जावे आणि इच्छित वर्तन दर्शवण्यासाठी नेहमी ड्रॉपडाउन कॅरेट समाविष्ट करा.

डीफॉल्ट उदाहरण

अँकर टॅग बटणांसह तयार केलेल्या मानक बटण गटासाठी HTML कसे दिसते ते येथे आहे:

बाकी मधला बरोबर 
  1. <div वर्ग = "btn-ग्रुप" > 
  2.   <a class = "btn" href = "#" > 1 </a>  
  3.   <a class = "btn" href = "#" > 2 </a>  
  4.   <a class = "btn" href = "#" > 3 </a>  
  5. </div>

टूलबारचे उदाहरण

अधिक जटिल घटकांसाठी <div class="btn-group">a मध्ये संच एकत्र करा .<div class="btn-toolbar">

१ 2 3 4
५ 6 ७
8 
  1. <div वर्ग = "btn-टूलबार" > 
  2.   <div वर्ग = "btn-ग्रुप" > 
  3.     ...
  4.   </div>
  5. </div>

चेकबॉक्स आणि रेडिओ फ्लेवर्स

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

जावास्क्रिप्ट मिळवा »

डोके वर काढा

बटण गटांसाठी CSS एका वेगळ्या फाईलमध्ये आहे, button-groups.less.

बटणे ड्रॉपडाउन्स बटण गटांवर तयार केलेले संदर्भित ड्रॉपडाउन मेनू

बटण ड्रॉपडाउन

ड्रॉपडाउन मेनू ट्रिगर करण्यासाठी कोणतेही बटण वापरा आणि ते a मध्ये ठेवून .btn-groupआणि योग्य मेनू मार्कअप प्रदान करा.

कृती
कृती
धोका
यश
माहिती

सावधान! बटण ड्रॉपडाउनला कार्य करण्यासाठी बूटस्ट्रॅप ड्रॉपडाउन प्लगइन आवश्यक आहे.

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

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

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

स्प्लिट बटण ड्रॉपडाउन

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

कृती
कृती
धोका
यश
माहिती

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

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

  1. <div वर्ग = "btn-ग्रुप" > 
  2.   <a class = "btn" href = "#" > क्रिया </a>  
  3.   <a class = "btn dropdown-toggle" data-toggle = "ड्रॉपडाउन" href = "#" >   
  4.     <span वर्ग = "कॅरेट" ></span> 
  5.   </a>
  6.   <ul class = "ड्रॉपडाउन-मेनू" > 
  7.     <!-- ड्रॉपडाउन मेनू लिंक्स -->
  8.   </ul>
  9. </div>

पृष्ठांकन सामग्रीद्वारे पृष्ठांकन करण्यासाठी दोन पर्याय

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

कधी वापरायचे

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

स्टेटफुल पेज लिंक्स

लिंक्स सानुकूल करण्यायोग्य आहेत आणि योग्य वर्गासह अनेक परिस्थितींमध्ये कार्य करतात. .disabledक्लिक न करता येणार्‍या दुव्यांसाठी आणि .activeवर्तमान पृष्ठासाठी.

लवचिक संरेखन

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

उदाहरणे

डीफॉल्ट पृष्ठांकन घटक लवचिक आहे आणि अनेक भिन्नतेमध्ये कार्य करतो.

मार्कअप

एक <div>मध्ये गुंडाळलेले, पृष्ठांकन फक्त एक आहे <ul>.

  1. <div वर्ग = "पृष्ठांकन" > 
  2.   <ul>
  3.     <li><a href = "#" > मागील </a></li> 
  4.     <li वर्ग = "सक्रिय" > 
  5.       <a href="#" > 1 </a> _ _ 
  6.     </li>
  7.     <li><a href = "#" > 2 </a></li> 
  8.     <li><a href = "#" > 3 </a></li> 
  9.     <li><a href = "#" > ४ </a></li> 
  10.     <li><a href = "#" > पुढे </a></li> 
  11.   </ul>
  12. </div>

त्वरित मागील आणि पुढील दुव्यांसाठी पेजर

पेजर बद्दल

पेजर घटक हा लाइट मार्कअप आणि अगदी हलक्या शैलीसह साध्या पृष्ठांकन अंमलबजावणीसाठी लिंक्सचा संच आहे. ब्लॉग किंवा मासिके सारख्या साध्या साइटसाठी हे छान आहे.

डीफॉल्ट उदाहरण

डीफॉल्टनुसार, पेजर लिंक्स केंद्रस्थानी ठेवतात.

  1. <ul class = "पेजर" > 
  2.   <li>
  3.     <a href="#" > मागील </a> _ _ 
  4.   </li>
  5.   <li>
  6.     <a href="#" > पुढे </a> _ _ 
  7.   </li>
  8. </ul>

संरेखित दुवे

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

  1. <ul class = "पेजर" > 
  2.   <li वर्ग = "मागील" > 
  3.     <a href="#" > & larr ; जुने </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>

टायपोग्राफिक घटक पृष्‍ठ शीर्षलेख आणि सामग्रीचे विभाजन करण्‍यासाठी हिरो युनिट

हिरो युनिट

बूटस्ट्रॅप तुमच्या साइटवर सामग्री प्रदर्शित करण्यासाठी हिरो युनिट नावाचा एक हलका, लवचिक घटक प्रदान करतो. हे विपणन आणि सामग्री-जड साइटवर चांगले कार्य करते.

मार्कअप

तुमची सामग्री divअशा प्रकारे गुंडाळा:

  1. <div वर्ग = "नायक-युनिट" > 
  2.   <h1> शीर्षक </h1>
  3.   <p> टॅगलाइन </p>
  4.   <p>
  5.     <a वर्ग = "btn btn-प्राथमिक btn-लार्ज" > 
  6.       अधिक जाणून घ्या
  7.     </a>
  8.   </p>
  9. </div>

नमस्कार, जग!

हे एक साधे हिरो युनिट आहे, वैशिष्ट्यीकृत सामग्री किंवा माहितीकडे अतिरिक्त लक्ष वेधण्यासाठी एक साधा जंबोट्रॉन-शैलीचा घटक आहे.

अधिक जाणून घ्या

पृष्ठ शीर्षलेख

h1पृष्ठावरील सामग्रीचे भाग योग्यरित्या बाहेर काढण्यासाठी आणि विभागण्यासाठी एक साधा शेल . h1हे डीफॉल्ट small, घटक तसेच इतर बहुतेक घटक (अतिरिक्त शैलींसह) वापरू शकते .

  1. <div class = "page-haeder" > 
  2.   <h1> उदाहरण पृष्ठ शीर्षलेख </h1>
  3. </div>

प्रतिमा, व्हिडिओ, मजकूर आणि अधिकचे लघुप्रतिमा ग्रिड

डीफॉल्ट लघुप्रतिमा

डीफॉल्टनुसार, बूटस्ट्रॅपची लघुप्रतिमा कमीतकमी आवश्यक मार्कअपसह लिंक केलेल्या प्रतिमा प्रदर्शित करण्यासाठी डिझाइन केलेली आहेत.

अत्यंत सानुकूल करण्यायोग्य

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

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

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

    कृती कृती

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

    Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

    कृती कृती

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

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

साधे, लवचिक मार्कअप

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

ग्रिड स्तंभ आकार वापरते

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

मार्कअप

आधी सांगितल्याप्रमाणे, लघुप्रतिमांसाठी आवश्यक मार्कअप हलके आणि सरळ आहे. लिंक केलेल्या प्रतिमांसाठी डीफॉल्ट सेटअप येथे पहा :

  1. <ul class = "थंबनेल्स" > 
  2.   <li वर्ग = "span3" > 
  3.     <a href = "#" वर्ग = "थंबनेल" >  
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.     </a>
  6.   </li>
  7.   ...
  8. </ul>

लघुप्रतिमांमधील सानुकूल HTML सामग्रीसाठी, मार्कअप किंचित बदलतो. कोठेही ब्लॉक लेव्हल सामग्रीला अनुमती देण्यासाठी, आम्ही लाइकसाठी स्वॅप <a>करतो <div>:

  1. <ul class = "थंबनेल्स" > 
  2.   <li वर्ग = "span3" > 
  3.     <div वर्ग = "थंबनेल" > 
  4.       <img src = "https://placehold.it/260x180" alt = "" >  
  5.       <h5> थंबनेल लेबल </h5>
  6.       <p> येथे लघुप्रतिमा मथळा... </p>
  7.     </div>
  8.   </li>
  9.   ...
  10. </ul>

आणखी उदाहरणे

तुमच्यासाठी उपलब्ध असलेल्या विविध ग्रिड वर्गांसह तुमचे सर्व पर्याय एक्सप्लोर करा. तुम्ही वेगवेगळे आकार मिक्स आणि मॅच करू शकता.

यश, चेतावणी आणि त्रुटी संदेशांसाठी अलर्ट शैली

लाइटवेट डीफॉल्ट

आधार वर्ग पुन्हा लिहिला

Bootstrap 2 सह, आम्ही बेस क्लास सरलीकृत केला आहे: .alertऐवजी .alert-message. आम्ही किमान आवश्यक मार्कअप देखील कमी केले आहे-नाही <p>डीफॉल्टनुसार आवश्यक आहे, फक्त बाह्य <div>.

एकल इशारा संदेश

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

जावास्क्रिप्ट सह उत्तम जाते

बूटस्ट्रॅप एक उत्कृष्ट jQuery प्लगइनसह येतो जे अलर्ट संदेशांना समर्थन देते, त्यांना जलद आणि सुलभपणे डिसमिस करते.

प्लगइन मिळवा »

उदाहरणे सूचना

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

× चेतावणी! स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. 
  1. <div वर्ग = "सूचना" > 
  2.   <a class = "close" data-dismiss = "alert" > × </a>  
  3.   <strong> चेतावणी! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही.
  4. </div>

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

×

चेतावणी!

स्वत:ची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

  1. <div वर्ग = "अलर्ट अलर्ट-ब्लॉक" > 
  2.   <a class = "close" data-dismiss = "alert" > × </a>  
  3.   <h4 वर्ग = "अलर्ट-हेडिंग" > चेतावणी! </h4> 
  4.   स्वत: ला उत्तम तपासा, तुम्ही नाही...
  5. </div>

संदर्भित पर्याय अलर्टचा अर्थ बदलण्यासाठी पर्यायी वर्ग जोडा

चूक किंवा धोका

× अरे स्नॅप! काही गोष्टी बदला आणि पुन्हा सबमिट करण्याचा प्रयत्न करा. 
  1. <div वर्ग = "सूचना इशारा-त्रुटी" > 
  2.   ...
  3. </div>

यश

× शाब्बास! तुम्ही हा महत्त्वाचा इशारा संदेश यशस्वीरीत्या वाचला. 
  1. <div वर्ग = "सूचना अलर्ट-यशस्वी" > 
  2.   ...
  3. </div>

माहिती

× सावधान! या अलर्टकडे तुमचे लक्ष देणे आवश्यक आहे, परंतु ते फार महत्वाचे नाही. 
  1. <div वर्ग = "अलर्ट अलर्ट-माहिती" > 
  2.   ...
  3. </div>

लोडिंग, रीडायरेक्टिंग किंवा कृती स्थितीसाठी प्रगती बार

उदाहरणे आणि मार्कअप

बेसिक

उभ्या ग्रेडियंटसह डीफॉल्ट प्रगती बार.

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

पट्टेदार

स्ट्रीप इफेक्ट तयार करण्यासाठी ग्रेडियंट वापरते.

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

अॅनिमेटेड

पट्टेदार उदाहरण घेते आणि ते अॅनिमेट करते.

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

पर्याय आणि ब्राउझर समर्थन

अतिरिक्त रंग

प्रोग्रेस बार तत्सम शैलीसाठी बटणे आणि सूचना म्हणून समान वर्गातील काही नावे वापरतात.

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

वैकल्पिकरित्या, तुम्ही कमी फाइल्स सानुकूलित करू शकता आणि तुमचे स्वतःचे रंग आणि आकार रोल करू शकता.

वागणूक

प्रोग्रेस बार CSS3 संक्रमणे वापरतात, त्यामुळे तुम्ही javascript द्वारे रुंदी डायनॅमिकरित्या समायोजित केल्यास, ते सहजतेने आकार बदलेल.

तुम्ही .activeवर्ग वापरल्यास, तुमचे .progress-stripedप्रोग्रेस बार डावीकडून उजवीकडे पट्टे अॅनिमेट करतील.

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

प्रोग्रेस बार त्यांचे सर्व प्रभाव साध्य करण्यासाठी CSS3 ग्रेडियंट, संक्रमण आणि अॅनिमेशन वापरतात. ही वैशिष्ट्ये IE7-8 किंवा Firefox च्या जुन्या आवृत्त्यांमध्ये समर्थित नाहीत.

ऑपेरा यावेळी अॅनिमेशनला सपोर्ट करत नाही.

विविध विहिरी, बॅज आणि बंद चिन्ह

विहिरी

एखाद्या घटकावर इनसेट इफेक्ट देण्यासाठी विहीर वापरा.

बघ, मी विहिरीत आहे! 
  1. <div वर्ग = "वेल" > 
  2.   ...
  3. </div>

चिन्ह बंद करा

मॉडेल आणि सूचनांसारखी सामग्री डिसमिस करण्यासाठी जेनेरिक क्लोज आयकॉन वापरा.

×

  1. <a वर्ग = "बंद करा" > × </a>