इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। मेकेनास फॉसीबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेटूर एसी, वेस्टिबुलम और एरोस।
बूटस्ट्रैप ट्विटर का एक टूलकिट है जिसे वेबएप्स और साइटों के विकास को किकस्टार्ट करने के लिए डिज़ाइन किया गया है।
इसमें टाइपोग्राफी, फॉर्म, बटन, टेबल, ग्रिड, नेविगेशन आदि के लिए बेस सीएसएस और एचटीएमएल शामिल हैं।
बेवकूफ चेतावनी: बूटस्ट्रैप कम के साथ बनाया गया है और आधुनिक ब्राउज़रों को ध्यान में रखते हुए गेट से बाहर काम करने के लिए डिज़ाइन किया गया था।
सबसे तेज़ और आसान शुरुआत के लिए, बस इस स्निपेट को अपने वेबपेज में कॉपी करें।
कम उपयोग करने का प्रशंसक? कोई बात नहीं, बस रेपो को क्लोन करें और इन पंक्तियों को जोड़ें:
जीथब पर आधिकारिक बूटस्ट्रैप रेपो के साथ डाउनलोड, फोर्क, पुल, फाइल इश्यू और बहुत कुछ।
वर्तमान में v1.3.0
ट्विटर पर इंजीनियरों ने ऐतिहासिक रूप से लगभग किसी भी पुस्तकालय का उपयोग किया है जिससे वे परिचित थे ताकि फ्रंट-एंड आवश्यकताओं को पूरा किया जा सके। बूटस्ट्रैप प्रस्तुत चुनौतियों के उत्तर के रूप में शुरू हुआ। कई भयानक लोगों की मदद से, बूटस्ट्रैप काफी बढ़ गया है।
Dev.twitter.com पर और पढ़ें ›
बूटस्ट्रैप का परीक्षण और समर्थन क्रोम, सफारी, इंटरनेट एक्सप्लोरर और फ़ायरफ़ॉक्स जैसे प्रमुख आधुनिक ब्राउज़रों में किया जाता है।
बूटस्ट्रैप संकलित सीएसएस, असम्पीडित और उदाहरण टेम्पलेट्स के साथ पूरा होता है।
बूटस्ट्रैप के हिस्से के रूप में प्रदान किया गया डिफ़ॉल्ट ग्रिड सिस्टम एक 940px चौड़ा 16-कॉलम ग्रिड है। यह लोकप्रिय 960 ग्रिड सिस्टम का स्वाद है, लेकिन बाईं और दाईं ओर अतिरिक्त मार्जिन/पैडिंग के बिना।
जैसा कि यहां दिखाया गया है, एक बुनियादी लेआउट दो "कॉलम" के साथ बनाया जा सकता है, जिनमें से प्रत्येक में हमारे ग्रिड सिस्टम के हिस्से के रूप में परिभाषित 16 मूलभूत स्तंभों की संख्या होती है। अधिक विविधताओं के लिए नीचे दिए गए उदाहरण देखें।
- <div वर्ग = "पंक्ति" >
- <div class = "span6" >
- ...
- </div>
- <div class = "span10" >
- ...
- </div>
- </div>
अपनी सामग्री को नेस्ट करें यदि आपको .row
किसी मौजूदा कॉलम के भीतर बनाना है।
- <div वर्ग = "पंक्ति" >
- <div class = "span12" >
- कॉलम का स्तर 1
- <div वर्ग = "पंक्ति" >
- <div class = "span6" >
- लेवल 2
- </div>
- <div class = "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 class = "कंटेनर-तरल पदार्थ" >
- <div क्लास = "साइडबार" >
- ...
- </div>
- <div वर्ग = "सामग्री" >
- ...
- </div>
- </div>
- </body>
आपके वेबपृष्ठों की संरचना के लिए एक मानक टाइपोग्राफ़िक पदानुक्रम।
संपूर्ण टाइपोग्राफ़िक ग्रिड हमारी preboot.less फ़ाइल में दो कम चरों पर आधारित है: @basefont
और @baseline
. पहला आधार फ़ॉन्ट-आकार का उपयोग किया जाता है और दूसरा आधार रेखा-ऊंचाई है।
हम अपने सभी प्रकार के मार्जिन, पैडिंग और लाइन-ऊंचाई बनाने के लिए उन चर, और कुछ गणित का उपयोग करते हैं।
नुलम क्विस रिसस एगेट उरना मोलिस ऑर्नारे वेल यू लियो। कम समाज नाटोक पेनटिबस एट मैग्नीस डिस पार्ट्युरिएंट मोंटेस, नैसेटुर रिडिकुलस मस। Nullam id dolor id nibh ultricies vehicula ut id elit.
जोर, पते और संक्षिप्ताक्षरों का उपयोग करना
<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>
- <छोटा> डॉ जूलियस हिबर्ट </ छोटा>
- </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
किसी भी आकार के हो सकते हैं, लेकिन जब वे सीधे अंतर्निहित बूटस्ट्रैप ग्रिड सिस्टम में मैप किए जाते हैं तो वे सबसे अच्छा काम करते हैं। छवि की चौड़ाई जैसे 90, 210, और 330 पैडिंग के कुछ पिक्सेल के साथ .span2
, .span4
, और .span6
कॉलम आकार के बराबर हो जाती है।
मीडिया ग्रिड का उपयोग करना आसान है और मार्कअप पक्ष पर सरल है। उनके आयाम विशुद्ध रूप से शामिल छवियों के आकार पर आधारित हैं।
- <ul class = "मीडिया-ग्रिड" >
- <ली>
- <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 | कुछ | एक | अंग्रेज़ी |
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
- <तालिका>
- ...
- </तालिका>
ज़ेबरा-स्ट्रिपिंग जोड़कर अपनी टेबल के साथ थोड़ा फैंसी प्राप्त करें-बस .zebra-striped
कक्षा जोड़ें।
# | पहला नाम | उपनाम | भाषा |
---|---|---|---|
1 | कुछ | एक | अंग्रेज़ी |
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
नोट: ज़ेबरा-स्ट्रिपिंग एक प्रगतिशील एन्हांसमेंट है जो IE8 और उससे नीचे के पुराने ब्राउज़रों के लिए उपलब्ध नहीं है।
- <टेबल क्लास = "ज़ेबरा-स्ट्राइप्ड" >
- ...
- </तालिका>
पिछले उदाहरण को लेते हुए, हम jQuery और Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता प्रदान करके अपनी तालिकाओं की उपयोगिता में सुधार करते हैं। क्रम बदलने के लिए किसी भी स्तंभ के शीर्षलेख पर क्लिक करें.
# | पहला नाम | उपनाम | भाषा |
---|---|---|---|
2 | जो | छह पैक | अंग्रेज़ी |
3 | स्टू | काटने का निशान | कोड |
1 | तुम्हारी | एक | अंग्रेज़ी |
- <स्क्रिप्ट src = "js/jquery/jquery.tablesorter.min.js" ></script>
- <स्क्रिप्ट >
- $ ( फ़ंक्शन () {
- $ ( "टेबल # सॉर्टटेबल उदाहरण" )। टेबललेटर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- });
- </स्क्रिप्ट>
- <टेबल क्लास = "ज़ेबरा-स्ट्राइप्ड" >
- ...
- </तालिका>
सभी रूपों को पठनीय और मापनीय तरीके से प्रस्तुत करने के लिए डिफ़ॉल्ट शैलियाँ दी गई हैं। टेक्स्ट इनपुट, चुनिंदा सूचियां, टेक्स्ट क्षेत्र, रेडियो बटन और चेकबॉक्स, और बटन के लिए शैलियाँ प्रदान की जाती हैं।
अपने फ़ॉर्म के 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 class = "अलर्ट-मैसेज वार्निंग" >
- <a class = "करीब" href = "#" > × </a>
- <p><strong> पवित्र guacamole! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं। </p>
- </div>
.alert-message.block-message
उन संदेशों के लिए जिनके लिए कुछ स्पष्टीकरण की आवश्यकता होती है, हमारे पास अनुच्छेद शैली अलर्ट हैं। ये लंबे समय तक त्रुटि संदेशों को बुदबुदाते हुए, किसी लंबित कार्रवाई के लिए उपयोगकर्ता को चेतावनी देने, या पृष्ठ पर अधिक जोर देने के लिए जानकारी प्रस्तुत करने के लिए एकदम सही हैं।
- <div class = "अलर्ट-मैसेज ब्लॉक-मैसेज वार्निंग" >
- <a class = "करीब" href = "#" > × </a>
- <p><strong> पवित्र guacamole! यह एक चेतावनी है! </strong> अपने आप को सर्वश्रेष्ठ जांचें, आप बहुत अच्छे नहीं दिख रहे हैं। नुल्ला विटे एलीट लिबरो, ए फेरेट्रा ऑग। प्रेज़ेंट कमोडो कर्सस मैग्ना, वेल स्केलेरिस्क निस्ल कॉन्सेक्टेटूर एट। </p>
- <div class = "अलर्ट-एक्शन" >
- <a class = "btn small" href = "#" > यह क्रिया करें </a> <a class = "btn small" href = "#" > या यह करें </a>
- </div>
- </div>
मोडल—संवाद या लाइटबॉक्स—ऐसी स्थितियों में प्रासंगिक कार्रवाइयों के लिए बढ़िया हैं जहां यह महत्वपूर्ण है कि पृष्ठभूमि संदर्भ को बनाए रखा जाए।
एक अच्छा शरीर…
भ्रमित उपयोगकर्ता की सहायता करने और उन्हें सही दिशा में इंगित करने के लिए Twipsies सुपर उपयोगी हैं।
लोरेम इप्सम डोलर सिट एमेट इलो एरर इप्सम वेरिटैटिस और इस्टे पर्सपिसियाटिस इस्ट वॉलुप्टस नेटस इलो क्वैसी ओडिट ऑट नेटस कॉन्सेक्वेंटूर कॉन्सेक्वंटूर, ऑट नेटस इलो वोलुप्टेटम ओडिट पर्सपिसिअटिस लॉडेंटियम रेम डोलोरेमक्यू टोटम वोलुप्टस। और इसे और अधिक स्पष्ट रूप से समझाते हैं, और अधिक स्पष्ट रूप से समझाते हैं, जो कि एक्यूसेंटियम टोटम टोटम आर्किटेक्टो एक्सप्लिसाबो सिट क्वासी फ्यूगिट फुगिट, टोटम डोलोरेमक्यू और सन्ट सेड डिक्टेट क्वाय एक्क्यूसेंटियम के लिए आवश्यक है ।
लेआउट को प्रभावित किए बिना किसी पृष्ठ पर सबटेक्स्टुअल जानकारी प्रदान करने के लिए पॉपओवर का उपयोग करें।
इतियाम पोर्टा सेम मलेसुदा मैग्ना मोलिस यूइसमॉड। मेकेनास फॉसीबस मोलिस इंटरडम। मोरबी लियो रिसस, पोर्टा एसी कॉन्सेक्टेटूर एसी, वेस्टिबुलम और एरोस।
बूटस्ट्रैप लाइब्रेरी के साथ जावास्क्रिप्ट को एकीकृत करना बहुत आसान है। नीचे हम बुनियादी बातों पर जाते हैं और आपको आरंभ करने के लिए कुछ शानदार प्लगइन्स प्रदान करते हैं!
नए कस्टम प्लगइन्स के साथ बूटस्ट्रैप के कुछ प्राथमिक घटकों को जीवंत करें जो jQuery और Ender के साथ काम करते हैं । हम आपको प्रोत्साहित करते हैं कि आप अपनी विशिष्ट विकास आवश्यकताओं के अनुरूप उन्हें विस्तारित और संशोधित करें।
फ़ाइल | विवरण |
---|---|
बूटस्ट्रैप-मोडल.जेएस | हमारा मॉडल प्लगइन पारंपरिक मोडल जेएस प्लगइन पर एक सुपर स्लिम टेक है! हमने ट्विटर पर केवल उन्हीं कार्यों को शामिल करने का विशेष ध्यान रखा जिनकी हमें आवश्यकता है। |
बूटस्ट्रैप-अलर्ट.जेएस | अलर्ट प्लगइन अलर्ट में करीबी कार्यक्षमता जोड़ने के लिए एक सुपर छोटा वर्ग है। |
बूटस्ट्रैप-ड्रॉपडाउन.जेएस | यह प्लगइन बूटस्ट्रैप टॉपबार या टैब्ड नेविगेशन में ड्रॉपडाउन इंटरैक्शन जोड़ने के लिए है। |
बूटस्ट्रैप-scrollspy.js | स्क्रॉलस्पाई प्लगइन बूटस्ट्रैप टॉपबार में स्क्रॉल स्थिति के आधार पर एक ऑटो अपडेटिंग एनएवी जोड़ने के लिए है। |
बूटस्ट्रैप-टैब.जेएस | यह प्लगइन स्थानीय सामग्री के माध्यम से साइकिल चलाने के लिए त्वरित, गतिशील टैब और गोली कार्यक्षमता जोड़ता है। |
बूटस्ट्रैप-twipsy.js | जेसन फ्रेम द्वारा लिखित उत्कृष्ट jQuery.tips प्लगइन पर आधारित; twipsy एक अद्यतन संस्करण है, जो छवियों पर निर्भर नहीं करता है, एनिमेशन के लिए css3 का उपयोग करता है, और स्थानीय शीर्षक भंडारण के लिए डेटा-विशेषताएं! |
बूटस्ट्रैप-popover.js | पॉपओवर प्लगइन आपके एप्लिकेशन में पॉपओवर जोड़ने के लिए एक सरल इंटरफ़ेस प्रदान करता है। यह boostrap-twipsy.js प्लगइन का विस्तार करता है, इसलिए अपने प्रोजेक्ट में पॉपओवर शामिल करते समय उस फ़ाइल को भी पकड़ना सुनिश्चित करें! |
नहीं! बूटस्ट्रैप को सबसे पहले और सबसे महत्वपूर्ण CSS लाइब्रेरी के रूप में डिज़ाइन किया गया है। यह जावास्क्रिप्ट शामिल शैलियों के शीर्ष पर एक बुनियादी इंटरैक्टिव परत प्रदान करता है।
हालांकि, जिन लोगों को जावास्क्रिप्ट की आवश्यकता है, उनके लिए हमने ऊपर प्लगइन्स प्रदान किए हैं ताकि आपको यह समझने में मदद मिल सके कि बूटस्ट्रैप को जावास्क्रिप्ट के साथ कैसे एकीकृत किया जाए और आपको तुरंत बुनियादी कार्यक्षमता के लिए एक त्वरित, हल्का विकल्प दिया जाए।
अधिक जानकारी के लिए और कुछ लाइव डेमो देखने के लिए, कृपया हमारे प्लगइन प्रलेखन पृष्ठ को देखें ।
बूटस्ट्रैप को प्रीबूट के साथ बनाया गया था , जो मिक्सिन और वेरिएबल्स का एक ओपन-सोर्स पैक है, जिसका उपयोग कम के साथ संयोजन में किया जाना है , जो तेज और आसान वेब विकास के लिए एक सीएसएस प्रीप्रोसेसर है।
देखें कि हमने बूटस्ट्रैप में प्रीबूट का उपयोग कैसे किया और आप इसका उपयोग कैसे कर सकते हैं यदि आप अपने अगले प्रोजेक्ट पर कम चलाना चुनते हैं।
अपने ब्राउज़र में जावास्क्रिप्ट के माध्यम से CSS में बूटस्ट्रैप के कम चर, मिक्सिन और नेस्टिंग का पूरा उपयोग करने के लिए इस विकल्प का उपयोग करें।
- <लिंक रिले = "स्टाइलशीट/कम" href = "कम/बूटस्ट्रैप.लेस" मीडिया = "सभी" />
- <script src = "js/less-1.1.3.min.js" ></script>
.js समाधान महसूस नहीं कर रहा है? जब आप अपना कोड परिनियोजित करते हैं तो कम मैक ऐप आज़माएं या संकलन करने के लिए Node.js का उपयोग करें।
बूटस्ट्रैप के हिस्से के रूप में ट्विटर बूटस्ट्रैप में क्या शामिल है, इसके कुछ मुख्य अंश यहां दिए गए हैं। डाउनलोड करने और अधिक जानने के लिए बूटस्ट्रैप वेबसाइट या जीथब प्रोजेक्ट पेज पर जाएं।
कम में वेरिएबल आपके सीएसएस सिरदर्द मुक्त को बनाए रखने और अपडेट करने के लिए एकदम सही हैं। जब आप रंग मान या अक्सर उपयोग किए जाने वाले मान को बदलना चाहते हैं, तो इसे एक स्थान पर अपडेट करें और आप सेट हो गए हैं।
- // लिंक
- @linkColor : #8b59c2;
- @linkColorHover : गहरा करें ( @linkColor , 10 );
- // ग्रे
- @ब्लैक : #000;
- @ ग्रेडार्क : हल्का करें ( @ब्लैक , 25 %);
- @ ग्रे : हल्का करें ( @ब्लैक , 50 %);
- @ ग्रेलाइट : हल्का करें ( @ब्लैक , 70 %);
- @grayLighter : हल्का ( @ब्लैक , 90 %);
- @ सफेद : #fff ;
- // एक्सेंट रंग
- @नीला : #08b5fb ;
- @हरा : #46a546 ;
- @ लाल : #9d261d ;
- @पीला : #ffc40d ;
- @नारंगी : #f89406 ;
- @गुलाबी : #c3325f ;
- @ पर्पल : #7a43b6 ;
- // बेसलाइन ग्रिड
- @बेसफॉन्ट : 13 पीएक्स ;
- @बेसलाइन : 18px ;
/* ... */
कम सीएसएस के सामान्य ��िंटैक्स के अलावा टिप्पणी करने की एक और शैली भी प्रदान करता है ।
- // यह एक टिप्पणी है
- /* यह भी एक टिप्पणी है */
मिक्सिन मूल रूप से सीएसएस के लिए शामिल या आंशिक होते हैं, जिससे आप कोड के एक ब्लॉक को एक में जोड़ सकते हैं। वे वेंडर प्रीफ़िक्स्ड प्रॉपर्टीज़ जैसे box-shadow
, क्रॉस-ब्राउज़र ग्रेडिएंट्स, फॉन्ट स्टैक्स, और बहुत कुछ के लिए बहुत अच्छे हैं। बूटस्ट्रैप के साथ शामिल किए गए मिश्रणों का एक नमूना नीचे दिया गया है।
- #फ़ॉन्ट {
- . शॉर्टहैंड ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- . बिना सेरिफ़ ( @ वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {
- फ़ॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सेन्स - सेरिफ़ ;
- फ़ॉन्ट - आकार : @ आकार ;
- फ़ॉन्ट - वजन : @ वजन ;
- रेखा - ऊँचाई : @lineHeight ;
- }
- ...
- }
- #ढाल {
- ...
- . लंबवत ( @startColor : #555, @endColor: #333) {
- पृष्ठभूमि - रंग : @endColor ;
- पृष्ठभूमि - दोहराना : दोहराना - x ;
- बैकग्राउंड - इमेज : - khtml - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , से ( @startColor ), से ( @endColor )); // कॉन्करर
- पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( @startColor , @endColor ); // एफएफ 3.6+
- पृष्ठभूमि - छवि : - एमएस - रैखिक - ढाल ( @startColor , @endColor ); // IE10
- बैकग्राउंड - इमेज : - वेबकिट - ग्रेडिएंट ( रैखिक , लेफ्ट टॉप , लेफ्ट बॉटम , कलर - स्टॉप ( 0 %, @startColor ), कलर - स्टॉप ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+
- पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( @startColor , @endColor ); // सफारी 5.1+, क्रोम 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
, आपको बूटस्ट्रैप-*.*.*.css और बूटस्ट्रैप-*.*.*.min.css फ़ाइलों को पुन: उत्पन्न करने के लिए उन्हें पुन: संकलित करने की आवश्यकता होगी। यदि आप गिटहब को पुल अनुरोध सबमिट कर रहे हैं, तो आपको हमेशा पुन: संकलित करना होगा।
तरीका | कदम |
---|---|
मेकफ़ाइल के साथ नोड | निम्न कमांड चलाकर npm के साथ कम कमांड लाइन कंपाइलर स्थापित करें: $ npm कम स्थापित करें एक बार इंस्टाल होने के बाद बस इसके अतिरिक्त, यदि आपके पास वॉचर स्थापित है, तो आप |
जावास्क्रिप्ट | नवीनतम कम.जेएस डाउनलोड करें और इसके लिए पथ (और बूटस्ट्रैप) को
.less फ़ाइलों को पुन: संकलित करने के लिए, बस उन्हें सहेजें और अपना पृष्ठ पुनः लोड करें। कम.जेएस उन्हें संकलित करता है और उन्हें स्थानीय भंडारण में संग्रहीत करता है। |
कमांड लाइन | यदि आपके पास पहले से कम कमांड लाइन उपकरण स्थापित है, तो बस निम्नलिखित कमांड चलाएँ: $lessc ./lib/bootstrap.less >bootstrap.css
|
कम मैक ऐप | अनौपचारिक मैक ऐप .less फ़ाइलों की निर्देशिका देखता है और देखे गए .less फ़ाइल के प्रत्येक सहेजने के बाद कोड को स्थानीय फ़ाइलों में संकलित करता है। यदि आप चाहें, तो आप स्वचालित रूप से छोटा करने के लिए ऐप में वरीयताओं को टॉगल कर सकते हैं और संकलित फ़ाइलें किस निर्देशिका में समाप्त होती हैं। |