एक सुंदर काळा आणि पांढरा डायल मुद्रित करा. भिंत घड्याळ. फोटोशॉपमध्ये घड्याळ काढणे

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

निश्चित रुंदीसह कंटेनर (कंटेनर).

नावावरून हे स्पष्ट आहे की कंटेनरमध्ये दिलेली रुंदी आहे, ज्यामध्ये बदल कार्यरत ब्राउझर विंडोमध्ये बदल झाल्यामुळे होतात.

वापरून मध्यभागी संरेखन होते css गुणधर्म: .कंटेनर (   समास-डावीकडे: स्वयं;   समास-उजवीकडे: स्वयं; ) कंटेनरमध्ये आहे पॅडिंग: .कंटेनर (   पॅडिंग-डावीकडे: 15px;   पॅडिंग-उजवीकडे: 15px; )

खालील सारणी कंटेनरची रुंदी दर्शवते, जी वापरकर्त्याच्या वेब क्लायंट विंडोच्या रुंदीवर अवलंबून असते:

रबर रुंदीसह कंटेनर. स्थिर कंटेनरच्या विपरीत, कंटेनर-द्रवपदार्थाची रुंदी नसते आणि ती फक्त एकच असते css वर्ग: .कंटेनर (   पॅडिंग-डावीकडे: 15px;   पॅडिंग-उजवीकडे: 15px; )

कंटेनरच्या आत एक पंक्ती.

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

पंक्ती (  समास-डावीकडे: -15px;   समास-उजवीकडे: -15px; ) परिणामी, आमचे बांधकाम आधीच असे दिसते (उदाहरणार्थ, मी एक निश्चित रुंदी घेईन):

Twitter बूटस्ट्रॅपमध्ये ब्लॉक्स वापरणे. मी आधी लिहिल्याप्रमाणे, css class row चा वापर रो तयार करण्यासाठी केला जातो. आणि याच पंक्तींमध्ये तुम्हाला ब्लॉक्स ठेवण्याची आवश्यकता आहे:

साइटची सामग्री ब्लॉकमध्ये ठेवली आहे. आपण दुसरी पंक्ती देखील ठेवू शकता. एका पंक्तीमध्ये 12 ब्लॉक्स असतात.

ब्लॉकची रुंदी आवश्यक संख्येच्या स्तंभांचा वापर करून सापेक्ष स्वरूपात निर्दिष्ट केली जाते. सुरुवातीची रुंदी - 1 - एका बूटस्ट्रॅप स्तंभाशी संबंधित आहे, कमाल रुंदी - 12 - जास्तीत जास्त प्रमाणएका ओळीत स्तंभ.

उदाहरणार्थ: जर आपल्याला एका ओळीत समान रुंदीचे 4 ब्लॉक्स हवे असतील, तर आपल्याला रुंदी 3 वर सेट करावी लागेल (div class = "col-*-3" > ... div >). एकूण १२ (३+३+३+३) आहे.

गॅझेटसाठी अनुकूली मांडणी

मी पूर्वी लिहिले आहे की Twitter Bootstrap 3 त्याच्या ग्रिडसाठी प्रसिद्ध आहे जे विविध वापरकर्ता उपकरणांसाठी योग्य आहे, मग तो फोन असो, टॅबलेट असो किंवा तुमच्या घर/कामाच्या संगणकासाठी मॉनिटर). आणि हे पूर्णपणे समजून घेण्याची वेळ आली आहे.

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

• – col-xs-* – लहान स्क्रीनसह ग्रिड तयार करण्यासाठी वापरला जातो. टेलिफोन या व्याख्येत बसतात;
• – col-sm-* – किंचित उपकरणांसाठी जास्त रुंदीफोनपेक्षा स्क्रीन, जसे की टॅब्लेट;
• – col-md-* – मध्यम स्क्रीन आकार, उदा. नेटबुक;
• – col-lg-* – मोठ्या स्क्रीनसाठी. तुमचा विश्वास असेल तर Yandex.metrics, नंतर चालू या क्षणीवापरकर्त्यांची संख्या तंतोतंत या स्क्रीनखालील साइटवर आहे. परंतु हे सूचक साइटच्या विषयावर बरेच अवलंबून असते.

खालील तक्त्या या वर्गांशी संबंधित डेटा प्रदान करतात: Twitter बूटस्ट्रॅप 3 Twitter ग्रिड प्रणालीचे लहान स्क्रीन दृश्य
स्मार्टफोन
(लहान स्क्रीन
गोळ्या
(≥768px आणि मध्य स्क्रीन
लॅपटॉप
(≥992px आणि मोठी स्क्रीन
संगणक
(≥1200px)

निश्चित मांडणी (वर्ग = "कंटेनर" )	100% वेब क्लायंट रुंदी फिट	750px	970px	1170px
रबर लेआउट (वर्ग = "कंटेनर-द्रव" )	वेब क्लायंट स्क्रीनच्या रुंदीच्या १००% फिट
वर्ग उपसर्ग	class="col-xs-*"	class="col-sm-*"	class="col-md-*"	class="col-lg-*"
साठी बूटस्ट्रॅप कमाल स्तंभ रुंदी निश्चित मांडणी(वर्ग="कंटेनर")		62px (750px / 12)	81px (970px / 12)	97px (1170px / 12)
साठी कमाल स्तंभ रुंदी रबर मॉकअप(वर्ग="कंटेनर-द्रव")	वेब क्लायंटची रुंदी 12 ने भागली आहे
पॅडिंग	कडाभोवती 15px

पण इथे सावध रहा! उदाहरणार्थ, जर तुम्ही वर्ग ="col-sm-*" वापरत असाल, तर ते केवळ टॅब्लेटवरच लागू होणार नाही तर नेटबुक आणिमोठे पडदे

, परंतु तुम्ही "col-md-*" आणि "col-lg-*" निर्दिष्ट केले नसेल तरच हे कार्य करते. त्या. तुमच्या पंक्तीमध्ये सर्व स्क्रीनसाठी एक ब्लॉक असेल, तर div class ="col-xs-12" > ... div > लिहिणे पुरेसे आहे, div class ="col-xs-12 col-sm-12 नाही. col-md -12 col-lg-12" > ... div >.

Twitter Bootstrap 3 वर अनुकूली मांडणीचे उदाहरण

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

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

, नंतर तुम्हाला डिझायनरला आगाऊ सांगणे आवश्यक आहे की लेआउट Twitter Bootstrap 3 फ्रेमवर्क अंतर्गत केले जाईल, कारण डिझायनर ग्रिडच्या अनुषंगाने घटकांचे त्वरित चित्रण करेल.

जेव्हा ब्राउझर विंडोचे सक्रिय क्षेत्र (रुंदी) 1200px पेक्षा जास्त असेल तेव्हा लेआउटवर लागू केलेल्या शैली लागू केल्या जातील. चित्रावरून आपण पाहू शकता की कंटेनर पंक्तीची संपूर्ण जागा व्यापतात आणि त्यास तीन समान भागांमध्ये विभाजित करतात. असे दिसून आले की 12 ब्लॉक्सना 3 कंटेनरमध्ये विभागणे आवश्यक आहे (ते सर्व समान असल्याने), आम्हाला समजले की अशा एका कंटेनरमध्ये 4 ब्लॉक्स आहेत.

मोठ्या स्क्रीन रुंदीसाठी तळ ओळ:

कंटेनर क्रमांक १

  

कंटेनर क्रमांक 2

  

कंटेनर क्र. 3

  स्क्रीनची सरासरी रुंदी

जेव्हा ब्राउझर विंडोचे सक्रिय क्षेत्र (रुंदी) 992px पेक्षा मोठे किंवा 1200px पेक्षा कमी असेल तेव्हा लेआउटवर लागू केलेल्या शैली ट्रिगर केल्या जातील. दोन कंटेनर क्षैतिजरित्या स्थित आहेत आणि 100% रुंदी व्यापतात (प्रत्येक कंटेनर 6 ब्लॉक घेतात), आणि एक नवीन ओळआणि 100% रुंदी देखील व्यापते (कंटेनर क्रमांक 12 12 ब्लॉक व्यापतो). ब्राउझरला स्पष्टपणे समजावून सांगण्यासाठी कंटेनर इतर कंटेनरभोवती गुंडाळल्याशिवाय ठेवला जाणे आवश्यक आहे, twitter bootstrap css class class="clearfix" प्रदान करते. पण, आणखी एक मुद्दा, कारण... हा वर्ग या प्रकारच्या स्क्रीनवर लागू झाला पाहिजे - तुम्हाला दुसरा वर्ग जोडण्याची आवश्यकता आहे - class="visible-md-block" (md हे स्क्रीनचे नाव आहे, ब्लॉकच्या वर्गांसारखेच).

सरासरी स्क्रीन रुंदीचा परिणाम (सावधगिरी बाळगा, मी आधीच लिहिलेल्या कोडमध्ये नवीन वर्ग आणि घटक जोडेन):

कंटेनर क्रमांक १

  

कंटेनर क्रमांक 2

     

कंटेनर क्र. 3

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

कंटेनर क्रमांक १

     

कंटेनर क्रमांक 2

     

कंटेनर क्र. 3

 

“क्रंब-स्क्रीन” साठी तुम्ही css class class="col-xs-12" वगळू शकता, कारण ते स्क्रीनच्या रुंदीच्या 100% आपोआप घेते आणि अनावश्यक वर्णांसह कोड गोंधळू नये म्हणून, तुम्ही ते काढू शकता.

या टेम्पलेटसाठी अंतिम कोड असे दिसेल:

कंटेनर क्रमांक १

     

कंटेनर क्रमांक 2

     

कंटेनर क्र. 3

  वेगवेगळ्या स्क्रीनवर वेगवेगळे घटक पूर्वी, मी "visible-md-block" हा वर्ग वापरत असे - जो मध्यम स्क्रीनवर प्रदर्शित होतो. "दृश्यमान" वर्गाबद्दल अधिक तपशील: वर्गाचे नाव वर्णन

class="visible-xs-*"	हा वर्ग "लहान स्क्रीन" ला दृश्यमानता जोडतो ज्याची रुंदी 768px पेक्षा कमी आहे. स्क्रीन मोठी असल्यास, घटक दृश्यमान होणार नाही.
class="visible-sm-*"	हा वर्ग केवळ त्या गॅझेटवर दृश्यमानता जोडतो ज्यांची स्क्रीन रुंदी 768px (म्हणजे ≥768px) पेक्षा जास्त किंवा बरोबर आहे परंतु 992px पेक्षा कमी आहे. जर स्क्रीन ही वैशिष्ट्ये पूर्ण करत नसेल, तर घटक प्रदर्शित केला जाणार नाही.
class="visible-md-*"	हा वर्ग केवळ त्या गॅझेटवर दृश्यमानता जोडतो ज्यांची स्क्रीन रुंदी 992px (म्हणजे ≥992px) पेक्षा जास्त किंवा 1200px पेक्षा कमी आहे. जर स्क्रीन ही वैशिष्ट्ये पूर्ण करत नसेल, तर घटक प्रदर्शित केला जाणार नाही.
class="visible-lg-*"	हा वर्ग केवळ 1200px (म्हणजे ≥1200px) पेक्षा जास्त किंवा त्यापेक्षा जास्त स्क्रीन रुंदी असलेल्या गॅझेटवर दृश्यमानता जोडतो. जर स्क्रीन ही वैशिष्ट्ये पूर्ण करत नसेल, तर घटक प्रदर्शित केला जाणार नाही.
class="दृश्यमान-*-इनलाइन"	प्रदर्शन: इनलाइन
class="दृश्यमान-*-ब्लॉक"	लेआउटच्या काही भागाला CSS प्रॉपर्टी डिस्प्ले मिळते :block
class="दृश्यमान-*-इनलाइन-ब्लॉक"	लेआउटच्या काही भागाला CSS प्रॉपर्टी डिस्प्ले मिळते: इनलाइन-ब्लॉक

घटक लपविण्यासाठी ="hidden" हा वर्ग वापरला जातो.

वर्गाचे नाव वर्णन

class="hidden-xs"	हा वर्ग केवळ 768px पेक्षा कमी स्क्रीन रुंदी असलेल्या गॅझेटवर घटकामध्ये स्टिल्थ जोडतो. इतर स्क्रीनवर, लेआउटचे भाग दृश्यमान असतील.
class="hidden-sm"	हा वर्ग 768px (म्हणजे ≥768px) पेक्षा जास्त किंवा 992px पेक्षा कमी स्क्रीन रुंदी असलेल्या गॅझेटवरच एका घटकामध्ये स्टिल्थ जोडतो. इतर स्क्रीनवर, लेआउटचे भाग दृश्यमान असतील.
class="hidden-md"	हा वर्ग 992px (म्हणजे ≥992px) पेक्षा जास्त किंवा 1200px पेक्षा कमी स्क्रीन रुंदी असलेल्या गॅझेटवरच एका घटकामध्ये स्टिल्थ जोडतो. इतर स्क्रीनवर, लेआउटचे भाग दृश्यमान असतील.
class="hidden-lg"	हा वर्ग केवळ 1200px (म्हणजे ≥1200px) पेक्षा जास्त किंवा त्यापेक्षा जास्त स्क्रीन रुंदी असलेल्या गॅझेटवर घटकामध्ये स्टिल्थ जोडतो. इतर स्क्रीनवर, लेआउटचे भाग दृश्यमान असतील.

तुम्ही एका घटकावर एकाच वेळी अनेक वर्ग लागू करू शकता, उदाहरणार्थ:

हा घटक मध्यम आणि मोठ्या वापरकर्त्याच्या स्क्रीनवर प्रदर्शित होणार नाही

Twitter Bootstrap 3 चे विकसक दस्तऐवज/वेब पृष्ठे मुद्रित करण्याबद्दल विसरले नाहीत आणि विशेषतः या हेतूंसाठी डिझाइन केलेले अनेक वर्ग जोडले:

दुसरे उदाहरण: जर तुमच्याकडे एका रांगेत 6 ब्लॉक रुंद आणि मध्यभागी एखादे घटक असल्यास, तुम्हाला 3 ब्लॉक्सचा ऑफसेट निर्दिष्ट करणे आवश्यक आहे:

   ...   

     ...  

या धड्यात आपण बूटस्ट्रॅप फ्रेमवर्क (आवृत्ती 3 किंवा 4) साइटवर कसे डाउनलोड आणि कनेक्ट करायचे ते शिकू.

बूटस्ट्रॅप लर्निंग टूलकिट

बूटस्ट्रॅप फ्रेमवर्क वापरून वेब प्रकल्प तयार करण्यासाठी साधनांचा किमान संच (प्रोग्राम):

• कोडसह काम करण्यासाठी मजकूर संपादक (नोटपॅड, कंस, नोटपॅड ++ इ.);
• ब्राउझर ( Google Chrome, Mozilla Firefox, ऑपेरा, सफारी, इंटरनेट एक्सप्लोररकिंवा इतर).

लोड करत आहे बूटस्ट्रॅप फ्रेमवर्क

एक वेब प्रोजेक्ट तयार करणे ज्याचे डिझाइन बूटस्ट्रॅप फ्रेमवर्कवर आधारित आहे ते नेहमी डाउनलोड करण्यापासून सुरू होते. तुम्ही बूटस्ट्रॅप फ्रेमवर्क डाउनलोड करू शकता विविध प्रकारे. उदाहरणार्थ, getbootstrap.com या साइटवर असलेल्या लिंकद्वारे किंवा पॅकेज मॅनेजर npm, Composer, Bower किंवा इतर वापरून हे कसे करायचे ते तुमच्या अनुभवावर किंवा विशिष्ट परिस्थितीवर अवलंबून आहे.

पॅकेज मॅनेजर वापरून बूटस्ट्रॅप फ्रेमवर्क कसे इन्स्टॉल करायचे, तसेच ग्रंट वापरून ते कसे तयार करायचे ते तुम्ही या लेखात वाचू शकता.

डाउनलोड करण्याचा सर्वात सोपा मार्ग म्हणजे लिंक वापरणे. बूटस्ट्रॅप साइटवर 2 दुवे आहेत.

पहिल्या लिंकमध्ये वापरण्यास तयार आहे CSS फाइल्सआणि JavaScript. ही असेंब्ली मुख्यतः फ्रेमवर्कचा अभ्यास करण्यासाठी किंवा प्रकल्पांमध्ये वापरण्यासाठी वापरली जाते, ज्याचे डिझाइन लेखकांनी मांडलेल्या डीफॉल्ट शैलींमध्ये केले जाऊ शकते.

बूटस्ट्रॅप 3.4.0 डाउनलोड करा बूटस्ट्रॅप 4.2.1 डाउनलोड करा

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

बूटस्ट्रॅप 3.4.0 स्त्रोत कोड बूटस्ट्रॅप 4.2.1 स्त्रोत कोड बूटस्ट्रॅप संग्रहण अनपॅक करणे

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

आपण संग्रहण पाहिल्यास, आपल्या लक्षात येईल की त्यात खालील सामग्री आहे (चालू बूटस्ट्रॅप उदाहरण 3.4.0):

बूटस्ट्रॅप/ ├── 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

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

जसे आपण पाहू शकता, संग्रहात 2 आहेत CSS आवृत्त्याआणि JavaScript फाइल्स, उदा. min प्रत्यय सह आणि त्याशिवाय. min सह फाइलची आवृत्ती min शिवाय वेगळी नाही, ती फक्त लहान केली जाते (संकुचित).

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

नॉन-मिनिफाइड आवृत्त्या विकासादरम्यान, तसेच अभ्यासासाठी वापरण्यास अधिक सोयीस्कर आहेत.

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

सर्व ब्राउझरमध्ये त्याचे प्रदर्शन सुनिश्चित करण्यासाठी समान फॉन्टसाठी असे विविध स्वरूप आवश्यक आहेत.

आपण या लेखात फॉन्ट स्वरूपातील चिन्हांबद्दल वाचू शकता, तसेच त्यांचे कोणते फायदे आणि तोटे आहेत.

बूटस्ट्रॅप 4 फ्रेमवर्क संग्रहण व्यावहारिकपणे बूटस्ट्रॅप 3 पेक्षा वेगळे नाही. त्याचा मुख्य फरक असा आहे की त्यात "Glyphicons" फॉन्ट नाही. तुम्हाला फॉन्ट चिन्हांची आवश्यकता असल्यास, तुम्हाला ते स्वतः कनेक्ट करावे लागतील. उदाहरणार्थ, खालीलपैकी एक संच वापरणे: FontAwesome, Octicons, Glyphicons, IcoMoon, इ. तुम्हाला वापरायचे नसल्यास तयार फॉन्ट, आणि आपले स्वतःचे तयार करा, ज्यामध्ये फक्त आवश्यक चिन्हे असतील, नंतर ही माहिती वापरा.

याव्यतिरिक्त, Bootstrap 4 आर्काइव्हमध्ये bootstrap-grid.css आणि bootstrap-reboot.css फाइल्स देखील समाविष्ट आहेत. या फायली केवळ त्यांच्यासाठी आवश्यक आहेत ज्यांना संपूर्ण फ्रेमवर्कची आवश्यकता नाही, परंतु त्यातील फक्त एक भाग आहे.

पहिल्या फाईलमध्ये (bootstrap-grid.css) बूटस्ट्रॅप ग्रिड आहे आणि दुसरी (bootstrap-reboot.css) नॉर्मलायझर आहे जी सेट करते मूलभूत शैली, जेणेकरून ते सर्व ब्राउझरमधील सर्व HTML घटकांसाठी समान असतील.

बूटस्ट्रॅपला HTML पृष्ठाशी जोडत आहे

बूटस्ट्रॅप 3 फ्रेमवर्कच्या इंस्टॉलेशन प्रक्रियेमध्ये कनेक्टिंग असते खालील फाइल्स HTML 5 पृष्ठावर:

बूटस्ट्रॅप CSS (bootstrap.min.css);

नवीनतम आवृत्ती jQuery लायब्ररी (काम करण्यासाठी बूटस्ट्रॅप JS प्लगइनसाठी आवश्यक);

बूटस्ट्रॅप JavaScript (bootstrap.min.js).

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

...

बूटस्ट्रॅप 4 फ्रेमवर्क कनेक्ट करणे याप्रमाणे केले जाते:

...

तुम्ही सीडीएन वापरून बूटस्ट्रॅप 4 कनेक्ट करू शकता (तुम्हाला प्रोजेक्टमध्ये बूटस्ट्रॅप डाउनलोड करण्याची आवश्यकता नाही):

कॉपी केले

...

CDN बूटस्ट्रॅप 3.4.0:

कॉपी केले

फ्रेमवर्कच्या कार्यक्षमतेची चाचणी घेण्यासाठी, आम्ही एक बटण तयार करू ज्याला स्पर्श केल्यावर, पॉपओव्हर टूलटिप प्रदर्शित होईल.

माझ्याकडे कर्सर आणा $(function() ( $("").popover((trigger:"hover")); ));