बूटस्ट्रैप 2 से बूटस्ट्रैप 3 की ओर पलायन

यह संक्षिप्त समीक्षा उन लोगों के लिए है जो अपनी वेबसाइट को एक नए बूटस्ट्रैप में जल्दी से स्थानांतरित करना चाहते हैं।

दूसरे दिन, इस अद्भुत रूपरेखा का तीसरा संस्करण जारी किया गया था, और निश्चित रूप से, मैं तुरंत यह देखना चाहता था कि दूसरे संस्करण पर बनाई गई परियोजनाएं कैसे दिखेंगी जैसे कि हमने सिर्फ 2 से 3 को बदल दिया है। यह पता चला कि कुछ भी नहीं। सब कुछ फैल गया, जुदा हो गया और कुछ ने काम करना बंद कर दिया।

जिसके बाद मैं सब कुछ जल्दी ठीक करना चाहता था। और अब, यह क्या आया, पर पढ़ें।

तो, पहला नवाचार यह है कि नया बूटस्ट्रैप तत्वों की डिफ़ॉल्ट शैलियों को ओवरराइड नहीं करता है, जैसा कि पहले था। एक तरफ, यह, सिद्धांत रूप में, सही है, क्योंकि उसके पास !important शैलियों का एक गुच्छा था और इसे लगभग सभी टैगों पर लटका दिया गया था, इसलिए यदि कुछ इनपुट बहुत अधिक लग रहा था, तो आपको इसे फिर से परिभाषित करना होगा और यह हमेशा सुविधाजनक नहीं था।

लेकिन, सबसे अधिक संभावना है, कई लोग बूटस्ट्रैप की इस विशेष विशेषता के साथ प्यार में पड़ गए: अनावश्यक इशारों के बिना, मैंने लाइब्रेरी को कनेक्ट किया और पृष्ठ को रूपांतरित किया गया।

अब सब कुछ बिल्कुल विपरीत है: कोई शौकिया गतिविधि नहीं, मैं नीले बैकलाइटिंग के साथ एक सुंदर input चाहता हूं - आपको इसमें संबंधित वर्ग को पंजीकृत करने की आवश्यकता है।

 <input class="form-control" type="text"/> 

हमें एक स्टाइलिश पृष्ठ शीर्षक की आवश्यकता है, हम इसे इस तरह से लपेटते हैं:

 <div class="page-header"> <h1>  <small>  </small></h1> </div> 

बटन

हटाए गए .btn-inverse वर्ग। अब उसे एक प्रतिस्थापन चुनना होगा या अपना खुद का कुछ लिखना होगा।

.btn वर्ग में अब अपना स्वयं का डिज़ाइन भी नहीं है, और जहाँ भी एक नियमित बटन था, अब आपको निश्चित रूप से btn-default को जोड़ना होगा ताकि यह बटन के लिए उपयुक्त दिखे।

बटन के आकार के लिए जिम्मेदार कक्षाएं, इनपुट फ़ील्ड और well से अधिक संक्षिप्त नाम प्राप्त किए हैं। उदाहरण के लिए, btn-small बजाय, btn-sm बन गया:

 <input class="btn btn-default btn-sm" type="submit"/> <span class="well well-lg"></span> 

यह ध्यान देने योग्य है कि आकार को तत्वों के एक समूह को तुरंत सौंपा जा सकता है और यह उदाहरण के लिए, प्रत्येक बटन के लिए व्यक्तिगत रूप से बहुत अधिक सुविधाजनक और तार्किक है।

सूत्र

अब बूटस्ट्रैप में विषय के रूप में ऐसी बात है। किट में तुरंत bootstrap-theme.css , जो उपस्थिति को थोड़ा परिभाषित करती है। इसे अपने स्वयं के विषयों को बनाने के लिए एक आधार के रूप में इस्तेमाल किया जा सकता है, हालांकि यह माना जाना चाहिए कि यह अभी तक सभी दृश्य शैलियों को पूरी तरह से कवर नहीं करता है। आप फ्रेमवर्क साइट पर वेब इंटरफ़ेस का उपयोग करके अपनी खुद की थीम भी बना सकते हैं, जहां सभी शैलियों को आसानी से समूहीकृत किया जाता है।

प्रस्तावित "डिफ़ॉल्ट थीम" में, पहली नज़र में, मुझे यह पसंद नहीं आया कि बटन किसी भी तरह से प्रतिक्रिया न करें, जब मँडरा, उसी समय, .btn-default विषय के बिना, कोई भी कह सकता है कि "कोई रंग नहीं" है। सौभाग्य से, यह bootstrap-theme.css में आसानी से ओवरराइड हो जाता है

 /*    */ .btn-default { text-shadow: 0 1px 0 #fff; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, 0%, #e6e6e6, 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); background-image: linear-gradient(to bottom, #ffffff 0%, #e6e6e6 100%); background-repeat: repeat-x; border-color: #e0e0e0; border-color: #ccc; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); } /*      */ .btn-default:hover { background-color: gray !important; background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(gray)); background-image: -webkit-linear-gradient(top, #ffffff, 0%, gray, 100%); background-image: -moz-linear-gradient(top, #ffffff 0%, gray 100%); background-image: linear-gradient(to bottom, #ffffff 0%, gray 100%); border-radius:3px; } 

टूलबार

यहाँ, थोड़ा जटिल है। पुराने संस्करण को काम करने के बजाय:

 <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="/" class="pull-left navbar-brand"></a> <ul class="nav pull-left"> </ul> </div> </div> </div> 

इतना नया

 <div class="navbar navbar-fixed-top navbar-inverse"> <div class="navbar-inner"> <div class="container"> <a href="/" class="pull-left navbar-brand"></a> <ul class="nav navbar-nav pull-left"> </ul> </div> </div> </div> 

नोट .navbar-nav क्लास, जो अब .nav क्लास के साथ होना चाहिए

संवादों

संवाद अब जटिल भी हैं। यह था:

 <div class="modal hide fade " style="width:400px; margin-left:-200px; z-index:1000000;"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button><h3></h3> </div> <div class="modal-body" style="width:380px; height:250px;"></div> <div class="modal-footer"><div class="btn-group"> <span class="btn yes btn-primary" data-dismiss="modal"></span> <span class="btn cancel btn-danger" data-dismiss="modal"></span> </div> </div> </div> 

यह बन गया:

 <div class="modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">×</button> <h3 class="modal-title"> </h3> </div> <div class="modal-body"></div> <div class="modal-footer"> <div class="btn-group"> <span class="btn yes btn-primary" data-dismiss="modal"></span> <span class="btn cancel btn-danger" data-dismiss="modal"></span> </div> </div> </div> </div> </div> 

यहां, डेवलपर्स ने वास्तव में कोशिश की और संवाद थोड़ा कम बगिया और अधिक तार्किक बन गए, खासकर संवाद बॉक्स के आकार के प्रबंधन के मामले में।

जाल

ग्रिड को पूरी तरह से फिर से तैयार किया गया था। शायद यह फ्रेमवर्क में सबसे महत्वपूर्ण बदलाव है, जो कुछ परियोजनाओं में, केवल सिकुड़ा जा सकता है - कोई निश्चित आकार नहीं हैं, केवल स्तंभों की गतिशील चौड़ाई को मान्यता दी गई है। मार्कअप कक्षाएं कॉलम की चौड़ाई के लिए जिम्मेदार हैं, .span2 , .span3 , आदि। इसी .col-md-2 , .col-md-3 द्वारा प्रतिस्थापित ...

तस्वीरें

कोई और अधिक img-polaroid वर्ग। आप इसके बजाय img-thumbnail उपयोग कर सकते हैं

माउस

बूटस्ट्रैप के आइकन अब फॉन्ट में लागू होते हैं, स्प्राइट से नहीं। इसके साथ ही, कक्षाओं के नाम बदल दिए जाते हैं, जिन्हें अब सब कुछ बदलना होगा।

 <i class="icon-pencil"></i> 

लिखने की जरूरत है

 <i class="glyphicon glyphicon-pencil"></i> 

यदि Font-Awesome का उपयोग किया जाता है, तो, सिद्धांत रूप में, कुछ भी बदलने की आवश्यकता नहीं है और, सौभाग्य से, सब कुछ पुराने तरीके से काम करना जारी रखेगा। शायद यह इस अद्भुत फ़ॉन्ट को जोड़ने का एक अच्छा कारण है, सौभाग्य से, इसके आइकन का स्टॉक निश्चित रूप से समृद्ध है।

बिल्ला

यदि कोई बहु-रंग का उपयोग करता है, तो अब वे शब्द से नहीं हैं। इसके बजाय, बैज तत्वों के रंग में समायोजित होते हैं और, डिफ़ॉल्ट रूप से, ज्यादातर मामलों में वे सिर्फ ग्रे होते हैं। रंगों की खातिर आपको बैज को .label टैग से बदलना होगा

पृष्ठ पर अंक लगाना

इससे पहले, पृष्ठन वर्ग को किसी भी तत्व को सौंपा जा सकता है, एक div कहते हैं। अब केवल ul पर

 <div> <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">1</a></li> <li><a href="#">1</a></li> </ul> </div> 

शायद यह वह सब है जिसने पहली नज़र में मेरी आंख को पकड़ लिया था।

उपयोगी लिंक

- प्रवास के दौरान मतभेदों पर मदद (अंग्रेजी)
- बूटस्ट्रैप वेब स्टाइल इंटरफ़ेस
- 2 से 3 बूटस्ट्रैप संस्करण के लिए स्वचालित मार्कअप कनवर्टर (लिंक के लिए धन्यवाद मुहास )