डिफ़ॉल्ट ग्रिड बा

बूटस्ट्रैप के हिस्सा के रूप में दिहल गइल डिफ़ॉल्ट ग्रिड सिस्टम 940px चौड़ाई वाला 16 कॉलम वाला ग्रिड हवे। इ लोकप्रिय 960 ग्रिड सिस्टम के स्वाद ह, लेकिन बिना बाईं ओर अवुरी दाहिना ओर के अतिरिक्त मार्जिन/पैडिंग के।

उदाहरण ग्रिड मार्कअप के बा

जइसे कि इहाँ देखावल गइल बा, दू गो "कॉलम" के साथ एगो बेसिक लेआउट बनावल जा सके ला, हर एक कॉलम सभ में से कई गो 16 गो फाउंडेशन कॉलम सभ के बिस्तार वाला बा जे हमनी के अपना ग्रिड सिस्टम के हिस्सा के रूप में परिभाषित कइले बानी जा। अउरी भिन्नता खातिर नीचे दिहल उदाहरण सभ के देखल जाय।

<div class="row"> के बा
  <div class = "span6 के बा" > के बा 
    ...
  </div> के बा
  <div class = "span10 के बा" > के बा 
    ...
  </div> के बा
</div> के बा

लेआउट तय हो गइल बा

लगभग कवनो साइट भा पन्ना खातिर एगो बेसिक 940px चौड़ा, केंद्रित कंटेनर लेआउट।

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

तरल पदार्थ के लेआउट के बारे में बतावल गइल बा

न्यूनतम- आ अधिकतम-चौड़ाई आ बाईं ओर के साइडबार वाला एगो लचीला द्रव भा तरल पन्ना संरचना। ऐप खातिर बढ़िया बा।

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

हेडिंग आ कॉपी के बारे में बतावल गइल बा

अपना वेबपन्ना के संरचना खातिर एगो मानक टाइपोग्राफिक पदानुक्रम।

ज1 के बा। शीर्षक 1 के बा

ज2 के बा। शीर्षक 2 के बा

ज3 के बा। शीर्षक 3 के बा

ज4 के बा। शीर्षक 4 के बा

ज5 के बा। शीर्षक 5 के बा

ज6 के बा। शीर्षक 6 के बा

उदाहरण खातिर पैराग्राफ के बा

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

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

रउआँ <strong>आ के साथ उपशीर्षक भी जोड़ सकत बानी<em>

विविध प्रकार के बा। तत्वन के बारे में बतावल गइल बा

जोर, पता, & संक्षिप्त नाम के प्रयोग कइल जाला

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

कब इस्तेमाल करे के बा

कौनों शब्द भा वाक्यांश आ एकरे आसपास के कॉपी के बीच दृश्य भेद जोड़े खातिर जोर टैग ( <strong>आ ) के इस्तेमाल कइल जाय। सादा पुरान ध्यान खातिर आ चिकना ध्यान आ टाइटिल खातिर <em>इस्तेमाल करीं .<strong><em>

एगो पैराग्राफ में जोर दिहल गइल बा

फ्यूसे दापिबस , टेलस एसी कर्सस कोमोडो , टॉर्टोर मौरिस कंडिमेंटम निभ , उत फर्मेन्टम मासा जस्टो बइठ अमेट रिसुस। मेसेनास फौसिबस मोलिस इंटरडम के नाम से जानल जाला। नुल्ला विटा एलिट लिबेरो, एगो फारेट्रा औग।

संबोधन दिहल गइल बा

तत्व के addressप्रयोग—रउआ अंदाजा लगा लेले बानी!—पते खातिर कइल जाला। इहाँ देखल जाव कि ई कइसे लउकत बा:

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

नोट: एगो में हर लाइन addressके अंत लाइन-ब्रेक ( <br />) से होखे के चाहीं ताकि सामग्री के सही तरीका से संरचना कइल जा सके जइसे कि ऊ वास्तविक जीवन में बिना कवनो शैली लागू कइले पढ़ल जाला।

संक्षिप्त रूप दिहल गइल बा

संक्षिप्त नाँव आ संक्षिप्त नाँव खातिर, abbrटैग के इस्तेमाल करीं ( HTML5acronym में डिप्रीकेट कइल गइल बा )। टैग के भीतर आशुलिपि फार्म डाल के पूरा नाम खातिर एगो टाइटिल सेट करीं।

ब्लॉककोट कइल गइल बा

<blockquote> <p> <cite>

blockquoteआपन चारों ओर paragraphआ citeटैग जरूर लपेट लीं । कवनो स्रोत के हवाला देत घरी ओह citeतत्व के इस्तेमाल करीं. CSS स्वचालित रूप से कौनों नाँव के पहिले em डैश (—) से लिखी।

लोरेम इप्सम डोलोर बइठल अमेट, कॉन्सेक्टेटर एडिपिसिसिंग एलिट, सेड कर ईउसमोड टेम्पोर इंसिडिडंट यूट लेबर एट डोलोरे मैग्ना एलिक्वा ...

डॉ. जूलियस हिबर्ट के ह

बिना क्रम के बा<ul>

• जेरेमी बिक्सबी के नाम से जानल जाला
• रॉबर्ट डेजुरे के नाम से जानल जाला
• जोश वाशिंगटन के ह
• एंटोन कैप्रेसी के नाम से जानल जाला
• हमार टीम के साथी लोग
  • जॉर्ज कास्तांजा के नाम से जानल जाला
  • जेरी सीनफेल्ड के नाम से जानल जाला
  • कॉस्मो क्रामर के नाम से जानल जाला
  • इलेन बेनिस के नाम से जानल जाला
  • न्यूमैन के ह
• जॉन याकूब के नाम से जानल जाला
• पॉल पियर्स के नाम से जानल जाला
• केविन गार्नेट के नाम से जानल जाला

अनस्टाइल कइल गइल बा<ul.unstyled>

• जेरेमी बिक्सबी के नाम से जानल जाला
• रॉबर्ट डेजुरे के नाम से जानल जाला
• जोश वाशिंगटन के ह
• एंटोन कैप्रेसी के नाम से जानल जाला
• हमार टीम के साथी लोग
  • जॉर्ज कास्तांजा के नाम से जानल जाला
  • जेरी सीनफेल्ड के नाम से जानल जाला
  • कॉस्मो क्रामर के नाम से जानल जाला
  • इलेन बेनिस के नाम से जानल जाला
  • न्यूमैन के ह
• जॉन याकूब के नाम से जानल जाला
• पॉल पियर्स के नाम से जानल जाला
• केविन गार्नेट के नाम से जानल जाला

आदेश दिहल गइल बा<ol>

1. जेरेमी बिक्सबी के नाम से जानल जाला
2. रॉबर्ट डेजुरे के नाम से जानल जाला
3. जोश वाशिंगटन के ह
4. एंटोन कैप्रेसी के नाम से जानल जाला
5. हमार टीम के साथी लोग
   1. जॉर्ज कास्तांजा के नाम से जानल जाला
   2. जेरी सीनफेल्ड के नाम से जानल जाला
   3. कॉस्मो क्रामर के नाम से जानल जाला
   4. इलेन बेनिस के नाम से जानल जाला
   5. न्यूमैन के ह
6. जॉन याकूब के नाम से जानल जाला
7. पॉल पियर्स के नाम से जानल जाला
8. केविन गार्नेट के नाम से जानल जाला

बिबरनdl

विवरण के सूची दिहल गइल बा

शब्दन के परिभाषित करे खातिर एगो विवरण सूची एकदम सही बा।

यूइसमोड के नाम से जानल जाला

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

डोनेक आईडी एलिट नॉन मी पोर्टा ग्रेविडा एट एगेट मेटस।

मलेसुआडा पोर्टा के बा

एटियाम पोर्टा सेम मालेसुआडा मैग्ना मोलिस यूइसमोड के नाम से जानल जाला।

टेबल बनावे के बा

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

टेबल बहुत बढ़िया होला-बहुत कुछ खातिर। हालाँकि, बढ़िया टेबल सभ के उपयोगी, स्केल करे लायक, आ पठनीय (कोड स्तर पर) होखे खातिर मार्कअप प्यार के बिट के जरूरत होला। मदद करे खातिर कुछ टिप्स दिहल जा रहल बा।

हमेशा अपना कॉलम हेडर के theadअइसन लपेटीं कि पदानुक्रम thead> tr> thहोखे .

कॉलम हेडर के समान, आपके टेबल के सभ बॉडी कंटेंट के एगो में लपेटल जाए के चाही tbodyताकि आपके हायरर्की tbody> tr> tdहोखे।

उदाहरण: डिफ़ॉल्ट तालिका शैली सभ के बारे में बतावल गइल बा

सभ टेबल सभ के खाली जरूरी सीमा सभ के साथ स्वचालित रूप से स्टाइल कइल जाई ताकि पठनीयता सुनिश्चित कइल जा सके आ संरचना के बनावे रखल जा सके। अतिरिक्त क्लास भा एट्रिब्यूट जोड़ला के जरूरत नइखे.

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	कुछु	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

<table class="सामान्य-तालिका"> के बा वर्ग = "सामान्य-तालिका" > बा
  ...
</table> के बा

उदाहरण खातिर : ज़ेबरा-धारी वाला

ज़ेबरा-स्ट्राइपिंग जोड़ के अपना टेबल के साथ तनी फैंसी बनाईं-बस .zebra-stripedक्लास जोड़ीं।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	कुछु	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

<table class="सामान्य-तालिका ज़ेबरा-धारीदार"> class = "सामान्य-तालिका ज़ेबरा-धारीदार" >
...
</table> के बा

उदाहरण खातिर: ज़ेबरा-धारीदार w / TableSorter.js

पिछला उदाहरण लेके हमनी के jQuery आ Tablesorter प्लगइन के माध्यम से सॉर्टिंग कार्यक्षमता उपलब्ध करा के अपना टेबल के उपयोगिता में सुधार करेनी जा। सॉर्ट बदले खातिर कवनो कॉलम के हेडर पर क्लिक करीं।

# भोजपुरी में पढ़ें:	पहिला नांव	अंतिम नाम	भाखा
1 के बा	तोहार	एगो	अंगरेजी
2 के बा	जो के बा	सिक्सपैक के बा	अंगरेजी
3 के बा	स्टू के बा	डेंट हो गइल	कोड के बा

<स्क्रिप्ट प्रकार="पाठ/जावास्क्रिप्ट" src="js/jquery/jquery.tablesorter.min.js"></स्क्रिप्ट> type = "टेक्स्ट/जावास्क्रिप्ट" src = "जेएस/जेक्वेरी/जेक्वेरी.टेबलसॉर्टर.मिन.जेएस" ></स्क्रिप्ट> 
<स्क्रिप्ट प्रकार = "पाठ/जावास्क्रिप्ट" > बा 
  $ ( दस्तावेज ) के बा। तैयार बा ( फंक्शन () { 1। 
    $ ( "तालिका # सॉर्टटेबलउदाहरण" ) के बा। टेबलसॉर्टर ( { सॉर्टलिस्ट : [[ 1 , 0 ]]} );   
  }) के बा;
</script> के बा
<table class = "सामान्य-तालिका ज़ेबरा-धारीदार" > 
  ...
</table> के बा

डिफ़ॉल्ट शैली के बा

सभ फार्म सभ के डिफ़ॉल्ट स्टाइल दिहल गइल बा जेह से कि इनहन के पठनीय आ स्केल करे लायक तरीका से पेश कइल जा सके। टेक्स्ट इनपुट, सिलेक्ट लिस्ट, टेक्स्टएरिया, रेडियो बटन आ चेकबॉक्स, आ बटन खातिर स्टाइल दिहल गइल बा।

उदाहरण रूप किंवदंती के बा

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

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

असंपादन योग्य इनपुट बा

कुछ मूल्य इहाँ बा

इनपुट के अक्षम हो गइल बा

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

मदद पाठ के छोट स्निपेट

उदाहरण रूप किंवदंती के बा

पूर्व-लंबित पाठ के बारे में बतावल गइल बा

@ के बा।

प्रीपेंड चेकबॉक्स के बा

संलग्न चेकबॉक्स बा

फाइल इनपुट के बा

उदाहरण रूप किंवदंती के बा

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता
• विकल्प तीन के भी-हँ, रउआ अंदाजा लगा लेले बानी-ओकर जांच कइल जा सकेला आ फॉर्म रिजल्ट में शामिल कइल जा सकेला
• विकल्प चार के जांच ना कइल जा सके काहे कि ई अक्षम बा.

नोट: लेबल सभ बहुत बड़ क्लिक क्षेत्र आ ढेर इस्तेमाल करे लायक फॉर्म खातिर सभ विकल्प सभ के घेर लेलें।

तारीख के रेंज के बा

खातिर सभ समय प्रशांत मानक समय (GMT -08:00) के रूप में देखावल गइल बा।

टेक्स्टएरिया के बा

जरूरत पड़ला पर ऊपर दिहल क्षेत्र के वर्णन करे खातिर मदद पाठ के ब्लॉक।

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता

बदलाव के सहेजल जाला मना कइ दीं

ढेर हो गइल फार्म बा

अपना फॉर्म के एचटीएमएल में जोड़ दीं .form-stackedत रउरा ओह लोग के बाईं ओर के बजाय ओह लोग के फील्ड के ऊपर लेबल लागी. अगर राउर फॉर्म छोट होखे भा भारी फॉर्म खातिर रउरा लगे दू गो कॉलम के इनपुट होखे त ई बहुते बढ़िया काम करेला.

उदाहरण रूप किंवदंती के बा

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

चुनीं

1 के बा 2 के बा 3 के बा 4 के बा 5 के बा

उदाहरण रूप किंवदंती के बा

विकल्प के सूची बा

• विकल्प एक ई आ ऊ बा-जरूर शामिल करीं कि ई काहे बढ़िया बा
• विकल्प दू के भी जांच कईल जा सकता अवुरी फॉर्म के नतीजा में शामिल कईल जा सकता

नोट: लेबल सभ बहुत बड़ क्लिक क्षेत्र आ ढेर इस्तेमाल करे लायक फॉर्म खातिर सभ विकल्प सभ के घेर लेलें।

बदलाव के सहेजल जाला मना कइ दीं

बटन के बा

एगो कन्वेंशन के रूप में बटन सभ के इस्तेमाल क्रिया सभ खातिर होला जबकि लिंक सभ के इस्तेमाल ऑब्जेक्ट सभ खातिर कइल जाला। उदाहरण खातिर, "डाउनलोड" एगो बटन हो सके ला आ "हाल के गतिविधि" एगो लिंक हो सके ला।

सभ बटन डिफ़ॉल्ट रूप से हल्का ग्रे स्टाइल में होखे लें, बाकी नीले रंग के .primaryक्लास उपलब्ध बा। एकरा अलावे, अपना स्टाइल के रोल कईल आसान मटर बा।

उदाहरण के बटन के बारे में बतावल गइल बा

बटन शैली के लागू कइला के साथ कवनो भी चीज पर लागू कइल जा सकेला .btn। आमतौर पर रउआँ इनहन के खाली a, button, आ चयन inputतत्व सभ पर लागू कइल चाहब। इहाँ देखल जाव कि ई कइसे लउकत बा:

बारी-बारी से आकार के बा

फैंसी बड़ बटन बा कि छोट? एकरा पर बा!

अक्षम अवस्था में बा

जवन बटन सक्रिय नईखे चाहे कवनो ना कवनो कारण से ऐप के ओर से अक्षम बा, ओकरा खाती अक्षम स्थिति के इस्तेमाल करीं। ऊ .disabledलिंक खातिर आ तत्वन :disabledखातिर बा.button

लिंक दिहल गइल बा

बटन के बा

ई का बा

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

अनुकूलन योग्य बा

भीतर के सभ तत्व, आ पूरा टॉपबार भी, वैकल्पिक बाड़ें। रउआँ लोगो/नाँव, नव, खोज, आ सेकेंडरी नव-या एकर कौनों भी संयोजन शामिल करे के विकल्प चुन सकत बानी।

ड्रॉपडाउन शामिल बा

मुख्य नेविगेशन के हिस्सा के रूप में, हमनी के रउआँ खातिर अपना नेव में ड्रॉपडाउन जोड़े के क्षमता शामिल कइले बानी जा। ऊपर दिहल गइल सेकेंडरी नव (दाहिना संरेखित) देखल जाय कि ई कइसे कइल गइल बा।

टैब आ गोली के बारे में बतावल गइल बा

एगो के साथ सरल माध्यमिक नेविगेशन बनाईं ul. उचित क्लास जोड़ के टैब भा गोली के बीच अदला-बदली करीं.

हमनी के खाता सेटिंग पन्ना नियर सामग्री के उप-खंड खातिर बढ़िया आ अइसन सामग्री के पन्ना सभ के बीच टॉगल करे खातिर यूजर टाइमलाइन। टैब वाला भा गोली वाला स्टाइल में उपलब्ध बा.

• घर
• प्रोफाइल
• संदेश दिहल गइल बा
• सेटिंग्स के बारे में बतावल गइल बा
• संपर्क

<ul class="tabs"> के बा class = "टैब" > के बा
  <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 class="गोली"> के बा वर्ग = "गोली" > के बा
  <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> के बा

पृष्ठांकन कइल गइल बा

आरडीओ से प्रेरित अल्ट्रा सरल आ न्यूनतम स्टाइल के पेजिनेशन। बड़ ब्लॉक के छूटल मुश्किल बा, आसानी से स्केल करे लायक बा, अवुरी बड़ क्लिक एरिया उपलब्ध करावेला।

<div class="पृष्ठांकन"> के बारे में बतावल गइल बा class = "पृष्ठांकन" > के बा
  <उल> के बा
    <li class = "पिछला अक्षम" ><a href = "" > ← पिछला </a></li> के बा  
    <li class = "सक्रिय" ><a href = "" > 1 </a></li> बा  
    <li><a href = "" > 2 </a></li> के बा 
    <li><a href = "" > 3 </a></li> के बा 
    <li><a href = "" > 4 ​​</a></li> के बा 
    <li><a href = "" > 5 </a></li> के बा 
    <li class = "अगला" ><a href = "" > अगला → </a></li> के बा  
  </ul> के बा
</div> के बा

बेसिक अलर्ट दिहल गइल बा

कवनो क्रिया के असफलता, संभावित असफलता, भा सफलता के उजागर करे खातिर एक लाइन के संदेश। खास तौर पर रूप खातिर उपयोगी होला।

संदेशन के ब्लॉक कर दिहल जाव

जवना संदेशन खातिर तनी सफाई के जरूरत होखे, हमनी के लगे पैराग्राफ स्टाइल अलर्ट बा। ई लंबा त्रुटि संदेश सभ के बुदबुदावे खातिर, कौनों प्रयोगकर्ता के कौनों लंबित कार्रवाई के चेतावनी देवे खातिर, या खाली पन्ना पर अउरी जोर देवे खातिर जानकारी पेश करे खातिर एकदम सही बाड़ें।

मोडल के बा

मोडल-संवाद भा लाइटबॉक्स- अइसन स्थिति सभ में संदर्भ क्रिया सभ खातिर बहुत बढ़िया होलें जहाँ ई जरूरी होखे कि पृष्ठभूमि संदर्भ के रखरखाव कइल जाय।

पोपोवर्स के नाम से जानल जाला

लेआउट के प्रभावित कइले बिना कौनों पन्ना के उपपाठ जानकारी देवे खातिर पॉपओवर सभ के इस्तेमाल करीं।

बूटस्ट्रैप के निर्माण प्रीबूट के साथ कइल गइल , मिक्सिन आ चर सभ के एगो ओपन-सोर्स पैक जेकर इस्तेमाल लेस के साथ कइल जा सके ला , ई तेजी से आ आसान वेब बिकास खातिर एगो सीएसएस प्रीप्रोसेसर हवे।

देखीं कि हमनी का बूटस्ट्रैप में प्रीबूट के कइसे इस्तेमाल कइनी जा आ अगर रउरा अपना अगिला प्रोजेक्ट पर लेस चलावे के चुनीं त एकर इस्तेमाल कइसे कर सकीलें.

एकर इस्तेमाल कईसे कईल जाला

अपना ब्राउजर में जावास्क्रिप्ट के माध्यम से बूटस्ट्रैप के लेस वैरिएबल, मिक्सिन, आ सीएसएस में नेस्टिंग के पूरा इस्तेमाल करे खातिर एह विकल्प के इस्तेमाल करीं.

<link rel="स्टाइलशीट/कम" प्रकार="पाठ/css" href="कम/बूटस्ट्रैप.कम" मीडिया="सब" /> rel = "स्टाइलशीट/कम" प्रकार = "पाठ/सीएस" href = "कम/बूटस्ट्रैप.कम" मीडिया = "सब" />    
<स्क्रिप्ट प्रकार = "पाठ/जावास्क्रिप्ट" src = "जेएस/कम-1.0.41.मिनट.जेएस" ></स्क्रिप्ट>  

.js समाधान महसूस नइखीं करत? लेस मैक ऐप के आजमाईं भा जब रउरा आपन कोड तैनात करीं त संकलित करे खातिर Node.js के इस्तेमाल करीं.

का शामिल बा

बूटस्ट्रैप के हिस्सा के रूप में ट्विटर बूटस्ट्रैप में जवन कुछ शामिल बा ओकर कुछ खास बात इहाँ दिहल बा। डाउनलोड करे आ अउरी जाने खातिर बूटस्ट्रैप वेबसाइट भा गिथब प्रोजेक्ट पन्ना पर जाईं.

रंग के चर के बारे में बतावल गइल बा

कम में चर आपके सीएसएस सिरदर्द मुक्त बनाए रखे आ अपडेट करे खातिर एकदम सही बा। जब रउआँ कवनो रंग मान भा अक्सर इस्तेमाल होखे वाला मान बदलल चाहत बानी त ओकरा के एक जगह अपडेट करीं आ रउआँ सेट हो जाईं।

// लिंक दिहल गइल बा
@linkColor : # 8b59c2 के बा;         
@linkColorHover : अंधेरा हो जाला (     @linkColor , 10 ); 
// ग्रेज के बा
@काला : # 000 के बा;             
@grayDark :           हल्का करीं ( @काला , 25 %); 
@ ग्रे :               हल्का करीं ( @ काला , 50 %); 
@grayLight :          हल्का करीं ( @काला , 70 %); 
@grayLighter :        हल्का करीं ( @काला , 90 %); 
@गोरा : #fff के बा;             
// लहजा के रंग के बा
@ नीला : # 08b5fb के बा ;              
@ हरियर : # 46a546 के बा ;             
@लाल : # 9d261d के बा ;               
@ पीला : # ffc40d के बा ;            
@ नारंगी : # f89406 के बा ;            
@ गुलाबी : # c3325f के बा ;              
@ बैंगनी : # 7a43b6 के बा ;            
// आधार रेखा के बा
@बेसलाइन : 20px के बा ;          

टिप्पणी करत बानी

/* ... */कम सीएसएस के सामान्य सिंटैक्स के अलावा टिप्पणी करे के एगो अउरी शैली भी उपलब्ध करावे ला ।

// ई एगो टिप्पणी बा
/* ईहो एगो टिप्पणी बा */

वजू के ऊपर मिक्सिंग करेला

मिक्सिन मूल रूप से सीएसएस खातिर शामिल भा आंशिक होलें, एह से रउआँ कोड के एगो ब्लॉक के एक में जोड़ सके लीं। ई विक्रेता उपसर्ग वाला गुण जइसे कि box-shadow, क्रॉस-ब्राउजर ढाल, फॉन्ट स्टैक, आ अउरी बहुत कुछ खातिर बढ़िया बाड़ें। नीचे ओह मिक्सिन के नमूना दिहल गइल बा जवन बूटस्ट्रैप के संगे शामिल बा।

फॉन्ट के ढेर हो जाला

# फॉन्ट { 1000 के बा।
  . आशुलिपि ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {     
    फॉन्ट - आकार : @ आकार के बा ; 
    फॉन्ट - वजन : @ वजन के बा ; 
    लाइन - ऊँचाई : @ लाइन के ऊँचाई ; 
  } के बा।
  . sans - serif ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {     
    फॉन्ट - परिवार : "हेल्वेटिका न्यू" , हेल्वेटिका , एरियल , सैंस - सेरिफ ;   
    फॉन्ट - आकार : @ आकार के बा ; 
    फॉन्ट - वजन : @ वजन के बा ; 
    लाइन - ऊँचाई : @ लाइन के ऊँचाई ; 
  } के बा।
  . serif ( @वजन : सामान्य , @आकार : 14px , @lineHeight : 20px ) {     
    फॉन्ट - परिवार : "जॉर्जिया" , टाइम्स न्यू रोमन , टाइम्स , sans - serif ;     
    फॉन्ट - आकार : @ आकार के बा ; 
    फॉन्ट - वजन : @ वजन के बा ; 
    लाइन - ऊँचाई : @ लाइन के ऊँचाई ; 
  } के बा।
  . मोनोस्पेस ( @वजन : सामान्य , @आकार : 12px , @lineHeight : 20px ) {     
    फॉन्ट - परिवार : "मोनाको" , कूरियर नया , मोनोस्पेस ;   
    फॉन्ट - आकार : @ आकार के बा ; 
    फॉन्ट - वजन : @ वजन के बा ; 
    लाइन - ऊँचाई : @ लाइन के ऊँचाई ; 
  } के बा।
} के बा।

ढाल के बारे में बतावल गइल बा

# ढाल { के बा।
  . क्षैतिज ( @ शुरू रंग : # 555, @ अंत रंग: # 333) { 1। 
    पृष्ठभूमि - रंग : @endColor ; 
    पृष्ठभूमि - दोहरावे के : दोहरावे के - x ;
    पृष्ठभूमि - छवि : - khtml - ढाल ( रैखिक , बाएं ऊपर , दाहिने ऊपर , से ( @startColor ), से ( @endColor )); // कंक्वेर के बा   
    पृष्ठभूमि - छवि : - moz - रैखिक - ढाल ( बाईं ओर , @ startColor , @endColor ); // एफएफ 3.6+ के बा    
    पृष्ठभूमि - छवि : -एमएस - रेखीय - ढाल ( बाँया , @startColor , @endColor ) ; // आईई10 के बा    
    पृष्ठभूमि - छवि : - वेबकिट - ढाल ( रैखिक , बाएं ऊपर , दाहिने ऊपर , रंग - बंद ( 0 %, @ startColor ), रंग - बंद ( 100 %, @endColor )); // सफारी 4+, क्रोम 2+ के बा    
    पृष्ठभूमि - छवि : - वेबकिट - रैखिक - ढाल ( बाईं ओर , @ startColor , @endColor ); // सफारी 5.1+, क्रोम 10+ बा    
    पृष्ठभूमि - छवि : - ओ - रैखिक - ढाल ( बाईं ओर , @ startColor , @endColor ); // ओपेरा 11.10 के बा    
    - ms - फिल्टर : %( "progid: DXImageTransform.Microsoft.gradient (startColorstr='%d', endColorstr='%d', ढालप्रकार=1)" , @startColor , @endColor ); // आईई8+ के बा  
    फिल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (शुरुआत रंग = '% d', अंत रंग = '% d', ढाल प्रकार = 1)" , @ शुरू रंग , @ अंत रंग )); // आईई6 अउर आईई7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( बाईं ओर , @startColor , @endColor ); // ले मानक के बा   
  } के बा।
  . ऊर्ध्वाधर ( @ शुरू रंग : # 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 के बा   
    - ms - फिल्टर : %( "progid: DXImageTransform.Microsoft.gradient (startColorstr='%d', endColorstr='%d', ढालप्रकार=0)" , @startColor , @endColor ); // आईई8+ के बा  
    फिल्टर : ई (% ( "progid: DXImageTransform.Microsoft.gradient (शुरुआत रंग = '% d', अंत रंग = '% d', ढाल प्रकार = 0)" , @ शुरू रंग , @ अंत रंग )); // आईई6 अउर आईई7 
    पृष्ठभूमि - छवि : रैखिक - ढाल ( @ startColor , @endColor ); // मानक के बा  
  } के बा।
  . दिशात्मक ( @ शुरू रंग : # 555, @ अंत रंग: # 333, @ डिग्री: 45 डिग्री) { 
    ...
  } के बा।
  . ऊर्ध्वाधर - तीन - रंग ( @startColor : #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) { बा। 
    ...
  } के बा।
} के बा।

संचालन आ ग्रिड सिस्टम के बारे में बतावल गइल बा

फैंसी होखीं आ कुछ गणित करीं जेहसे कि नीचे दिहल जइसन लचीला आ शक्तिशाली मिक्सिन पैदा कइल जा सके.

// ग्रिडिट्यूड के बा
@gridColumns : 16 के बा ;       
@gridColumnWidth : 40px के बा ;   
@gridGutterWidth : 20px के बा;   
// ग्रिड सिस्टम के बा
. कंटेनर के बा { .
  चौड़ाई : @साइटविड्थ के बा ; 
  मार्जिन : 0 ऑटो के बा ;  
  . क्लियरफिक्स कइल गइल ();
} के बा।
. कॉलम ( @columnSpan : 1 ) { के बा।  
  प्रदर्शन : इनलाइन के बा ; 
  तैरत : बाईं ओर के बा ;
  चौड़ाई : ( @ ग्रिडकॉलमविड्थ * @ कॉलमस्पैन ) + ( @ ग्रिडगटरविड्थ * ( @ कॉलमस्पैन - 1 ));         
  मार्जिन - बाईं ओर : @gridGutterWidth ; 
  &: पहिला - बच्चा { .
    हाशिया - बाईं ओर : 0 ; 
  } के बा।
} के बा।
. ऑफसेट ( @ कॉलमऑफसेट : 1 ) { 1 बा।  
  margin - left : ( @gridColumnWidth * @columnOffset ) + ( @gridGutterWidth * ( @columnOffset - 1 )) ! महत्वपूर्ण बा ;          
} के बा।