एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड. मेसेनास फॉसिबस मॉलिस इंटरडम. मोर्बी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस हांगाच्या वेस्टिबुलम.
बूटस्ट्रॅप ही ट्विटराची एक साधनपुस्तिका आसा जी वेबऍप्लिकेशनां आनी सायटींच्या विकासाक किकस्टार्ट करपाक तयार केल्ली आसा.
तातूंत टायपोग्राफी, फॉर्म, बटण, कोश्टकां, ग्रिड, नेव्हिगेशन, आनी हेर खातीर बेस CSS आनी HTML आसपावीत केला.
Nerd सावधानताय: बूटस्ट्रॅप Less कडेन तयार केला आनी आधुनीक ब्राउझर मतींत घेवन गेटी भायर काम करपाक तयार केल्लो.
सगळ्यांत बेगीन आनी सोप्या सुरवाती खातीर, फकत हो स्निपेट तुमच्या वॅबपानांत कॉपी करात.
लेस वापरपाचो एक फॅन? कसलोच प्रॉब्लेम ना, फकत रेपो क्लोन करात आनी ह्यो ओळी जोडात:
Github चेर अधिकृत Bootstrap रेपो वांगडा डावनलोड, फोर्क, पुल, फायल प्रस्न, आनी हेर.
सध्या v1.3.0 आसा
ट्विटरांतल्या अभियंत्यांनी इतिहासीक नदरेन फ्रंट-एंड गरजां पुराय करपा खातीर तांकां वळख आशिल्ली चड करून खंयच्याय लायब्ररीचो वापर केला. सादर केल्ल्या आव्हानांक जाप म्हणून बूटस्ट्रॅप सुरू जालो. जायत्या अद्भुत लोकांच्या आदारान बूटस्ट्रॅपाची म्हत्वाची वाड जाल्या.
dev.twitter.com ह्या संकेतथळार चड वाचात ›
Chrome, Safari, Internet Explorer, आनी Firefox सारकिल्या मुखेल आधुनीक ब्राउझरांनी बूटस्ट्रॅपाची चांचणी आनी समर्थन आसा.
बूटस्ट्रॅप संकलित CSS, संकलित नाशिल्ले, आनी उदाहरण साच्यां वांगडा पुराय येता.
बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.
हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.
- <div वर्ग = "ओळ" >
- <div वर्ग = "span6" >
- ...
- </div> हें नांव
- <div वर्ग = "span10" >
- ...
- </div> हें नांव
- </div> हें नांव
.row
अस्तित्वांत आशिल्ल्या स्तंभा भितर एक तयार करून तुमकां जाय जाल्यार तुमची सामुग्री नेस्ट करात .
- <div वर्ग = "ओळ" >
- <div वर्ग = "span12" >
- स्तंभाची पातळी 1
- <div वर्ग = "ओळ" >
- <div वर्ग = "span6" >
- पातळी 2
- </div> हें नांव
- <div वर्ग = "span6" >
- पातळी 2
- </div> हें नांव
- </div> हें नांव
- </div> हें नांव
- </div> हें नांव
बूटस्ट्रॅपांत तयार केल्ले मुलभूत 940px ग्रिड प्रणाली पसंतीचे करपाखातीर मुठीभर चड-उणें आसात. थोडें सानुकूलीकरण करून, तुमी स्तंभांचो आकार, तांचे गटर, आनी ते रावतात त्या कंटेनरांत बदल करूंक शकतात.
ग्रिड प्रणालींत बदल करपाक जाय आशिल्ले चड-उणे सद्या सगळे variables.less
.
परिवर्तनशील हें | मुलभूत मोल | वर्णन |
---|---|---|
@gridColumns |
१६ हें नांव | जाळी भितर स्तंभांची संख्या |
@gridColumnWidth |
40px इतलें आसा | जाळी भितरल्या दर एका स्तंभाची रुंदाय |
@gridGutterWidth |
20px हें आसा | दर एका स्तंभा मदली नकारात्मक सुवात |
@siteWidth |
सगळ्या स्तंभांची आनी गटरांची गणना केल्ली बेरीज | आमी कांय मुळावे जुळोवणी वापरतात स्तंभ आनी गटरांची संख्या मेजपाक आनी .fixed-container() मिक्सिनाची रुंदाय सेट करपाक. |
ग्रिडांत बदल करप म्हणल्यार तीन चड-उणें बदलप @grid-*
आनी कमी फायली परतून संकलित करप.
बूटस्ट्रॅप 24 स्तंभां मेरेन आशिल्ली ग्रिड प्रणाली हाताळपाक सज्ज येता; मुलभूत फकत 16. हांगा तुमचे ग्रिड चड-उणें 24-स्तंभ ग्रिडाक अनुकूल केल्ले कशे दिसतले तें पळयात.
- @gridस्तंभ : 24 ;
- @gridस्तंभरुंदी : 20px ;
- @gridगटररुंदी : 20px ;
एकदां परतून संकलित केल्या उपरांत, तुमी सेट जातले!
मुलभूत आनी सादी 940px-रुंद, केंद्रीत मांडावळ फकत जवळजवळ खंयच्याय संकेतथळा खातीर वा पान एकेच पुरवण केल्या <div.container>
.
- <शरीर> हें नांव
- <div वर्ग = "कंटेनर" >
- ...
- </div> हें नांव
- </body> हें नांव
किमान- आनी चडांत चड-रुंदी आनी डाव्या हाताची बाजू आशिल्ली एक पर्यायी, लवचीक द्रव पान रचणूक. ऍप्लिकेशनां आनी डॉक्स खातीर ग्रेट.
- <शरीर> हें नांव
- <div class = "कंटेनर-द्रव" >
- <div वर्ग = "साइडबार" >
- ...
- </div> हें नांव
- <div वर्ग = "सामग्री" >
- ...
- </div> हें नांव
- </div> हें नांव
- </body> हें नांव
तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.
पुराय मुद्रण जाळी आमच्या variables.less फायलीन दोन Less चडांत चड आदारीत आसा: @basefont
आनी @baseline
. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस लायन-उंचाय.
आमी त्या व्हेरिएबल्स, आनी कांय गणित, आमच्या सगळ्या प्रकाराचे आनी हेर मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करपाक वापरतात.
नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.
भर, पत्ते, & संक्षेप वापरप
<strong>
<em>
<address>
<abbr>
भर दिवपी टॅग ( <strong>
आनी <em>
) वापरपाक जाय, शब्द वा वाक्यांश ताचे भोंवतणच्या प्रतीच्या सापेक्ष अतिरिक्त म्हत्व वा भर दाखोवपाक. <strong>
म्हत्वाखातीर आनी ताण भर <em>
दिवपाखातीर वापरात .
Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.
टिप: HTML5 त वापरप <b>
आनी <i>
टॅग करप अजूनय बरोबर आसा आनी तांकां अनुक्रमान बोल्ड आनी इटालिक स्टायल करपाची गरज ना (जरी चड अर्थपूर्ण घटक आसल्यार, तो वापरात). <b>
अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार <i>
चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.
ह्या <address>
घटकाचो उपेग ताच्या लागींच्या पूर्वजा खातीर, वा पुराय कामाच्या आंगा खातीर संपर्क म्हायती खातीर करतात. ताचो वापर कसो करूं येता हाचीं दोन उदाहरणां हांगा दिल्यांत:
टिप: एकांतली दरेक ओळ <address>
ओळी-विराम ( ) च्या आदारान सोंपपाक जाय वा आशयाची योग्य रचणूक करपाखातीर <br />
ब्लॉक-पातळेच्या टॅगांत गुठलावंक जाय (देखीक, ).<p>
संक्षेप आनी संक्षिप्त नांवांखातीर, <abbr>
टॅग वापरात ( HTML5<acronym>
त नाका आसा ). टॅगा भितर आशुलिपी फॉर्म घालचो आनी पुराय नांवाखातीर शीर्षक सेट करचो.
<blockquote>
<p>
<small>
ब्लॉककोट समाविष्ट करपाक, वॅप <blockquote>
अराउंड <p>
आनी <small>
टॅग करात. तुमचो स्रोत उल्लेख करपाक घटक वापरात आनी ताचे आदीं <small>
तुमकां एम डॅश मेळटलो .—
लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट अॅलिकेट.
ज्युलियस हिबर्ट हांणी डॉ
- <ब्लॉककोट> हें नांव
- <p> लोरेम इप्सम डोलोर बस आमेट, कॉन्सेक्टेतुर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट एलिकेट. </p> हें नांव
- <ल्हान> डॉ ज्युलियस हिबर्ट </small>
- </blockquote> हें नांव
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
दोन साद्या टॅगां वरवीं तुमचो कोड शैलींत पिंप करात. जावास्क्रिप्ट वरवीं आनीकय चड अद्भुतताये खातीर, Google चो कोड prettify लायब्ररी सोडचो आनी तुमी सेट जाल्यात.
कोड, ब्लॉक वा फकत स्निपेट इनलायन, फकत योग्य टॅगांत गुठलायल्यार शैलीन दाखोवंक मेळटा. एका परस चड ओळीं पातळिल्ल्या कोडाच्या ब्लॉकांखातीर, <pre>
घटक वापरात. इनलायन कोडाखातीर, <code>
घटक वापरात.
घटक | निकाल |
---|---|
<code> |
अशे तरेन मजकूराचे ओळींत, तुमचो गुठलायल्लो कोड ह्या <html> घटका सारको दिसतलो. |
<pre> |
<दिव> हें नांव <h1>शीर्षक</h1> हें नांव <p>हांगाच कितें तरी...</p> </div> हें नांव टिप: |
<pre class="prettyprint"> |
google-code-prettify लायब्ररी वापरून, तुमच्या कोड ब्लॉकांक मात्शी वेगळी व्हिज्युअल शैली आनी स्वयंचलित वाक्यरचना हायलाइटिंग मेळटा. <div> <h1> शीर्षक </h1> <p> हांगाच कितें तरी... </p> </div> google-code-prettify डावनलोड करात आनी कशें वापरचें हाचे खातीर readme पळयात. |
<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
खंयच्याय आकाराचे आसूं येतात, पूण बिल्ट-इन बूटस्ट्रॅप ग्रिड प्रणालींत थेट मॅप केल्यार ते सगळ्यांत बरे काम करतात. 90, 210, आनी 330 सारकिल्ल्यो प्रतिमा रुंदाय कांय पिक्सेल पॅडींग वांगडा जोडून .span2
, .span4
, आनी .span6
स्तंभ आकारांक बरोबर करतात.
मिडिया ग्रिड वापरपाक सोपी आनी मार्कअप बाजूचेर मातशी सोपी आसतात. तांचे परिमाण शुध्दपणान आस्पाव केल्ल्या प्रतिमांच्या आकाराचेर आदारून आसतात.
- <ul वर्ग = "माध्यम-जाळी" >
- <ली> हें नांव
- <a href = "#" > हें नांव
- <img वर्ग = "लघुप्रतिमा" src = "https://placehold.it/330x230" alt = "" >
- </a> हें नांव
- </li> हें नांव
- <ली> हें नांव
- <a href = "#" > हें नांव
- <img वर्ग = "लघुप्रतिमा" 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>
.
वाचपाक योग्यताय सुनिश्चीत करपाक आनी रचणूक सांबाळपाक सगळ्या कोश्टकांक फकत गरजेच्यो शिमो आपोआप शैली दितले. अतिरिक्त वर्ग वा गुणधर्म जोडपाची गरज ना.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
- <कोश्टक> हें नांव
- ...
- </कोश्टक>
घट्ट जाग्यार चड डेटा जाय आशिल्ल्या कोश्टकां खातीर, पॅडींग अर्दांत कापपी घनीभूत रूच वापरात. तशेंच मुलभूत कोश्टक शैलीं प्रमाणें, शिमो आनी झेब्रा-पट्ट्यांवांगडाय ताचो वापर करूं येता.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
तुमचीं मेजां फकत मात्शीं चिकणमाती दिसपाक करात, तांचे कोनशे वाटकुळे करून आनी सगळ्या वटांनी शिमो घालून.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
- <कोश्टक वर्ग = "सीमा-कोश्टक" >
- ...
- </कोश्टक>
झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-striped
वर्ग जोडचो.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
१ | कांय | एक | इंग्लीश |
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
span 4 स्तंभ | |||
span 2 स्तंभ | span 2 स्तंभ |
टिप: Zebra-striping हें एक प्रगतीशील सुदारणा आसा ���ी IE8 आनी सकयल सारकिल्या पोरन्या ब्राउझरां खातीर उपलब्ध ना.
- <कोष्टक वर्ग = "झेब्रा-पट्टीदार" >
- ...
- </कोश्टक>
आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.
# 1 . | पयलें नांव | निमाणें नांव | भास |
---|---|---|---|
२ | जोय हांणी केला | सिक्सपॅक हें नांव | इंग्लीश |
३ | स्टु | डेंट हें नांव | संहिता |
१ | तुमचें | एक | इंग्लीश |
- <script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट>
- <लिपी > हें नांव
- $ ( फंक्शन () { 1 .
- $ ( "कोश्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });
- });
- </script> हें नांव
- <कोष्टक वर्ग = "झेब्रा-पट्टीदार" >
- ...
- </कोश्टक>
सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.
तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stacked
आनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.
तुमच्या मार्कअपांत फकत कांय वर्ग जोडून खंयचोय फॉर्म input
, select
, वा रुंदाय पसंतीचे करात.textarea
v1.3.0 प्रमाणें, आमी फॉर्म घटकांखातीर ग्रिड-आधारीत आकारमान वर्ग जोडल्यात. उपकार करून सद्याच्या .mini
, .small
, आदी वर्गांचेर हे वापरात.
एक रूढिवाद म्हूण, बटणां कृतींखातीर वापरतात जाल्यार दुवे वस्तूंखातीर वापरतात. देखीक, "डावनलोड" हें बटण आसूं येता आनी "हालीची क्रिया" दुवो आसूं येता.
सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण वेगवेगळ्या रंग शैलींखातीर जायते कार्यात्मक वर्ग लागू करूं येतात. ह्या वर्गांत निळो .primary
वर्ग, हळदुवो .info
वर्ग, पाचवो .success
वर्ग, तांबडो .danger
वर्ग हांचो आस्पाव जाता.
बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn
. सादारणपणान तुमकां हीं फकत <a>
, <button>
, आनी निवड <input>
घटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:
फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!
सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabled
दुव्यां खातीर आनी घटकां :disabled
खातीर .<button>
.alert-message
कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.
- <div class = "सावधान-संदेश शिटकावणी" >
- <a class = "बंद करप" href = "#" > × </a>
- <p><strong> पवित्र ग्वाकामोल! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. </p> हें नांव
- </div> हें नांव
.alert-message.block-message
थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.
- <div class = "चेतावणी-संदेश ब्लॉक-संदेश शिटकावणी" >
- <a class = "बंद करप" href = "#" > × </a>
- <p><strong> पवित्र ग्वाकामोल! ही एक शिटकावणी! </strong> बेस्ट चेक यो सेल्फ, तूं चड बरो दिसना. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग. प्रॅसेंट कोमोडो कर्सस मॅग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेतुर इ. </p> हें नांव
- <div class = "सावधान-कृती" >
- <a class = "btn small" href = "#" > ही कृती करात </a> <a class = "btn small" href = "#" > वा हें करात </a>
- </div> हें नांव
- </div> हें नांव
मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.
एक बारीक आंग...
गोंदळिल्ल्या वापरप्याक मदत करपाक आनी तांकां योग्य दिशेन दाखोवपाक ट्विप्सी सुपर उपेगी आसात.
लोरेम इप्सम डॉलर सिट अमेट इलो त्रुटी इप्सम व्हेरिटाटीस ऑट इस्टे परस्पिसिएटिस इस्टे व्होलुप्टास नॅटस इलो क्वासी ओडिट ऑट नेटस कॉन्सेक्युन्तुर कॉन्सेक्युन्तुर, ऑट नाटस इलो वोलुप्टॅटेम ओडिट पर्सपिसियाटीस लॉडांटियम रेम डोलोरेमके टोटम वोलुप्टास. Voluptasdicta eaque beatae aperiam ut enim voluptatem explicabo explicabo, voluptas quia odit fugit accusantium totam totam architecto explicabo sit quasi fugit fugit, totam doloremque unde sunt sed dicta quae accusantium fugit voluptas nemo voluptas voluptatem rem quae aut veritatis quasi quae.
मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.
एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड. मेसेनास फॉसिबस मॉलिस इंटरडम. मोर्बी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस हांगाच्या वेस्टिबुलम.
बूटस्ट्रॅप लायब्ररी वांगडा जावास्क्रिप्ट एकठांय करप सुपर सोंपें आसा. सकयल आमी मुळाव्या गजालींचेर वतात आनी तुमकां सुरवात करपाक कांय अद्भुत प्लगइन दितात!
jQuery आनी Ender कडेन काम करपी नव्या सानुकूल प्लगइनांनी Bootstrap च्या कांय मुखेल घटकांक जिवीत हाडचें . तुमच्या खाशेल्या विकास गरजे प्रमाणें तांचे विस्तार आनी बदल करपाक आमी तुमकां प्रोत्साहन दितात.
उजो | वर्णन |
---|---|
बूटस्ट्रॅप-मोडल.जेएस | आमचें मोडल प्लगइन पारंपारीक मोडल जेएस प्लगइनाचेर सुपर स्लिम घेवप आसा! आमी ट्विटराचेर जाय आशिल्ली फकत उक्ती कार्यक्षमताय समाविष्ट करपाची खाशेली जतनाय घेतली. |
बूटस्ट्रॅप-अलर्ट.जेएस | सावधानताय प्लगइन हो इशाऱ्यांक लागींची कार्यक्षमताय जोडपा खातीर एक सुपर ल्हान वर्ग आसा. |
बूटस्ट्रॅप-ड्रॉपडावन.जेएस | हें प्लगइन बूटस्ट्रॅप टॉपबार वा टॅब केल्ल्या नेव्हिगेशनांत ड्रॉपडावन परस्पर क्रिया जोडपाखातीर आसा. |
बूटस्ट्रॅप-स्क्रॉलस्पाय.जेएस | ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारांत स्क्रोल स्थितीचेर आदारीत ऑटो अद्ययावत nav जोडपा खातीर आसा. |
बूटस्ट्रॅप-बटणां.जेएस | ScrollSpy प्लगइन बूटस्ट्रॅप टॉपबारांत स्क्रोल स्थितीचेर आदारीत ऑटो अद्ययावत nav जोडपा खातीर आसा. |
बूटस्ट्रॅप-टॅब.जेएस | थळाव्या सामुग्रींतल्यान सायकल करपा खातीर हें प्लगइन जलद, गतिशील टॅब आनी गोळी कार्यक्षमताय जोडटा. |
बूटस्ट्रॅप-ट्विप्सी.जेएस | जेसन फ्रेम हांणी बरयल्ल्या उत्कृश्ट jQuery.tipsy प्लगइनाचेर आदारीत; twipsy ही एक अद्ययावत आवृत्ती आसा, जी प्रतिमांचेर आदारीत ना, एनिमेशनां खातीर css3 वापरता, आनी थळाव्या शीर्षक सांठवण खातीर डेटा-गुणधर्म वापरता! |
बूटस्ट्रॅप-पोपोव्हर.जेएस | पॉपओवर प्लगइन तुमच्या ऍप्लिकेशनांत पॉपओव्हर जोडपाक एक सादें संवाद पुरवण करता. तो boostrap-twipsy.js प्लगइन विस्तारता, देखून तुमच्या प्रकल्पांत popovers समाविष्ट करतना ती फायल तशेंच हडपपाची खात्री करात! |
ना! बूटस्ट्रॅप पयली आनी सगळ्यांत म्हत्वाचें म्हणल्यार CSS लायब्ररी जावपाक तयार केला. ही जावास्क्रिप्ट समाविष्ट केल्ल्या शैलींचेर मुळावो परस्पर संवादात्मक थर पुरवण करता.
पूण, ज्या लोकांक जावास्क्रिप्टाची गरज आसा, तांकां बूटस्ट्रॅप जावास्क्रिप्टा वांगडा कशें एकठांय करप तें समजून घेवपाक आनी मुळाव्या कार्यक्षमतेक रोखडोच बेगीन, हलको पर्याय दिवपाक आमी वयर दिल्ले प्लगइन दिल्यात.
चड म्हायती खातीर आनी कांय लायव्ह डेमो पळोवपाक, उपकार करून आमचें प्लगइन दस्तावेजीकरण पान पळयात .
बूटस्ट्रॅप Preboot पासून तयार केल्लो , एक मुक्त-स्त्रोत पॅक मिक्सिन आनी चड- उणें Less च्या संयोजनांत वापरपाक , एक CSS प्रीप्रोसेसर जलद आनी सोप्या वेब विकासा खातीर.
आमी Bootstrap त Preboot कसो वापरला तें पळयात आनी तुमच्या फुडल्या प्रकल्पाचेर Less चालीक लावपाचें निवडल्यार तुमी ताचो वापर कसो करूंक शकतात तें पळयात.
तुमच्या ब्राउझरांत जावास्क्रिप्ट वरवीं Bootstrap च्या Less चड-उणें, मिक्सिन, आनी CSS त नेस्टिंग हांचो पुराय वापर करपाक हो पर्याय वापरात.
- <link rel = "स्टाइलशीट/उणें" href = "उणें/बूटस्ट्रॅप.उणें" माध्यम = "सगलें" />
- <script src = "जेएस / कमी-1.1.3.मिनिट.जेएस" ></script>
.js उपाय जाणवना? तुमी तुमचो कोड उपयोजीत करतना संकलित करपाक Less Mac ऍप्लिकेशन वापरून पळयात वा Node.js वापरात .
बूटस्ट्रॅपाचो भाग म्हूण ट्विटर बूटस्ट्रॅपांत कितें आस्पावलां ताचीं कांय खाशेलपणां हांगा दिल्यांत. डाउनलोड करपाक आनी चड जाणून घेवपाक Bootstrap संकेतथळार वा Github प्रकल्प पानाचेर वचचें.
तुमच्या CSS तकली दुखप मुक्त सांबाळपाक आनी अद्ययावत करपाक कमींतले चड-उणें परिपूर्ण आसात. जेन्ना तुमकां रंग मोल वा वारंवार वापरिल्लें मोल बदलपाचें आसा, तेन्ना तें एकाच सुवातेर अद्ययावत करात आनी तुमी सेट जाल्यात.
- // दुवे आसात
- @ लिंकरंग : # 8b59c2;
- @linkColorHover : काळोख ( @linkColor , 10 );
- // ग्रेज हें नांव
- @ काळो : # 000;
- @grayDark : हळदुवें करचें ( @काळो , 25 %);
- @gray : हळदुवें करचें ( @काळो , 50 %);
- @grayLight : हळदुवें करचें ( @काळो , 70 %);
- @grayLighter : हळुवार करप ( @काळो , 90 %);
- @ गोरो : # fff ;
- // उच्चार रंग
- @ निळें : # 08b5fb ;
- @ पाचवी : # 46a546 ;
- @ तांबडो : # 9d261d ;
- @ हळडुवें : # ffc40d ;
- @ संत्रे : # f89406 ;
- @ गुलाबी : # c3325f आनी ;
- @ जांभळा : # 7a43b6;
- // बेसलाइन ग्रिड
- @बेसफॉन्ट : 13px आनी ;
- @मूळ रेखा : 18px ;
/* ... */
CSS च्या सामान्य वाक्यरचनावांगडाच Less टिप्पणी करपाची आनीक एक शैलीय दिता .
- // ही एक टिप्पणी आसा
- /* हीय एक टिप्पणी */
मिक्सिन मुळाव्यान CSS खातीर समाविष्ट वा आंशिक आसात, जे तुमकां कोडाच्या ब्लॉकाक एकांत एकठांय करपाक परवानगी दितात. ते विक्रेत्या उपसर्ग गुणधर्मां खातीर बरे आसात जशे की box-shadow
, क्रॉस-ब्राउझर ग्रेडियेंट, फॉन्ट स्टॅक, आनी हेर. Bootstrap कडेन आशिल्ल्या मिक्सिनांचो नमुनो सकयल दिला.
- # फॉन्ट { 1 .
- हें . आशुलिपि ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- हें . sans - serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- font - family : "हेल्व्हेटिका न्यू" , हेल्व्हेटिका , एरियल , sans - serif ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- रेखा - उंचाय : @lineHeight ;
- } हें .
- ...
- } हें .
- # ग्रेडियेंट { 1 .
- ...
- हें . उभ्या ( @startColor : # 555, @endColor: # 333) {
- पार्श्वभूंय - रंग : @endColor ;
- पार्श्वभूंय - पुनरावृत्ती : पुनरावृत्ती - x ;
- पार्श्वभूंय - प्रतिमा : - khtml - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , पासून ( @startColor ), ते ( @endColor )); // कोंकणी करपी
- पार्श्वभूंय - प्रतिमा : - moz - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // एफएफ 3.6+ आसा
- पार्श्वभूंय - प्रतिमा : - ms - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // आयई10 हें
- पार्श्वभूंय - प्रतिमा : - वेबकिट - ग्रेडिएंट ( रेखीव , डावें वयर , डावें सकयल , रंग - थांब ( 0 %, @startColor ), रंग - थांब ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पार्श्वभूंय - प्रतिमा : - वेबकिट - रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 10+
- पार्श्वभूंय - प्रतिमा : - o - रेखीव - ग्रेडियेंट ( @startColor , @endColor ); // ओपेरा 11.10
- पार्श्वभूंय - प्रतिमा : रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // मानक हें
- } हें .
- ...
- } हें .
फॅन्सी घेयात आनी सकयल दिल्ल्या प्रमाणें लवचीक आनी बळिश्ट मिक्सिन तयार करपाक कांय गणित करात.
- // जाळीदारी
- @gridस्तंभ : 16 ;
- @gridस्तंभरुंदी : 40px ;
- @gridगटररुंदी : 20px ;
- @siteWidth : ( @gridColumns * @gridColumnWidth ) + ( @gridGutterWidth * ( @ग्रिडस्तंभ - 1 ));
- // कांय स्तंभ तयार करात
- हें . स्तंभ ( @columnSpan : 1 ) { 1 .
- width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @स्तंभविस्तार - 1 ));
- } हें .
/lib/ त फायली बदलल्या उपरांत .less
, bootstrap-*.*.*.css आनी bootstrap-*.*.*.min.css फायली परतून तयार करपाखातीर तुमकां त्यो परतून संकलित करच्यो पडटल्यो. तुमी GitHub कडेन पुल विनंती सादर करतात जाल्यार, तुमी सदांच परतून संकलित करपाक जाय.
पद्दत | पावलां पावलां |
---|---|
मेकफायल आशिल्ली नोड | सकयल दिल्लो आदेश चालीक लावून npm कडेन less आदेश ओळ संकलक प्रतिष्ठापीत करात: $ npm lessc स्थापन करचें एकदां प्रतिष्ठापीत केल्या उपरांत फकत ते भायर, तुमचे कडेन watchr |
जावास्क्रिप्ट | नवीनतम Less.js डावनलोड करात आनी ताचो मार्ग (आनी Bootstrap) हातूंत समाविष्ट करात
.less फायली परतून संकलित करपाक, फकत तीं जतनाय घेयात आनी तुमचें पान परतून लोड करात. Less.js तांकां संकलित करता आनी थळाव्या सांठवणेंत सांठयता. |
आदेश ओळ | तुमचे कडेन पयलींच less आदेश ओळी साधन प्रतिष्ठापीत आसल्यार, फकत सकयल दिल्लो आदेश चालीक लावचो: $ lessc ./lib/bootstrap.less > बूटस्ट्रॅप.css
|
कमी मॅक अॅप | अनधिकृत Mac ऍप्लिकेशन .less फायलींच्यो निर्देशिका पळयता आनी पळयल्ल्या .less फायलीन दरेक सेव्ह केल्या उपरांत कोड थळाव्या फायलींनी संकलित करता. तुमकां आवडल्यार, तुमी स्वयंचलित ल्हान करपा खातीर ऍप्लिकेशनांत प्राधान्यां टॉगल करूंक शकतात आनी संकलित फायली खंयच्या निर्देशिकेंत सोंपतात. |