बूटस्ट्रॅप प्रशिक्षण. बूटस्ट्रॅप नवशिक्यांसाठी एक सोपा प्रतिसादात्मक मांडणी आहे. बूटस्ट्रॅपला HTML पृष्ठाशी जोडत आहे

इतर मॉडेल CSS वापरूनफ्रेमवर्क्स म्हणजे लेआउट डिझायनरला त्याच्यासाठी फ्रेमवर्कच्या निर्मात्यांनी आधीच विचार केलेल्या अनेक लेआउट बारीकसारीक गोष्टींचा विचार करण्याची आवश्यकता नाही. अशा सूक्ष्म गोष्टींमध्ये क्रॉस-ब्राउझर सुसंगतता, भिन्न स्क्रीन रिझोल्यूशनसाठी समर्थन आणि बरेच काही समाविष्ट आहे. लेआउट डिझायनर फक्त काय, कसे आणि केव्हा दाखवायचे हे सूचित करतो, बाकीचे फ्रेमवर्कद्वारेच केले जाते. हा दृष्टिकोन वेबसाइट लेआउट मोठ्या प्रमाणात वेगवान करू शकतो. बूटस्ट्रॅपच्या फायद्यांमध्ये त्याची लोकप्रियता समाविष्ट आहे. याचा अर्थ असा की दुसऱ्या कोड डिझायनरसाठी तुमचा कोड राखणे सोपे होईल.

फ्रेमवर्क वापरण्याचा तोटा असा आहे की पृष्ठास संपूर्ण फ्रेमवर्कच्या अतिरिक्त शैलींचा समावेश करावा लागेल, जरी ते त्यांच्यापैकी फक्त एक छोटासा भाग वापरत असले तरीही. फ्रेमवर्क प्रोटोटाइपिंग आणि पृष्ठे तयार करण्यासाठी एक उत्कृष्ट साधन आहे ज्यासाठी डिझाइन दुय्यम आहे, जसे की प्रशासक पृष्ठे. जर तुमच्याकडे खूप विशिष्ट डिझाइन असेल, तर फ्रेमवर्क वापरून ते मांडणे नेटिव्ह टूल्स वापरण्यापेक्षा अधिक कठीण असू शकते. तथापि, हे देखील शक्य आहे.

बूटस्ट्रॅप वापरण्याबद्दल सध्या, सुरुवातीच्यासाठी कमी न वापरता बूटस्ट्रॅप शैलीसह कार्य करण्याचे अनेक मार्ग आहेत, बूटस्ट्रॅप स्वतः खालील पद्धतीची शिफारस करतो: तुम्हाला साइटवरून संकलित बूटस्ट्रॅप डाउनलोड करणे आणि काहीही न बदलता ते तुमच्या प्रोजेक्टमध्ये ठेवणे आवश्यक आहे. नंतर तुम्हाला तुमची स्वतःची रिकामी CSS फाईल तयार करावी लागेल आणि ती bootstrap.css नंतर समाविष्ट करावी लागेल.

त्यानंतर, बूटस्ट्रॅप शैली बदलण्यासाठी तुम्हाला त्या तुमच्या styles.css मध्ये बदलण्याची आवश्यकता आहे:

A (रंग: #beceda;)
एक स्पष्ट गैरसोय हा दृष्टिकोनतुम्हाला व्यक्तिचलितपणे शोधावे लागेल आवश्यक शैली, ज्यामध्ये व्यत्यय आणणे आवश्यक आहे आणि ते नेहमीच क्षुल्लक होणार नाही, कारण काही बूटस्ट्रॅप पर्याय अनेक निवडकांना सुधारित स्वरूपात लागू होतात, जसे की सूत्रांद्वारे. सानुकूलित साधन येथे काही मदत करू शकते, ते तुमचे बदल योग्यरित्या संकलित करण्यात मदत करेल, परंतु फक्त एकदाच. भविष्यात तुम्हाला काही पॅरामीटर बदलायचे असल्यास, तुम्हाला तुमच्या शैली संकलित करण्यासाठी सर्व फील्डसाठी बदललेली मूल्ये पुन्हा प्रविष्ट करावी लागतील.

कमी वापरणे ही पद्धत असे गृहीत धरते की सर्व बूटस्ट्रॅप व्हेरिएबल्स .less फाइल्समध्ये संग्रहित आहेत. डेव्हलपर या व्हेरिएबल्ससह कार्य करतो आणि आवश्यक असल्यास, ते व्यक्तिचलितपणे किंवा स्वयंचलितपणे CSS फायलींमध्ये संकलित करतो आणि HTML मध्ये केवळ संकलित केलेल्या CSS फायलींचा समावेश होतो. हाच पर्याय लेखात सर्वात लवचिक मानला जाईल.

कमी फायली संकलित करण्याचे बरेच मार्ग आहेत आणि बूटस्ट्रॅप हे विकसकाच्या विवेकबुद्धीवर सोडते. बूटस्ट्रॅप स्वतः संकलनासाठी ग्रंट वापरतो, तुम्ही जेटब्रेन्स उत्पादनांसाठी प्लगइनला प्राधान्य देऊ शकता आणि आम्ही, लेख नवशिक्यांसाठी उद्देशित असल्याने, अधिक दिशेने पाहू. साधे उपाय. विंडोजसाठी विनलेस, मॅकसाठी सिंपलेस किंवा लिनक्ससाठी कोआला असे उपाय आहेत. हे सर्व प्रोग्राम्स अंदाजे समान कार्य करतात: त्यांना इनपुट म्हणून कमी फायली असलेले फोल्डर प्राप्त होते आणि त्यातील बदल ऐकतात. तुम्ही कोणत्याही फाईलमध्ये बदल करताच, ती लगेच निर्दिष्ट CSS फाइलमध्ये संकलित केली जाते. अशा प्रकारे तुम्हाला प्रत्येक बदलानंतर मॅन्युअल संकलन चालवण्याची गरज नाही. तुम्ही कमी फाईल बदलता, ती जतन करा आणि साइटवरील बदल आधीच संकलित, संकुचित स्वरूपात त्वरित पहा.

प्रकल्प तयार करणे पहिली पायरी म्हणजे आमच्या प्रकल्पासाठी एक साधी फाइल रचना तयार करणे.
प्राथमिक तपासणी फाइल संरचना तयार केल्यानंतर, उघडा psd फाइलफोटोशॉप मध्ये. टेम्प्लेटचे काळजीपूर्वक परीक्षण करणे आणि त्याचे मूल्यांकन करणे महत्वाचे आहे. आपण खालील गोष्टी समजून घेतल्या पाहिजेत:

• प्रतिमा कशा कापल्या जातील?
• कोणते घटक वापरले जातील?
• मुख्य शैली काय असतील?
• आम्हाला कोणते पृष्ठ लेआउट मिळेल?

तुम्ही स्वतःसाठी या प्रश्नांची मानसिक उत्तरे दिल्यानंतरच तुम्ही मांडणीकडे जाऊ शकता. चला या प्रश्नांना क्रमाने पाहू या सामान्य प्रतिमा या टप्प्यावर आपल्याला फक्त कट करणे आणि जतन करणे आवश्यक आहे सामान्य प्रतिमा, जे साइटच्या सर्व पृष्ठांवर असेल आणि सामग्रीशी संबंधित नाही. आमच्या बाबतीत, हे हलके राखाडी पृष्ठ पार्श्वभूमी, शीर्षलेख पार्श्वभूमी, नकाशा प्रतिमा, दोन लोगो आणि सोशल मीडिया बटणे असतील.

नकाशा प्रतिमा जतन करा:

खालीलप्रमाणे लोगो जतन करूया:

Images/logo.png
images/footer-logo.png

पुनरावृत्ती होणारी पार्श्वभूमी प्रतिमा उभ्या आणि क्षैतिजरित्या पुनरावृत्ती करून पूर्ण प्रतिमा तयार करण्यासाठी पुरेसे लहान तुकडा कापून काढणे आवश्यक आहे.

/images/bg.png
/images/h1-bg.png

सह सामाजिक नेटवर्क चिन्ह समान आकारएका फाईलमध्ये सेव्ह करण्यासाठी आणि अधिकसाठी स्प्राइट्स म्हणून वापरण्यासाठी सोयीस्कर जलद लोडिंग. ग्लूइंग प्रतिमांबद्दल अधिक तपशील पहिल्या भागात वर्णन केले आहेत. परिणाम दोन फायली असतील:

/images/social.png
/images/social-small.png

घटक बूटस्ट्रॅप वापरून मांडणी आणि मूळ माध्यम वापरून मांडणी यातील मुख्य फरक म्हणजे बूटस्ट्रॅप घटकांची संकल्पना मांडते. पूर्वनिर्धारित शैलींसह रेडीमेड एचटीएमएल ब्लॉक्सचे घटक वारंवार वापरले जातात. काहीवेळा घटक JavaScript वापरतात. लेआउट डिझायनर एकतर तयार घटक वापरू शकतो किंवा त्यासाठी त्याचे स्वतःचे स्वरूप परिभाषित करू शकतो. हे करण्यासाठी, तुम्हाला अनेकदा बूटस्ट्रॅपमधील व्हेरिएबल्सचे मूल्य बदलण्याची आवश्यकता असते. अधिक लवचिक बदल आवश्यक असल्यास, लेआउट डिझायनर नेहमी त्याच्या विवेकबुद्धीनुसार HTML आणि CSS बदलू शकतो.

तुम्ही आमच्या टेम्प्लेटवर एक नजर टाकल्यास, आम्हाला खालील घटकांची आवश्यकता असेल हे तुम्ही पाहू शकता:

स्तंभांसह लेआउटसाठी - ग्रिड सिस्टम (पंक्ती, कॉल)

शोधासाठी - इनलाइन फॉर्म (फॉर्म-इनलाइन), गटबद्ध नियंत्रणे (इनपुट-ग्रुप), बटण (बीटीएन)

नेव्हिगेशनसाठी - नेव्हिगेशन बार (navbar) आणि नेव्हिगेशन स्वतः (nav)

सबमेनू प्रदर्शित करण्यासाठी - गटबद्ध सूची (सूची-गट)

नकाशा ब्लॉकसाठी - व्हिज्युअल पॅनेल (पॅनेल)

मोठे प्रदर्शित करण्यासाठी मध्यवर्ती ब्लॉक- जंबोट्रॉन

फोटो फ्रेम प्रदर्शित करण्यासाठी - लघुप्रतिमा

जेव्हा आम्हाला लेआउटमध्ये मूलभूत शैली आढळतात तेव्हा आम्ही प्रत्येक घटकाकडे अधिक तपशीलवार पाहू. हे src/less/variables.css या फाईलमध्ये करू.

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

@brand-font: "Oswald", sans-serif;
जर तुम्हाला रशियन साइट्ससाठी टेम्पलेट वापरायचे असेल, तर तुम्ही ओसवाल्ड फॉन्टला सिरिलिकला सपोर्ट करणाऱ्या जवळच्या क्युरमसह बदलण्याचा प्रयत्न करू शकता.

आता आपल्या स्वतःच्या बूटस्ट्रॅप सेटिंग्ज बदलूया:

आता आपण व्हेरिएबल्स पूर्ण केले आहे, चला styles.less फाईलमध्ये आपले डिझाइन स्टाईल करणे सुरू करूया. प्रथम, स्वतः बूटस्ट्रॅप आणि आमचे व्हेरिएबल्स कनेक्ट करूया:

@import "bootstrap/bootstrap.less"; @import "variables.less";
सर्व बूटस्ट्रॅपच्या डीफॉल्ट शैली व्हेरिएबल्स वापरून बदलल्या जाऊ शकत नाहीत, म्हणून ते स्वतः करूया:

P ( समास: 20px 0; ) .फॉर्म-नियंत्रण (बॉक्स-शॅडो: काहीही नाही; ) .btn ( फॉन्ट-फॅमिली: @brand-font; )
येथे आम्ही फॉर्म घटकांमधून सावली काढून टाकली आहे, आणि बटणांमधील मजकूराला विशिष्ट पृष्ठ फॉन्ट दिला आहे.

मग आम्ही पृष्ठ पार्श्वभूमी आणि शीर्ष पट्टीचे वर्णन करतो:

मुख्य भाग (बॉर्डर-टॉप: 5px सॉलिड #7e7e7e; पार्श्वभूमी-प्रतिमा: url(../images/bg.png); )
पुढे मजकूरात कोणत्या फाईलमध्ये शैली लिहिल्या आहेत हे सूचित केले जाणार नाही. फक्त लक्षात ठेवा आम्ही variables.less, आणि फाईलमधील सर्व व्हेरिएबल्स सेव्ह करतो CSS शैलीआम्ही ते styles.less मध्ये संग्रहित करू.

HTML फ्रेमवर्क आम्ही पारंपारिकपणे HTML फ्रेमवर्कसह वेबसाइट लेआउट सुरू करतो. आम्ही सुरुवातीच्या पृष्ठावरील सर्वात सोप्या टेम्पलेटचा कोड index.html फाईलमध्ये पेस्ट करतो, यापूर्वी सर्व अनावश्यक गोष्टी काढून टाकल्या आहेत:

व्हाईटस्क्वेअर
हा ब्लॉक HTML5 दस्तऐवज रचना तयार करतो. शीर्षकामध्ये आम्ही आमच्या पृष्ठाचे नाव सूचित करतो - व्हाईटस्क्वेअर. व्ह्यूपोर्ट मेटा टॅगसह आम्ही सूचित करतो की पृष्ठाची रुंदी आहे मोबाइल उपकरणेस्क्रीनच्या रुंदीच्या समान असेल आणि प्रारंभिक स्केल 100% असेल. नंतर शैली फाइल समाविष्ट आहे. आणि साठी इंटरनेट आवृत्त्यानऊ पेक्षा कमी एक्सप्लोरर, आम्ही स्क्रिप्ट कनेक्ट करतो ज्या आम्हाला आमचे लेआउट योग्यरित्या प्रदर्शित करण्यास अनुमती देतात.

लेआउट या प्रकरणात, आम्ही पाहतो की साइटमध्ये दोन भाग आहेत: सामग्रीसह मुख्य कंटेनर, जो स्क्रीनवर मध्यभागी आहे आणि स्ट्रेचिंग फूटर. मुख्य कंटेनरमध्ये दोन स्तंभ असतात: मुख्य सामग्री आणि साइडबार. त्यांच्या वर हेडर, नेव्हिगेशन (एनएव्ही) आणि पृष्ठ शीर्षक (.शीर्षक) आहे.

चला शरीर जोडूया खालील कोड:

येथे आपण पहिला बूटस्ट्रॅप घटक - स्तंभ पाहतो. स्तंभांच्या मूळ घटकाला "पंक्ती" वर्ग दिला जातो आणि स्तंभ वर्ग "col-" उपसर्गाने सुरू होतात, नंतर स्क्रीन आकार (xs, sm, md, lg) आणि स्तंभाच्या सापेक्ष रुंदीसह समाप्त होतो .

स्क्रीनसाठी मूल्यांसह एक स्तंभ एकाच वेळी भिन्न वर्ग नियुक्त केला जाऊ शकतो, उदाहरणार्थ class="col-xs-12 col-md-8". हे वर्ग फक्त विशिष्ट स्क्रीन आकारासाठी टक्केवारी म्हणून स्तंभाची रुंदी सेट करतात. जर स्तंभाला विशिष्ट स्क्रीन वर्ग दिलेला नसेल, तर किमान विशिष्ट स्क्रीनसाठी वर्ग लागू केला जाईल, आणि जर तो निर्दिष्ट केला नसेल, तर कोणतीही रुंदी लागू केली जाणार नाही आणि ब्लॉक जास्तीत जास्त शक्य रुंदी घेईल.

आमचे वर्ग "col-md-7" आणि "col-md-17" असे दर्शवतात की ब्लॉक्स हे मूळ कंटेनरच्या सापेक्ष 7 आणि 17 रुंदीचे स्तंभ आहेत. डीफॉल्टनुसार, बूटस्ट्रॅपमधील स्तंभ रुंदीची बेरीज 12 आहे, परंतु आम्हाला आवश्यक असलेली लवचिकता प्राप्त करण्यासाठी आम्ही ही संख्या दुप्पट केली आहे.

मुख्य भाग (…. रॅपर ( पॅडिंग: 0 0 50px 0; ) शीर्षलेख ( पॅडिंग: 20px 0; ) )
आम्ही ही रचना शरीराच्या आत ठेवली. कमी वाक्यरचना तुम्हाला नियम एकमेकांमध्ये नेस्ट करण्याची परवानगी देते, जे नंतर खालील रचनांमध्ये संकलित केले जातात:

बॉडी .रॅपर (…) बॉडी हेडर (…)
हा दृष्टिकोन आपल्याला पाहण्याची परवानगी देतो HTML रचनाअगदी CSS च्या आत आणि नियमांना काही प्रकारचा “स्कोप” देते.

लोगो

हेडर टॅगमध्ये लोगो घाला:

अतिरिक्त शैलीआवश्यक नाही.

शोधा

शोध तयार करण्यासाठी, आम्हाला खालील बूटस्ट्रॅप घटकांची आवश्यकता असेल: इनलाइन फॉर्म, गटबद्ध नियंत्रणे आणि बटण.
IN शीर्षलेख टॅगउजवीकडे संरेखित एक इनलाइन फॉर्म तयार करा. अशा फॉर्मच्या फील्डमध्ये "फॉर्म-कंट्रोल" वर्ग आणि लेबल असणे आवश्यक आहे.

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

आम्हाला शोध फील्डसाठी लेबल दाखवण्याची आवश्यकता नसल्यामुळे, आम्ही ते "केवळ-एसआर" वर्गाने लपवू. हे समर्पित स्क्रीन वाचकांसाठी आवश्यक आहे.

बटणाला "btn-प्राथमिक" वर्ग दिलेला आहे, याचा अर्थ असा आहे प्राथमिक बटणया फॉर्मचे.

…शोधा जा
आमच्याकडे फक्त शैलींमध्ये शोध फॉर्मची रुंदी सेट करणे बाकी आहे.

मुख्य भाग ( …. रॅपर ( … शीर्षलेख ( …. फॉर्म-शोध ( रुंदी: 200px; ) ) )

मेनू

मेनू प्रदर्शित करण्यासाठी, "नेव्हिगेशन पॅनेल" घटक घ्या आणि त्यामध्ये "नेव्हिगेशन" घटक ठेवा, जी लिंक्ससह सूची आहे. नेव्हिगेशनसाठी, "navbar-nav" वर्ग जोडला जातो, जो navbar मध्ये विशेष नेव्हिगेशन शैली लागू करतो.

• घर
• आमच्याबद्दल
• सेवा
• भागीदार
• ग्राहक
• प्रकल्प
• करिअर
• संपर्क करा

हा मेनू आमच्या डिझाइनमध्ये आणण्यासाठी, आम्ही सेट करू खालील मूल्येचल:

/*navbar उंची*/ @navbar-उंची: 37px; /*अधिक क्षैतिज पॅडिंग सेट करा*/ @nav-link-padding: 10px 30px; /*मेनू आयटमसाठी पार्श्वभूमी*/ @navbar-default-bg: @panel-bg; /*मेनू आयटममधील मजकूर रंग*/ @navbar-default-link-color: #b2b2b2; /*आणि माउस फिरवताना - समान*/ @navbar-default-link-hover-color: @navbar-default-link-color; /*सक्रिय मेनू आयटमची पार्श्वभूमी आमचा विशिष्ट निळा रंग आहे*/ @navbar-default-link-active-bg: @brand-primary; /*सक्रिय मेनू आयटमचा मजकूर रंग*/ @navbar-default-link-active-color: #fff;
सानुकूल करण्यायोग्य पॅरामीटर्स व्यतिरिक्त, आम्ही शैलींमध्ये अतिरिक्त गोष्टींचे वर्णन करू - हा अप्परकेस मजकूर आणि आमचा विशिष्ट फॉन्ट आहे:

मुख्य भाग ( …. रॅपर ( …. navbar a ( टेक्स्ट-ट्रान्सफॉर्म: अप्परकेस; फॉन्ट: 14px @brand-font; ) ) )

पृष्ठ शीर्षक

पृष्ठ शीर्षक "शीर्षक" वर्गासह div मध्ये ठेवले आहे.

आमच्याबद्दल
आणि खालील शैली आहेत:

मुख्य भाग ( …. रॅपर ( ….शीर्षक ( उंची: 40px; पार्श्वभूमी: पारदर्शक url(../images/h1-bg.png); समास: 30px 0; पॅडिंग-डावीकडे: 20px; h1 ( प्रदर्शन: इनलाइन-ब्लॉक; रंग: #7e7e7e; सामान्य 40px/40px "Oswald", sans-serif: url(../images/bg.png); )
येथे आम्ही div वर पार्श्वभूमी म्हणून एक राखाडी पट्टी काढतो आणि छाप तयार करण्यासाठी पृष्ठाच्या इच्छित फॉन्ट आणि पार्श्वभूमी रंगासह त्यात एक इनलाइन h1 ठेवतो. पारदर्शक पार्श्वभूमी h1 साठी.

सबमेनू

सबमेनू तयार करताना, आम्ही "नेव्हिगेशन" घटक वापरणार नाही, कारण तो आमच्यासाठी शैलीमध्ये फारसा योग्य नाही; अशा घटकाच्या प्रत्येक घटकाला "सूची-समूह-आयटम" वर्ग असतो.

सबमेनू बाजूला टॅगमध्ये ठेवावा. आम्ही मुख्य मेनूप्रमाणेच लिंक्सची सूची तयार करतो.

• Lorem ipsum
• Donec tincidunt laoreet
• वेस्टिबुलम एलिट
• एटियम फॅरेट्रा
• फॅसेलस प्लेसराट
• Cras et nisi vitae odio

घटक सेटिंग्जमध्ये, आम्ही सूचित करतो की सर्व गटबद्ध सूची "पॅनेल" घटकाच्या पार्श्वभूमी आणि फ्रेमसह दर्शविल्या पाहिजेत:

@list-group-bg: @panel-bg; @list-group-border: @panel-inner-border;
आणि सबमेनूवर खालील शैली लागू करा:

मुख्य भाग ( ….रॅपर ( ….सबमेनू ( समास-तळाशी: 30px; li (प्रदर्शन: सूची-आयटम; फॉन्ट: 300 14px @brand-font; सूची-शैली-स्थिती: आत; सूची-शैली-प्रकार: चौरस; पॅडिंग : 10px; टेक्स्ट-ट्रान्सफॉर्म: अप्परकेस; &. सक्रिय ( रंग: @ब्रँड-प्राथमिक; ) a ( रंग: @text-color; मजकूर-सजावट: काहीही नाही; &:होवर (रंग: @text-color; ) ) ))
प्रथम, आम्ही मानक शैली सूची घटकांवर परत करतो, कारण बूटस्ट्रॅपने त्यांना स्वतःच्या शैलीने बदलले आहे. तळाशी एक पॅडिंग जोडा. सबमेनू पातळ फॉन्ट आणि चौरस मार्कर वापरतात. आणि लिंक्ससाठी आम्ही रंग, अप्पर केस सेट करतो आणि अंडरलाइनिंग काढून टाकतो. "&.active" कोडमधील अँपरसँड संकलित वेळी पालक निवडकर्त्याद्वारे कमी वाक्यरचना वापरून बदलले जाईल: ".submenu li.active".

साइडबार सामग्री सबमेनू व्यतिरिक्त, साइडबार सामग्रीमध्ये कार्यालयांच्या स्थानासह एक प्रतिमा देखील असते.

ते प्रदर्शित करण्यासाठी, आम्ही शीर्षकाला रंग देण्यासाठी "पॅनेल" घटक किंवा त्याऐवजी "पॅनेल-प्राथमिक" वापरु. या घटकामध्ये हेडर ब्लॉक (पॅनल-हेडिंग) आणि पॅनेल सामग्री ब्लॉक (पॅनल-बॉडी) समाविष्ट आहे. आम्ही नकाशाच्या प्रतिमेमध्ये “img-प्रतिसाद देणारा” वर्ग जोडतो, ज्यामुळे स्क्रीनची रुंदी लहान असताना प्रतिमा लहान होऊ शकते.

… आमची कार्यालये
बूटस्ट्रॅप व्हेरिएबल्समध्ये आम्ही पॅनेलच्या पार्श्वभूमीसाठी रंग आधीच सेट केला आहे (पॅनेल-बीजी), आणि आता आम्ही सूचित करू की "प्राथमिक" पॅनेलमध्ये डीफॉल्ट पॅनेलची ग्रे बॉर्डर असेल, डीफॉल्ट निळ्या ऐवजी:

@panel-primary-border: @panel-inner-border;
आता आपल्याला साइट शैली बदलण्याची आवश्यकता आहे मानक सेटिंग्जव्हेरिएबल्सद्वारे न बदललेले पॅनेल:

पॅनेल ( बॉक्स-शॅडो: काहीही नाही; .पॅनेल-हेडिंग (फॉन्ट: 14px @brand-font; मजकूर-ट्रान्सफॉर्म: अप्परकेस; पॅडिंग: 10px; ) .पॅनेल-बॉडी ( पॅडिंग: 10px; ) )
येथे आम्ही पॅनेलमधून सावली काढली, आमचे स्वतःचे इंडेंट जोडले आणि आमचे स्वतःचे हेडिंग फॉन्ट सेट केले.

कोट एक कोट जोडून सामग्री मांडण्यास सुरुवात करूया.

हे पृष्ठ घटक जंबोट्रॉन घटकासारखेच आहे. चला ते सामग्री स्तंभात जोडूया:

"विश्लेषणात, सन्माननीय स्थितीत." nulla ul corper, dolor ac pellentesque placerat, justo telus gravida erat, vel porttitor libero erat.”

जॉन डो, लोरेम इप्सम
जंबोट्रॉन घटकासाठी व्हेरिएबल्स वापरून, आम्ही मजकूराचा रंग पांढरा आणि ब्रँडेड निळ्या पार्श्वभूमीवर सेट करू:

@jumbotron-bg: @brand-primary; @jumbotron-रंग: #ffff;
आणि आमच्या शैलींचे वर्णन करूया:

मुख्य भाग ( …. रॅपर ( …. जंबोट्रॉन ( सीमा-त्रिज्या: 0; पॅडिंग: 0; समास: 0; ब्लॉककोट ( सीमा-डावीकडे: काहीही नाही; p ( फॉन्ट: 300 इटालिक 33px @brand-font; मजकूर-ट्रान्सफॉर्म: अपरकेस); समास-तळाशी: 0; ) लहान ( मजकूर-संरेखित: उजवीकडे; रंग: #1D8EA6; फॉन्ट: 300 20px @brand-font; &:before ( सामग्री: ""; ) ) )
त्यामध्ये, आम्ही कोपरा गोलाकार, घटक पॅडिंग आणि कोट सजावट काढून टाकतो जे डीफॉल्टनुसार बूटस्ट्रॅपद्वारे सेट केले जातात. आम्ही आमच्या फॉन्टसाठी शैली देखील जोडू.

सामग्री

Lorem ipsum dolor sit amet…

डोनेक वेल निस्ल निभ…

डोनेक वेल निस्ल निभ…

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

"थंबनेल" वर्ग प्रतिमांना "लघुप्रतिमा" घटकात बदलतो. तो आमच्यासाठी प्रतिमा शैलीबद्ध करण्याचे सर्व काम करेल. या घटकासाठी व्हेरिएबल्समध्ये आमच्या पॅडिंग आणि बॉर्डरचा रंग सेट करणे ही एकच गोष्ट बाकी आहे:

@thumbnail-padding: 1px; @thumbnail-border: #c9c9c9;

"आमची टीम" ब्लॉक करा

हा ब्लॉक मांडताना, प्रथम शीर्षक जोडूया:

आमची टीम
शैलीसह:

मुख्य भाग ( … .रॅपर ( … h2 (पार्श्वभूमी: काहीही रिपीट स्क्रोल नाही 0 0 #29C5E6; रंग: #fff; फॉन्ट: 300 30px @brand-font; पॅडिंग: 0 10px; मजकूर-ट्रान्सफॉर्म: अप्परकेस; ) )
आणि मग आम्ही "टीम" वर्गासह एक ब्लॉक जोडू, ज्यामध्ये कर्मचारी कार्डे असलेल्या दोन ओळी असतील. प्रत्येक कार्ड एक स्तंभ आहे. कार्डची रुंदी आमच्या ग्रिडच्या चार स्तंभांएवढी आहे. ओळीतील पहिले कार्ड वगळता सर्व कार्डांना डावा इंडेंट असतो, जो “col-md-offset-1” वर्गाद्वारे तयार केला जातो. कार्ड सामग्रीमध्ये प्रतिमा आणि वर्णन असते (. मथळा)

जॉन डो सौन्ड्रा पिट्सली

संघ नेता

… एरिका नोब्रिगा

कला दिग्दर्शक

कोडी रौसेल

वरिष्ठ यूआय डिझायनर

…
मार्कअप तयार केल्यानंतर, या घटकांना खालील शैली देऊ या:

मुख्य भाग ( ….रॅपर ( ….टीम ( .पंक्ती ( मार्जिन-टॉप: 20px; .col ( पांढरी-स्पेस: Nowrap; .थंबनेल ( समास-तळाशी: 5px; ) ) ) .col-md-offset-1 ( समास- डावीकडे: 3.7%; ) .मथळा ( h3 ( फॉन्ट: 300 16px @brand-font; समास: 0; ) p ( फॉन्ट: 300 14px @brand-font; रंग: @brand-primary; समास: 0; ) ) ))
येथे सेट केलेल्या इंडेंट्स आणि फॉन्ट शैलींव्यतिरिक्त, आम्ही "col-md-offset-1" वर्ग बदलला आहे. त्याला इंडेंट 3.7% वर सेट करावा लागला कारण... मानक इंडेंटेशन खूप मोठे होते.

फूटर फूटरमध्ये चार मोठे ब्लॉक्स असतात: Twitter फीड, साइट मॅप, सोशल लिंक्स आणि कॉपीराइटसह लोगो.

प्रथम, या ब्लॉक्ससह फूटर कंटेनर तयार करूया:

आणि त्यावर डिझाइन लागू करा:

तळटीप (पार्श्वभूमी: #7e7e7e; रंग: #dbdbdb; फॉन्ट-आकार: 11px; .कंटेनर (उंची: 110px; पॅडिंग: 10px 0; ) )
फूटर टॅग स्क्रीनच्या संपूर्ण रुंदीवर एक राखाडी क्षेत्र परिभाषित करतो आणि त्यातील कंटेनर मध्यभागी असलेले क्षेत्र प्रदर्शित करतो मोठे पडदेआणि फूटरची उंची आणि इंडेंटेशन सेट करते. आम्ही तळटीप आत ब्लॉक संरेखित करण्यासाठी स्तंभ वापरतो.

Twitter फीड Twitter फीडची सामग्री लेआउट करा:

ट्विटर फीड २३ ऑक्टो

ultricies मध्ये pellentesque massa a porta. अलीकम ipsum enim, hendrerit ut porta NEC, ullamcorper आणि nulla. eget mi dui मध्ये, sit amet scelerisque nunc. Aenean ऑगस्ट

शैली:

मुख्य भाग ( ... तळटीप ( ... .कंटेनर ( ... h3 ( बॉर्डर-तळ: 1px सॉलिड #919191; रंग: #ffffff; फॉन्ट-आकार: 14px; लाइन-उंची: 21px; फॉन्ट-फॅमिली: @brand -फॉट; ) ) )
सर्व फूटर हेडिंगसाठी, आम्ही फॉन्ट आणि इंडेंट सेट करतो आणि तळाच्या फ्रेममधून अधोरेखित देखील करतो. परिच्छेदांसाठी, इंडेंटेशन सूचित करा. तारीख प्रदर्शित करणाऱ्या लिंकसाठी, रंग सेट करा आणि अधोरेखित करा.

साइटमॅप साइटमॅपमध्ये लिंक्ससह दोन समान स्तंभ असतात:

साइटमॅप घर बद्दल सेवा भागीदार सपोर्ट संपर्क करा
आम्ही त्यांच्यामधील रंग, फॉन्ट आणि स्पेसचे दुवे सेट करतो.

मुख्य भाग ( ... तळटीप ( ... .कंटेनर ( ... a ( रंग: #dbdbdb; ) .साइटमॅप a ( प्रदर्शन: ब्लॉक; फॉन्ट-आकार: 12px; समास-तळा: 5px; ) ) )

सामाजिक दुवे

आम्ही "सामाजिक" वर्गासह ब्लॉकमध्ये लिंक्सचा संच घालतो.

सामाजिक नेटवर्क
आणि त्यांना स्टाईल करूया:

मुख्य भाग ( … तळटीप ( ….कंटेनर ( ….social ( .social-icon ( रुंदी: 30px; उंची: 30px; पार्श्वभूमी: url(../images/social.png) नाही-पुनरावृत्ती; प्रदर्शन: इनलाइन-ब्लॉक; समास -उजवे: 10px; .social-icon-small (रुंदी: 16px; उंची: 16px; पार्श्वभूमी: url(../images/social-small.png) नाही-पुनरावृत्ती; प्रदर्शन: इनलाइन-ब्लॉक; समास: 5px 6px 0 0; ) .twitter (पार्श्वभूमी-स्थिती: 0 0; ) .facebook (पार्श्वभूमी-स्थिती: -30px 0; ) .google-plus (पार्श्वभूमी-स्थिती: -60px 0; ) .vimeo (पार्श्वभूमी-स्थिती: 0 0 ; ) .youtube (पार्श्वभूमी-स्थिती: -16px 0; ) .flickr (पार्श्वभूमी-स्थिती: -32px 0; ) .instagram (पार्श्वभूमी-स्थिती: -48px 0; ) .rss (पार्श्वभूमी-स्थिती: -64px 0; ) ) ) ) )
येथे आम्ही स्प्राइट तंत्र वापरले - जिथे एक प्रतिमा फाइल वापरली जाते भिन्न चित्रे. सर्व दुवे विभागलेले आहेत मोठे चिन्ह(.social-icon) आणि लहान (.social-icon-small). आम्ही या वर्गांना इनलाइन ब्लॉक म्हणून प्रदर्शित करण्यासाठी सेट करतो निश्चित आकारआणि तीच पार्श्वभूमी. आणि नंतर CSS वापरून आम्ही ही पार्श्वभूमी हलवली जेणेकरून प्रत्येक लिंकवर संबंधित प्रतिमा प्रदर्शित होईल.

कॉपीराइट कॉपीराइट आणि लोगो असलेला ब्लॉक म्हणजे लिंक असलेले चित्र आणि त्याखाली मजकूर असलेला परिच्छेद.

Copyright 2012 Whitesquare. एक pcklab निर्मिती

स्टाइल्स मागील ब्लॉक्सप्रमाणेच केल्या जातात, फक्त फरक इतकाच आहे की ब्लॉक उजव्या काठावर खिळलेला आहे आणि त्यातील संरेखन देखील उजवीकडे आहे:

मुख्य भाग ( ….फूटर ( ….कंटेनर ( ….फूटर-लोगो ( फ्लोट: उजवीकडे; समास-टॉप: 20px; फॉन्ट-आकार: 10px; मजकूर-संरेखित: उजवीकडे; a ( मजकूर-सजावट: अधोरेखित; ) ) ) )

हे लेआउट पूर्ण करते. तयार प्रकल्पडाउनलोड करता येईल

या धड्यात तुम्ही Twitter Bootstrap 3 प्लॅटफॉर्मला साइटशी कसे जोडायचे ते शिकाल आणि त्यात कोणत्या फाइल्स आहेत हे देखील शिकाल.

Twitter बूटस्ट्रॅप प्लॅटफॉर्म वितरण फॉर्म

Twitter बूटस्ट्रॅप प्लॅटफॉर्म जाणून घेण्यासाठी तुमच्याकडे हे असणे आवश्यक आहे:

Twitter Bootstrap 3 फ्रेमवर्कची संकलित आणि लहान आवृत्ती हे या फ्रेमवर्कच्या वितरणाचे प्राथमिक स्वरूप आहे जे बहुतेक वेब विकासक निवडतात. हा फॉर्मडिलिव्हरी तुमच्या साइटशी कनेक्ट करणे सोपे आहे, कारण त्यामध्ये पूर्व-तयार आणि मिनिफाइड CSS आणि JavaScript फाइल्स, तसेच फॉन्ट स्वरूपातील चिन्हे आहेत.

प्लॅटफॉर्मच्या स्त्रोत आवृत्तीमध्ये, पूर्वसंकलित CSS आणि JavaScript फायलींव्यतिरिक्त, या प्लॅटफॉर्मचे स्त्रोत कोड (कमी आणि JavaScript फाइल्स), इंग्रजीमध्ये दस्तऐवजीकरण, विविध उदाहरणे, परवाना माहिती आणि बरेच काही समाविष्ट आहे.

या धड्यात आपण पूर्व-संकलित आणि मिनिफाइड आवृत्ती कनेक्ट करण्याकडे लक्ष देऊ, जी वरील लिंकवरून डाउनलोड केली जाऊ शकते. Twitter Bootstrap 3 प्लॅटफॉर्मच्या वितरणाच्या या प्रकारात, आम्हाला संकलित केलेल्या फाइल्सच्या लहान (संकुचित) आवृत्त्यांमध्ये जास्त रस आहे, कारण त्या आकाराने लहान आहेत आणि त्यामुळे साइटच्या वेब पृष्ठांचा लोडिंग वेग वाढवतात.

परंतु आम्ही Twitter बूटस्ट्रॅप प्लॅटफॉर्मला वेब पृष्ठाशी जोडण्याआधी, आम्हाला त्याची रचना फाइल स्तरावर विचारात घेणे आवश्यक आहे.

बूटस्ट्रॅप 3 प्लॅटफॉर्मची फाइल संरचना

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

आपण हे फोल्डर पाहिल्यास, आपल्याला दिसेल की Twitter बूटस्ट्रॅप फ्रेमवर्कमध्ये 3 डिरेक्टरी ("CSS", "FONTS" आणि "JS") आणि फाईल्स आहेत.

बूटस्ट्रॅप/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ ───me─me─boot. j s/ │ ├ ── bootstrap.js │ └── bootstrap.min.js └── फॉन्ट/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halfling.glyphicons-halfling s-regular.ttf └ ── glyphicons-halflings-regular.woff

प्लॅटफॉर्म फाइल्स 2 प्रकारांमध्ये सादर केल्या जातात:

• पहिला प्रकार म्हणजे पूर्व-संकलित CSS आणि JavaScript फाइल्स (bootstrap.css, bootstrap-theme.css, bootstrap.js)
• 2रा प्रकार - या पूर्व-संकलित आणि लहान (संकुचित) CSS आणि JavaScript फायली आहेत (bootstrap.min.css, bootstrap-theme.min.css, bootstrap.min.js)

वेबसाइटसाठी टाइप 2 फायली वापरणे अधिक श्रेयस्कर आहे, कारण त्यात टाइप 1 च्या फायलींसारखाच कोड असतो, परंतु संकुचित स्थितीत असतो. परिणामी, Twitter Bootstrap 3 प्लॅटफॉर्मच्या टाईप 2 फाइल्स वापरणाऱ्या साइट्स जलद लोड होतात.

या फायलींव्यतिरिक्त, या पॅकेजमध्ये आणखी 4 "Glyphicons" फॉन्ट फाइल्स समाविष्ट आहेत (glyphicons-halflings-regular.eot, glyphicons-halflings-regular.svg, glyphicons-halflings-regular.ttf, glyphicons-halflings-regular.woff), जे फॉन्ट संचयित केलेल्या फॉरमॅटमध्येच ते एकमेकांपासून वेगळे आहेत. "Glyphicons" फॉन्टमध्ये "Glyphicon Halflings" संचातील 200 चिन्हे असतात.

लक्ष द्या: Twitter Bootstrap 3 प्लॅटफॉर्म स्क्रिप्ट्स (bootstrap.js आणि bootstrap.min.js) कार्य करण्यासाठी, तुमच्याकडे नवीनतम आवृत्ती कनेक्ट केलेली असणे आवश्यक आहे. jQuery लायब्ररी.

HTML 5 मध्ये वेब पेज तयार करणे आणि Twitter Bootstrap 3 प्लॅटफॉर्मला जोडणे

तर, आम्ही Twitter Bootstrap 3 प्लॅटफॉर्म फाइल्सची रचना आणि उद्देश पाहिला आहे आता कनेक्ट करण्याची वेळ आली आहे हे व्यासपीठवेब पृष्ठावर संकलित आणि लहान फायली वापरणे. चला ही प्रक्रिया टप्प्याटप्प्याने पाहू. आमच्या कृतींचा परिणाम म्हणून, आम्हाला HTML 5 मध्ये एक वेब पृष्ठ मिळवायचे आहे, ज्याला Twitter Bootstrap 3 प्लॅटफॉर्म जोडलेले आहे हे दाखवण्यासाठी, आम्ही या वेब पृष्ठावर एक बटण तयार करू, जेव्हा क्लिक केले जाईल संदेशासह -अप पॅनेल दर्शविले जाईल.

पायरी 1. एक HTML पृष्ठ तयार करा

तुमचा आवडता कोड एडिटर उघडा आणि html एक्स्टेंशनसह इंडेक्स नावाची फाइल तयार करा. टेक्स्ट एडिटरमध्ये खालील कोड टाइप करा किंवा पेस्ट करा:

DOCTYPE html > बेसिक बूटस्ट्रॅप टेम्प्लेट बटणावर क्लिक करा

पायरी 2: बूटस्ट्रॅप 3 फ्रेमवर्कला वेब पृष्ठाशी जोडणे

Twitter Bootstrap 3 फ्रेमवर्कला वेब पृष्ठाशी जोडण्यासाठी, तुम्हाला पुढील गोष्टी करण्याची आवश्यकता आहे:

संकलित आणि मिनिफाइड बूटस्ट्रॅप CSS फाइल समाविष्ट करा (bootstrap.min.css);

jQuery लायब्ररीची नवीनतम आवृत्ती कनेक्ट करा, जी बूटस्ट्रॅप स्क्रिप्ट्स कार्य करण्यासाठी आवश्यक आहे;

संकलित आणि मिनिफाइड बूटस्ट्रॅप JavaScript फाइल (bootstrap.min.js) समाविष्ट करा.

टीप: फाइल्स जावास्क्रिप्ट अधिक चांगली आहेबंद करण्यापूर्वी फक्त कनेक्ट करा शरीर टॅग(म्हणजे आधी), कारण हे वेब पृष्ठाच्या मुख्य सामग्रीच्या लोडिंग गतीमध्ये सुधारणा करेल.

DOCTYPE html > बेसिक बूटस्ट्रॅप टेम्प्लेट बटणावर क्लिक करा $(function() ( $("").popover()))

पायरी 3: वेब पृष्ठ जतन करा आणि बूटस्ट्रॅप घटक कार्यरत असल्याचे तपासा

Twitter Bootstrap 3 प्लॅटफॉर्म कनेक्ट केलेले एक वेब पृष्ठ तयार केल्यानंतर, ते html विस्तारासह (उदाहरणार्थ: "index.html") फाइलमध्ये जतन केले जाणे आवश्यक आहे. यानंतर, आपल्याला वेब ब्राउझरमध्ये तयार केलेले वेब पृष्ठ उघडण्याची आणि बूटस्ट्रॅप "पॉपओव्हर्स" घटकाचे ऑपरेशन तपासण्याची आवश्यकता आहे.

टीप: मजकूर संपादकामध्ये वेब पृष्ठ फाइल जतन करताना, त्याच्या विस्ताराकडे लक्ष द्या, जो "html" असावा. काही पासून मजकूर संपादक, जसे की नोटपॅड, "txt" विस्तारासह फायली स्वयंचलितपणे सेव्ह करा.

प्रकल्पाची फाइल संरचना, जी Twitter Bootstrap 3 प्लॅटफॉर्मवर आधारित आहे:

बूटस्ट्रॅप "पॉपओव्हर्स" घटकाचे प्रात्यक्षिक:

बटणावर क्लिक करा

लेखाचा दुसरा भाग आधीच अधिक सोप्या पद्धतीने समजला जातो, स्क्रीनशॉटसह आणखी उदाहरणे आहेत.

बूटस्ट्रॅप - ते काय आहे?

चला तर मग एका महत्त्वाच्या प्रश्नापासून सुरुवात करूया. बूटस्ट्रॅप एक CSS आणि JS फ्रेमवर्क आहे, मूलत: तयार लिखित कोड असलेल्या फाइल्सचा संच. जवळजवळ कोणत्याही फ्रेमवर्कच्या विकासकांचे ध्येय स्वतःसाठी आणि टूलमध्ये प्रवेश असलेल्या इतरांसाठी वेबसाइट विकास सुलभ करणे आहे. बूटस्ट्रॅपच्या बाबतीत, ते पूर्णपणे विनामूल्य आहे, त्यामुळे तुम्ही ते कोणत्याही प्रकारे वापरू शकता, संपादित करू शकता स्रोत कोडआणि तुमच्या इच्छेनुसार फ्रेमवर्क पुन्हा तयार करा. खूप छान आहे.

बूटस्ट्रॅप स्थापित करत आहे

जर तुम्हाला फ्रेमवर्क फाइल्स HTML डॉक्युमेंटशी जोडायची असल्यास (उदाहरणार्थ, सरावासाठी), फक्त अधिकृत वेबसाइट getbootstrap.com वरून फ्रेमवर्क डाउनलोड करा, त्याच्या फाइल्स प्रोजेक्टमध्ये कॉपी करा आणि तुम्हाला आवश्यक असलेल्या कनेक्ट करा. मी करेन संक्षिप्त विहंगावलोकनया फाइल्स:

bootstrap.css आणि bootstrap.min.css - फ्रेमवर्कच्या CSS कोडच्या असंपीडित आणि संकुचित आवृत्त्या. कार्यरत प्रकल्पाशी कनेक्ट करण्याची शिफारस केली जाते संकुचित फाइल, अशा प्रकारे तुम्ही तुमची डाउनलोड गती किंचित सुधाराल. परंतु जर तुम्ही फाइलमधील कोड पाहण्याची योजना आखत असाल तर, असंपीडित आवृत्ती कनेक्ट करा.

bootstrap.js आणि bootstrap.min.js - स्क्रिप्टसह फाइल

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

या मानक संचफ्रेमवर्क खरं तर, आपण ते सहजपणे सानुकूलित करू शकता आणि आपल्या अनुरूप बदलू शकता. उदाहरणार्थ, स्क्रिप्ट अजिबात वापरू नका किंवा फक्त एक ग्रिड कनेक्ट करू नका. सर्वसाधारणपणे, आम्ही याबद्दल देखील बोलू.

रशियन बूटस्ट्रॅप दस्तऐवजीकरण

तुम्ही getbootstrap ला भेट देता तेव्हा, तुमच्या लक्षात आले असेल की येथे सर्व काही इंग्रजीत आहे. आम्ही फ्रेमवर्कवर रशियन मदत वापरू शकतो. शोधणे सोपे आहे. हे करण्यासाठी, येथून जा मुख्यपृष्ठप्रारंभ करणे विभागात. अगदी तळाशी स्क्रोल करा, भाषांतरांची लिंक असेल. तेथे रशियन शोधा आणि त्यावर क्लिक करा. तेच आहे, आता आपण साइटच्या रशियन आवृत्तीवर आहात. खरे आहे, येथे सर्व काही भाषांतरित केले गेले नाही, परंतु कुठेतरी सुमारे 70-80% अचूक आहे, त्यामुळे तुम्हाला सर्वकाही समजेल.

बूटस्ट्रॅप ग्रिड

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

हे वर्ग काय आहेत? चला कागदपत्रांकडे जाऊया, ते आम्हाला खूप मदत करेल. CSS - ग्रिड सिस्टम विभागात जा. ग्रिडसह कार्य करण्याचे सामान्य नियम सोपे आहेत; मी आता त्यांची यादी करेन.

ग्रिडसह कसे कार्य करावे?

html सारणी म्हणून याचा विचार करा. जर तुम्ही टेबलसाठी HTML कोड लिहिला असेल, तर तुम्हाला माहिती असेल की सर्व सामग्री टेबल टॅगमध्ये ठेवली आहे, एक पंक्ती tr टॅगमध्ये ठेवली आहे आणि नंतर सेल त्यात ठेवल्या आहेत - td .

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

जर आपण कंटेनर-फ्लुइड क्लास सेट केला तर जाळी पूर्णपणे रबर असेल, म्हणजेच आकाराचे कोणतेही निर्बंध नसतील. उदाहरणार्थ, एखाद्या व्यक्तीने 1920 पिक्सेल रुंद मॉनिटरवर वेबसाइट उघडल्यास, त्याला ती पूर्ण रुंदीमध्ये दिसेल.

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

छान, कंटेनर ब्लॉकमध्ये ग्रिडची एक पंक्ती असावी. आपल्याला त्यात एका ओळीवर असलेले सर्व ब्लॉक्स ठेवण्याची आवश्यकता आहे. म्हणजेच, जर आपण सर्वात सामान्य टेम्पलेट घेतले: शीर्षलेख, मुख्य भाग, उजवा स्तंभ आणि तळटीप, तर तेथे 3 स्तंभ आहेत. पहिल्यामध्ये फक्त शीर्षलेख असेल, दुसऱ्यामध्ये सामग्री आणि साइडबार असेल आणि शेवटच्यामध्ये तळटीप असेल. अशा साइटसाठी मार्कअप असे काहीतरी असेल:

टोपी
सामग्री... आणि साइडबार
तळटीप

पण सध्या हा चुकीचा मार्कअप आहे, कारण तो गहाळ आहे... काय? ते बरोबर आहे, पेशी! बूटस्ट्रॅपच्या बाबतीत, त्यांना स्तंभ देखील म्हणतात. बूटस्ट्रॅप ग्रिडमध्ये 12 स्तंभ असतात. हे कोणत्याही रुंदीच्या कोणत्याही ब्लॉकमध्ये, किमान 1200 पिक्सेल, किमान 100 मध्ये एम्बेड केले जाऊ शकते. हे सर्व कारण स्तंभांची रुंदी पिक्सेलमध्ये नाही तर टक्केवारीमध्ये निर्दिष्ट केली जाते.

ही 12-स्तंभ प्रणाली कशी कार्य करते?

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

हे करण्यासाठी, फक्त खाली दस्तऐवजीकरण स्क्रोल करा, तेथे तुम्हाला एक सारणी मिळेल ज्यामध्ये महत्त्वाचे ग्रिड गुणधर्म आहेत.

तसे, कॉलम स्वतः बूटस्ट्रॅपमध्ये कॉल-क्लाससह चिन्हांकित केले जातात, परंतु हा एक संमिश्र वर्ग आहे, म्हणून ते कधीही कॉल- लिहित नाहीत. बूटस्ट्रॅपमध्ये 4 विशेष वर्ग आहेत जे ब्लॉक आकार नियंत्रित करण्यासाठी डिझाइन केलेले आहेत भिन्न रुंदी, ते येथे आहेत:

ld - मोठ्या स्क्रीनसाठी, 1200 पेक्षा जास्त पिक्सेल रुंद (डेस्कटॉप संगणक);

md - मध्यम स्क्रीनसाठी, रुंदी 992 ते 1199 पर्यंत (संगणक, नेटबुक);

sm - लहान स्क्रीनसाठी, रुंदी 768 ते 991 पिक्सेल (टॅब्लेट);

xs - अतिरिक्त-लहान स्क्रीन, रुंदी 768px पेक्षा कमी.

हे 4 वर्ग आहेत, परंतु घटकांचा आकार नियंत्रित करण्यासाठी, 1 ते 12 पर्यंतची संख्या वापरली जाते, कारण, तुम्हाला आठवत असेल, ग्रिडमध्ये नेमके 12 स्तंभ आहेत.

टोपी

सामग्री
बाजूचा स्तंभ

तळटीप

हे समजण्यास अगदी सोपे आहे. सर्व प्रथम, आम्ही हेडर तयार करतो; ते ग्रिडमध्ये ठेवण्याची गरज नाही, कारण ते कोणत्याही परिस्थितीत 100% रुंदी व्यापेल (सामान्यतः). पण आम्ही ते कसेही टाकू. हा वर्ग col-md-12 काय आहे? मी तुम्हाला आधीच सांगितल्याप्रमाणे, कोणीही फक्त col- लिहित नाही, या वर्गासह आम्ही ब्राउझरला मूलत: सांगतो:
हा सेल आहे | स्तंभ
मध्यम उपकरणांवर (md वर्ग), त्याची रुंदी 12 पैकी 12 स्तंभ असावी, म्हणजेच पंक्तीच्या रुंदीच्या 100%.
पण इतर उपकरणांवरील रुंदीचे काय? मोठ्या (lg) स्क्रीनवर ते 100% देखील असेल, कारण मोठ्या स्क्रीनसाठी मूल्ये वारशाने मिळतात, परंतु लहान स्क्रीनसाठी ती नाहीत. हे सोपे आहे: जर तुम्ही col-xs-4 लिहिले असेल, तर सर्व उपकरणांवर स्तंभाची रुंदी 33% असेल आणि जर col-lg-4 असेल तर फक्त मोठ्या उपकरणांवर. हे वैशिष्ट्य आहे, ते लक्षात ठेवा.

बरं, रुंदीचे मूल्य लहान स्क्रीनवर सेव्ह केले नाही तर काय होईल? ते रीसेट होते. ते कसे घडते ते येथे आहे:
col-sm-4 - छोट्या पडद्यावर ब्लॉक 33% रुंदी व्यापेल, md आणि lg स्क्रीनवर समान असेल, परंतु xs वर, म्हणजे, सर्वात लहान, रुंदी 100% वर रीसेट केली जाईल. म्हणून, आणखी एक सोपा नियम लक्षात ठेवा: जर लहान स्क्रीनसाठी काहीही निर्दिष्ट केलेले नसेल, तर त्यांच्यावर ब्लॉक 100% रुंदीवर प्रदर्शित केला जाईल.

सामग्री
बाजूचा स्तंभ

मूलत: आम्ही ब्राउझरला सांगत आहोत:
सामग्री ब्लॉक 12 पैकी 8 स्तंभ रुंद असू द्या आणि ही परिस्थिती लहान, मध्यम आणि मोठ्या स्क्रीनवर असेल (हे लहान, मोठ्या स्क्रीनसाठी निर्दिष्ट करणे पुरेसे आहे, जसे तुम्हाला आठवते, मूल्य वारशाने मिळते). परंतु सर्वात लहान स्क्रीनवर ब्लॉक 100% व्यापला जाईल. हे बरोबर आहे, सहसा, मोबाइल डिव्हाइसवर, साइट 1 स्तंभात दिसतात.
साइड कॉलम समान लहान, मध्यम आणि मोठ्या स्क्रीनवर पंक्तीच्या रुंदीच्या एक तृतीयांश असू द्या, बरं, सर्वात लहान स्क्रीनवर, जसे की तुम्हाला आधीच समजले आहे, त्याची रुंदी देखील 100% वर रीसेट केली आहे. हे इतके सोपे आहे.

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

बूटस्ट्रॅप नेस्टेड ग्रिड

वस्तुस्थिती अशी आहे की आता आम्ही टेम्पलेट फक्त मुख्य ब्लॉक्समध्ये विभागले आहे, परंतु आत ते स्तंभांमध्ये देखील विभागले जाऊ शकतात. उदाहरणार्थ, सामग्री अनेक स्तंभांमध्ये उत्पादने प्रदर्शित करू शकते. मी काय करावे? हे अगदी सोपे आहे - आम्ही आत अगदी समान ग्रिड तयार करतो. हे नेस्टेड केले जाईल, परंतु त्यात 12 स्तंभ देखील असतील. जर आपण हे सर्व सारांशित केले तर हा निष्कर्ष आहे:
कोणत्याही ब्लॉकमध्ये अमर्यादित ग्रिड असू शकतात. उदाहरणार्थ, उत्पादनांसह ब्लॉकमध्ये उत्पादने विभक्त करण्यासाठी एक ग्रिड आहे, आपण दुसर्या ग्रिड तयार करू शकता, उदाहरणार्थ, किंमती, उपलब्धता माहिती आणि अतिरिक्त माहिती. माहिती

आता आम्ही 3 कॉलममध्ये उत्पादनांची व्यवस्था करण्यासाठी सामग्री ब्लॉकमध्ये आणखी एक ग्रिड बनवण्याचा प्रयत्न करू. तर, आपण ज्या ब्लॉकमध्ये सामग्री आहे तो घेऊ:

सामग्री

आणि आम्ही त्यात लिहितो:

उत्पादन कॅटलॉग:


उत्पादनाचे नाव

उत्पादन वर्णन

जसे आपण पाहू शकता, आम्ही सामग्रीमध्ये एक नवीन ग्रिड तयार केला आहे - आम्ही आत एक पंक्ती ठेवतो आणि पंक्तीमध्ये उत्पादनांसह आधीच 3 ब्लॉक्स असतील. फक्त उत्पादन कार्डसह col-sm-4 ब्लॉक कॉपी करा आणि आणखी 2 वेळा पेस्ट करा, तुम्हाला हे मिळेल (तुम्ही कोणतेही उत्पादन चित्र घेऊ शकता, मी एक मोठा फोटो काढला आहे):

माझा आणखी एक महत्त्वाचा मुद्दा चुकला: प्रतिमा ज्या ब्लॉकमध्ये आहेत त्यांच्याशी जुळवून घेण्यासाठी, त्या प्रत्येकाला img-प्रतिसाद वर्ग देणे आवश्यक आहे. जर तुम्हाला, माझ्यासारखे, असे करणे गैरसोयीचे आहे असे वाटत असेल, तर फक्त तुमच्या स्वतःच्या शैलीत लिहा.

Img( कमाल-रुंदी: 100%; उंची: ऑटो; डिस्प्ले: ब्लॉक;)

बस्स, हा कोड सेव्ह करा आणि तुमची सीएसएस फाइल प्रोजेक्टशी कनेक्ट करा. आता प्रतिमा डीफॉल्टनुसार अनुकूल असतील.

बरं, ते अगदी सहजतेने चालू झाले का? होय, परंतु बूटस्ट्रॅपशिवाय तुम्हाला जास्त काळ त्रास सहन करावा लागेल. फक्त एक गोष्ट अशी आहे की कोणत्याही ब्लॉकमध्ये ग्रिड तयार करताना, तुम्हाला यापुढे कंटेनर क्लाससह ब्लॉक तयार करण्याची आवश्यकता नाही. हे आवश्यक का नाही? होय, कारण ज्या ब्लॉकमध्ये ग्रिड तयार केला आहे तो कंटेनर म्हणून काम करतो.

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

प्रतिसाद देणारी उपयुक्तता

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

तेथे बरेच अनुप्रयोग पर्याय आहेत, परंतु मी तुम्हाला सर्वात महत्वाच्या गोष्टीबद्दल सांगितले नाही: या उपयुक्तता कशा वापरायच्या? हे करण्यासाठी, फक्त वर्ग जोडा इच्छित ब्लॉक. तुम्हाला ते लपवायचे असल्यास, फक्त खालील वर्ग निर्दिष्ट करा:

तळटीप

या प्रकरणात hidden-xs वर्ग काय करेल? हे अतिरिक्त लहान उपकरणांवर तळटीप लपवेल. इतर सर्वांवर ब्लॉक दृश्यमान असेल.

त्याउलट, तुम्हाला ते फक्त सर्वात लहान स्क्रीनवर दाखवायचे असल्यास, तुम्हाला दृश्यमान-xs-ब्लॉक वर्ग वापरण्याची आवश्यकता आहे. या प्रकरणात, ब्लॉक सर्वात अरुंद पडद्याशिवाय सर्वांवर लपविला जाईल. तर, अनुकूली उपयोगिता वर्ग असे लिहिले आहेत:

लपलेले किंवा दृश्यमान शब्द, तुम्हाला काय हवे आहे यावर अवलंबून

xs, sm, md, किंवा lg चे संक्षिप्त रूप जे कोणत्या स्क्रीनवर ब्लॉक लपवायचे किंवा दाखवायचे हे दर्शवते.

दृश्यमान होण्यासाठी तुम्हाला तीनपैकी एक मूल्य देखील जोडणे आवश्यक आहे: ब्लॉक - ब्लॉक घटक म्हणून, इनलाइन-ब्लॉक - इनलाइन-ब्लॉक घटक म्हणून, इनलाइन - इनलाइन म्हणून प्रदर्शित करा.

बरं, हे स्पष्ट करण्यासाठी काही उदाहरणे:

hidden-xs hidden-lg - सर्वात लहान आणि सर्वात मोठ्या स्क्रीनवर घटक लपवेल. तुम्ही बघू शकता, तुम्ही स्पेसने विभक्त केलेले अनेक वर्ग निर्दिष्ट करू शकता.

visible-xs-inline visible-md-block - लहान आणि मोठ्या स्क्रीनवर घटक अजिबात प्रदर्शित होणार नाही. अतिरिक्त-लहानांवर ते लोअरकेस असेल आणि मध्यमांवर ते ब्लॉक असेल.

दृश्यमान-एलजी-ब्लॉक - घटक फक्त सर्वात मोठ्या स्क्रीनवर दृश्यमान असेल, इतर सर्वांवर तो लपविला जाईल

हे सर्व कसे कार्य करते. अगदी तेच आहे आणि दुसरा मार्ग नाही. मला आशा आहे की तुम्हाला हे समजले असेल. चला ते आचरणात आणूया. आमच्याकडे एक चाचणी टेम्पलेट आहे, जरी ते अगदी आदिम आहे.

कार्य: लहान स्क्रीनवर साइड कॉलम अदृश्य करण्यासाठी आणि सर्वात लहान स्क्रीनवर एक उत्पादन देखील. आणि म्हणून xs डिव्हाइसेसवर उत्पादने आधीपासूनच 2 स्तंभांमध्ये आहेत, 3 नाही.

हे स्वतः करण्याचा प्रयत्न करा, फक्त html कोड संपादित करा. काय करावे लागेल? प्रथम, कॉलम पाहू या, तो sm स्क्रीनवर लपवण्यासाठी, तुम्हाला फक्त त्यात hidden-sm वर्ग जोडणे आवश्यक आहे.

छान, आता तिसऱ्या उत्पादनाला hidden-xs क्लास जोडणे आवश्यक आहे आणि ते सर्वात लहान स्क्रीनवर अदृश्य होईल. बरं, उर्वरित दोन वस्तूंचे वर्ग खालीलप्रमाणे असतील:

म्हणजेच, मध्यम उपकरणांवर ब्लॉक 12 पैकी 4 स्तंभ व्यापेल, जे रुंदीच्या 33.33% मध्ये अनुवादित केले जाऊ शकते आणि अतिरिक्त-लहान उपकरणांवर - 50%. आणि उत्पादनासह एक ब्लॉक या रुंदीवर अदृश्य होणार असल्याने, उत्पादनांसह दोन्ही ब्लॉक 1 पंक्तीमध्ये सुबकपणे मांडले जातील, जसे:


छान! हे समजून घेतल्यावर, तुम्ही तुमच्या आवडीच्या जवळपास कोणत्याही प्रकारे वेब पेजवरील ब्लॉक्सची हाताळणी करू शकता. स्वतःसाठी कार्ये शोधण्याचा प्रयत्न करा आणि त्यांची अंमलबजावणी करा.

मला सर्व मार्ग हलवा

पुढे मी आणखी 1 दाखवतो चांगले स्वागत आहे- ब्लॉक उजवीकडे किंवा डावीकडे हलवण्याची क्षमता. समजा आमच्याकडे सलग 3 उत्पादने नाहीत, परंतु 1. आणि ती संपूर्ण रुंदी व्यापत नाही. आणि तुमचे कार्य मध्यभागी संरेखित करणे आहे. आपण 12-स्तंभ प्रणालीसह कार्य करत आहात हे लक्षात ठेवल्यास हे करणे सोपे आहे.

उत्पादनासह एक ब्लॉक सोडूया:

ब्लॉकला मध्यभागी ठेवण्यासाठी तुम्हाला किती हलवावे लागेल हे समजून घेण्यासाठी साधी गणना करणे पुरेसे आहे. मध्यम आणि मोठ्या स्क्रीनवर 4 स्तंभ डावीकडे आणि लहान स्क्रीनवर 3 स्तंभ हलवावे लागतील. हे असे दिसते:

वर्ग col-md-offset-4 म्हणतो: मध्यम आणि मोठ्या स्क्रीनवर, पॅरेंट कंटेनरच्या रुंदीच्या 33% (1/3 डावा ऑफसेट, 1/3 ब्लॉक रुंदी, ⅓ उजवा ऑफसेट, 33% ने ब्लॉक ऑफसेट करा. परिणामी केंद्रीकरण).
वर्ग col-xs-offset-6: अतिरिक्त-लहान आणि लहान स्क्रीनवर, 25% ने डावीकडे सरकवा (¼ पॅडिंग डावीकडे, ½ ब्लॉक रुंदी, ¼ पॅडिंग उजवीकडे).

मला आशा आहे की तुम्हाला सारांश समजला असेल आणि आवश्यक असल्यास हे वर्ग वापरा.

बूटस्ट्रॅप घटक आणि त्यांच्या वापराची उदाहरणे

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

जलद फ्लोट्स आणि लपेटणे रद्द करणे

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

बूटस्ट्रॅप: क्षैतिज प्रतिसाद (मोबाइल) मेनू

आम्ही खालील घटक थेट टेम्पलेटमध्ये जोडू, म्हणून जर तुम्हाला कोडसह कार्य करायचे असेल आणि फक्त वाचायचे नसेल, तर माझ्या नंतरच्या सर्व चरणांचे अनुसरण करा.

खरं तर, बूटस्ट्रॅपसह हे फक्त न करणे खूप सोपे आहे प्रतिसाद मेनू, आणि तथाकथित मोबाइल एक, जो लहान स्क्रीनवर पूर्णपणे कमी केला जातो आणि एका बटणाखाली लपतो. हे तंत्र अनेकांमध्ये दिसून येते अनुकूली टेम्पलेट्सआणि प्रत्यक्षात अंमलबजावणी करणे खूप सोपे आहे. उदाहरण कोड मोबाइल मेनूदस्तऐवजीकरणात आहे, मी तेथून घेईन आणि थोडेसे पुन्हा करेन.

म्हणून, मी सर्वप्रथम हेडरसह ब्लॉक काढून टाकेन, कारण आमचा मेनू, खरं तर, माझ्या टेम्पलेटच्या बाबतीत हेडर असेल. मेनू कोड सर्व साइट सामग्रीच्या आधी ठेवला जाणे आवश्यक आहे, अगदी कंटेनर ब्लॉक करण्यापूर्वी. का? होय, आता तुम्ही स्वतःच पहाल की नेव्हिगेशन बारमध्ये ग्रिड आधीच तयार केलेला आहे. तर हा कोड आहे:

स्विच बटण




लोगो/नाव

• सायकलिंग


• मोटरस्पोर्ट्स


• 
  व्यायाम उपकरणे
  
  
  
  • ट्रेडमिल्स
  
  
  • लंबवर्तुळाकार प्रशिक्षक
  
  
  • बेंच
  
  
  
  

शोधा

कोड खूप आहे या वस्तुस्थितीमुळे घाबरू नका. साइट आता असे दिसते:


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

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


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

768 पिक्सेलपेक्षा कमी स्क्रीन रुंदी असलेल्या डिव्हाइसेसवर मेनू कसा दिसेल:


जसे आपण पाहू शकता, मेनू संकुचित झाला आहे. उजवीकडील बटणावर क्लिक केल्यावर ते उघडते वरचा कोपरा. स्क्रीनवर फक्त लोगो राहिला होता.

ड्रॉपडाउन मेनू

त्याच वेळी, वरील उदाहरणावरून आपण समजू शकता की बूटस्ट्रॅपमध्ये ड्रॉप-डाउन मेनू आयटम कसा तयार केला जातो; तपशीलवार विचार:

व्यायाम उपकरणे

• ट्रेडमिल्स


• लंबवर्तुळाकार प्रशिक्षक


• बेंच

तर, ड्रॉप-डाउन आयटमसाठी कंटेनर ड्रॉपडाउन वर्गासह एक नियमित सूची आयटम आहे. त्याच्या आत मुख्य दुवा आहे, ज्यावर क्लिक केल्यास ड्रॉप-डाउन मेनू उघडेल. त्यास डेटा विशेषता नियुक्त करणे खूप महत्वाचे आहे, जे आपण कोडमध्ये पहाल, काहीही कार्य करणार नाही. तुम्ही bootstrap.js फाईल वेब पेजेसशी जोडलेली आहे याची देखील खात्री करावी.

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

बूटस्ट्रॅप वापरून ब्रेडक्रंब (ब्रेडक्रंब) जोडणे

बर्याच स्टोअरमध्ये आपण तथाकथित ब्लॉक शोधू शकता ब्रेडचे तुकडे, ज्यामध्ये पूर्ण मार्ग आहे वर्तमान पृष्ठ. फ्रेमवर्क वापरून हे करणे देखील सोपे आहे, कोड पहा:

घर

कॅटलॉग

माल

खरं तर, क्रमांकित यादीसाठी ब्रेडक्रंब वर्ग निर्दिष्ट करणे आणि त्यामध्ये नेहमीच्या सूची आयटम प्रविष्ट करणे पुरेसे आहे. तसे, मी टेम्प्लेटमध्ये द्वितीय-स्तरीय शीर्षके मध्यभागी ठेवीन (हे css मध्ये लिहिणे आवश्यक आहे):

H2 (मजकूर-संरेखित: केंद्र;)

जर तुम्हाला ब्रेडक्रंबचे स्वरूप बदलायचे असेल, तर फक्त CSS मध्ये .breadcrumb सिलेक्टर वापरा. उदाहरणार्थ, तुम्ही पार्श्वभूमीचा रंग कसा काढू शकता:

ब्रेडक्रंब (पार्श्वभूमी: पारदर्शक;)

साइट आता असे दिसते:

बूटस्ट्रॅप सारण्या

डीफॉल्टनुसार, सारणी संपूर्ण खिडकीवर पसरेल, म्हणून परिमाण मर्यादित करण्यासाठी मर्यादित रुंदी असलेल्या बॉक्समध्ये गुंडाळा. डीफॉल्टनुसार ते भयंकर दिसते, परंतु आपण टेबल टॅगमध्ये टेबल क्लास जोडल्यास, सर्वकाही खूप छान होईल:

लक्षात घ्या की या आवृत्तीमध्ये, सेलमध्ये फक्त तळाशी स्पष्ट सीमा आहेत, जर तुम्हाला चारही बाजूंना सीमा हव्या असतील तर तुम्हाला दुसरा वर्ग जोडण्याची आवश्यकता आहे:

जर तुम्हाला टेबल स्ट्रीप करायचे असेल, म्हणजे पंक्तींना पर्यायी पार्श्वभूमी रंग असेल, तर टेबल-स्ट्रीप वर्ग जोडा. तुम्ही टेबलच्या पंक्तीवर फिरता तेव्हा वेगळा रंग हायलाइट करण्यासाठी, टेबल-होव्हर क्लास वापरा.

तत्वतः, हे सारण्यांच्या सर्व शक्यता आहेत. कसे करावे याबद्दल अनुकूली सारणी, मी आधीच एक स्वतंत्र लेख लिहिला आहे, म्हणून मी स्वतःची पुनरावृत्ती करणार नाही. फक्त एक गोष्ट अशी आहे की तुम्ही माहिती, यश, चेतावणी आणि इतर वर्ग जसे की टेबलच्या पंक्ती आणि सेलमध्ये त्यांना इच्छित रंगात रंगविण्यासाठी देखील जोडू शकता.

स्वाभाविकच, तुम्ही तुमचे स्वतःचे वर्ग style.css मध्ये सहज लिहू शकता आणि त्यांचा वापर करू शकता. येथे आम्ही टेबल्ससह समाप्त करतो.

P.S. लेख जोडला जाईल आणि पूरक असेल...

तळ ओळ

मला आशा आहे की लेख उपयुक्त होता आणि आपण सर्वात महत्वाच्या गोष्टी समजून घेण्यास सक्षम आहात. आपण टिप्पण्या वापरून कोणतेही प्रश्न विचारू शकता.

लेआउट डिझायनर्स आणि फ्रंट-एंड डेव्हलपर्सकडे कोडचे ब्लॉक्स असतात जे ते प्रत्येक प्रोजेक्टमध्ये वापरतात आणि त्यामुळे अनेकदा त्यांची स्वतःची फ्रेमवर्क तयार करण्याचा विचार करतात. परंतु सहसा ते विद्यमान वापरणे सुरू करतात, उदाहरणार्थ बूटस्ट्रॅप.

बूटस्ट्रॅप म्हणजे काय

हे HTML/CSS/JS तीन भाषांचे फ्रेमवर्क आहे. उत्कृष्ट कार्यक्षमतेबद्दल धन्यवाद, वेबसाइट डिझाइन करणे सोपे आणि द्रुत होते, अर्थातच, जर तुम्हाला सर्वकाही समजले असेल.

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

लेआउट गती- मोठ्या संख्येने तयार घटक सामान्यांवर न राहणे शक्य करतात.

अनुकूलता— संगणक आणि फोन दोन्हीसाठी डिव्हाइसच्या रुंदीनुसार वेबसाइट ब्लॉक्सचा आकार सानुकूलित करण्याची क्षमता.

लोकप्रियता- यामुळे मोठ्या संख्येने लेख आणि धडे तसेच मंच आहेत. म्हणून, आपल्याला शंका असलेल्या कोणत्याही क्षुल्लक गोष्टीसाठी, आपण इंटरनेटवर उत्तर शोधू शकता किंवा फोरमवर प्रश्न विचारू शकता.

यासह वेबसाइट तयार करण्यासाठी बूटस्ट्रॅपचा वापर केला जाऊ शकतो विविध CMS— वर्डप्रेस, जूमला, ओपनकार्ट.

बूटस्ट्रॅप कसे स्थापित करावे

ते कनेक्ट करण्याचे दोन मार्ग आहेत:

• फाइल्स डाउनलोड करून.

फॉर्म

आमच्याकडे डिझाइनसाठी शैली देखील आहेत:

• बटणे
• रेडिओ बटणे
• मजकूर फील्ड
• चेकबॉक्स

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

टेबल

असा साधा तक्ता तयार करण्यासाठी, तुम्हाला त्यात वर्ग = "टेबल" जोडणे आवश्यक आहे.

जेव्हा आम्ही टेबल कसे डिझाइन करायचे ते जवळून पाहतो, तेव्हा तुम्ही हे करू शकाल:

पर्यायी स्तंभ रंग

होवरवर स्तंभ हायलाइट करा

आणि विस्तारानुसार सानुकूलित टेबल देखील बनवा

बटणे

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

आणि येथे त्यांची रचना आहे.

बटण सामान्य उत्कृष्ट माहिती नोट अलार्म लिंक

JavaScript घटक

बूटस्ट्रॅपमध्ये अनेक ॲनिमेशन-संबंधित वैशिष्ट्ये आहेत:

• विंडो लहान करणे आणि मोठे करणे
• मॉडेल विंडोचे स्वरूप
• टूलटिप्स
• टॅब तयार करत आहे
• स्लाइडर

जेव्हा तुम्ही bootstrap.js फाइल कनेक्ट कराल तेव्हा हे सर्व तुमच्या हातात असेल

निष्कर्ष

आणि जर तुम्ही या टप्प्यावर पोहोचला असाल, तर तुम्हाला प्रश्न पडू शकतो: "तुम्हाला बूटस्ट्रॅपचे सर्व घटक माहित असणे आवश्यक आहे का?" हे सर्व आपल्या इच्छेवर अवलंबून असते; सहसा ते फक्त ग्रिड वापरतात, परंतु प्रत्येक लेआउट डिझाइनर सर्वकाही वापरण्यास सक्षम असावे. वैयक्तिकरित्या, मला ते सोपे, जलद, सोयीस्कर आवडते.

तुम्ही पटकन वेबसाइट तयार करण्यास तयार असाल तर पुढील धड्यावर जा.

डाउनलोड करण्यापूर्वी, तुमच्याकडे कोड एडिटर (आम्ही सबलाइम टेक्स्ट 3 ची शिफारस करतो) आणि HTML आणि CSS चे काही ज्ञान असल्याची खात्री करा. येथे आपण स्पर्श करणार नाही स्रोत फाइल्स, परंतु तुम्ही ते नेहमी डाउनलोड करू शकता आणि त्यांचा स्वतः अभ्यास करू शकता. आम्ही संकलित बूटस्ट्रॅप फाइल्ससह प्रारंभ करण्यावर आमचे लक्ष केंद्रित करू.

संकलित फायली लोड करत आहे

प्रारंभ करण्याचा सर्वात जलद मार्ग: आमच्या CSS, JS आणि प्रतिमांच्या संकलित आणि लहान आवृत्त्या मिळवा. कोणतीही कागदपत्रे किंवा स्त्रोत फाइल्स नाहीत.

2. फाइल संरचना

डाउनलोड केलेल्या फाइल्समध्ये तुम्हाला खालील रचना आणि सामग्री आढळेल, सामान्य गुणधर्मांनुसार तार्किकदृष्ट्या गटबद्ध केलेली आणि लहान आणि संकलित दोन्ही आवृत्त्या आहेत.

डाउनलोड केल्यानंतर, अनझिप करा संकुचित फोल्डर(संकलित) बूटस्ट्रॅपची रचना पाहण्यासाठी. हे असे काहीतरी असावे:

bootstrap / +--- css / ¦ +-- बूटस्ट्रॅप. css ¦ +--- बूटस्ट्रॅप. मि css +-- js / ¦ +-- बूटस्ट्रॅप. js ¦ +--- बूटस्ट्रॅप. मि js +--- img / ¦ +--- ग्लाइफिकॉन - हाफलिंग्स . png ¦ +--- ग्लाइफिकॉन - हाफलिंग्स - पांढरा . png L-- README . md

हे बूटस्ट्रॅपचे मूळ स्वरूप आहे: जलद आणि संकलित फायली वापरण्यास सोपेजवळजवळ कोणत्याही वेब प्रकल्पात. आम्ही तुम्हाला संकलित CSS आणि JS (bootstrap.) प्रदान करतो, तसेच संकलित आणि मिनिफाइड CSS आणि JS (bootstrap.min). इमेजऑप्टिम वापरून इमेज फाइल्स कॉम्प्रेस केल्या जातात, मॅक ॲप्स PNG मध्ये प्रतिमा संकुचित करण्यासाठी.

कृपया लक्षात घ्या की सर्व JavaScript प्लगइनना jQuery आवश्यक आहे.

3. काय समाविष्ट आहे

बूटस्ट्रॅप सर्व प्रकारच्या कामांसाठी HTML, CSS आणि JS सह सुसज्ज आहे, ते सर्व श्रेणींमध्ये सूचीबद्ध आहेत जे आपण पृष्ठाच्या शीर्षस्थानी शोधू शकता.

दस्तऐवज विभाग समर्थित घटक

प्रकार आणि पार्श्वभूमी रीसेट करण्यासाठी सामान्य शरीर शैली, लिंक शैली, टेम्पलेट ग्रिड आणि दोन साधे मार्कअप घटक.

CSS शैली

सामान्य HTML घटकांसाठी शैली: डिझाइन, कोड, सारण्या, फॉर्म आणि बटणे. ग्लायफिकॉन, एक उत्कृष्ट आयकॉन सेट देखील समाविष्ट आहे.

घटक

साध्या इंटरफेस घटकांसाठी मूलभूत शैली: टॅब आणि बटणे, नेव्हिगेशन बार, संदेश, पृष्ठ शीर्षलेख इ.

Javascript प्लगइन

घटकांप्रमाणे, हे Javascript प्लगइन टूलटिप, माहिती ब्लॉक्स, मॉडेल घटक आणि अधिकसाठी परस्परसंवादी घटक आहेत.

घटकांची यादी

सर्व एकत्र, Javascript घटक आणि प्लगइन असतात खालील घटकइंटरफेस:

• बटण गट
• बटणांच्या ड्रॉपडाउन सूची
• नेव्हिगेशन टॅब, बटणे आणि सूची
• नेव्हिगेशन बार
• शॉर्टकट
• बॅज
• पृष्ठ शीर्षलेख आणि नायक घटक
• लघुचित्रे
• संदेश
• प्रक्रिया निर्देशक
• मॉडेल घटक
• ड्रॉपडाउन सूची
• टूलटिप्स
• माहिती अवरोध
• घटक "एकॉर्डियन"
• कॅरोसेल घटक
• कीबोर्ड इनपुट पुढे

4. मूलभूत HTML टेम्पलेट

थोड्या परिचयानंतर, आम्ही बूटस्ट्रॅप वापरण्यावर लक्ष केंद्रित करू. हे करण्यासाठी, आम्ही एक मूलभूत HTML टेम्पलेट वापरू ज्यामध्ये सूचीबद्ध केलेले सर्व घटक समाविष्ट आहेत.

हे असे दिसते ठराविक फाइल HTML:

बूटस्ट्रॅप 101 टेम्पलेट

हॅलो वर्ल्ड!

यासारखे बूटस्ट्रॅप टेम्पलेट बनवण्यासाठी, फक्त योग्य CSS आणि JS फाइल्स संलग्न करा:

बूटस्ट्रॅप 101 टेम्पलेट

हॅलो वर्ल्ड!

आणि सर्वकाही सेट आहे!

वर