इतिहास

ट्विटराच्या आदल्या काळांत अभियंते फ्रंट-एंड गरजां पुराय करपा खातीर तांकां वळख आशिल्ली चड करून खंयच्याय लायब्ररीचो वापर करताले. ट्विटराच्या पयल्या हॅकवीकांत सादर केल्ल्या आव्हानांक जाप म्हणून बूटस्ट्रॅप सुरू जालो आनी विकास बेगीन वेगवान जालो.

ट्विटरांतल्या जायत्या अभियंत्यांच्या आदारान आनी प्रतिसादान, बूटस्ट्रॅप फकत मुळाव्यो शैली न्हय, तर चड सुंदर आनी टिकाऊ फ्रंट-एंड डिझायन नमुन्यांचो आस्पाव करपाक म्हत्वाची वाडल्या.

dev.twitter.com ह्या संकेतथळार चड वाचात ›

ब्राउझर समर्थन

Chrome, Safari, Internet Explorer, आनी Firefox सारकिल्या मुखेल आधुनीक ब्राउझरांनी बूटस्ट्रॅपाची चांचणी आनी समर्थन आसा.

• ताजी सफारी
• ताजें गूगल क्रोम
• फायरफॉक्स 4+ आसा
• इंटरनॅट एक्सप्लोरर 7+

कितें आस्पावलां

बूटस्ट्रॅप संकलित CSS, संकलित नाशिल्ले, आनी उदाहरण साच्यां वांगडा पुराय येता.

• सगळ्यो मूळ .less फायली
• पुरायपणान संकलित आनी ल्हान केल्लें CSS
• शैलीमार्गदर्शक दस्तावेजीकरण पुराय करचें
• उदाहरण पान साचा (आनीक बेगीन येतलें)

मुलभूत जाळी

बूटस्ट्रॅपाचो भाग म्हूण पुरवण केल्ली मुलभूत ग्रिड प्रणाली 940px रुंद 16-स्तंभ ग्रिड आसा. तो लोकप्रिय 960 ग्रिड प्रणालीची एक रूच, पूण डाव्या आनी उजव्या बाजूक अतिरिक्त मार्जिन/पॅडींग नासतना.

उदाहरण जाळी मार्कअप

हांगा दाखयल्ले प्रमाणें, दोन "स्तंभ" आशिल्ली मुळावी मांडावळ तयार करूंक शकता, दरेक स्तंभ आमी आमच्या ग्रिड प्रणालीचो भाग म्हूण व्याख्या केल्ल्या 16 मुळाव्या स्तंभांच्या संख्येंत पातळटात. चड बदलां खातीर सकयल दिल्ल्यो उदाहरणां पळयात.

<div class="row"> हें नांव वर्ग = "ओळ" >
  <div वर्ग = "span6 स्तंभ" > 
    ...
  </div> हें नांव
  <div वर्ग = "span10 स्तंभ" > 
    ...
  </div> हें नांव
</div> हें नांव

स्थिर मांडावळ

फकत खंयच्याय साइट वा पानाक मुळावी 940px रुंद, केंद्रीत कंटेनर मांडावळ.

<शरीर> हें नांव
  <div वर्ग = "कंटेनर" > 
    ...
  </div> हें नांव
</body> हें नांव

द्रव मांडावळ

किमान- आनी चडांत चड रुंदाय आशिल्ली लवचीक द्रव वा द्रव पान रचणूक आनी डाव्या हाताची बाजूची पट्टी. ऍप्लिकेशनां खातीर ग्रेट.

<शरीर> हें नांव
  <div class = "कंटेनर-द्रव" > 
    <div वर्ग = "साइडबार" > 
      ...
    </div> हें नांव
    <div वर्ग = "सामग्री" > 
      ...
    </div> हें नांव
  </div> हें नांव
</body> हें नांव

शीर्षकां आनी प्रत

तुमच्या वॅबपानांची रचना करपाखातीर एक मानक मुद्रण क्रमवारी.

h1. शीर्षक 1

h2. शीर्षक 2

h3 हें नांव. शीर्षक 3

h4 हें नांव. शीर्षक 4

h5. शीर्षक 5

h6 हें नांव. शीर्षक 6

उदाहरण परिच्छेद

नुल्लम क्विस रिसुस एगेट उर्ना मोलिस ऑर्नारे वेल इउ लियो. कम सोसायस नाटोक पेनाटिबस एट मॅग्निस डिस पार्ट्युरिएंट मोंटेस, नासेतुर रिडिकुलस मस. नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

उदाहरण शीर्षक उपशीर्षक आसा...

विविध प्रकार. घटकांचो आस्पाव जाता

भर, पत्ते, & संक्षेप वापरप

<strong> <em> <address> <abbr>

केन्ना वापरप

भर दिवपी टॅग ( <strong>आनी <em>) वापरपाक जाय, शब्द वा वाक्यांश ताचे भोंवतणच्या प्रतीच्या सापेक्ष अतिरिक्त म्हत्व वा भर दाखोवपाक. <strong>म्हत्वाखातीर आनी ताण भर <em>दिवपाखातीर वापरात .

एका परिच्छेदांत भर दिवप

Fusce dapibus , tellus ac cursus commodo , टॉर्टोर मौरिस कॉन्डिमेंटम निभ , उत फर्मेन्टम मासा जुस्टो बस अमेट रिसुस. मेसेनास फॉसिबस मॉलिस इंटरडम. नुल्ला व्हिटॅ एलिट लिबेरो, एक फारेत्रा ऑग.

टिप: HTML5 त वापरप <b>आनी <i>टॅग करप अजूनय बरोबर आसा, पूण ते आतां अंतर्निहित शैलींनी येनात. <b>अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता, जाल्यार <i>चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

संबोधन करता

ह्या <address>घटकाचो उपेग ताच्या लागींच्या पूर्वजा खातीर, वा पुराय कामाच्या आंगा खातीर संपर्क म्हायती खातीर करतात. कशें दिसता तें पळयात:

ट्विटर, इंक
795 फोल्सम अॅव्हे, सुट 600
सॅन फ्रांसिस्को, सीए 94107
पी: (123) 456-7890

टिप: एकांतली दरेक ओळ <address>ओळी-विराम ( ) च्या आदारान सोंपपाक जाय वा आशयाची योग्य रचणूक करपाखातीर <br />ब्लॉक-पातळेच्या टॅगांत गुठलावंक जाय (देखीक, ).<p>

संक्षेप

संक्षेप आनी संक्षिप्त नांवांखातीर, <abbr>टॅग वापरात ( HTML5<acronym> त नाका आसा ). टॅगा भितर आशुलिपी फॉर्म घालचो आनी पुराय नांवाखातीर शीर्षक सेट करचो.

ब्लॉककोट्स हांचो आस्पाव जाता

<blockquote> <p> <small>

उद्धृत कशें करचें

ब्लॉककोट समाविष्ट करपाक, वॅप <blockquote>अराउंड <p>आनी <small>टॅग करात. तुमचो स्रोत उल्लेख करपाक घटक वापरात आनी ताचे आदीं <small>तुमकां एम डॅश मेळटलो .—

लोरेम इप्सम डोलोर बस आमेत, कॉन्सेक्टेटर एडिपिसिंग एलिट. पूर्णांक पोसुएरे एराट एक अँटी व्हेनेनेटिस डापिबस पोसुएरे व्हेलिट अॅलिकेट.

ज्युलियस हिबर्ट हांणी डॉ

अनऑर्डर केल्लें<ul>

• लोरेम इप्सम डोलोर बस आमेत
• Consectetur adipiscing एलिट हें नांव
• मासा हांगा पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
• नुल्ला वोलुत्पात आलिक्वाम वेलिट
  • फासेलस इअकुलिस नेक हें नांव
  • पुरुस सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
• फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

अनस्टायल केल्लें<ul.unstyled>

• लोरेम इप्सम डोलोर बस आमेत
• Consectetur adipiscing एलिट हें नांव
• मासा हांगा पूर्णांक मोलेस्टी लोरेम
• प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
• नुल्ला वोलुत्पात आलिक्वाम वेलिट
  • फासेलस इअकुलिस नेक हें नांव
  • पुरुस सोडलेस अल्ट्रिसीस
  • वेस्टिबुलम लाओरीत पोर्टिटोर सेम
  • एसी ट्रिस्टीक लिबेरो वोलुत्पात अॅट
• फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
• एनियन बस अमेत एरात नुंक
• एगेट पोर्टिटोर लोरेम

आदेश दिलो<ol>

1. लोरेम इप्सम डोलोर बस आमेत
2. Consectetur adipiscing एलिट हें नांव
3. मासा हांगा पूर्णांक मोलेस्टी लोरेम
4. प्रीटियम निस्ल अॅलिकेटांत फॅसिलिसिस
5. नुल्ला वोलुत्पात आलिक्वाम वेलिट
6. फॉसिबस पोर्टा लेकस फ्रिंगिला वेल
7. एनियन बस अमेत एरात नुंक
8. एगेट पोर्टिटोर लोरेम

वर्णनdl

वर्णन यादी

संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.

युइस्मोड हांणी केला

वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.

डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.

मालेसुआदा पोर्टा

एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

मेज बांदप

<table> <thead> <tbody> <tr> <th> <td> <colspan> <caption>

मेज म्हान-बऱ्याच गजालीं खातीर. ग्रेट कोश्टकां, मात, उपेगी, मापनीय, आनी वाचपाक योग्य (कोड पातळेचेर) जावपाक थोडो मार्कअप मोगाची गरज आसा. मदत करपाक हांगा कांय टिपां दिल्यांत.

तुमचे स्तंभ शीर्षक सदांच <thead>अशे तरेन गुठलायात की श्रेणीबध्दता <thead>> <tr>> आसतली <th>.

स्तंभ शीर्षकां प्रमाणें, तुमच्या कोश्टकाची सगळी ��ूड आशय एकांत गुठलायपाक जाय <tbody>म्हणून तुमची श्रेणीबध्दता <tbody>> <tr>> आसा <td>.

देखीक: मुलभूत कोश्टक शैली

वाचपाक योग्यताय सुनिश्चीत करपाक आनी रचणूक सांबाळपाक सगळ्या कोश्टकांक फकत गरजेच्यो शिमो आपोआप शैली दितले. अतिरिक्त वर्ग वा गुणधर्म जोडपाची गरज ना.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	कांय	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

<कोष्टक वर्ग = "सामान्य-कोष्टक" > 
  ...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार

झेब्रा-स्ट्राइपिंग जोडून तुमच्या कोश्टकां कडेन मात्शी फॅन्सी मेळोवची-फक्त .zebra-stripedवर्ग जोडचो.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	कांय	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

टिप: Zebra-striping हें एक प्रगतीशील सुदारणा आसा जी IE8 आनी सकयल सारकिल्या पोरन्या ब्राउझरां खातीर उपलब्ध ना.

<table class = "सामान्य-कोश्टक झेब्रा-पट्टीदार" > 
...
</कोश्टक>

देखीक: झेब्रा-पट्टीदार w / TableSorter.js

आदलें उदाहरण घेवन, आमी jQuery आनी Tablesorter प्लगइन वरवीं क्रमवारी कार्यक्षमताय पुरवण करून आमच्या कोश्टकांची उपयुक्तताय सुदारतात . क्रमवारी बदलपाखातीर खंयच्याय स्तंभाच्या शीर्षकाचेर क्लिक करात.

# 1 .	पयलें नांव	निमाणें नांव	भास
१	तुमचें	एक	इंग्लीश
२	जोय हांणी केला	सिक्सपॅक हें नांव	इंग्लीश
३	स्टु	डेंट हें नांव	संहिता

<script src = "js/jquery/jquery.tablesorter.min.js" ></स्क्रिप्ट> 
<लिपी > हें नांव 
  $ ( फंक्शन () { 1 . 
    $ ( "कोश्टक # क्रमवारी कोश्टक उदाहरण" ). tablesorter ({ sortList : [[ 1 , 0 ]] });  
  });
</script> हें नांव
<table class = "सामान्य-कोश्टक झेब्रा-पट्टीदार" > 
  ...
</कोश्टक>

मुलभूत शैली

सगळ्या फॉर्मांक वाचपाक येवपी आनी मापनीय पद्दतीन सादर करपाक मुलभूत शैली दिल्या. मजकूर इनपुट, निवड यादी, मजकूरक्षेत्रां, रेडिओ बटणां आनी चेकबॉक्स, आनी बटणां खातीर शैली दिल्या.

उदाहरण रूप आख्यायिका

एक्स-लार्ज इनपुट

वेंचचें

१ २ ३ ४ ५

वेंचचें

१ २ ३ ४ ५

संपादन करपाक शकना अशें इनपुट

कांय मोल हांगा

अक्षम केल्लें इनपुट

एक्स-लार्ज इनपुट

मदत मजकूराचे ल्हान स्निपेट

उदाहरण रूप आख्यायिका

पूर्वप्रलंबित मजकूर

@ हांणी केला.

पूर्वप्रलंबित चेकबॉक्स

जोडला चेकबॉक्स

फायल इनपुट

उदाहरण रूप आख्यायिका

पर्यायांची वळेरी

• पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
• पर्याय दोनय तपासून फॉर्म रिजल्टांत आस्पाव करूं येता
• पर्याय तीन-होय, तुमी अदमास केला-तशेंच तपासूंक शकता आनी फॉर्म परिणामांत आस्पाव करूंक शकता
• पर्याय चार अक्षम केल्ल्यान तपासूंक मेळना.

टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.

तारीख श्रेणी

प्रती सगळे वेळ पॅसिफीक मानक वेळ (GMT -08:00) म्हणून दाखयल्यात.

पाठक्षेत्र

गरज पडल्यार वयर दिल्ल्या क्षेत्राचें वर्णन करपाक मदत मजकूर ब्लॉक.

पर्यायांची वळेरी

• पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
• पर्याय दोनय तपासून फॉर्म रिजल्टांत आस्पाव करूं येता

बदल जतनाय घेयात  रद्द

रचून दवरिल्लीं फॉर्मां

तुमच्या फॉर्माच्या एचटीएमएलांत जोडात .form-stackedआनी तुमकां तांच्या शेतांचेर लेबलां तांच्या उजव्या वटेन न्हय तर तांच्या शेतां वयल्यान आसतलीं. तुमचे फॉर्म ल्हान आसल्यार वा तुमचे कडेन जड फॉर्मां खातीर इनपुटांचे दोन स्तंभ आसल्यार हें बरेंच काम करता.

उदाहरण रूप आख्यायिका

एक्स-लार्ज इनपुट

वेंचचें

१ २ ३ ४ ५

उदाहरण रूप आख्यायिका

एक्स-लार्ज इनपुट

मदत मजकूराचे ल्हान स्निपेट

पर्यायांची वळेरी

• पर्याय एक हो आनी तो-तो कित्याक म्हान आसा हाची खात्रीन आस्पाव करात
• पर्याय दोनय तपासून फॉर्म रिजल्टांत आस्पाव करूं येता

टिप: लेबलां खूब व्हडल्या क्लिक क्षेत्रां खातीर आनी चड वापरपाक येवपी फॉर्मा खातीर सगळ्या पर्यायांक भोंवतणीं आसतात.

बदल जतनाय घेयात  रद्द

बटणां घालतात

एक रूढिवाद म्हूण, बटणां कृतींखातीर वापरतात जाल्यार दुवे वस्तूंखातीर वापरतात. देखीक, "डावनलोड" हें बटण आसूं येता आनी "हालीची क्रिया" दुवो आसूं येता.

सगळे बटण पूर्वनिर्धारीतपणान उजवाड राशीचे शैलीचेर, पूण निळो .primaryवर्ग उपलब्ध आसा. प्लस, स्वताच्यो शैली रोल करप सोंपें peasy.

उदाहरण बटण

बटण शैली लागू केल्ल्यान खंयच्याय गजालीक लागू करूं येतात .btn. सादारणपणान तुमकां हीं फकत <a>, <button>, आनी निवड <input>घटकांक लागू करपाची इत्सा जातली. कशें दिसता तें पळयात:

पर्यायी आकार दिवप

फॅन्सी व्हडले वा ल्हान बटण? ताचेर आसचें!

अक्षम स्थिती

सक्रिय नाशिल्ल्या बटणां खातीर वा ऍप्लिकेशनान एका वा दुसऱ्या कारणाक लागून अक्षम केल्ल्या बटणां खातीर, अक्षम स्थिती वापरात. तें .disabledदुव्यां खातीर आनी घटकां :disabledखातीर .<button>

दुवे आसात

बटणां घालतात

काय तें

आमची टॉपबार ही एक स्थिर बार आसा जी वेबसायटीचो लोगो वा नांव, प्राथमीक नेव्हिगेशन, आनी सोद फॉर्म दवरता.

अनुकूल करपाक येता

भितरले सगळे घटक, आनी पुराय टॉपबार तशेंच, पर्यायी आसात. तुमी लोगो/नांव, नाव, सोद, आनी दुय्यम नाव-वा ताचें खंयचेंय संयोजन समाविष्ट करपाक निवडूंक शकतात.

ड्रॉपडावन हांचो आस्पाव आसा

मुखेल नेव्हिगेशनचो एक भाग म्हूण, तुमच्या नेव्हिगेशनांत ड्रॉपडावन जोडपाची तुमकां क्षमता आमी समाविष्ट केल्या. तें कशें जाता तें पळोवपा खातीर वयर दिल्लें दुय्यम nav (उजवें संरेखित) पळयात.

टॅब आनी गोळ्या

एक 1 च्या आदारान सादें दुय्यम नेव्हिगेशन तयार करचें <ul>. योग्य वर्ग जोडून टॅब वा गोळ्यां मदीं स्वॅप करात.

आमचीं खातें मांडावळी पानां सारकिल्या सामुग्रीच्या उप-विभागां खातीर आनी सारके सामुग्रीच्या पानांचेर टॉगल करपा खातीर वापरपी वेळरेखां खातीर ग्रेट. टॅब वा गोळ्या शैलींत उपलब्ध आसा.

• घर
• प्रोफायल
• संदेश
• मांडावळी
• संपर्क

<ul वर्ग = "टॅब" > 
  <li class = "सक्रीय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > प्रोफायल </a></li> 
  <li><a href = "#" > संदेश </a></li> 
  <li><a href = "#" > मांडावळी </a></li> 
  <li><a href = "#" > संपर्क करचो </a></li> 
</ul> हें नांव

• घर
• प्रोफायल
• संदेश
• मांडावळी
• संपर्क

<ul वर्ग = "गोळ्या" > 
  <li class = "सक्रीय" ><a href = "#" > घर </a></li>  
  <li><a href = "#" > प्रोफायल </a></li> 
  <li><a href = "#" > संदेश </a></li> 
  <li><a href = "#" > मांडावळी </a></li> 
  <li><a href = "#" > संपर्क करचो </a></li> 
</ul> हें नांव

पृष्ठांकन करप

Rdio कडल्यान प्रेरीत केल्लें अल्ट्रा सादें आनी किमान शैलीचें पृष्ठांकन. व्हडलो ब्लॉक चुकप कठीण, सहज मापनीय, आनी व्हड क्लिक क्षेत्र पुरवण करता.

<div वर्ग = "पृष्ठांकन" > 
  <उल> हें नांव
    <li class = "आदीं अक्षम" ><a   href = "#" > ← आदलें </a></li>
    <li वर्ग = "सक्रीय" ><a   href = "#" > 1 </a></li>
    <li><a हें नांव  href = "#" > २ </a></li> हें नांव
    <li><a हें नांव  href = "#" > ३ </a></li> हें नांव
    <li><a हें नांव  href = "#" > ४ </a></li> हें नांव
    <li><a हें नांव  href = "#" > ५ </a></li> हें नांव
    <li वर्ग = "फुडलें" ><a   href = "#" > फुडें → </a></li> हें नांव
  </ul> हें नांव
</div> हें नांव

मुळाव्यो सावधानताय

कृतीचें अपयश, संभाव्य अपयश वा यश उजवाडावपाखातीर एक ओळीचे संदेश. खास करून रूपांखातीर उपेगी पडटा.

संदेश आडावप

थोडें स्पश्टीकरणाची गरज आशिल्ल्या संदेशां खातीर, आमचे कडेन परिच्छेद शैलीचे अलर्ट आसात. लांब चुकीचे संदेश बुडबुडें मारपाक, वापरप्याक प्रलंबीत कृतीची शिटकावणी दिवपाक, वा फकत पानाचेर चड भर दिवपा खातीर म्हायती सादर करपाक हे परिपूर्ण आसात.

मोडल हांचो आस्पाव जाता

मोडल-संवाद वा लायटबॉक्स-जंय पार्श्वभूंय संदर्भ सांबाळप म्हत्वाचें आसता अशा परिस्थितींत संदर्भ कृतीं खातीर बरे आसात.

साधन टिप्स

गोंदळिल्ल्या वापरप्याक मदत करपाक आनी तांकां योग्य दिशेन दाखोवपाक ट्विप्सी सुपर उपेगी आसात.

पोपोव्हर्स हें नांव

मांडावळीचेर परिणाम करिनासतना पानाक उपमजकूर म्हायती दिवपाक पॉपओव्हर वापरात.

बूटस्ट्रॅप Preboot , एक मुक्त-स्त्रोत पॅक मिक्सिन आनी चड- उणें Less च्या संयोजनांत वापरपाक तयार केल्लें , एक CSS प्रीप्रोसेसर जलद आनी सोप्या वेब विकासा खातीर.

आमी Bootstrap त Preboot कसो वापरला तें पळयात आनी तुमच्या फुडल्या प्रकल्पाचेर Less चालीक लावपाचें निवडल्यार तुमी ताचो वापर कसो करूंक शकतात तें पळयात.

ताचो वापर कसो करचो

तुमच्या ब्राउझरांत जावास्क्रिप्ट वरवीं Bootstrap च्या Less चड-उणें, मिक्सिन, आनी CSS त नेस्टिंग हांचो पुराय वापर करपाक हो पर्याय वापरात.

<link rel = "स्टाइलशीट/उणें" href = "उणें/बूटस्ट्रॅप.उणें" माध्यम = "सगलें" />    
<script src = "जेएस / कमी-1.0.41.मिनिट.जेएस" ></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;            
 
// मुळावी रेखा
@मूळ रेखा : 20px ;          

टिप्पणी करप

/* ... */CSS च्या सामान्य वाक्यरचनावांगडाच Less टिप्पणी करपाची आनीक एक शैलीय दिता .

// ही एक टिप्पणी आसा
/* हीय एक टिप्पणी */

वाझू अप मिक्सिन करता

मिक्सिन मुळाव्यान CSS खातीर समाविष्ट वा आंशिक आसात, जे तुमकां कोडाच्या ब्लॉकाक एकांत एकठांय करपाक परवानगी दितात. ते विक्रेत्या उपसर्ग गुणधर्मां खातीर बरे आसात जशे की box-shadow, क्रॉस-ब्राउझर ग्रेडियेंट, फॉन्ट स्टॅक, आनी हेर. Bootstrap कडेन आशिल्ल्या मिक्सिनांचो नमुनो सकयल दिला.

फॉन्ट स्टॅक करतात

# फॉन्ट { 1 .
  हें . आशुलिपि ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    रेखा - उंचाय : @lineHeight ; 
  } हें .
  हें . sans - serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    font - family : "हेल्व्हेटिका न्यू" , हेल्व्हेटिका , एरियल , sans - serif ;   
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    रेखा - उंचाय : @lineHeight ; 
  } हें .
  हें . serif ( @वजन : सामान्य , @ आकार : 14px , @lineHeight : 20px ) {     
    font - family : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;     
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    रेखा - उंचाय : @lineHeight ; 
  } हें .
  हें . मोनोस्पेस ( @वजन : सामान्य , @आकार : 12px , @lineHeight : 20px ) {     
    font - family : "मोनाको" , कुरियर नवीन , मोनोस्पेस ;   
    फॉन्ट - आकार : @ आकार ; 
    फॉन्ट - वजन : @ वजन ; 
    रेखा - उंचाय : @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    
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', ग्रेडिएंटप्रकार=1)" , @startColor , @endColor ); // आयई 8 + हें नांव  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', ग्रेडिएंटप्रकार=1)" , @startColor , @endColor )); // आयई6 आनी आयई7 
    पार्श्वभूंय - प्रतिमा : रेखीव - प्रवणताय ( डावें , @startColor , @endColor ); // ले मानक   
  } हें .
  हें . उभ्या ( @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   
    - ms - filter : %( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', ग्रेडिएंटप्रकार=0)" , @startColor , @endColor ); // आयई 8 + हें नांव  
    filter : e (%( "progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', ग्रेडिएंटप्रकार=0)" , @startColor , @endColor )); // आयई6 आनी आयई7 
    पार्श्वभूंय - प्रतिमा : रेखीव - ग्रेडिएंट ( @startColor , @endColor ); // मानक हें  
  } हें .
  हें . दिशात्मक ( @startColor : #555, @endColor: #333, @deg: 45deg) { 
    ...
  } हें .
  हें . उबे - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { 
    ...
  } हें .
} हें .

कार्यावळी आनी जाळी पद्दत

फॅन्सी घेयात आनी सकयल दिल्ल्या प्रमाणें लवचीक आनी बळिश्ट मिक्सिन तयार करपाक कांय गणित करात.

// जाळीदारी
@gridस्तंभ : 16 ;       
@gridस्तंभरुंदी : 40px ;   
@gridगटररुंदी : 20px ;   
 
// जाळी प्रणाली
हें . पात्र { 1 .
  width : @साइटरुंदी ; 
  मार्जिन : 0 ऑटो ;  
  हें . स्पश्ट करप ();
} हें .
हें . स्तंभ ( @columnSpan : 1 ) { 1 .  
  प्रदर्शन : इनलायन ; 
  float : उजवें ;
  width : ( @gridColumnWidth * @columnSpan ) + ( @gridGutterWidth * ( @स्तंभविस्तार - 1 ));         
  मार्जिन - डावें : @gridGutterWidth ; 
  &: पयलें - भुरगें { .
    मार्जिन - डावें : ० ; 
  } हें .
} हें .
हें . ऑफसेट ( @column ऑफसेट : 1 ) { 1 .  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! म्हत्वाचें ;          
} हें .