बूटस्ट्रॅप एक आहे सीएसएस फ्रेमवर्क हे संपूर्ण नेटवर्कमध्ये खूप लोकप्रिय झाले आहे. त्यांच्या शैली प्रतिसाद सामाजिक नेटवर्कवर पाहिले जातात तुंटी y Twitter. वेब अनुप्रयोग विकसित करताना याचा वापर केल्याने आम्हाला बर्‍याच वेळेची बचत होते कारण सर्व उपकरणांसाठी उपयुक्त पृष्ठांची शैली तयार करण्यात आमचे सर्व कार्य आणि प्रयत्नांची बचत होते. या चौकटीत वापरल्या गेलेल्या शैलींचा सल्ला घेतल्यास आम्हाला कळेल की ते आपल्या परिचयाचे आहेत, कारण आज बर्‍याच वेबसाइटने ती लागू केली आहे.
रचना
बूटस्ट्रॅप फ्लुइड स्ट्रक्चर
मोबाईल आणि टॅब्लेटवरून आमच्या वेबसाइटवर प्रवेश करण्याकरिता आम्हाला बूटस्ट्रॅपने प्रदान केलेल्या फ्लूईड स्ट्रक्चरचा वापर करावा लागेल. या संरचनेचा वापर खूप सोपा आहे, सर्व काही घटकांवर आधारित आहे कालावधी ते आम्हाला मदत करेल लेआउट आमच्या वेब डिझाइन. नंतर जेव्हा आम्ही या कडून डिझाइनमध्ये प्रवेश करतो स्मार्टफोन o टॅबलेट, हे नॅव्हिगेशनची गुणवत्ता सुधारित करणार्‍या डिव्हाइसवर स्वयंचलितपणे जुळवून घेईल. आम्ही वापरू कालावधी द्रव संरचनेत तार्किक विभागांमध्ये वर्गांसह, म्हणजेः
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
जेथे क्रमांक 2 स्पॅनचा आकार दर्शवितो. प्रत्येक पंक्तीमध्ये आकार 12 च्या 1 स्पॅनसाठी किंवा आकार 2 च्या 6 स्पेन्ससाठी पुरेशी जागा असते, हे आपल्या पसंतीनुसार वितरित केले जाऊ शकते. एकदा पंक्तीची जागा ओलांडली की ती स्वयंचलितपणे पुढील वर जाईल, आम्हाला एक वापरण्याची परवानगी देते कालावधी लाइन ब्रेक तयार करण्यासाठी आकार १२. जर आम्हाला काही वगळायचे असेल तर कालावधी एखादी तयार करताना, म्हणजे 4 पासून प्रारंभ करा कालावधी, आणि 3 आकार लागू करा, आम्ही हा कोड वापरू:
<div class="span2 offset4">Contenido</div>
हे विभाग चार उडी मारण्याची परवानगी देते विस्तार सामग्री प्रदर्शित करण्यापूर्वी. आम्ही आमच्या स्वतंत्र इच्छेनुसार आमच्या कोडसह आम्हाला पाहिजे ते वगळू शकतो.
ऑफसेट वर्गासह स्पॅन वगळणे
प्रत्येक डिव्हाइससाठी भिन्न डिझाइन
प्रत्येक डिव्हाइसमध्ये फरक करण्यासाठी सीएसएस वर्ग
प्रत्येक प्रकारच्या डिव्हाइससाठी भिन्न डिझाइन लागू करण्यासाठी, आम्ही खालील वर्गांचा वापर करून प्रत्येक तार्किक विभागास कोणत्या डिव्हाइससाठी ते देणारं आहोत हे सांगू:
अशा प्रकारे, आम्ही समान URL सह प्रत्येक डिव्हाइससाठी पूर्णपणे भिन्न डिझाइन दर्शवू शकतो.
बटणे
बूटस्ट्रॅपद्वारे ऑफर केलेल्या बटणांची यादी
बूटस्ट्रॅप आम्हाला रंगीबेरंगी बटणाची स्वच्छ माहिती उपलब्ध करुन देतो, त्याचा वापर अगदी सोपा आहे:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
कुठे btn btn-success ते बदलण्यासाठी, बटणाच्या रंगाचा संदर्भ घ्या, आम्ही केवळ त्यास मागील प्रतिमेमध्ये दर्शविलेल्या वर्गांसह पुनर्स्थित करावे लागेल.
बूटस्ट्रॅप स्थापित करत आहे
या सीएसएस फ्रेमवर्कच्या स्थापनेसाठी आम्ही पोस्टच्या शेवटी सोडलेल्या दुव्यावरून झिप डाउनलोड करू आणि आम्ही पुढील कोड लिहू. आमच्या HTML फाईलच्या अग्रभागी.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
एकदा आम्ही हे सुनिश्चित केले की सीएसएस आणि जेएस फायली आमच्या एचटीएमएल फाइलच्या समान फोल्डरमध्ये आहेत, आम्ही आमच्या प्रतिसाद वेबसाइटची रचना सुरू करू शकतो.
अधिक माहिती - फॉर्मचे प्रमाणीकरण
डाउनलोड करा - बूटस्ट्रॅप: सीएसएस फ्रेमवर्क
या चौकटीवर अधिक शिकवण्या नाहीत का ???