Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
बूटस्ट्रॅप हे Twitter वरील टूलकिट आहे जे वेब अॅप्स आणि साइट्सच्या विकासासाठी किकस्टार्ट करण्यासाठी डिझाइन केलेले आहे.
यात टायपोग्राफी, फॉर्म, बटणे, टेबल्स, ग्रिड, नेव्हिगेशन आणि अधिकसाठी बेस CSS आणि HTML समाविष्ट आहे.
नर्ड अलर्ट: बूटस्ट्रॅप लेससह तयार केला आहे आणि आधुनिक ब्राउझर लक्षात घेऊन गेटच्या बाहेर काम करण्यासाठी डिझाइन केले आहे.
जलद आणि सर्वात सोपी सुरुवात करण्यासाठी, फक्त हे स्निपेट तुमच्या वेबपेजमध्ये कॉपी करा.
कमी वापरण्याचे चाहते? काही हरकत नाही, फक्त रेपो क्लोन करा आणि या ओळी जोडा:
Github वर अधिकृत बूटस्ट्रॅप रेपोसह डाउनलोड करा, काटा काढा, खेचा, फाइल समस्या आणि बरेच काही.
सध्या v1.3.0
Twitter वरील अभियंत्यांनी ऐतिहासिकदृष्ट्या जवळजवळ कोणत्याही लायब्ररीचा वापर केला आहे ज्याशी ते परिचित होते फ्रंट-एंड आवश्यकता पूर्ण करण्यासाठी. सादर केलेल्या आव्हानांना उत्तर म्हणून बूटस्ट्रॅपची सुरुवात झाली. अनेक अद्भुत लोकांच्या मदतीने, बूटस्ट्रॅप लक्षणीयरीत्या वाढला आहे.
dev.twitter.com वर अधिक वाचा ›
क्रोम, सफारी, इंटरनेट एक्सप्लोरर आणि फायरफॉक्स सारख्या प्रमुख आधुनिक ब्राउझरमध्ये बूटस्ट्रॅपची चाचणी केली जाते आणि समर्थित आहे.
बूटस्ट्रॅप संकलित CSS, uncompiled, आणि उदाहरण टेम्पलेट्ससह पूर्ण येतो.
बूटस्ट्रॅपचा भाग म्हणून प्रदान केलेली डीफॉल्ट ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आहे. ही लोकप्रिय 960 ग्रिड प्रणालीची चव आहे, परंतु डाव्या आणि उजव्या बाजूला अतिरिक्त मार्जिन/पॅडिंगशिवाय.
येथे दर्शविल्याप्रमाणे, एक मूलभूत मांडणी दोन "स्तंभांसह" तयार केली जाऊ शकते, प्रत्येक 16 मूलभूत स्तंभांची संख्या व्यापून आम्ही आमच्या ग्रिड प्रणालीचा भाग म्हणून परिभाषित केले आहे. अधिक भिन्नतेसाठी खालील उदाहरणे पहा.
- <div वर्ग = "पंक्ती" >
- <div वर्ग = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
जर तुम्हाला .row
अस्तित्वात असलेल्या स्तंभामध्ये तयार करून तुमची सामग्री नेस्ट करा.
- <div वर्ग = "पंक्ती" >
- <div वर्ग = "span12" >
- स्तंभाचा स्तर 1
- <div वर्ग = "पंक्ती" >
- <div वर्ग = "span6" >
- स्तर 2
- </div>
- <div वर्ग = "span6" >
- स्तर 2
- </div>
- </div>
- </div>
- </div>
डीफॉल्ट 940px ग्रिड सिस्टीम सानुकूलित करण्यासाठी बूटस्ट्रॅपमध्ये अंतर्भूत व्हेरिएबल्स आहेत. थोड्या सानुकूलनेसह, तुम्ही स्तंभांचा आकार, त्यांचे गटर आणि ते ज्या कंटेनरमध्ये राहतात त्यामध्ये बदल करू शकता.
ग्रिड सिस्टीममध्ये सुधारणा करण्यासाठी आवश्यक असलेले चल सध्या सर्व मध्ये राहतात variables.less
.
चल | डीफॉल्ट मूल्य | वर्णन |
---|---|---|
@gridColumns |
16 | ग्रिडमधील स्तंभांची संख्या |
@gridColumnWidth |
40px | ग्रिडमधील प्रत्येक स्तंभाची रुंदी |
@gridGutterWidth |
20px | प्रत्येक स्तंभामधील ऋण जागा |
@siteWidth |
सर्व स्तंभ आणि गटरांची गणना केलेली बेरीज | आम्ही स्तंभ आणि गटरची संख्या मोजण्यासाठी काही मूलभूत जुळणी वापरतो आणि .fixed-container() मिक्सिनची रुंदी सेट करतो. |
ग्रिड बदलणे म्हणजे तीन @grid-*
व्हेरिएबल्स बदलणे आणि कमी फाइल्स पुन्हा कंपाइल करणे.
बूटस्ट्रॅप 24 स्तंभांपर्यंत ग्रिड प्रणाली हाताळण्यासाठी सुसज्ज आहे; डीफॉल्ट फक्त 16 आहे. तुमचे ग्रिड व्हेरिएबल्स 24-कॉलम ग्रिडमध्ये कसे सानुकूलित दिसतील ते येथे आहे.
- @gridColumns : 24 ;
- @gridColumnWidth : 20px ;
- @gridGutterWidth : 20px ;
एकदा पुन्हा संकलित केल्यानंतर, आपण सेट केले जाईल!
डीफॉल्ट आणि साधे 940px-विस्तृत, एका द्वारे प्रदान केलेल्या कोणत्याही वेबसाइट किंवा पृष्ठासाठी केंद्रीत मांडणी <div.container>
.
- <body>
- <div वर्ग = "कंटेनर" >
- ...
- </div>
- </body>
किमान- आणि कमाल-रुंदी आणि डावीकडील साइडबारसह पर्यायी, लवचिक द्रव पृष्ठ रचना. अॅप्स आणि डॉक्ससाठी उत्तम.
- <body>
- <div वर्ग = "कंटेनर-फ्लुइड" >
- <div वर्ग = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </body>
तुमच्या वेबपृष्ठांची रचना करण्यासाठी एक मानक टायपोग्राफिक पदानुक्रम.
संपूर्ण टायपोग्राफिक ग्रिड आमच्या variables.less फाइलमधील दोन Less व्हेरिएबल्सवर आधारित आहे: @basefont
आणि @baseline
. पहिला संपूर्ण वापरला जाणारा बेस फॉन्ट-आकार आहे आणि दुसरा बेस लाइन-उंची आहे.
आम्ही आमच्या सर्व प्रकारांचे समास, पॅडिंग आणि लाइन-हाइट तयार करण्यासाठी ते चल आणि काही गणिते वापरतो.
नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.
भर, पत्ते आणि संक्षेप वापरणे
<strong>
<em>
<address>
<abbr>
एम्फॅसिस टॅग्ज ( <strong>
आणि <em>
) शब्द किंवा वाक्प्रचार त्याच्या सभोवतालच्या प्रतीशी संबंधित अतिरिक्त महत्त्व किंवा जोर दर्शविण्यासाठ��� वापरला जावा. <strong>
महत्त्व आणि ताण भर <em>
देण्यासाठी वापरा .
Fusce dapibus , टेलस ac cursus commodo , tortor mauris condimentum nibh , ut fermentum massa justo sit amet risus . Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue.
टीप:<b>
HTML5 मध्ये वापरणे आणि टॅग करणे अद्याप ठीक आहे <i>
आणि त्यांना अनुक्रमे ठळक आणि तिर्यक शैलीची आवश्यकता नाही (जरी अधिक अर्थपूर्ण घटक असल्यास, ते वापरा). <b>
अतिरिक्त महत्त्व न देता शब्द किंवा वाक्ये हायलाइट करण्यासाठी आहे, तर <i>
मुख्यतः आवाज, तांत्रिक संज्ञा इ.
घटकाचा वापर त्याच्या जवळच्या <address>
पूर्वजांच्या किंवा संपूर्ण कार्याच्या संपर्क माहितीसाठी केला जातो. ते कसे वापरले जाऊ शकते याची दोन उदाहरणे येथे आहेत:
टीप: सामग्रीची योग्य रचना करण्यासाठी मधील प्रत्येक ओळ <address>
लाइन-ब्रेक ( <br />
) सह समाप्त होणे आवश्यक आहे किंवा ब्लॉक-लेव्हल टॅग (उदा. ) मध्ये गुंडाळले जाणे आवश्यक आहे .<p>
संक्षेप आणि परिवर्णी शब्दांसाठी, <abbr>
टॅग वापरा ( HTML5<acronym>
मध्ये बहिष्कृत आहे ). टॅगमध्ये शॉर्टहँड फॉर्म ठेवा आणि संपूर्ण नावासाठी शीर्षक सेट करा.
<blockquote>
<p>
<small>
ब्लॉककोट समाविष्ट करण्यासाठी, <blockquote>
भोवती गुंडाळा <p>
आणि <small>
टॅग करा. तुमचा स्रोत उद्धृत करण्यासाठी घटक वापरा <small>
आणि तुम्हाला —
त्यापूर्वी एक em डॅश मिळेल.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet.
डॉ ज्युलियस हिबर्ट
- <blockquote>
- <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante venenatis dapibus posuere velit aliquet. </p>
- <small> डॉ. ज्युलियस हिबर्ट </small>
- </blockquote>
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
तुमचा कोड दोन सोप्या टॅगसह शैलीत करा. जावास्क्रिप्टद्वारे आणखी अद्भुततेसाठी, Google च्या कोड सुंदर लायब्ररीमध्ये टाका आणि तुम्ही तयार आहात.
कोड, ब्लॉक्सचे किंवा फक्त स्निपेट्स इनलाइन, फक्त योग्य टॅगमध्ये गुंडाळून शैलीसह प्रदर्शित केले जाऊ शकतात. एकाधिक ओळी पसरलेल्या कोडच्या ब्लॉक्ससाठी, <pre>
घटक वापरा. इनलाइन कोडसाठी, <code>
घटक वापरा.
घटक | परिणाम |
---|---|
<code> |
यासारख्या मजकुराच्या ओळीत, तुमचा गुंडाळलेला कोड या <html> घटकासारखा दिसेल. |
<pre> |
<div> <h1>शीर्षक</h1> <p>काहीतरी इथे...</p> </div> टीप: |
<pre class="prettyprint"> |
google-code-prettify लायब्ररी वापरून, तुमच्या कोडच्या ब्लॉक्सना थोडी वेगळी व्हिज्युअल शैली आणि स्वयंचलित वाक्यरचना हायलाइटिंग मिळते. <div> <h1> हेडिंग </h1> <p> इथे काहीतरी... </p> </div> google-code-prettify डाउनलोड करा आणि कसे वापरावे यासाठी रीडमी पहा. |
<span class="label">
तुमच्या मुख्य मजकुरातील कोणत्याही वाक्यांशाकडे लक्ष द्या किंवा ध्वजांकित करा.
त्या फॅन्सी नवीनपैकी एकाची कधी गरज होती ! कोड लिहिताना किंवा महत्त्वाचे ध्वज? बरं, आता ते तुमच्याकडे आहेत. डीफॉल्टनुसार काय समाविष्ट केले आहे ते येथे आहे:
लेबल | परिणाम |
---|---|
<span class="label">Default</span> |
डीफॉल्ट |
<span class="label success">New</span> |
नवीन |
<span class="label warning">Warning</span> |
चेतावणी |
<span class="label important">Important</span> |
महत्वाचे |
<span class="label notice">Notice</span> |
लक्ष द्या |
कमी HTML फूटप्रिंट आणि किमान शैली असलेल्या पृष्ठांवर वेगवेगळ्या आकारांची लघुप्रतिमा प्रदर्शित करा.
मधील लघुप्रतिमा .media-grid
कोणत्याही आकाराची असू शकतात, परंतु अंगभूत बूटस्ट्रॅप ग्रिड सिस्टीमवर थेट मॅप केल्यावर ते उत्कृष्ट कार्य करतात. .span2
90, 210, आणि 330 सारख्या प्रतिमा रुंदी काही पिक्सेल पॅडिंगसह , .span4
, आणि .span6
स्तंभ आकारांच्या बरोबरीने एकत्र करतात .
मीडिया ग्रिड वापरण्यास सोपे आणि मार्कअपच्या बाजूने सोपे आहेत. त्यांची परिमाणे पूर्णपणे समाविष्ट केलेल्या प्रतिमांच्या आकारावर आधारित आहेत.
- <ul class = "मीडिया-ग्रिड" >
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- <li>
- <a href = "#" >
- <img class = "thumbnail" src = "https://placehold.it/330x230" alt = "" >
- </a>
- </li>
- </ul>
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
अनेक गोष्टींसाठी टेबल उत्तम आहेत. तथापि, उत्कृष्ट सारण्यांना उपयुक्त, स्केलेबल आणि वाचनीय (कोड स्तरावर) होण्यासाठी थोडे मार्कअप प्रेम आवश्यक आहे. मदत करण्यासाठी येथे काही टिपा आहेत.
तुमचे स्तंभ शीर्षलेख नेहमी <thead>
अशा प्रकारे गुंडाळा की पदानुक्रम <thead>
> <tr>
> असेल <th>
.
स्तंभ शीर्षलेखांप्रमाणेच, तुमच्या सारणीच्या मुख्य भागाची सामग्री एका मध्ये गुंडाळलेली असावी <tbody>
जेणेकरून तुमची पदानुक्रम <tbody>
> <tr>
> असेल <td>
.
वाचनीयता सुनिश्चित करण्यासाठी आणि संरचनेची देखभाल करण्यासाठी सर्व सारण्या आपोआप केवळ आवश्यक किनार्यांसह शैलीबद्ध केल्या जातील. अतिरिक्त वर्ग किंवा विशेषता जोडण्याची आवश्यकता नाही.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
- <टेबल>
- ...
- </ टेबल>
ज्या टेबल्ससाठी अधिक डेटा आवश्यक आहे अशा टेबलसाठी, कंडेन्स्ड फ्लेवर वापरा जे पॅडिंग अर्ध्यामध्ये कापते. हे डिफॉल्ट टेबल शैलींप्रमाणेच सीमा आणि झेब्रा-पट्टे यांच्या संयोगाने देखील वापरले जाऊ शकते.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
तुमचे टेबल त्यांचे कोपरे गोलाकार करून आणि सर्व बाजूंनी किनारी जोडून त्यांना थोडेसे स्लीक बनवा.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
- <टेबल वर्ग = "बॉर्डर-टेबल" >
- ...
- </ टेबल>
झेब्रा-स्ट्रीपिंग जोडून आपल्या सारण्यांसह थोडे फॅन्सी मिळवा—फक्त .zebra-striped
वर्ग जोडा.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
१ | काही | एक | इंग्रजी |
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
स्पॅन 4 स्तंभ | |||
स्पॅन 2 स्तंभ | स्पॅन 2 स्तंभ |
टीप: झेब्रा-स्ट्रीपिंग ही एक प्रगतीशील सुधारणा आहे जी IE8 आणि त्याखालील जुन्या ब्राउझरसाठी उपलब्ध नाही.
- <टेबल वर्ग = "झेब्रा-स्ट्रीप" >
- ...
- </ टेबल>
मागील उदाहरण घेऊन, आम्ही jQuery आणि Tablesorter प्लगइन द्वारे क्रमवारी कार्यक्षमता प्रदान करून आमच्या टेबलची उपयुक्तता सुधारतो. क्रमवारी बदलण्यासाठी कोणत्याही स्तंभाच्या शीर्षलेखावर क्लिक करा.
# | पहिले नाव | आडनाव | इंग्रजी |
---|---|---|---|
2 | जो | सहा पॅक | इंग्रजी |
3 | स्टु | डेंट | कोड |
१ | आपले | एक | इंग्रजी |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <script >
- $ ( कार्य () {
- $ ( "टेबल#sortTableExample" ). टेबल्सॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- });
- </script>
- <टेबल वर्ग = "झेब्रा-स्ट्रीप" >
- ...
- </ टेबल>
सर्व फॉर्म वाचनीय आणि स्केलेबल मार्गाने सादर करण्यासाठी डीफॉल्ट शैली दिल्या आहेत. मजकूर इनपुट, निवडक सूची, मजकूर क्षेत्र, रेडिओ बटणे आणि चेकबॉक्सेस आणि बटणांसाठी शैली प्रदान केल्या आहेत.
तुमच्या फॉर्मच्या HTML मध्ये जोडा .form-stacked
आणि तुम्हाला त्यांच्या फील्डच्या डावीकडे ऐवजी शीर्षस्थानी लेबले असतील. जर तुमचे फॉर्म लहान असतील किंवा तुमच्याकडे जड फॉर्मसाठी इनपुटचे दोन कॉलम असतील तर हे उत्तम काम करते.
तुमच्या मार्कअपमध्ये फक्त काही वर्ग जोडून कोणताही फॉर्म input
, select
किंवा रुंदी सानुकूल करा.textarea
v1.3.0 नुसार, आम्ही फॉर्म घटकांसाठी ग्रिड-आधारित आकार वर्ग जोडले आहेत. कृपया याचा वापर सध्याच्या .mini
, .small
इत्यादी वर्गांवर करा.
एक नियम म्हणून, बटणे क्रियांसाठी वापरली जातात तर लिंक्स ऑब्जेक्टसाठी वापरली जातात. उदाहरणार्थ, "डाउनलोड" एक बटण असू शकते आणि "अलीकडील क्रियाकलाप" एक दुवा असू शकतो.
सर्व बटणे हलक्या राखाडी शैलीवर डीफॉल्ट असतात, परंतु विविध रंग शैलींसाठी अनेक कार्यात्मक वर्ग लागू केले जाऊ शकतात. या वर्गांमध्ये निळा .primary
वर्ग, हलका-निळा .info
वर्ग, हिरवा .success
वर्ग आणि लाल .danger
वर्ग समाविष्ट आहे.
बटणाच्या शैली लागू केलेल्या कोणत्याही गोष्टीवर लागू केल्या जाऊ शकतात .btn
. सामान्यत: तुम्हाला हे फक्त <a>
, <button>
, आणि निवडक <input>
घटकांवर लागू करायचे आहे. ते कसे दिसते ते येथे आहे:
फॅन्सी मोठी किंवा लहान बटणे? त्यावर आहे!
सक्रिय नसलेल्या किंवा एका कारणाने अॅपद्वारे अक्षम केलेल्या बटणांसाठी, अक्षम स्थिती वापरा. ते .disabled
दुव्यांसाठी आणि :disabled
घटकांसाठी आहे <button>
.
.alert-message
अपयश, संभाव्य अपयश किंवा कृतीचे यश हायलाइट करण्यासाठी एक-लाइन संदेश. फॉर्मसाठी विशेषतः उपयुक्त.
- <div वर्ग = "अलर्ट-मेसेज चेतावणी" >
- <a वर्ग = "बंद करा" href = "#" > × </a>
- <p><strong> पवित्र ग्वाकमोल! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. </p>
- </div>
.alert-message.block-message
थोड्या स्पष्टीकरणाची आवश्यकता असलेल्या संदेशांसाठी, आमच्याकडे परिच्छेद शैली सूचना आहेत. हे दीर्घ त्रुटी संदेश बबल करण्यासाठी, प्रलंबित क्रियेबद्दल वापरकर्त्याला चेतावणी देण्यासाठी किंवा पृष्ठावर अधिक जोर देण्यासाठी माहिती सादर करण्यासाठी योग्य आहेत.
- <div वर्ग = "अलर्ट-मेसेज ब्लॉक-मेसेज चेतावणी" >
- <a वर्ग = "बंद करा" href = "#" > × </a>
- <p><strong> पवित्र ग्वाकमोल! ही एक चेतावणी आहे! </strong> स्वतःची उत्तम तपासणी करा, तुम्ही फार चांगले दिसत नाही. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. </p>
- <div वर्ग = "अलर्ट-क्रिया" >
- <a class = "btn small" href = "#" > ही कृती करा </a> <a class = "btn small" href = "#" > किंवा हे करा </a>
- </div>
- </div>
मोडल्स—संवाद किंवा लाइटबॉक्स—हे अशा परिस्थितीत संदर्भात्मक क्रियांसाठी उत्तम आहेत जेथे पार्श्वभूमीचा संदर्भ राखला जाणे महत्त्वाचे आहे.
एक उत्तम शरीर…
गोंधळलेल्या वापरकर्त्याला मदत करण्यासाठी आणि त्यांना योग्य दिशेने निर्देशित करण्यासाठी ट्विप्सी खूप उपयुक्त आहेत.
Lorem ipsum Dolar sit amet illo error ipsum veritatis aut iste perspiciatis iste voluptas natus illo quasi odit aut natus consequuntur consequuntur, aut natus illo voluptatem odit perspiciatis laudantium rem doloremque totam voluptas. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architectto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae fugit quae voluptum voluptum voluptum aquantium
लेआउट प्रभावित न करता पृष्ठास सबटेक्स्टुअल माहिती प्रदान करण्यासाठी पॉपओव्हर्स वापरा.
Etiam porta sem malesuada magna mollis euismod. Maecenas faucibus mollis interdum. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
बूटस्ट्रॅप लायब्ररीसह जावास्क्रिप्ट समाकलित करणे खूप सोपे आहे. खाली आम्ही मूलभूत गोष्टींचा विचार करतो आणि तुम्हाला सुरुवात करण्यासाठी काही अद्भुत प्लगइन प्रदान करतो!
jQuery आणि Ender सह कार्य करणार्या नवीन सानुकूल प्लगइनसह बूटस्ट्रॅपचे काही प्राथमिक घटक जिवंत करा . तुमच्या विशिष्ट विकास गरजा पूर्ण करण्यासाठी आम्ही तुम्हाला त्यांचा विस्तार आणि सुधारणा करण्यास प्रोत्साहित करतो.
फाईल | वर्णन |
---|---|
bootstrap-modal.js | आमचे मॉडेल प्लगइन हे पारंपारिक मॉडेल जेएस प्लगइनवर अतिशय स्लिम टेक आहे! आम्हाला twitter वर आवश्यक असणार्या फंक्शनॅलिटीचा समावेश करण्याची विशेष काळजी घेतली. |
bootstrap-alerts.js | अलर्ट प्लगइन अलर्टमध्ये जवळची कार्यक्षमता जोडण्यासाठी एक अतिशय लहान वर्ग आहे. |
bootstrap-dropdown.js | हे प्लगइन बूटस्ट्रॅप टॉपबार किंवा टॅब केलेल्या नेव्हिगेशनमध्ये ड्रॉपडाउन संवाद जोडण्यासाठी आहे. |
bootstrap-scrollspy.js | ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारवर स्क्रोल स्थितीवर आधारित स्वयं अपडेटिंग एनएव्ही जोडण्यासाठी आहे. |
bootstrap-buttons.js | ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारवर स्क्रोल स्थितीवर आधारित स्वयं अपडेटिंग एनएव्ही जोडण्यासाठी आहे. |
bootstrap-tabs.js | हे प्लगइन स्थानिक सामग्रीद्वारे सायकलिंगसाठी द्रुत, डायनॅमिक टॅब आणि गोळी कार्यक्षमता जोडते. |
bootstrap-twipsy.js | जेसन फ्रेमने लिहिलेल्या उत्कृष्ट jQuery.tipsy प्लगइनवर आधारित; twipsy ही एक अद्ययावत आवृत्ती आहे, जी प्रतिमांवर अवलंबून नाही, अॅनिमेशनसाठी css3 आणि स्थानिक शीर्षक संचयनासाठी डेटा-विशेषता वापरते! |
bootstrap-popover.js | पॉपओव्हर प्लगइन तुमच्या ऍप्लिकेशनमध्ये पॉपओव्हर जोडण्यासाठी एक सोपा इंटरफेस प्रदान करते. हे boostrap-twipsy.js प्लगइन वाढवते, त्यामुळे तुमच्या प्रोजेक्टमध्ये पॉपओव्हर्स समाविष्ट करताना ती फाईल देखील हस्तगत करण्याचे सुनिश्चित करा! |
नाही! बूटस्ट्रॅप सीएसएस लायब्ररी म्हणून प्रथम आणि सर्वात महत्त्वाचे डिझाइन केले आहे. ही जावास्क्रिप्ट समाविष्ट केलेल्या शैलींच्या शीर्षस्थानी मूलभूत परस्परसंवादी स्तर प्रदान करते.
तथापि, ज्यांना जावास्क्रिप्टची गरज आहे त्यांच्यासाठी, आम्ही तुम्हाला जावास्क्रिप्टसह बूटस्ट्रॅप कसे समाकलित करायचे हे समजण्यात मदत करण्यासाठी आणि तुम्हाला मूलभूत कार्यक्षमतेसाठी त्वरित, हलका पर्याय देण्यासाठी वरील प्लगइन प्रदान केले आहेत.
अधिक माहितीसाठी आणि काही थेट डेमो पाहण्यासाठी, कृपया आमच्या प्लगइन दस्तऐवजीकरण पृष्ठाचा संदर्भ घ्या .
बूटस्ट्रॅप प्रीबूट वरून तयार करण्यात आला होता , जो वेगवान आणि सुलभ वेब डेव्हलपमेंटसाठी एक CSS प्रीप्रोसेसर, Less च्या संयोगाने वापरला जाणारा मिक्सिन्स आणि व्हेरिएबल्सचा एक ओपन-सोर्स पॅक आहे .
आम्ही बूटस्ट्रॅपमध्ये प्रीबूट कसे वापरले आणि तुम्ही तुमच्या पुढील प्रोजेक्टवर कमी चालवणे निवडल्यास तुम्ही त्याचा वापर कसा करू शकता ते पहा.
तुमच्या ब्राउझरमध्ये जावास्क्रिप्टद्वारे बूटस्ट्रॅपच्या लेस व्हेरिएबल्स, मिक्सिन्स आणि सीएसएसमध्ये नेस्टिंगचा पूर्ण वापर करण्यासाठी हा पर्याय वापरा.
- <link rel = "stylesheet/less" href = "less/bootstrap.less" मीडिया = "सर्व" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js समाधान वाटत नाही? Less Mac अॅप वापरून पहा किंवा जेव्हा तुम्ही तुमचा कोड उपयोजित करता तेव्हा संकलित करण्यासाठी Node.js वापरा .
बूटस्ट्रॅपचा भाग म्हणून Twitter बूटस्ट्रॅपमध्ये काय समाविष्ट केले आहे याचे काही ठळक मुद्दे येथे आहेत. डाउनलोड करण्यासाठी आणि अधिक जाणून घेण्यासाठी बूटस्ट्रॅप वेबसाइट किंवा गिथब प्रकल्प पृष्ठावर जा.
तुमची CSS डोकेदुखी मुक्त ठेवण्यासाठी आणि अपडेट करण्यासाठी कमी व्हेरिएबल्स योग्य आहेत. जेव्हा तुम्हाला रंग मूल्य किंवा वारंवार वापरले जाणारे मूल्य बदलायचे असेल, तेव्हा ते एका ठिकाणी अद्यतनित करा आणि तुम्ही सेट आहात.
- // दुवे
- @linkColor : #8b59c2;
- @linkColorHover : गडद करा ( @linkColor , 10 );
- // ग्रे
- @ब्लॅक : #000;
- @grayDark : हलका ( @black , 25 %);
- @ग्रे : हलका ( @काळा , 50 %);
- @ग्रे लाईट : हलका ( @ब्लॅक , 70 %);
- @ग्रे लाइटर : हलका ( @ब्लॅक , 90 %);
- @व्हाइट : #ffff ;
- // उच्चारण रंग
- @blue : #08b5fb;
- @हिरवा : #46a546 ;
- @लाल : #9d261d ;
- @पिवळा : #ffc40d ;
- @संत्रा : #f89406 ;
- @गुलाबी : #c3325f ;
- @जांभळा : #7a43b6 ;
- // बेसलाइन ग्रिड
- @basefont : 13px ;
- @बेसलाइन : 18px ;
/* ... */
कमी CSS च्या सामान्य वाक्यरचना व्यतिरिक्त टिप्पणी करण्याची दुसरी शैली देखील प्रदान करते .
- // ही एक टिप्पणी आहे
- /* ही देखील एक टिप्पणी आहे */
मिक्सिन्स हे मुळात CSS साठी अंतर्भूत किंवा आंशिक असतात, ज्यामुळे तुम्हाला कोडचा ब्लॉक एकामध्ये एकत्र करता येतो. ते box-shadow
, क्रॉस-ब्राउझर ग्रेडियंट्स, फॉन्ट स्टॅक आणि अधिक सारख्या विक्रेत्याच्या प्रीफिक्स केलेल्या गुणधर्मांसाठी उत्तम आहेत. खाली बूटस्ट्रॅपसह समाविष्ट केलेल्या मिक्सिन्सचा नमुना आहे.
- #फॉन्ट {
- . लघुलेख ( @weight : सामान्य , @size : 14px , @lineHeight : 20px ) {
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- . sans - serif ( @weight : normal , @size : 14px , @lineHeight : 20px ) {
- फॉन्ट - फॅमिली : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सॅन्स - सेरिफ ;
- फॉन्ट आकार : @size ; _
- फॉन्ट - वजन : @weight ;
- रेषा - उंची : @lineHeight ;
- }
- ...
- }
- #प्रवण {
- ...
- . अनुलंब ( @startColor : #555, @endColor: #333) {
- पार्श्वभूमी - रंग : @endColor ;
- पार्श्वभूमी - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूमी - प्रतिमा : - khtml - ग्रेडियंट ( रेखीय , डावीकडे वर , डावीकडे तळाशी , ( @startColor ), पासून ( @endColor ) पर्यंत ); // कॉन्करर
- पार्श्वभूमी - प्रतिमा : - moz - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // FF 3.6+
- पार्श्वभूमी - प्रतिमा : - एमएस - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // IE10
- पार्श्वभूमी - प्रतिमा : - वेबकिट - ग्रेडियंट ( रेखीय , डावे शीर्ष , डावे तळ , रंग - थांबा ( 0 %, @startColor ), रंग - थांबा ( 100 %, @endColor )); // Safari 4+, Chrome 2+
- पार्श्वभूमी - प्रतिमा : - वेबकिट - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // Safari 5.1+, Chrome 10+
- पार्श्वभूमी - प्रतिमा : - ओ - रेखीय - ग्रेडियंट ( @startColor , @endColor ); // ऑपेरा 11.10
- पार्श्वभूमी - प्रतिमा : रेखीय - ग्रेडियंट ( @startColor , @endColor ); // मानक
- }
- ...
- }
फॅन्सी मिळवा आणि खालीलप्रमाणे लवचिक आणि शक्तिशाली मिश्रण तयार करण्यासाठी काही गणित करा.
- // ग्रिडट्यूड
- @gridColumns : 16 ;
- @gridColumnWidth : 40px ;
- @gridGutterWidth : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @gridColumns - 1 ));
- // काही स्तंभ बनवा
- . स्तंभ ( @columnSpan : 1 ) {
- रुंदी : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @columnSpan - 1 ));
- }
/lib/ मधील फाईल्स सुधारित केल्यानंतर .less
, तुम्हाला bootstrap-*xx.css आणि bootstrap-*xx.min.css फाइल्स पुन्हा निर्माण करण्यासाठी त्या पुन्हा संकलित कराव्या लागतील. तुम्ही GitHub वर पुल विनंती सबमिट करत असल्यास, तुम्ही नेहमी पुन्हा कंपाइल करणे आवश्यक आहे.
पद्धत | पायऱ्या |
---|---|
मेकफाइलसह नोड | खालील आदेश चालवून npm सह कमी कमांड लाइन कंपाइलर स्थापित करा: $ npm lessc स्थापित करा एकदा इंस्टॉल याव्यतिरिक्त, जर तुमच्याकडे वॉचर स्थापित असेल, तर तुम्ही |
जावास्क्रिप्ट | नवीनतम Less.js डाउनलोड करा आणि त्यात त्याचा मार्ग (आणि बूटस्ट्रॅप) समाविष्ट करा
.less फाइल्स पुन्हा संकलित करण्यासाठी, फक्त त्या जतन करा आणि तुमचे पृष्ठ रीलोड करा. Less.js त्यांना संकलित करते आणि स्थानिक स्टोरेजमध्ये संग्रहित करते. |
कमांड लाइन | जर तुमच्याकडे आधीपासून कमी कमांड लाइन टूल इंस्टॉल केले असेल, तर फक्त खालील कमांड चालवा: $lessc ./lib/bootstrap.less > bootstrap.css
|
कमी मॅक अॅप | अनधिकृत Mac अॅप .less फाइल्सच्या डिरेक्टरी पाहतो आणि पाहिल्या गेलेल्या .less फाइलच्या प्रत्येक सेव्हनंतर स्थानिक फाइल्समध्ये कोड संकलित करतो. तुम्हाला आवडत असल्यास, तुम्ही अॅपमध्ये स्वयंचलित लघुकरणासाठी प्राधान्ये टॉगल करू शकता आणि संकलित फायली कोणत्या निर्देशिकेत संपतात. |