एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला। मेसेनास फौसिबस मोलिस इंटरडम के नाम से जानल जाला। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप ट्विटर के एगो टूलकिट हवे जे वेबएप आ साइट सभ के बिकास के किकस्टार्ट करे खातिर बनावल गइल बा।
एह में टाइपोग्राफी, फॉर्म, बटन, टेबल, ग्रिड, नेविगेशन आ अउरी बहुत कुछ खातिर बेस सीएसएस आ एचटीएमएल शामिल बा।
नेर्ड अलर्ट: बूटस्ट्रैप के लेस के संगे बनावल गईल बा अवुरी एकरा के आधुनिक ब्राउज़र के ध्यान में राखत गेट से बाहर काम करे खाती बनावल गईल बा।
सबसे जल्दी आ आसान शुरुआत खातिर बस एह स्निपेट के अपना वेबपेज में कॉपी करीं.
कम के इस्तेमाल करे के एगो प्रशंसक? कवनो दिक्कत नइखे, बस रेपो के क्लोन करीं आ ई लाइन जोड़ीं:
गिथब पर आधिकारिक बूटस्ट्रैप रेपो के साथ डाउनलोड, कांटा, पुल, फाइल मुद्दा, आ अउरी बहुत कुछ।
फिलहाल v1.3.0 बा
ट्विटर के इंजीनियर ऐतिहासिक रूप से लगभग कवनो लाइब्रेरी के इस्तेमाल कईले बाड़े, जवना से उ लोग परिचित रहले, ताकि फ्रंट-एंड के जरूरत के पूरा कईल जा सके। बूटस्ट्रैप के शुरुआत ओह चुनौतियन के जवाब के रूप में भइल जवन पेश करत रहे. कई गो लाजवाब लोग के मदद से बूटस्ट्रैप में काफी बढ़ोतरी भईल बा।
dev.twitter.com पर अउरी पढ़ीं ›
बूटस्ट्रैप के परीक्षण आ सपोर्ट क्रोम, सफारी, इंटरनेट एक्सप्लोरर, आ फायरफॉक्स नियर प्रमुख आधुनिक ब्राउजर सभ में कइल जाला।
बूटस्ट्रैप संकलित सीएसएस, बिना संकलित, आ उदाहरण टेम्पलेट सभ के साथ पूरा तरीका से आवे ला।
बूटस्ट्रैप के हिस्सा के रूप में दिहल गइल डिफ़ॉल्ट ग्रिड सिस्टम 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 ग्रिड सिस्टम के अनुकूलित करे खातिर मुट्ठी भर चर बनावल गइल बा। तनी अनुकूलन से रउआ कॉलम के साइज, ओकर गटर, आ जवना कंटेनर में ऊ रहेला, ओकरा में बदलाव कर सकेनी।
ग्रिड सिस्टम के संशोधित करे खातिर जवन चर के जरूरत बा ऊ वर्तमान में सभे preboot.less
.
चर के रूप में बा | डिफ़ॉल्ट मान बा | बिबरन |
---|---|---|
@gridColumns |
16 के बा | ग्रिड के भीतर कॉलम के संख्या |
@gridColumnWidth |
40px के बा | ग्रिड के भीतर हर कॉलम के चौड़ाई |
@gridGutterWidth |
20px के बा | हर कॉलम के बीच के नकारात्मक स्थान |
@siteWidth |
सभ कॉलम आ गटर के योग के गणना कइल गइल | हमनी के कुछ बेसिक मैच के इस्तेमाल कॉलम आ गटर के संख्या गिने खातिर करेनी जा आ .fixed-container() मिक्सिन के चौड़ाई सेट करेनी जा। |
ग्रिड के संशोधित करे के मतलब होला तीनों @grid-*
चर के बदलल आ लेस फाइल सभ के फिर से संकलित कइल।
बूटस्ट्रैप 24 गो कॉलम तक के ग्रिड सिस्टम के संभाले खातिर सुसज्जित बा; डिफ़ॉल्ट बस 16. इहाँ बतावल गइल बा कि राउर ग्रिड चर 24 कॉलम वाला ग्रिड खातिर अनुकूलित कइसे लउकी.
- @gridColumns : 24 के बा ;
- @gridColumnWidth : 20px के बा;
- @gridGutterWidth : 20px के बा;
एक बेर रिकंपाइल हो गइला का बाद रउरा सेट हो जाईं!
डिफ़ॉल्ट आ सरल 940px-चौड़ाई, केंद्रित लेआउट बस लगभग कवनो वेबसाइट भा पन्ना खातिर एकल द्वारा उपलब्ध करावल गइल बा <div.container>
।
- <शरीर> के बा
- <div वर्ग = "कंटेनर" > के बा
- ...
- </div> के बा
- </body> के बा
न्यूनतम- आ अधिकतम-चौड़ाई आ बाईं ओर के साइडबार वाला एगो वैकल्पिक, लचीला द्रव पन्ना संरचना। ऐप आ डॉक्स खातिर बढ़िया बा.
- <शरीर> के बा
- <div वर्ग = "कंटेनर-द्रव" > बा
- <div वर्ग = "साइडबार" > के बा
- ...
- </div> के बा
- <div वर्ग = "सामग्री" > बा
- ...
- </div> के बा
- </div> के बा
- </body> के बा
अपना वेबपन्ना के संरचना खातिर एगो मानक टाइपोग्राफिक पदानुक्रम।
पूरा टाइपोग्राफिक ग्रिड हमनी के preboot.less फाइल में दू गो Less चर पर आधारित बा: @basefont
आ @baseline
. पहिला बेस फॉन्ट-साइज के पूरा में इस्तेमाल कइल गइल बा आ दूसरा बेस लाइन-हाईट बा।
हमनी के ओह चर के इस्तेमाल करेनी जा, आ कुछ गणित के, अपना सगरी टाइप आ अउरी बहुत कुछ के मार्जिन, पैडिंग, आ लाइन-हाइट बनावे खातिर.
नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नरे वेल ईउ लियो। सह सोसाइटिस नाटोक पेनाटिबस एट मैग्निस डिस प्रसव मोंटेस, नास्केटर रिडिकुलस मस। नुल्लम आईडी डोलोर आईडी निभ उल्ट्रिसीस वेहिकुला उत आईडी अभिजात वर्ग।
जोर, पता, & संक्षिप्त नाम के प्रयोग कइल जाला
<strong>
<em>
<address>
<abbr>
जोर टैग ( <strong>
आ <em>
) के इस्तेमाल कौनों शब्द भा वाक्यांश के आसपास के कॉपी के सापेक्ष एकरे अतिरिक्त महत्व भा जोर के संकेत देवे खातिर कइल जाय। <strong>
महत्व <em>
खातिर आ तनाव पर जोर देबे खातिर इस्तेमाल करीं .
फ्यूसे दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बइठ अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम के नाम से जानल जाला। नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग।
नोट:<b>
HTML5 में आ टैग सभ के इस्तेमाल अबहिन ले ठीक बा <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>
दू गो साधारण टैग के साथ स्टाइल में आपन कोड पिंप करीं। जावास्क्रिप्ट के माध्यम से अवुरी जादे भयानकता खाती गूगल के कोड prettify लाइब्रेरी में ड्रॉप करीं अवुरी आप सेट हो जाईब।
कोड, इनलाइन के ब्लॉक भा बस स्निपेट, बस सही टैग में लपेट के स्टाइल के साथ देखावल जा सके ला। कई लाइन सभ पर बिस्तार वाला कोड के ब्लॉक सभ खातिर, <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> |
सूचना |
कम एचटीएमएल फुटप्रिंट आ न्यूनतम शैली वाला पन्ना सभ पर अलग-अलग साइज के थंबनेल सभ के देखावल जाय।
में थंबनेल .media-grid
कौनों भी साइज के हो सके ला, बाकी ई सभसे नीक काम करे लें जब सीधे बिल्ट-इन बूटस्ट्रैप ग्रिड सिस्टम में मैप कइल जाय। 90, 210, आ 330 नियर छवि के चौड़ाई कुछ पिक्सेल के पैडिंग के साथ मिल के .span2
, .span4
, आ .span6
कॉलम के साइज के बराबर हो जाला।
मीडिया ग्रिड सभ के इस्तेमाल आसान होला आ मार्कअप साइड पर बल्कि सरल होला। इनहन के आयाम बिशुद्ध रूप से शामिल बिम्ब सभ के साइज के आधार पर होला।
- <ul class = "मीडिया-ग्रिड" > के बा
- <ली> के बा
- <a href = "#" > के बा
- <img class = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" > बा
- </a> के बा
- </li> के बा
- <ली> के बा
- <a href = "#" > के बा
- <img class = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" > बा
- </a> के बा
- </li> के बा
- </ul> के बा
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
टेबल बहुत बढ़िया होला-बहुत कुछ खातिर। हालाँकि, बढ़िया टेबल सभ के उपयोगी, स्केल करे लायक, आ पठनीय (कोड स्तर पर) होखे खातिर मार्कअप प्यार के बिट के जरूरत होला। मदद करे खातिर कुछ टिप्स दिहल जा रहल बा।
हमेशा अपना कॉलम हेडर के <thead>
अइसन लपेटीं कि पदानुक्रम <thead>
> <tr>
> <th>
होखे .
कॉलम हेडर के समान, आपके टेबल के सभ बॉडी कंटेंट के एगो में लपेटल जाए के चाही <tbody>
ताकि आपके हायरर्की <tbody>
> <tr>
> <td>
होखे।
सभ टेबल सभ के खाली जरूरी सीमा सभ के साथ स्वचालित रूप से स्टाइल कइल जाई ताकि पठनीयता सुनिश्चित कइल जा सके आ संरचना के बनावे रखल जा सके। अतिरिक्त क्लास भा एट्रिब्यूट जोड़ला के जरूरत नइखे.
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | भाखा |
---|---|---|---|
1 के बा | कुछु | एगो | अंगरेजी |
2 के बा | जो के बा | सिक्सपैक के बा | अंगरेजी |
3 के बा | स्टू के बा | डेंट हो गइल | कोड के बा |
- <टेबल> के बा
- ...
- </table> के बा
ज़ेबरा-स्ट्राइपिंग जोड़ के अपना टेबल के साथ तनी फैंसी बनाईं-बस .zebra-striped
क्लास जोड़ीं।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | भाखा |
---|---|---|---|
1 के बा | कुछु | एगो | अंगरेजी |
2 के बा | जो के बा | सिक्सपैक के बा | अंगरेजी |
3 के बा | स्टू के बा | डेंट हो गइल | कोड के बा |
नोट: ज़ेबरा-स्ट्राइपिंग एगो प्रोग्रेसिव एन्हांसमेंट हवे जे IE8 आ नीचे नियर पुरान ब्राउजर सभ खातिर उपलब्ध नइखे।
- <तालिका वर्ग = "ज़ेबरा-धारीदार" > बा
- ...
- </table> के बा
पिछला उदाहरण लेके हमनी के jQuery आ Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता उपलब्ध करा के अपना टेबल के उपयोगिता में सुधार करेनी जा। सॉर्ट बदले खातिर कवनो कॉलम के हेडर पर क्लिक करीं।
# भोजपुरी में पढ़ें: | पहिला नांव | अंतिम नाम | भाखा |
---|---|---|---|
2 के बा | जो के बा | सिक्सपैक के बा | अंगरेजी |
3 के बा | स्टू के बा | डेंट हो गइल | कोड के बा |
1 के बा | तोहार | एगो | अंगरेजी |
- <स्क्रिप्ट src = "जेएस/जेक्वेरी/जेक्वेरी.टेबलसॉर्टर.मिन.जेएस" ></स्क्रिप्ट>
- <स्क्रिप्ट > के बा
- $ ( फंक्शन () के बा { .
- $ ( "तालिका # सॉर्टटेबलउदाहरण" ) के बा। टेबलसॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- }) के बा;
- </script> के बा
- <तालिका वर्ग = "ज़ेबरा-धारीदार" > बा
- ...
- </table> के बा
सभ फार्म सभ के डिफ़ॉल्ट स्टाइल दिहल गइल बा जेह से कि इनहन के पठनीय आ स्केल करे लायक तरीका से पेश कइल जा सके। टेक्स्ट इनपुट, सिलेक्ट लिस्ट, टेक्स्टएरिया, रेडियो बटन आ चेकबॉक्स, आ बटन खातिर स्टाइल दिहल गइल बा।
अपना फॉर्म के एचटीएमएल में जोड़ दीं .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 वर्ग = "सचेतक-क्रिया" > बा
- <a class = "btn small" href = "#" > ई कार्रवाई करीं </a> <a class = "btn small" href = "#" > या ई करीं </a>
- </div> के बा
- </div> के बा
मोडल-संवाद भा लाइटबॉक्स- अइसन स्थिति सभ में संदर्भ क्रिया सभ खातिर बहुत बढ़िया होलें जहाँ ई जरूरी होखे कि पृष्ठभूमि संदर्भ के रखरखाव कइल जाय।
एगो महीन शरीर के...
ट्विप्सी एगो भ्रमित उपयोगकर्ता के सहायता करे आ ओकरा के सही दिशा में इशारा करे खातिर सुपर उपयोगी होला।
लोरेम इप्सम डॉलर सिट अमेट इलो त्रुटि इप्सम वेरिटाटिस ऑट इस्टे परस्पिसियाटिस इस्टे वोलुप्टास नेटस इलो क्वासी ओडिट औट नेटस कंसेक्यून्टूर कंसेक्यून्टूर, औट नेटस इलो वोलुप्टेटेम ओडिट परस्पिसिएटिस लौडांटियम रेम डोलोरेमके टोटम वोलुप्टास। वोलुप्टासडिक्टा ईएके बीटाए एपेरिअम उट एनिम वोलुप्टेटेम एक्सप्लिकेबो एक्सप्लिकेबो, वोलुप्टास क्विआ ओडिट फ्यूजिट एक्यूसैंटियम टोटम टोटम आर्किटेक्टो एक्सप्लिकेबो सिट क्वासी फ्यूजिट फ्यूजिट, टोटम डोलोरेमके उंडे सुंट सेड डिक्टा क्वे एक्यूसेंटियम फ्यूजिट वोलुप्टास निमो वोलुप्टास वोलुप्टेटेम रेम क्वाए ऑटो वेरिटाटिस क्वासी क्वाई।
लेआउट के प्रभावित कइले बिना कौनों पन्ना के उपपाठ जानकारी देवे खातिर पॉपओवर सभ के इस्तेमाल करीं।
एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला। मेसेनास फौसिबस मोलिस इंटरडम के नाम से जानल जाला। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेतुर एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप लाइब्रेरी के संगे जावास्क्रिप्ट के एकीकृत कईल सुपर आसान बा। नीचे हमनी के मूल बातन पर जानी जा आ रउआ के कुछ भयानक प्लगइन उपलब्ध करावत बानी जा जवना से रउआ शुरू हो सके!
बूटस्ट्रैप के कुछ प्राथमिक घटक के नया कस्टम प्लगइन के साथ जीवन में ले आईं जवन jQuery आ Ender के साथ काम करेला । हम रउआँ के प्रोत्साहित करत बानी कि रउआँ के विशिष्ट विकास जरूरतन के अनुरूप इनहन के विस्तार आ संशोधन करीं।
फाइल | बिबरन |
---|---|
बूटस्ट्रैप-मोडल.जेएस के बा | हमनी के मोडल प्लगइन पारंपरिक मोडल जेएस प्लगइन पर एगो सुपर स्लिम ले बा! हमनी के विशेष ध्यान रहे कि सिर्फ उहे नंगे कार्यक्षमता शामिल कईल जाए, जवना के हमनी के ट्विटर प जरूरत बा। |
बूटस्ट्रैप-अलर्टस.जेएस के बा | अलर्ट प्लगइन अलर्ट में क्लोज फंक्शनलिटी जोड़े खातिर एगो सुपर टिनी क्लास ह। |
बूटस्ट्रैप-ड्रॉपडाउन.जेएस के बा | ई प्लगइन बूटस्ट्रैप टॉपबार भा टैब कइल नेविगेशन सभ में ड्रॉपडाउन इंटरैक्शन जोड़े खातिर बा। |
बूटस्ट्रैप-स्क्रॉलस्पाई.जेएस के बा | स्क्रॉलस्पाई प्लगइन बूटस्ट्रैप टॉपबार में स्क्रॉल पोजीशन के आधार पर ऑटो अपडेटिंग नेव जोड़ल खातिर बा। |
बूटस्ट्रैप-टैब.जेएस के बा | ई प्लगइन स्थानीय सामग्री के माध्यम से साइकिल चलावे खातिर त्वरित, गतिशील टैब आ गोली के कार्यक्षमता जोड़ देला। |
बूटस्ट्रैप-ट्विप्सी.जेएस के बा | जेसन फ्रेम द्वारा लिखल बेहतरीन jQuery.tipsy प्लगइन के आधार पर; twipsy एगो अपडेट कइल संस्करण हवे, जवन छवि सभ पर निर्भर ना होला, एनीमेशन खातिर css3 के इस्तेमाल करे ला, आ लोकल टाइटिल स्टोरेज खातिर डेटा-एट्रिब्यूट सभ के इस्तेमाल करे ला! |
बूटस्ट्रैप-पोपोवर.जेएस के बा | पॉपओवर प्लगइन आपके एप्लीकेशन में पॉपओवर जोड़े खातिर एगो सरल इंटरफेस प्रदान करेला। ई boostrap-twipsy.js प्लगइन के विस्तार देला, एहसे अपना प्रोजेक्ट में पोपोवर शामिल करत घरी ओह फाइल के भी जरूर हड़प लीं! |
ना! बूटस्ट्रैप के सभसे पहिले आ सभसे खास बात ई सीएसएस लाइब्रेरी होखे खातिर डिजाइन कइल गइल बा। ई जावास्क्रिप्ट शामिल शैली सभ के ऊपर एगो बेसिक इंटरएक्टिव लेयर उपलब्ध करावे ला।
हालांकि, जेकरा जावास्क्रिप्ट के जरूरत बा, ओकरा खातिर हमनी के ऊपर दिहल प्लगइन उपलब्ध करवले बानी जा, जवना से रउआ इ समझे में मदद मिली कि बूटस्ट्रैप के जावास्क्रिप्ट के संगे कईसे एकीकृत कईल जा सकता अवुरी रउआ के तुरंत बेसिक फंक्शनलिटी खाती एगो त्वरित, हल्का विकल्प दिहल जाई।
अधिक जानकारी खातिर आ कुछ लाइव डेमो देखे खातिर, कृपया हमनी के प्लगइन दस्तावेजीकरण पन्ना देखल जाय ।
बूटस्ट्रैप के निर्माण प्रीबूट के साथ कइल गइल , मिक्सिन आ चर सभ के एगो ओपन-सोर्स पैक जेकर इस्तेमाल लेस के साथ कइल जा सके ला , ई तेजी से आ आसान वेब बिकास खातिर एगो सीएसएस प्रीप्रोसेसर हवे।
देखीं कि हमनी का बूटस्ट्रैप में प्रीबूट के कइसे इस्तेमाल कइनी जा आ अगर रउरा अपना अगिला प्रोजेक्ट पर लेस चलावे के चुनीं त एकर इस्तेमाल कइसे कर सकीलें.
अपना ब्राउजर में जावास्क्रिप्ट के माध्यम से बूटस्ट्रैप के लेस वैरिएबल, मिक्सिन, आ सीएसएस में नेस्टिंग के पूरा इस्तेमाल करे खातिर एह विकल्प के इस्तेमाल करीं.
- <link rel = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सब" />
- <script src = "जेएस/कम-1.1.3.मिनट.जेएस" ></स्क्रिप्ट> के बा
.js समाधान महसूस नइखीं करत? लेस मैक ऐप के आजमाईं भा जब रउरा आपन कोड तैनात करीं त संकलित करे खातिर Node.js के इस्तेमाल करीं.
बूटस्ट्रैप के हिस्सा के रूप में ट्विटर बूटस्ट्रैप में जवन कुछ शामिल बा ओकर कुछ खास बात इहाँ दिहल बा। डाउनलोड करे आ अउरी जाने खातिर बूटस्ट्रैप वेबसाइट भा गिथब प्रोजेक्ट पन्ना पर जाईं.
कम में चर आपके सीएसएस सिरदर्द मुक्त बनाए रखे आ अपडेट करे खातिर एकदम सही बा। जब रउआँ कवनो रंग मान भा अक्सर इस्तेमाल होखे वाला मान बदलल चाहत बानी त ओकरा के एक जगह अपडेट करीं आ रउआँ सेट हो जाईं।
- // लिंक दिहल गइल बा
- @linkColor : # 8b59c2 के बा;
- @linkColorHover : अंधेरा हो जाला ( @linkColor , 10 );
- // ग्रेज के बा
- @काला : # 000 के बा;
- @grayDark : हल्का करीं ( @काला , 25 %);
- @ ग्रे : हल्का करीं ( @ काला , 50 %);
- @grayLight : हल्का करीं ( @काला , 70 %);
- @grayLighter : हल्का करीं ( @काला , 90 %);
- @गोरा : #fff के बा;
- // लहजा के रंग के बा
- @ नीला : # 08b5fb के बा ;
- @ हरियर : # 46a546 के बा ;
- @लाल : # 9d261d के बा ;
- @ पीला : # ffc40d के बा ;
- @ नारंगी : # f89406 के बा ;
- @ गुलाबी : # c3325f के बा ;
- @ बैंगनी : # 7a43b6 के बा ;
- // बेसलाइन ग्रिड के बा
- @बेसफॉन्ट : 13px के बा ;
- @ बेसलाइन : 18px के बा ;
/* ... */
कम सीएसएस के सामान्य सिंटैक्स के अलावा टिप्पणी करे के एगो अउरी शैली भी उपलब्ध करावे ला ।
- // ई एगो टिप्पणी बा
- /* ईहो एगो टिप्पणी बा */
मिक्सिन मूल रूप से सीएसएस खातिर शामिल भा आंशिक होलें, एह से रउआँ कोड के एगो ब्लॉक के एक में जोड़ सके लीं। ई विक्रेता उपसर्ग वाला गुण जइसे कि box-shadow
, क्रॉस-ब्राउजर ढाल, फॉन्ट स्टैक, आ अउरी बहुत कुछ खातिर बढ़िया बाड़ें। नीचे ओह मिक्सिन के नमूना दिहल गइल बा जवन बूटस्ट्रैप के संगे शामिल बा।
- # फॉन्ट { 1000 के बा।
- . आशुलिपि ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {
- फॉन्ट - आकार : @ आकार के बा ;
- फॉन्ट - वजन : @ वजन के बा ;
- लाइन - ऊँचाई : @ लाइन के ऊँचाई ;
- } के बा।
- . sans - serif ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {
- फॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सैंस - सेरिफ ;
- फॉन्ट - आकार : @ आकार के बा ;
- फॉन्ट - वजन : @ वजन के बा ;
- लाइन - ऊँचाई : @ लाइन के ऊँचाई ;
- } के बा।
- ...
- } के बा।
- # ढाल { के बा।
- ...
- . ऊर्ध्वाधर ( @ शुरू रंग : # 555, @ अंत रंग: # 333) { 1।
- पृष्ठभूमि - रंग : @endColor ;
- पृष्ठभूमि - दोहरावे के : दोहरावे के - x ;
- पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाईं ओर ऊपर , बाएं नीचे , ( @startColor ) से , ( @endColor )) तक; // कंक्वेर के बा
- पृष्ठभूमि - छवि : - मोज़ - रैखिक - ढाल ( @ startColor , @endColor ); // एफएफ 3.6+ के बा
- पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( @ startColor , @endColor ); // आईई10 के बा
- पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , बाएं नीचे , रंग - बंद ( 0 %, @ startColor ), रंग - बंद ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+ के बा
- पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @ startColor , @endColor ); // सफारी 5.1+, क्रोम 10+ बा
- पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( @ startColor , @endColor ); // ओपेरा 11.10 के बा
- पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानक के बा
- } के बा।
- ...
- } के बा।
फैंसी होखीं आ कुछ गणित करीं जेहसे कि नीचे दिहल जइसन लचीला आ शक्तिशाली मिक्सिन पैदा कइल जा सके.
- // ग्रिडिट्यूड के बा
- @gridColumns : 16 के बा ;
- @gridColumnWidth : 40px के बा ;
- @gridGutterWidth : 20px के बा;
- @साइटविड्थ : ( @ ग्रिडकॉलम * @ ग्रिडकॉलमविड्थ ) + ( @ ग्रिडगटरविड्थ * ( @ ग्रिडकॉलम - 1 ));
- // कुछ कॉलम बनाईं
- . कॉलम ( @columnSpan : 1 ) { के बा।
- चौड़ाई : ( @ ग्रिडकॉलमविड्थ * @ कॉलमस्पैन ) + ( @ ग्रिडगटरविड्थ * ( @ कॉलमस्पैन - 1 ));
- } के बा।
/lib/ में फाइल सभ के संशोधित कइला के बाद .less
, रउआँ के bootstrap-*.*.*.css आ bootstrap-*.*.*.min.css फाइल सभ के रिजनरेट करे खातिर इनहन के फिर से संकलित करे के पड़ी। अगर रउआँ गिटहब में पुल अनुरोध जमा कर रहल बानी, त रउआँ के हमेशा रिकंपाइल करे के पड़ी।
विधि | कदम उठावे के बा |
---|---|
मेकफाइल के साथ नोड बा | निम्नलिखित कमांड चला के npm के साथ less कमांड लाइन कंपाइलर इंस्टॉल करीं: $ npm lessc के इंस्टॉल करीं एक बेर इंस्टॉल हो गइला का बाद बस एकरे अलावा, अगर रउआँ लगे watchr इंस्टॉल बा, त रउआँ |
जावास्क्रिप्ट के बा | नवीनतम Less.js डाउनलोड करीं आ एकरा खातिर रास्ता (आ बूटस्ट्रैप) के
.less फाइल सभ के दोबारा संकलित करे खातिर, बस इनहन के सेव करीं आ आपन पन्ना के रिलोड करीं। Less.js इनहन के संकलित करे ला आ लोकल स्टोरेज में स्टोर करे ला। |
कमांड लाइन के बा | अगर रउआँ लगे पहिले से कम कमांड लाइन टूल इंस्टॉल बा, त बस निम्नलिखित कमांड चलाईं: $ lessc ./lib/bootstrap.less > बूटस्ट्रैप.सीएसएस के बा
|
कम मैक ऐप बा | अनऑफिसियल मैक ऐप .less फाइल के डाइरेक्टरी के देखत बा अवुरी देखल गईल .less फाइल के हर सेव के बाद कोड के स्थानीय फाइल में संकलित करेला। अगर रउरा चाहत बानी त रउरा ऐप में पसंद के टॉगल क के ऑटोमैटिक मिनिफाइंग कर सकेनी आ संकलित फाइल कवना डाइरेक्टरी में खतम हो जाला. |