एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड। मेसेनास फौसिबस मोलिस इंटरडम। मोरबी लियो रिसुस, पोर्टा एसी कन्सेक्टेतुर एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप ट्विटर थमां इक टूलकिट ऐ जेह् ड़ी वेबऐप ते साइटें दे विकास गी किकस्टार्ट करने लेई डिजाइन कीती गेदी ऐ।
इस च टाइपोग्राफी, फार्म, बटन, टेबल, ग्रिड, नेविगेशन, ते होर मते सारें लेई बेस सीएसएस ते एचटीएमएल शामल न।
नेर्ड अलर्ट: बूटस्ट्रैप लेस कन्नै बनाया गेदा ऐ ते आधुनिक ब्राउज़रें गी ध्यान च रखदे होई गेट थमां बाहर कम्म करने आस्तै डिजाइन कीता गेदा हा।
तेज़ ते आसान शुरूआत आस्तै, बस इस स्निपेट गी अपने वेबपेज च कापी करो।
लेस दा इस्तेमाल करने दा इक फैन? कोई दिक्कत नेईं, बस रेपो गी क्लोन करो ते एह् लाइनें गी जोड़ो:
Github पर आधिकारिक बूटस्ट्रैप रेपो कन्नै डाउनलोड, कांटा, पुल, फाइल मुद्दे, ते होर मते।
फिलहाल v1.3.0 ऐ
ट्विटर दे इंजीनियरें ऐतिहासिक तौर पर लगभग कुसै बी लाइब्रेरी दा इस्तेमाल कीता ऐ जिसदे कन्नै ओह् परिचित हे तां जे फ्रंट-एंड दी जरूरतें गी पूरा कीता जाई सकै। बूटस्ट्रैप दी शुरुआत उनें चुनौतियें दे जवाब दे तौर उप्पर होई जेह्ड़ी पेश कीती गेई ही। कई लाजवाब लोकें दी मदद कन्नै, बूटस्ट्रैप च काफी विकास होआ ऐ।
dev.twitter.com पर होर मता पढ़ो ›
बूटस्ट्रैप दा परीक्षण ते समर्थन क्रोम, सफारी, इंटरनेट एक्सप्लोरर, ते फायरफॉक्स जनेह् बड्डे आधुनिक ब्राउज़रें च कीता जंदा ऐ।
बूटस्ट्रैप संकलित CSS, अनकंपाइल, ते उदाहरण टेम्पलेटें कन्नै पूरा औंदा ऐ।
बूटस्ट्रैप दे हिस्से दे रूप च उपलब्ध करोआया गेदा डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ा 16-स्तंभ ग्रिड ऐ। एह् लोकप्रिय 960 ग्रिड सिस्टम दा इक स्वाद ऐ, पर बाएं ते दाएं पास्से दे अतिरिक्त मार्जिन/पैडिंग दे बगैर।
जि’यां इत्थै दिक्खेआ गेआ ऐ, इक बुनियादी लेआउट दो "स्तंभें" कन्नै बनाया जाई सकदा ऐ, हर इक 16 बुनियादी स्तंभें दी इक नंबर गी फैले दा ऐ जिनेंगी अस अपने ग्रिड प्रणाली दे हिस्से दे रूप च परिभाशत कीता ऐ। होर बदलावें लेई हेठ दित्ते गेदे उदाहरनें गी दिक्खो।
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "स्पैन6" > ऐ
- ...
- </div> दा
- <div वर्ग = "स्पैन10" > ऐ
- ...
- </div> दा
- </div> दा
.row
जेकर तुसें गी इक मौजूदा स्तंभ दे अंदर इक बनाइयै अपनी सामग्री गी नेस्ट करो .
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "स्पैन12" > ऐ
- स्तंभ दा लेवल 1
- <div वर्ग = "पंक्ति" > ऐ
- <div वर्ग = "स्पैन6" > ऐ
- लेवल 2 दा
- </div> दा
- <div वर्ग = "स्पैन6" > ऐ
- लेवल 2 दा
- </div> दा
- </div> दा
- </div> दा
- </div> दा
बूटस्ट्रैप च बने दे डिफाल्ट 940px ग्रिड सिस्टम गी अनुकूलित करने आस्तै इक मुट्ठी भर चर न। थोह् ड़ी-मती अनुकूलन कन्नै, तुस स्तंभें दे आकार, उंदे गटरें, ते उस कंटेनर गी संशोधित करी सकदे ओ जिस च ओह् रौंह्दे न।
ग्रिड प्रणाली गी संशोधित करने लेई लोड़चदे चर इसलै सारे variables.less
.
चर करने आला | डिफ़ॉल्ट मान ऐ | ब्यौरा |
---|---|---|
@gridColumns |
१६ ऐ | ग्रिड दे अंदर स्तंभें दी गिनतरी |
@gridColumnWidth |
40पीएक्स ऐ | ग्रिड दे अंदर हर इक स्तंभ दी चौड़ाई |
@gridGutterWidth |
20पीएक्स ऐ | हर स्तंभ दे बिच्च नकारात्मक स्थान |
@siteWidth |
सारे स्तंभ ते गटरें दा गणना कीता गेआ योग | अस स्तंभ ते गटर दी गिनतरी गिनने ते .fixed-container() मिक्सिन दी चौड़ाई सेट करने आस्तै किश बुनियादी मैच दा इस्तेमाल करदे आं। |
ग्रिड गी संशोधित करने दा मतलब ऐ त्रै @grid-*
चर गी बदलना ते कम फाइलें गी दुबारा संकलित करना।
बूटस्ट्रैप 24 स्तंभें तगर ग्रिड सिस्टम गी संभालने लेई सुसज्जित ऐ; डिफ़ॉल्ट सिर्फ 16 ऐ इत्थें एह् दिक्खेआ गेआ ऐ जे तुंदे ग्रिड चर 24-स्तंभ ग्रिड गी अनुकूलित कीते गेदे कि’यां दिक्खन जाङन.
- @ ग्रिडस्तंभ : 24 ऐ ;
- @ ग्रिडस्तंभ चौड़ाई : 20px ऐ ;
- @ ग्रिडगटर चौड़ाई : 20px ऐ ;
इक बारी पुनर्संकलित होने पर, तुस सेट होई जाओगे!
इक गै <div.container>
.
- <शरीर> दा
- <div वर्ग = "कंटेनर" > ऐ
- ...
- </div> दा
- </body> दा
मिन- ते मैक्स-चौड़ाई ते इक बाएं-हत्थ साइडबार कन्नै इक वैकल्पिक, लचीला तरल पृष्ठ संरचना। ऐप्स ते डॉक्स लेई शानदार।
- <शरीर> दा
- <div वर्ग = "कंटेनर-द्रव" >
- <div वर्ग = "साइडबार" > ऐ
- ...
- </div> दा
- <div वर्ग = "सामग्री" > ऐ
- ...
- </div> दा
- </div> दा
- </body> दा
अपने वेबपेजें गी संरचित करने आस्तै इक मानक मुद्रण पदानुक्रम।
पूरा टाइपोग्राफिक ग्रिड साढ़ी variables.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> डॉ. जूलियस हिबर्ट </small> ऐ
- </blockquote> दा
<ul>
<ul.unstyled>
<ol>
dl
<code>
<pre>
दो साधारण टैग कन्नै शैली च अपने कोड गी दलाल बनाओ। जावास्क्रिप्ट दे राहें होर बी भयानकता आस्तै, गूगल दा कोड 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 डाउनलोड करो ते इसदा इस्तेमाल करने आस्तै रीडमी दिक्खो। |
<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 = "मीडिया-ग्रिड" > ऐ
- <ली> दा
- <a href = "#" > ऐ
- <img वर्ग = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" >
- </a> दा
- </li> दा
- <ली> दा
- <a href = "#" > ऐ
- <img वर्ग = "थंबनेल" src = "https://प्लेसहोल्ड.इट/330x230" alt = "" >
- </a> दा
- </li> दा
- </ul> दा
<table>
<thead>
<tbody>
<tr>
<th>
<td>
<colspan>
<caption>
टेबल शानदार होंदे न—बहुत सारी चीजें लेई। महान तालिकाएं गी, हालांकि, उपयोगी, स्केल करने योग्य, ते पठनीय (कोड स्तर पर) होने आस्तै मार्कअप प्यार दी थोह् ड़ी-मती लोड़ ऐ। मदद करने आस्तै किश सुझाऽ दित्ते गेदे न।
अपने स्तंभ हेडरें गी हमेशा <thead>
इस चाल्ली लपेटो जे पदानुक्रम <thead>
> <tr>
> होऐ <th>
.
स्तंभ हेडरें दे समान, तुंदी सारी तालिका दी शरीर सामग्री गी इक च लपेटेआ जाना चाहिदा <tbody>
तां जे तुंदी पदानुक्रम <tbody>
> <tr>
> ऐ <td>
.
पठनीयता गी सुनिश्चित करने ते संरचना गी बनाए रखने लेई सब्भै तालिकाएं गी स्वतः सिर्फ जरूरी सीमाएं कन्नै स्टाइल कीता जाग। अतिरिक्त वर्गें जां विशेषताएं गी जोड़ने दी लोड़ नेईं ऐ।
# ऐ | पैहला नां | अखीरी नां | भाशा |
---|---|---|---|
१ | चंद | इक | अंगरेजी |
२ | जो | सिक्सपैक | अंगरेजी |
३ | स्टू | डेंट | कोड |
- <टेबल> दा
- ...
- </table> दा
जेह् ड़ी तालिकाएं च तंग जगहें पर मता डेटा दी लोड़ होंदी ऐ , उ’नें गी घट्ट कीते गेदे स्वाद दा इस्तेमाल करो जेह् ड़ा पैडिंग गी आधे च कटौती करदा ऐ । इसदा इस्तेमाल सीमाएं ते ज़ेबरा-पट्टियें कन्नै बी कीता जाई सकदा ऐ , जिऱयां डिफाल्ट तालिका शैलियां ।
# ऐ | पैहला नां | अखीरी नां | भाशा |
---|---|---|---|
१ | चंद | इक | अंगरेजी |
२ | जो | सिक्सपैक | अंगरेजी |
३ | स्टू | डेंट | कोड |
अपने टेबल गी उंदे कोने गी गोल करियै ते सारे पास्सै सीमाएं गी जोड़ियै सिर्फ इक वी बिट चिकना दिक्खने गी बनाओ।
# ऐ | पैहला नां | अखीरी नां | भाशा |
---|---|---|---|
१ | चंद | इक | अंगरेजी |
२ | जो | सिक्सपैक | अंगरेजी |
३ | स्टू | डेंट | कोड |
- <table class = "सीमा-सारणी" >
- ...
- </table> दा
ज़ेबरा-स्ट्राइपिंग जोड़ के अपनी टेबल के साथ थोड़ा फैंसी हो जाओ-बस .zebra-striped
क्लास जोड़ो।
# ऐ | पैहला नां | अखीरी नां | भाशा |
---|---|---|---|
१ | चंद | इक | अंगरेजी |
२ | जो | सिक्सपैक | अंगरेजी |
३ | स्टू | डेंट | कोड |
स्पैन 4 स्तंभ | |||
स्पैन 2 स्तंभ | स्पैन 2 स्तंभ |
नोट: ज़ेबरा-स्ट्राइपिंग इक प्रगतिशील संवर्धन ऐ जेह् ड़ा IE8 ते हेठ दित्ते गेदे पुराने ब्राउज़���ें आस्तै उपलब्ध नेईं ऐ.
- <table class = "ज़ेबरा-धारीदार" >
- ...
- </table> दा
पिछले उदाहरन गी लेइयै, अस jQuery ते Tablesorter प्लगइन दे राहें छंटाई कार्यक्षमता प्रदान करियै अपनी तालिकाएं दी उपयोगिता च सुधार करदे आं। सॉर्ट बदलने लेई कुसै बी स्तंभ दे हेडर पर क्लिक करो.
# ऐ | पैहला नां | अखीरी नां | भाशा |
---|---|---|---|
२ | जो | सिक्सपैक | अंगरेजी |
३ | स्टू | डेंट | कोड |
१ | थुआढ़ा | इक | अंगरेजी |
- <script src = "जे एस / जे क्वेरी / जे क्वेरी.टेबलसॉर्टर.मिनट.जेएस" ></स्क्रिप्ट>
- <लिपि > ऐ
- $ ( फंक्शन () { ऐ।
- $ ( "सारणी # क्रमबद्ध तालिकाउदाहरण" ). टेबलसॉर्टर ({ सॉर्टलिस्ट : [[ 1 , 0 ]] });
- });
- </script> दा
- <table class = "ज़ेबरा-धारीदार" >
- ...
- </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> बेस्ट चेक यो सेल्फ, तुसीं बहुत अच्छा नहीं लग रहे हो। नुल्ला विटाए एलिट लिबेरो, इक फारेत्रा औग। प्रैसेंट कोमोडो कर्सस मैग्ना, वेल scelerisque nisl consectetur एट। </p> दा
- <div वर्ग = "सचेतक-क्रियाएं" >
- <a class = "btn small" href = "#" > एह् कार्रवाई करो </a> <a class = "btn small" href = "#" > जां एह् करो </a>
- </div> दा
- </div> दा
मोडल-संवाद जां लाइटबॉक्स-ऐसे परिस्थितियें च संदर्भ क्रियाएं आस्तै मते शा मते न जित्थें एह् जरूरी ऐ जे पृष्ठभूमि संदर्भ गी बनाए रखना।
इक महीन शरीर...
ट्विप्सी इक भ्रमित उपयोगकर्ता दी मदद करने ते उनेंगी सही दिशा च इशारा करने आस्तै सुपर उपयोगी न।
लोरेम इप्सम डॉलर बैठो अमेट इलो त्रुटि इप्सम वेरिटाटिस औट इस्टे परस्पिसिएटिस इसे वोलुप्टास नेटस इलो क्वासी ओडिट औट नेटस कंसेक्यून्तुर, औट नटस इलो वोलुप्टेटेम ओडिट परस्पिसियाटिस लौडांटियम रेम डोलोरेमके टोटम वोलुप्टास। वोलुप्टासडिक्टा ईएके बीटाए एपेरिअम उट एनिम वोलुप्टेटेम एक्सप्लिकेबो एक्सप्लिकेबो, वोलुप्टास क्विआ ओडिट फ्यूजिट एक्यूसैंटियम टोटम टोटम आर्किटेक्टो एक्सप्लिकेबो बैठो क्वासी फ्यूजिट फ्यूजिट, टोटम डोलोरेमके उंडे सुंट सेड डिक्टा क्वे एक्यूसैंटियम फुगिट वोलुप्टास नेमो वोलुप्टास वोलुप्टेटेम रेम क्वाए ऑटो वेरिटाटिस क्वासी क्वा।
लेआउट गी प्रभावित कीते बगैर कुसै पृष्ठ गी उप-पाठ्य जानकारी देने आस्तै पोपोवर दा इस्तेमाल करो.
एटियाम पोर्टा सेम मलेसुआदा मैग्ना मोलिस यूइसमोड। मेसेनास फौसिबस मोलिस इंटरडम। मोरबी लियो रिसुस, पोर्टा एसी कन्सेक्टेतुर एसी, इरोस पर वेस्टिबुलम।
बूटस्ट्रैप लाइब्रेरी कन्नै जावास्क्रिप्ट गी इकट्ठा करना सुपर आसान ऐ। नीचे अस बुनियादी गल्लें उप्पर जांदे आं ते तुसेंगी शुरू करने आस्तै तुसेंगी किश भयानक प्लगइन उपलब्ध करोआने आं!
बूटस्ट्रैप दे किश प्राथमिक घटकें गी नमें कस्टम प्लगइन्स कन्नै जीवन च लाओ जेह् ड़े jQuery ते Ender कन्नै कम्म करदे न . अस तुसेंगी अपने विशेश विकास जरूरतें दे अनुरूप उनेंगी विस्तार ते संशोधित करने लेई प्रोत्साहित करने आं।
फाइल | ब्यौरा |
---|---|
बूटस्ट्रैप-मोडल.जेएस ऐ | साढ़ा मोडल प्लगइन पारंपरिक मोडल जेएस प्लगइन पर इक सुपर स्लिम लेओ ऐ! अस खास ध्यान रखेआ जे सिर्फ नंगे फंक्शनलिटी गी गै शामल कीता जा जेह्ड़ी असेंगी ट्विटर पर लोड़चदी ऐ। |
बूटस्ट्रैप-अलर्ट्स.जेएस ऐ | अलर्ट प्लगइन अलर्टें च नजदीकी कार्यक्षमता गी जोड़ने आस्तै इक सुपर टिनी क्लास ऐ। |
बूटस्ट्रैप-ड्रॉपडाउन.जेएस | एह् प्लगइन बूटस्ट्रैप टॉपबार जां टैब नेविगेशनें च ड्रॉपडाउन इंटरैक्शन जोड़ने आस्तै ऐ. |
बूटस्ट्रैप-स्क्रॉलस्पाई.जेएस | ScrollSpy प्लगइन बूटस्ट्रैप टॉपबार च स्क्रॉल स्थिति दे आधार उप्पर इक ऑटो अपडेटिंग नेव जोड़ने आस्तै ऐ. |
बूटस्ट्रैप-बटन.जेएस | ScrollSpy प्लगइन बूटस्ट्रैप टॉपबार च स्क्रॉल स्थिति दे आधार उप्पर इक ऑटो अपडेटिंग नेव जोड़ने आस्तै ऐ. |
बूटस्ट्रैप-टैब.जेएस | एह् प्लगइन स् थानीय सामग्री दे माध्यम कन्नै साइकिलिंग लेई त्वरित, गतिशील टैब ते गोली फ़ंक्शनलटी जोड़दा ऐ। |
बूटस्ट्रैप-ट्विप्सी.जेएस | जेसन फ्रेम द्वारा लिखे गेदे उत्कृष्ट jQuery.tipsy प्लगइन पर आधारित; twipsy इक अपडेट कीता गेदा संस्करण ऐ, जेह् ड़ा छवियें पर निर्भर नेईं ऐ, एनीमेशनें आस्तै css3 दा उपयोग करदा ऐ, ते लोकल टाइटल भंडारण आस्तै डेटा-गुणवत्ताएं दा उपयोग करदा ऐ! |
बूटस्ट्रैप-पोपोवर.जेएस | पॉपओवर प्लगइन तुंदे एप्लिकेशन च पोपोवर जोड़ने लेई इक साधारण इंटरफेस प्रदान करदा ऐ। एह् boostrap-twipsy.js प्लगइन गी विस्तार दिंदा ऐ, इसलेई अपने प्रोजेक्ट च popovers गी शामल करदे बेल्लै उस फाइल गी बी हड़पना सुनिश्चित करो! |
नेईं! बूटस्ट्रैप गी पैह् ले ते सब्भनें शा पैह् ले इक CSS लाइब्रेरी होने आस्तै डिजाइन कीता गेदा ऐ। एह् जावास्क्रिप्ट शामल शैलियें दे उप्पर इक बुनियादी इंटरएक्टिव परत उपलब्ध करोआंदी ऐ।
हालांकि, उनें लोकें लेई जिनेंगी जावास्क्रिप्ट दी लोड़ ऐ, असें उपर दित्ते गेदे प्लगइन्स उपलब्ध करोआए न तां जे तुसेंगी एह् समझने च मदद मिलै जे बूटस्ट्रैप गी जावास्क्रिप्ट कन्नै किस चाल्ली इकट्ठा कीता जा ते तुसेंगी तुरत बुनियादी कार्यक्षमता आस्तै इक त्वरित, हल्के विकल्प दित्ता जा।
होर मती जानकारी आस्तै ते किश लाइव डेमो दिक्खने आस्तै, कृपा करियै साढ़े प्लगइन दस्तावेजीकरण पृष्ठ दा संदर्भ लैओ .
बूटस्ट्रैप गी प्रीबूट थमां बनाया गेआ हा , जेह् ड़ा मिक्सिन ते चर दा इक ओपन-सोर्स पैक ऐ जेह् ड़ा लेस कन्नै संयोजन च बरतेआ जाह् ग , जेह् ड़ा तेज़ ते आसान वेब विकास आस्तै इक सीएसएस प्रीप्रोसेसर ऐ ।
दिक्खो जे अस बूटस्ट्रैप च प्रीबूट दा किस चाल्ली इस्तेमाल कीता हा ते जेकर तुस अपने अगले प्रोजेक्ट पर कम चलाना चुनदे ओ तां तुस इसदा इस्तेमाल किस चाल्ली करी सकदे ओ.
अपने ब्राउज़र च जावास्क्रिप्ट दे राहें सीएसएस च बूटस्ट्रैप दे कम चर, मिक्सिन, ते नेस्टिंग दा पूरा इस्तेमाल करने आस्तै इस विकल्प दा इस्तेमाल करो.
- <link rel = "स्टाइलशीट / कम" href = "कम / बूटस्ट्रैप.कम" मीडिया = "सब" />
- <स्क्रिप्ट एसआरसी = "जेएस / कम-1.1.3.मिनट.जेएस" ></स्क्रिप्ट>
.js समाधान महसूस नेईं करदे? कम मैक ऐप दी कोशश करो जां संकलित करने आस्तै Node.js दा इस्तेमाल करो जिसलै तुस अपने कोड गी तैनात करदे ओ.
बूटस्ट्रैप दे हिस्से दे तौर पर ट्विटर बूटस्ट्रैप च शामल कीते गेदे किश खास गल्लें दी जानकारी दित्ती गेदी ऐ। डाउनलोड करने ते होर जानने लेई बूटस्ट्रैप वेबसाइट जां गिथब प्रोजेक्ट पेज पर जाओ।
कम च चर तुंदे CSS सिर दर्द मुक्त बनाए रखने ते अपडेट करने लेई बिल्कुल सही न। जदूं तुस इक रंग मूल्य जां बार-बार इस्तेमाल कीते जाने आह् ले मूल्य गी बदलना चांह् दे ओ तां उसी इक थाह् र पर अपडेट करो ते तुस सेट होई गेदे ओ.
- // लिंक
- @ लिंकरंग : # 8 बी 59 सी 2 ऐ;
- @linkColorHover : अंधेरा करो ( @linkColor , 10 );
- // ग्रेज़ दा
- @ काला : # 000 ऐ;
- @ grayDark : हल्का करो ( @ काला , 25 %);
- @ ग्रे : हल्का करो ( @ काला , 50 %);
- @ grayLight : हल्का करो ( @ काला , 70 %);
- @ grayLighter : हल्का करो ( @ काला , 90 %);
- @ गोरे : # एफएफएफ ;
- // लहजे दे रंग
- @ नीले रंग दा : # 08 बी 5 एफ बी;
- @ हरे रंग दा : # 46 ए 546;
- @ लाल : # 9 डी 261 डी;
- @ पीला : # एफएफसी 40 डी;
- @ नारंगी : # एफ 89406 ऐ;
- @ गुलाबी : # c3325f ऐ;
- @ बैंगनी : # 7 ए 43 बी 6;
- // बेसलाइन ग्रिड
- @ बेसफॉन्ट : 13px ऐ ;
- @ आधार रेखा : 18px ऐ ;
कम सीएसएस दे सामान्य /* ... */
सिंटैक्स दे अलावा टिप्पणी करने दी इक होर शैली बी उपलब्ध करोआंदा ऐ।
- // एह् इक टिप्पणी ऐ
- /* एह् बी इक टिप्पणी ऐ */
मिक्सिन मूल रूप कन्नै सीएसएस आस्तै शामल जां आंशिक न , जेह् ड़ी तुसेंगी कोड दे इक ब्लॉक गी इक च जोड़ने दी इजाजत दिंदा ऐ । वे विक्रेता उपसर्ग गुणें लेई शानदार न जि'यांbox-shadow
एह् विक्रेता उपसर्ग गुणें जि'यां , क्रॉस-ब्राउज़र ढाल, फॉन्ट ढेर, ते होर मतेहेठ दित्ते गेदे मिक्सिन दा नमूना ऐ जेह् ड़े बूटस्ट्रैप कन्नै शामल न।
- # फॉन्ट दा {
- ऐ . आशुलिपि ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- लाइन - ऊंचाई : @ लाइन ऊंचाई ;
- } ऐ।
- ऐ . sans - serif ( @ वजन : सामान्य , @ आकार : 14px , @ lineHeight : 20px ) {
- font - family : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सैंस - सेरिफ ;
- फॉन्ट - आकार : @ आकार ;
- फॉन्ट - वजन : @ वजन ;
- लाइन - ऊंचाई : @ लाइन ऊंचाई ;
- } ऐ।
- ...
- } ऐ।
- # ढाल दा {
- ...
- ऐ . ऊर्ध्वाधर ( @ शुरू रंग : # 555, @ अंत रंग: # 333) {
- पृष्ठभूमि - रंग : @ अंत रंग ;
- पृष्ठभूमि - दोहराओ : दोहराओ - एक्स ;
- पृष्ठभूमि - छवि : - 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 ); // दा मानक
- } ऐ।
- ...
- } ऐ।
फैंसी हो जाओ ते निचले स्तर दे समान लचीले ते शक्तिशाली मिक्सिन पैदा करने आस्तै किश गणित करो।
- // ग्रिडिट्यूड दा
- @ ग्रिडस्तंभ : 16 ऐ ;
- @ ग्रिडस्तंभ चौड़ाई : 40px ऐ ;
- @ ग्रिडगटर चौड़ाई : 20px ऐ ;
- @siteWidth : ( @ ग्रिडस्तंभ * @ ग्रिडस्तंभ चौड़ाई ) + ( @ ग्रिडगटर चौड़ाई * ( @ ग्रिडस्तंभ - 1 ));
- // कुछ स्तंभ बनाओ
- ऐ . स्तंभ ( @columnSpan : 1 ) { ऐ।
- चौड़ाई : ( @ ग्रिडस्तंभ चौड़ाई * @ स्तंभ स्पैन ) + ( @ ग्रिडगटर चौड़ाई * ( @ स्तंभ स्पैन - 1 ));
- } ऐ।
/lib/ च फाइलें गी संशोधित करने दे बाद .less
, तुसेंगी बूटस्ट्रैप-*.*.*.css ते बूटस्ट्रैप-*.*.*.min.css फाइलें गी पुनर्जीवित करने आस्तै उनेंगी दुबारा संकलित करने दी लोड़ होग. जेकर तुस GitHub गी इक पुल अनुरोध जमा करा करदे ओ तां तुसेंगी हमेशा दुबारा संकलित करना होग.
तरीका | कदम रखे |
---|---|
मेकफाइल कन्नै नोड | निम्नलिखित कमांड चलांदे होई npm कन्नै कम कमांड लाइन कंपाइलर गी इंस्टॉल करो: $ एनपीएम lessc स्थापित करो इक बारी इंस्टॉल होने पर बस इसदे अलावा, जेकर तुंदे कोल watchr इंस्टॉल ऐ तां तुस |
जावास्क्रिप्ट | नवीनतम Less.js डाउनलोड करो ते इसदे लेई रस्ता (ते बूटस्ट्रैप) गी
.less फाइलें गी दुबारा संकलित करने आस्तै, बस उनेंगी सेव करो ते अपने पेज गी दुबारा लोड करो. Less.js उनेंगी संकलित करदा ऐ ते उनेंगी लोकल स्टोरेज च संग्रहीत करदा ऐ। |
कमांड लाइन | जेकर तुंदे कोल पैह् ले थमां गै कम कमांड लाइन टूल इंस्टॉल ऐ तां बस निम्नलिखित कमांड चलाओ: $ lessc ./lib/bootstrap.less > बूटस्ट्रैप.सीएसएस ऐ
|
कम मैक ऐप | गैर-सरकारी मैक ऐप .less फाइलें दी डायरेक्टरी गी दिक्खदा ऐ ते दिक्खे गेदे .less फाइल दे हर सेव दे बाद कोड गी लोकल फाइलें च संकलित करदा ऐ। जेकर तुस चांह् दे ओ तां तुस स्वचालित रूप कन्नै मिनीफाइंग करने आस्तै ऐप च प्राथमिकताएं गी टॉगल करी सकदे ओ ते संकलित फाइलें दा अंत कुस डायरेक्टरी च होंदा ऐ। |