Bootstrap च्या मुळाव्या संरचनेच्या मुखेल तुकड्यांचेर lowdown मेळोवचो, तातूंत आमचो पद्दत चड बरो, वेगवान, बळिश्ट वेब विकासा सयत.

एचटीएमएल 5 डॉकटायप

बूटस्ट्रॅप कांय HTML घटकांचो आनी CSS गुणधर्मांचो वापर करता जाका HTML5 डॉकटायप वापरपाची गरज आसता. तुमच्या सगळ्या प्रकल्पांच्या सुरवेक ताचो आस्पाव करचो.

<!DOCTYPE html>
<html lang="en">
  ...
</html>

मोबायल पयलीं

Bootstrap 2 वरवीं, आमी फ्रेमवर्काच्या मुखेल आंगां खातीर पर्यायी मोबायल इश्टागत शैली जोडल्यात. बूटस्ट्रॅप 3 वरवीं, आमी प्रकल्प सुरवाती सावन मोबायल इश्टागत करपा खातीर परतून बरयला. पर्यायी मोबायल शैलींचेर जोडचे परस, तीं कोरांतच बेक केल्यांत. खरें म्हणल्यार बूटस्ट्रॅप हो मोबायल पयली . मोबायल पयली शैली वेगवेगळ्या फायलींनी मेळचे बदला पुराय लायब्ररींत मेळूं येता.

योग्य रेंडरींग आनी स्पर्श झूम करपाची खात्री करपाक, तुमच्या व्यूपोर्ट मेटा टॅग जोडात<head> .

<meta name="viewport" content="width=device-width, initial-scale=1">

user-scalable=noतुमी व्ह्यूपोर्ट मेटा टॅगांत जोडून मोबायल डिव्हायसांचेर झूमिंग क्षमता अक्षम करूंक शकतात . हाका लागून झूमिंग अक्षम जाता, म्हळ्यार वापरप्यांक फकत स्क्रोल करपाक मेळटा, आनी ताचो परिणाम म्हळ्यार तुमची साइट मात्शी चड मुळ ऍप्लिकेशन सारकी दिसता. एकूणच, आमी दरेक साइटचेर ही शिफारस करिनात, देखून जतनाय घेयात!

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

टायपोग्राफी आनी दुवे

बूटस्ट्रॅप मुळावी जागतीक प्रदर्शन, टायपोग्राफी, आनी दुवो शैली सेट करता. खासा करून आमी: १.

वर सेट background-color: #fff;केलाbody
आमचो मुद्रण आदार म्हूण @font-family-base, @font-size-base, आनी गुणधर्म वापरात@line-height-base
वरवीं जागतीक दुवो रंग सेट करात @link-colorआनी दुवे रेखांकन फकत चालू करात:hover

ह्यो शैली भितर मेळटात scaffolding.less.

सामान्य करचें.css

सुदारीत क्रॉस-ब्राउझर रेंडरींग खातीर, आमी Normalize.css वापरतात , Nicolas Gallagher आनी Jonathan Neal हांचो प्रकल्प .

पात्रां

बूटस्ट्रॅपाक साइट सामुग्री गुठलावपाक आनी आमची ग्रिड प्रणाली दवरपाक एक समाविष्ट घटक जाय. तुमच्या प्रकल्पांत वापरपाक तुमी दोन कंटेनरां मदीं एक निवडूंक शकतात. लक्षांत दवरात, कारण paddingआनी चड, खंयचेच कंटेनर नेस्टेबल नात.

.containerप्रतिसाद दिवपी थारावीक रुंदायेच्या आयदनाखातीर वापरात .

<div class="container">
  ...
</div>

.container-fluidतुमच्या दृश्यपोर्टाची पुराय रुंदायेक पातळिल्ल्या पुराय रुंदायेच्या कंटेनरा खातीर वापरात .

<div class="container-fluid">
  ...
</div>

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

वळख

तुमची सामुग्री दवरपी ओळी आनी स्तंभांच्या माळे वरवीं पान मांडावळ तयार करपाखातीर ग्रिड प्रणाली वापरतात. बूटस्ट्रॅप ग्रिड प्रणाली कशी काम करता तें पळयात:

योग्य रितीन संरेखण आनी पॅडींग करपाखातीर ओळी एक .container(निश्चीत-रुंदायेची) वा (पूर्ण-रुंदायेची) भितर दवरपाक जाय ..container-fluid
स्तंभांचे आडवे गट तयार करपाक ओळींचो वापर करचो.
आशय स्तंभां भितर दवरपाक जाय, आनी फकत स्तंभ ओळींचे तात्काळ भुरगीं आसूं येतात.
पूर्वनिर्धारीत ग्रिड वर्ग सारके .rowआनी .col-xs-4ग्रिड मांडावळ बेगीन तयार करपाखातीर उपलब्ध आसात. चड अर्थपूर्ण मांडावळीखातीरय उणे मिक्सिन वापरूं येतात.
स्तंभ माध्यमांतल्यान गटर (स्तंभ आशयांतले अंतर) तयार करतात padding. .rowती पॅडींग s चेर नकारात्मक मार्जिन वरवीं पयल्या आनी निमाण्या स्तंभाखातीर ओळींनी ऑफसेट जाता .
नकारात्मक मार्जिन म्हणल्यार सकयल दिल्ल्यो देखी कित्याक आऊटडेंट जाल्यात. तो म्हणल्यार ग्रिड स्तंभां भितरली सामुग्री बिगर ग्रिड सामुग्री वांगडा लायन केल्ली आसता.
तुमकां स्पॅन करपाक जाय आशिल्ल्या बारा उपलब्ध स्तंभांची संख्या निर्देशीत करून ग्रिड स्तंभ तयार करतात. देखीक, तीन समान स्तंभ तीन वापरतले .col-xs-4.
एकाच ओळी भितर 12 परस चड स्तंभ दवरल्यार, अतिरिक्त स्तंभांचो दरेक गट, एक एकक म्हूण, नव्या ओळीचेर गुठलायतलो.
ग्रिड वर्ग ब्रेकपॉइंट आकारांपरस चड वा समान स्क्रीन रुंदाय आशिल्ल्या साधनांक लागू जातात, आनी ल्हान साधनांक लक्ष्य केल्ल्या ग्रिड वर्गांक अधिलिखित करतात. देखून, देखीक .col-md-*घटकाक खंयचोय वर्ग लागू केल्यार फकत मध्यम साधनांचेरच न्हय तर व्हड साधनांचेरूय .col-lg-*वर्ग नासल्यार ताचे स्टायलिंगाचेर परिणाम जातलो.

तुमच्या संहितेंत हीं तत्वां लागू करपा खातीर उदाहरणां पळयात.

मिडियाचेर प्रस्न विचारतात

आमच्या ग्रिड प्रणालींत की ब्रेकपॉइंट तयार करपाक आमी आमच्या Less फायलींनी सकयल दिल्ल्यो मिडिया क्वेरी वापरतात.

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

आमी केन्ना केन्नाय ह्या माध्यम क्वेरींचो विस्तार करतात, तातूंत max-widthCSS हें साधनांचो संकुचीत संच मर्यादीत करपाक a समाविष्ट करतात.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }

जाळी पर्याय

Bootstrap ग्रिड प्रणालीचे आंग कशे काम करतात तें पळयात एका सुलभ कोश्टका वांगडा जायत्या साधनां वयल्यान.

	अतिरिक्त ल्हान साधनां फोन (<768px)	ल्हान साधनां टॅबलेट (≥768px)	मध्यम साधनां डेस्कटॉप (≥992px)	व्हड साधनां डेस्कटॉप (≥1200px)
जाळी वागणूक	सगळ्या वेळार आडवें आसता	सुरू करपाक कोसळ्ळें, ब्रेकपॉइंट वयर आडवें
कंटेनराची रुंदाय	कांयच ना (ऑटो) .	750px इतलें आसा	970px आसा	1170px आसा
वर्ग उपसर्ग	`.col-xs-`	`.col-sm-`	`.col-md-`	`.col-lg-`
# स्तंभांचे	12 हें नांव
स्तंभ रुंदाय	ऑटो	~ 62px हें आसा	~ 81px हें आसा	~ 97px हें आसा
गटराची रुंदाय	30px (स्तंभाचे दरेक वटेन 15px)
घोंस घालपाक येवपी	हय
ऑफसेट करतात	हय
स्तंभ क्रमवारी करप	हय

देखीक: रांकयल्लें-आडवें

ग्रिड वर्गांचो एकूच संच वापरून .col-md-*, तुमी मुळावी ग्रिड प्रणाली तयार करूंक शकतात जी डेस्कटॉप (मध्यम) डिव्हायसांचेर आडवी जावचे पयलीं मोबायल डिव्हायसांचेर आनी टॅबलेट डिव्हायसांचेर (अतिरिक्त ल्हान ते ल्हान श्रेणी) स्टॅक करून सुरू जाता. खंयच्याय .row.

.कोल-मड-१ हें नांव

.कोल-मड-८ हें नांव

.कोल-मड-4 हें नांव

.कोल-मड-6 हें नांव

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

देखीक: द्रव पदार्थाचें आयदन

तुमची सगळ्यांत भायली बदलून खंयचीय स्थिर-रुंदायेची जाळी मांडावळ पुराय रुंदायेची मांडावळ .containerकरात .container-fluid.

<div class="container-fluid">
  <div class="row">
    ...
  </div>
</div>

देखीक: मोबायल आनी डेस्कटॉप

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

.कोल-एक्सएस-12 .कोल-एमडी-8

.कोल-एक्सएस-6 .कोल-एमडी-4

.कोल-एक्सएस-6 हें नांव

<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</div>
</div>

देखीक: मोबायल, टॅबलेट, डेस्कटॉप

.col-sm-*टॅबलेट वर्गां सयत आनीकय चड गतिशील आनी बळिश्ट मांडावळ तयार करून आदल्या उदाहरणाचेर उबारात .

.कोल-एक्सएस-12 .कोल-एसएम-6 .कोल-एमडी-8

.कोल-एक्सएस-6 .कोल-एमडी-4

.कोल-एक्सएस-6 .कोल-एसएम-4

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
  <!-- Optional: clear the XS cols if their content doesn't match in height -->
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

देखीक: स्तंभ गुठलावप

एकाच ओळी भितर 12 परस चड स्तंभ दवरल्यार, अतिरिक्त स्तंभांचो दरेक गट, एक एकक म्हूण, नव्या ओळीचेर गुठलायतलो.

.कोल-एक्सएस-9 हें नांव

.col-xs-4
9 + 4 = 13 > 12 आशिल्ल्यान, हो 4-स्तंभ-रुंद दिव एक संलग्न एकक म्हणून नव्या ओळीचेर गुठलायता.

.col-xs-6
उपरांतचे स्तंभ नव्या ओळीन चालू आसतात.

<div class="row">
  <div class="col-xs-9">.col-xs-9</div>
  <div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-xs-6">.col-xs-6<br>Subsequent columns continue along the new line.</div>
</div>

प्रतिसाद दिवपी स्तंभ रीसेट जाता

उपलब्ध आशिल्ल्या चार थरांच्या ग्रिडांक लागून तुमकां अशे प्रस्न पडपाक बंधनकारक आसात जंय, कांय ब्रेकपॉइंटांचेर, एक स्तंभ दुसऱ्या परस उंच आशिल्ल्यान तुमचे स्तंभ सामके बरोबर निवळ जायनात. तें सुदारपाक, a .clearfixआनी आमच्या प्रतिसाद दिवपी उपयुक्तताय वर्गांचें संयोजन वापरात .

.col-xs-6 .col-sm-3
तुमचो व्यूपोर्ट आकार बदलचो वा उदाहरणा खातीर तुमच्या फोनाचेर तपासात.

.कोल-एक्सएस-6 .कोल-एसएम-3

<div class="row">
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>

  <!-- Add the extra clearfix for only the required viewport -->
  <div class="clearfix visible-xs-block"></div>

  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
  <div class="col-xs-6 col-sm-3">.col-xs-6 .col-sm-3</div>
</div>

प्रतिसाद दिवपी ब्रेकपॉइंटांचेर स्तंभ निवळ करपा वांगडाच, तुमकां ऑफसेट, धक्को, वा ओड रीसेट करपाची गरज आसूं येता . ग्रिड उदाहरणांत हें कृतींत पळयात .

<div class="row">
  <div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
  <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
</div>

<div class="row">
  <div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
  <div class="col-sm-6 col-md-5 col-md-offset-2 col-lg-6 col-lg-offset-0">.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0</div>
</div>

स्तंभ ऑफसेट करप

.col-md-offset-*वर्ग वापरून स्तंभ उजवे वटेन हालयात . *हे वर्ग स्तंभाचें डावें मार्जिन स्तंभांनी वाडयतात . देखीक, चार स्तंभांचेर .col-md-offset-4हालता ..col-md-4

.कोल-मड-4 हें नांव

.कोल-एमडी-4 .कोल-एमडी-ऑफसेट-4

.कोल-एमडी-3 .कोल-एमडी-ऑफसेट-3

.कोल-एमडी-6 .कोल-एमडी-ऑफसेट-3

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
  <div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
  <div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>

.col-*-offset-0तुमी वर्गांवांगडा सकयल्या ग्रिड टियरांतल्यान ऑफसेट लेगीत ओव्हररायड करूंक शकतात .

<div class="row">
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-sm-4">
  </div>
  <div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
  </div>
</div>

घोंस घालपाचे स्तंभ

तुमची सामुग्री मुलभूत ग्रिडान नेस्ट करपाक, अस्तित्वांत आशिल्ल्या स्तंभा भितर नवो .rowआनी स्तंभांचो संच जोडात . नेस्टेड ओळींनी 12 वा ताचे परस उणे जोडपी स्तंभांचो संच आसपावपाक जाय (तुमी सगळे 12 उपलब्ध स्तंभ वापरपाची गरज ना)..col-sm-*.col-sm-*

पातळी 1: .col-sm-9

पातळी 2: .col-xs-8 .col-sm-6

पातळी 2: .col-xs-4 .col-sm-6

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>

स्तंभ क्रमवारी करप

आमच्या बिल्ट-इन ग्रिड स्तंभांचो क्रम .col-md-push-*आनी .col-md-pull-*संशोधक वर्गां वांगडा सहज बदलात.

.कोल-मड-९ .कोल-मड-पुश-३

.कोल-मड-३ .कोल-मड-पुल-९

<div class="row">
  <div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
  <div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>

मिक्सिन आनी चड-उणें उणें

जलद मांडावळीखातीर पूर्वनिर्मित ग्रिड वर्गांवांगडाच , बूटस्ट्रॅपांत तुमची स्वताची सादी, अर्थपूर्ण मांडावळ बेगीन तयार करपाखातीर कमी चड-उणें आनी मिक्सिन आसपावीत आसात.

चड-उणें

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

@grid-columns:              12;
@grid-gutter-width:         30px;
@grid-float-breakpoint:     768px;

मिक्सिन हें वखद

वैयक्तीक ग्रिड स्तंभांखातीर अर्थपूर्ण CSS तयार करपाखातीर ग्रिड चयापचयांवांगडा मिक्सिन वापरतात.

// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
  // Then clear the floated columns
  .clearfix();

  @media (min-width: @screen-sm-min) {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }

  // Negative margin nested rows out to align the content of columns
  .row {
    margin-left:  (@gutter / -2);
    margin-right: (@gutter / -2);
  }
}

// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @grid-float-breakpoint) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-sm-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the small column offsets
.make-sm-column-offset(@columns) {
  @media (min-width: @screen-sm-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-push(@columns) {
  @media (min-width: @screen-sm-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-sm-column-pull(@columns) {
  @media (min-width: @screen-sm-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-md-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the medium column offsets
.make-md-column-offset(@columns) {
  @media (min-width: @screen-md-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-push(@columns) {
  @media (min-width: @screen-md-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-md-column-pull(@columns) {
  @media (min-width: @screen-md-min) {
    right: percentage((@columns / @grid-columns));
  }
}

// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
  position: relative;
  // Prevent columns from collapsing when empty
  min-height: 1px;
  // Inner gutter via padding
  padding-left:  (@gutter / 2);
  padding-right: (@gutter / 2);

  // Calculate width based on number of columns available
  @media (min-width: @screen-lg-min) {
    float: left;
    width: percentage((@columns / @grid-columns));
  }
}

// Generate the large column offsets
.make-lg-column-offset(@columns) {
  @media (min-width: @screen-lg-min) {
    margin-left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-push(@columns) {
  @media (min-width: @screen-lg-min) {
    left: percentage((@columns / @grid-columns));
  }
}
.make-lg-column-pull(@columns) {
  @media (min-width: @screen-lg-min) {
    right: percentage((@columns / @grid-columns));
  }
}

उदाहरण वापर

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

.wrapper {
  .make-row();
}
.content-main {
  .make-lg-column(8);
}
.content-secondary {
  .make-lg-column(3);
  .make-lg-column-offset(1);
}

<div class="wrapper">
  <div class="content-main">...</div>
  <div class="content-secondary">...</div>
</div>

शीर्षकां

सगळ्यो HTML शीर्षकां, <h1>वरवीं <h6>, उपलब्ध आसात. .h1through .h6classesय उपलब्ध आसात, जेन्ना तुमकां शीर्षकाच्या फॉन्ट स्टायलिंगाक जुळपाक जाय पूण तरी लेगीत तुमचो मजकूर इनलायन दाखोवपाक जाय तेन्ना खातीर.

h1. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 36px
h2. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 30px
h3 हें नांव. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 24px
h4 हें नांव. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 18px
h5. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 14px
h6 हें नांव. बूटस्ट्रॅप शीर्षक	अर्दबोल्ड 12px

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

<small>सामान्य टॅग वा .smallवर्ग आशिल्ल्या खंयच्याय शीर्षकांत हळुवार, दुय्यम मजकूर तयार करचो .

h1. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h2. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h3 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h4 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h5. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h6 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>

शरीराची प्रत

बूटस्ट्रॅपाचो जागतीक मुलभूत font-size14px , एक line-height1.428 आसा . हें <body>आनी सगळ्या परिच्छेदांक लागू जाता. ते भायर, <p>(परिच्छेद) तांच्या गणीत केल्ल्या रेखा-उंचायेच्या अर्द्याचें सकयलें मार्जिन मेळटा (मुळाव्यान 10px).

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

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

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

<p>...</p>

शिंशें बॉडी कॉपी

जोडून एक परिच्छेद वेगळो उबो करचो .lead.

विवामस सॅजिटिस लेकस वेल ऑग लाओरीट रुट्रम फॉसिबस डोलोर ऑक्टर. डुयस मोलिस, एस्ट नॉन कोमोडो लक्टस.

<p class="lead">...</p>

कमी घेवन बांदिल्लें

मुद्रण प्रमाण चयापचयांतल्या दोन कमी चयापचयाचेर आदारीत आसा .less : @font-size-baseआनी @line-height-base. पयलो पुराय वापरिल्लो बेस फॉन्ट-आकार आनी दुसरो बेस ल��यन-उंचाय. आमी त्या व्हेरिएबल्स आनी कांय सादें गणित वापरून आमच्या सगळ्या प्रकाराचे मार्जिन, पॅडिंग, आनी लायन-हायट्स तयार करतात आनी हेर. तांकां सानुकूल करात आनी बूटस्ट्रॅप अनुकूल जाता.

इनलायन मजकूर घटक

चिन्हांकीत केल्लो मजकूर

दुसऱ्या संदर्भांत ताचे प्रासंगिकतेक लागून मजकूराची धांवपळ हायलाइट करपाखातीर, <mark>टॅग वापरात.

तुमी मार्क टॅग वापरूं येता toहायलायटलिखीत.

You can use the mark tag to <mark>highlight</mark> text.

मजकूर काडून उडयला

काडून उडयल्ले मजकूर ब्लॉक दाखोवपाखातीर <del>टॅग वापरात.

~~ही मजकूर ओळ काडून उडयल्लो मजकूर मानपाचो आसा.~~

<del>This line of text is meant to be treated as deleted text.</del>

मजकूरांतल्यान प्रहार करप

आतां प्रासंगीक नाशिल्ले मजकूर ब्लॉक दाखोवपाखातीर <s>टॅग वापरात.

~~ही मजकूर ओळ आतां अचूक ना अशें मानपाचो आसा.~~

<s>This line of text is meant to be treated as no longer accurate.</s>

मजकूर घाला

दस्तावेजांत जोडणी <ins>दाखोवपाखातीर टॅग वापरात.

ही मजकूर ओळ दस्तावेजांत जोडणी म्हणून मानपाचो आसा.

<ins>This line of text is meant to be treated as an addition to the document.</ins>

रेखांकित केल्लो मजकूर

मजकूर रेखांकित करपाक <u>टॅग वापरात.

ही मजकूर ओळ रेखांकित केल्ल्या प्रमाणें रेंडर करतली

<u>This line of text will render as underlined</u>

हलके वजनाच्या शैलींनी HTML च्या मुलभूत भर टॅगांचो वापर करचो.

ल्हान मजकूर

इनलायन वा मजकूराच्या ब्लॉकांचेर भर काडून उडोवपाखातीर, <small>मजकूर पालकाच्या आकाराच्या 85% सेट करपाक टॅग वापरात. font-sizeहेडिंग घटकांक नेस्टेड घटकांखातीर आपले स्वताचे मेळटात <small>.

तुमी पर्यायीपणान .smallखंयच्याय <small>.

ही मजकूर ओळ बारीक छाप म्हणून मानपाचो आसा.

<small>This line of text is meant to be treated as fine print.</small>

ठळक

जड फॉन्ट-वजन आशिल्ल्या मजकूराच्या स्निपेटाचेर भर दिवपाखातीर.

सकयल दिल्लो मजकूर स्निपेट मोटवो मजकूर म्हणून रेंडर केला .

<strong>rendered as bold text</strong>

इटालिक

इटालिक आशिल्ल्या मजकूराच्या एका स्निपेटाचेर भर दिवपा खातीर.

सकयल दिल्लो मजकूर स्निपेट इटालिक केल्लो मजकूर म्हणून रेंडर केला .

<em>rendered as italicized text</em>

पर्यायी घटक

वापरपाक मेकळेपणान <b>आनी <i>HTML5 मदीं. <b>अतिरिक्त म्हत्व दिवंक नासतना उतरां वा वाक्यां उजवाडावपाखातीर आसता जाल्यार <i>चड करून आवाज, तंत्रीक संज्ञा आदी खातीर आसता.

संरेखण वर्ग

मजकूर संरेखण वर्ग आशिल्ल्या घटकांक मजकूर सहजपणान परतून संरेखित करात.

डावें संरेखित मजकूर.

केंद्र संरेखित मजकूर.

उजवे वटेन संरेखित केल्लो मजकूर.

न्याय्य मजकूर.

ना रॅप मजकूर.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

परिवर्तनाचे वर्ग

मजकूर कॅपिटलायझेशन वर्ग आशिल्ल्या घटकांत मजकूर रुपांतरीत करचें.

ल्हान अक्षरांचो मजकूर.

व्हड अक्षरांचो मजकूर.

व्हड अक्षरांनी बरयल्लो मजकूर.

<p class="text-lowercase">Lowercased text.</p>
<p class="text-uppercase">Uppercased text.</p>
<p class="text-capitalize">Capitalized text.</p>

संक्षेप

<abbr>होवराचेर विस्तारीत आवृत्ती दाखोवपाखातीर संक्षेप आनी संक्षिप्त नांवांखातीर HTML च्या घटकाची शैलीबद्ध कार्यान्वयन . गुणधर्म आशिल्ल्या संक्षेपांक titleहळदुव्या बिंदू आशिल्ली तळाची शिमो आनी होवराचेर मदत कर्सर आसता, जो होवराचेर आनी सहाय्यक तंत्रज्ञानाच्या वापरप्यांक अतिरिक्त संदर्भ दिता.

मुळावें संक्षेप

गुणधर्म ह्या शब्दाचें संक्षिप्त रूप म्हळ्यार attr .

<abbr title="attribute">attr</abbr>

आरंभवाद

.initialismमात्सो ल्हान फॉन्ट-आकार खातीर संक्षेपांत जोडात .

कातरून काडिल्ली भाकरी उपरांत एचटीएमएल ही सगळ्यांत बरी गजाल.

<abbr title="HyperText Markup Language" class="initialism">HTML</abbr>

संबोधन करता

लागींच्या पूर्वजा खातीर वा कामाच्या पुराय कुडी खातीर संपर्काची म्हायती सादर करप. सगळ्यो ओळींनी सोंपयतना स्वरूपण सांबाळचें <br>.

ट्विटर, इंक
1355 मार्केट स्ट्रीट, सुट 900
सॅन फ्रांसिस्को, सीए 94103
पी: (123) 456-7890

पुराय नांव
[email protected]

<address>
  <strong>Twitter, Inc.</strong><br>
  1355 Market Street, Suite 900<br>
  San Francisco, CA 94103<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

<address>
  <strong>Full Name</strong><br>
  <a href="mailto:#">[email protected]</a>
</address>

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

तुमच्या दस्तावेजा भितरल्या दुसऱ्या स्त्रोता कडल्यान सामुग्री ब्लॉक उद्धृत करपा खातीर.

मुलभूत ब्लॉककोट

कोट म्हणून <blockquote>खंयच्याय HTML भोंवतणी गुठलावचें . सरळ उतारे खातीर, आमी एक शिफारस करतात <p>.

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

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

ब्लॉककोट पर्याय

मानकाचेर साद्या बदलाखातीर शैली आनी आशय बदलतात <blockquote>.

एका स्रोताचें नांव दिवप

<footer>स्रोत वळखुपाखातीर एक जोडात . स्त्रोत कार्याचें नांव <cite>.

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

स्रोत शीर्षकांत कोण तरी फामाद

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

पर्यायी प्रदर्शनां करप

.blockquote-reverseउजवे-संरेखित आशय आशिल्ल्या ब्लॉककोटा खातीर जोडात .

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

स्रोत शीर्षकांत कोण तरी फामाद

<blockquote class="blockquote-reverse">
  ...
</blockquote>

यादी दिता

अनऑर्डर केल्लें

ज्या वस्तूंत क्रमाक स्पश्टपणान म्हत्व ना अशा वस्तूंची वळेरी .

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

<ul>
  <li>...</li>
</ul>

आदेश दिलो

ज्या वस्तूंत क्रम स्पश्टपणान म्हत्वाचो आसता ताची वळेरी.

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

<ol>
  <li>...</li>
</ol>

अनस्टायल केल्लें

list-styleयादी वस्तूंचेर मुलभूत आनी डावें मार्जिन काडून उडोवचें (फकत तात्काळ भुरग्यांक). हे फकत तात्काळ भुरग्यांची वळेरी आयटमांक लागू जाता , म्हळ्यार तुमकां खंयच्याय नेस्टेड यादींखातीर वर्ग जोडचो पडटलो.

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

<ul class="list-unstyled">
  <li>...</li>
</ul>

इनलायन

सगळ्यो यादी वस्तू एकाच ओळीचेर display: inline-block;आनी कांय उजवाड पॅडींग दवरात.

लोरेम इप्सम हें नांव
फासेलस इअकुलिस हें नांव
नुल्ला वोलुत्पात

<ul class="list-inline">
  <li>...</li>
</ul>

वर्णन

संज्ञांची वळेरी तांचे संबंदीत वर्णनां सयत.

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला: वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.; डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा: एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.

<dl>
  <dt>...</dt>
  <dd>...</dd>
</dl>

आडवें वर्णन

<dl>बाजू बाजून लायन अपांत संज्ञा आनी वर्णनां करात . मुलभूत <dl>s सारके स्टॅक करून बंद सुरू जाता, पूण जेन्ना navbar विस्तारता, तेन्ना हे करात.

वर्णन यादी: संज्ञा व्याख्या करपाखातीर वर्णन वळेरी परिपूर्ण आसा.
युइस्मोड हांणी केला: वेस्टिबुलम आयडी लिगुला पोर्टा फेलिस युइसमोड सेम्पर एगेट लॅसिनिया ओडियो सेम नेसी एलिट.; डोनेक आयडी एलिट नॉन मी पोर्टा ग्रेविडा अॅट एगेट मेटस.
मालेसुआदा पोर्टा: एटियाम पोर्टा सेम मालेसुआडा मॅग्ना मोलिस युइसमोड.
फेलिस युइसमोड सेम्पर एगेट लॅसिनिया: फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस कॉन्डिमेंटम निभ, उत फर्मेन्टम मासा जस्टो बस अमेट रिसुस.

<dl class="dl-horizontal">
  <dt>...</dt>
  <dd>...</dd>
</dl>

ऑटो-ट्रंकटिंग करप

आडवी वर्णन वळेरी डाव्या स्तंभांत बसपाक चड लांब आशिल्लीं संज्ञा कापून उडयतलीं text-overflow. अरुंद दृश्यपोर्टांत, ते मुलभूत स्टॅक केल्ली मांडावळ बदलतले.

इनलायन

कोडाचे इनलायन स्निपेट 1 च्या आदारान गुठलावचे <code>.

देखीक, <section>इनलायन म्हणून गुठलावपाक जाय.

For example, <code>&lt;section&gt;</code> should be wrapped as inline.

वापरपी इनपुट

<kbd>सादारणपणान कीबोर्ड वरवीं दाखयल्लें इनपुट दाखोवपाक वापरात .

निर्देशिका बदलपाखातीर, cdताचे उपरांत निर्देशिका नांव टाइप करात.
मांडावळी संपादीत करपाक, दामचें ctrl + ,

To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

मुळावो ब्लॉक

<pre>कोडाच्या जायत्या ओळींखातीर वापरात . योग्य रेंडरींग करपाखातीर कोडांतल्या खंयच्याय कोन कंसांतल्यान सुटपाची खात्री करात.

<p>हांगा नमुनो मजकूर...</p>

<pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

तुमी पर्यायीपणान जोडूंक शकतात.pre-scrollable वर्ग जोडूंक शकतात, जो 350px ची चडांत चड-उंचाय सेट करतलो आनी y-अक्ष स्क्रोलबार दितलो.

चड-उणें

चड-उणें दाखोवपाखातीर <var>टॅग वापरात.

y = m x + ब हें नांव

<var>y</var> = <var>m</var><var>x</var> + <var>b</var>

नमुनेचें उत्पादन

ब्लॉक दाखोवपाखातीर प्रोग्रामांतल्यान नमुनो आउटपुट <samp>टॅग वापरात.

हो मजकूर संगणक प्रोग्रामांतल्यान नमुनो आउटपुट म्हणून मानपाचो आसा.

<samp>This text is meant to be treated as sample output from a computer program.</samp>

मुळावें उदाहरण

मुळाव्या स्टायलिंग खातीर-हलक्या पॅडींग आनी फकत आडवे डिव्हायडर- .tableखंयच्याय <table>. तो सुपर रिडंडंट दिसूं येता, पूण कॅलेंडर आनी तारीख पिकर सारकिल्या हेर प्लगइनांक कोश्टकांचो व्यापक वापर पळयल्यार, आमी आमचीं सानुकूल कोश्टक शैली वेगळीं करपाचो पर्याय घेतला.

पर्यायी कोश्टक कॅप्शन.
# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

<table class="table">
  ...
</table>

पट्टीदार वळी

.table-stripedभितर खंयचेय कोश्टक ओळींत झेब्रा-स्ट्राइपिंग जोडपाक वापरात <tbody>.

क्रॉस-ब्राउझर सुसंगती

पट्टेदार कोश्टकां :nth-childCSS निवडका वरवीं शैली दितात, जे इंटरनॅट एक्सप्लोरर 8 त उपलब्ध ना.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

<table class="table table-striped">
  ...
</table>

शिमेचेर आशिल्लें मेज

.table-borderedकोश्टक आनी कक्षांच्या सगळ्या वटांनी शिमो खातीर जोडात .

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

<table class="table table-bordered">
  ...
</table>

होवर ओळीं करतात

.table-hoverएक भितर कोश्टक ओळींचेर होवर स्थिती सक्षम करपाक जोडात <tbody>.

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी हांणी केला	सुकणें हें	@twitter हांणी केला

<table class="table table-hover">
  ...
</table>

घनीभूत मेज

.table-condensedसेल पॅडींग अर्दांत कापून कोश्टकां चड संकुचीत करपाक घालचें .

# 1 .	पयलें नांव	निमाणें नांव	वापरप्याचें नांव
१	मार्क हें नांव	ओटो हांणी केला	@mdo हांणी केला
२	जाकोब	थॉर्नटन हांणी केला	@चरबी
३	लॅरी द बर्ड हांणी केला		@twitter हांणी केला

<table class="table table-condensed">
  ...
</table>

संदर्भात्मक वर्ग

कोश्टक ओळी वा वैयक्तीक कक्ष रंग दिवपाक संदर्भ वर्ग वापरात.

वर्ग	वर्णन
`.active`	एका विशिश्ट ओळीक वा कक्षाक होवर रंग लागू करता
`.success`	यशस्वी वा सकारात्मक कृती दाखयता
`.info`	तटस्थ माहितीपूर्ण बदल वा कृती दाखयता
`.warning`	लक्ष दिवपाची गरज आसूं येता अशी शिटकावणी दाखयता
`.danger`	धोक्याची वा संभाव्य नकारात्मक कृती दाखयता

# 1 .	स्तंभ शीर्षक	स्तंभ शीर्षक	स्तंभ शीर्षक
१	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
२	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
३	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
४	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
५	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
६	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
७	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
८	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय
९	स्तंभ आशय	स्तंभ आशय	स्तंभ आशय

<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>

<!-- On cells (`td` or `th`) -->
<tr>
  <td class="active">...</td>
  <td class="success">...</td>
  <td class="warning">...</td>
  <td class="danger">...</td>
  <td class="info">...</td>
</tr>

सहाय्यक तंत्रगिन्यानाक अर्थ दिवप

कोश्टक वळींत वा वैयक्तीक कोशिकेक अर्थ जोडपाक रंग वापरप फकत दृश्य संकेत दिता, जो सहाय्यक तंत्रज्ञानाच्या वापरप्यांक पावोवचो ना – जशे की स्क्रीन रीडर. रंगान दाखयल्ली म्हायती एक तर सामुग्रींतल्यानच स्पश्ट आसा (संबंदीत कोश्टक ओळी/कोशिकांतलो दिसपी मजकूर), वा पर्यायी साधनां वरवीं आस्पाव केला हाची खात्री करात, जशे की .sr-onlyवर्गा वांगडा लिपयल्लो अतिरिक्त मजकूर.

प्रतिसाद दिवपी कोश्टकां

ल्हान डिव्हायसांचेर (768px सकयल) आडवें स्क्रोल करपाक खंयचेय .tableइन गुठलायल्यार प्रतिसाद दिवपी कोश्टकां तयार करात . .table-responsive768px रुंदाये परस व्हडल्या खंयच्याय वस्तूचेर पळयतना ह्या कोश्टकांनी तुमकां कसलोच फरक दिसचो ना.

उबें क्लिपिंग/ट्रंकेशन

प्रतिसाद दिवपी कोश्टक वापरतात overflow-y: hidden, जे कोश्टकाच्या सकयल्या वा वयल्या कांठां भायर वचपी खंयचीय सामुग्री क्लिप करता. खासा करून, हाका लागून ड्रॉपडावन मेनू आनी हेर तिसऱ्या पक्षाचे विजेट क्लिप ऑफ करूंक शकता.

फायरफॉक्स आनी फील्डसेट

widthFirefox कडेन प्रतिसाद दिवपी कोश्टकांत हस्तक्षेप करपी कांय अस्पश्ट फिल्डसेट स्टायलिंग आसा. आमी बूटस्ट्रॅपांत दिनाशिल्ल्या Firefox-विशिश्ट हॅकाबगर हें ओव्हररायड करूंक शकना :

@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

चड म्हायती खातीर, वाचात ही स्टॅक ओव्हरफ्लो जाप .

# 1 .	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक
१	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
२	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
३	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका

# 1 .	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक	कोश्टक शीर्षक
१	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
२	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका
३	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका	कोश्टक कोशिका

<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>

मुळावें उदाहरण

वैयक्तीक फॉर्म नियंत्रणांक आपोआप कांय जागतीक स्टायलिंग मेळटा. सगळे मजकूर <input>, <textarea>, आनी <select>आशिल्ले घटक पूर्वनिर्धारीतपणान .form-controlसेट केल्यात. इष्टतम अंतर मेळोवपाखातीर width: 100%;लेबलां आनी नियंत्रणां भितर गुठलावचीं..form-group

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

फॉर्म गट आनी इनपुट गट मिसळूंक नाकात

फॉर्म गट थेट इनपुट गटांत मिसळूंक नाकात . ताचे बदला, इनपुट गटाक फॉर्म गटा भितर नेस्ट करात.

इनलायन फॉर्म

डावी-संरेखित आनी इनलायन-ब्लॉक नियंत्रणांखातीर तुमच्या फॉर्मांत जोडात .form-inline(जें एक आसपाची गरज ना ). हें फकत व्यूपोर्टां भितरल्या फॉर्मांक लागू जाता जे उण्यांत उणें 768px रुंद आसात.<form>

सानुकूल रुंदायेची गरज आसूं येता

बूटस्ट्रॅपांत इनपुट आनी निवड width: 100%;पूर्वनिर्धारीतपणान लागू जाल्यात. इनलायन फॉर्मां भितर, आमी तें रिसेट करतात width: auto;म्हणजे एकाच ओळीचेर जायते नियंत्रण रावूंक शकतात. तुमच्या मांडावळीचेर आदारून, अतिरिक्त सानुकूल रुंदायेची गरज आसूं येता.

सदांच लेबलां जोडचीं

दर एका इनपुटा खातीर लेबल समाविष्ट करूंक ना जाल्यार स्क्रीन रीडरांक तुमच्या फॉर्मांत त्रास जातलो. .sr-onlyह्या इनलायन फॉर्मां खातीर, तुमी वर्ग वापरून लेबलां लिपोवंक शकतात . सहाय्यक तंत्रज्ञानांखातीर लेबल दिवपाच्यो आनीक पर्यायी पद्दती आसात, जशे की aria-label, aria-labelledbyवा titleगुणधर्म. जर हातूंतलें खंयचेंय नासल्यार, स्क्रीन रीडरांनी placeholderगुणधर्म वापरपाचो आदार घेवंक शकता, आसल्यार, पूण लक्षांत दवरात की placeholderहेर लेबलिंग पद्दतींच्या बदला म्हणून वापरपाची सल्ला दिवंक ना.

<form class="form-inline">
  <div class="form-group">
    <label for="exampleInputName2">Name</label>
    <input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail2">Email</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
  </div>
  <button type="submit" class="btn btn-default">Send invitation</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail3">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword3">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Remember me
    </label>
  </div>
  <button type="submit" class="btn btn-default">Sign in</button>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>

आडवें रूप

फॉर्मांत जोडून आडव्या मांडावळींत लेबलां आनी फॉर्म नियंत्रणांचे गट संरेखित करपाक Bootstrap च्या पूर्वनिर्धारीत ग्रिड वर्गांचो वापर करचो .form-horizontal(जें एक आसपाची गरज ना <form>). अशें केल्यार .form-groups जाळी ओळी म्हणून वागपाक बदलता, देखून ची गरज ना .row.

<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Sign in</button>
    </div>
  </div>
</form>

समर्थीत नियंत्रणां

उदाहरण फॉर्म मांडावळींत समर्थीत केल्ल्या मानक फॉर्म नियंत्रणांचीं उदाहरणां.

आदान-प्रदान करतात

चडशे सामान्य फॉर्म नियंत्रण, मजकूर-आधारीत इनपुट क्षेत्रां. सगळ्या HTML5 प्रकारांक आदार समाविष्ट करता: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, आनी color.

प्रकार घोशणा करपाची गरज आसा

typeतांचें योग्य रितीन जाहीर केल्यारूच इनपुट पुरायपणान स्टायल करतले .

<input type="text" class="form-control" placeholder="Text input">

इनपुट गट

खंयच्याय मजकूर-आधारीत आदी आनी/वा उपरांत एकत्रीत मजकूर वा बटणां जोडपाक <input>, इनपुट गट घटक पळयात .

पाठक्षेत्र

मजकूराच्या जायत्या ओळींनी आदार दिवपी फॉर्म नियंत्रण. rowsगरज पडल्यार गुणधर्म बदलात .

<textarea class="form-control" rows="3"></textarea>

चेकबॉक्स आनी रेडिओ

चेकबॉक्स हे वळेरेंत एक वा जायते पर्याय निवडपाखातीर आसतात, जाल्यार रेडिओ जायत्यांतल्यान एक पर्याय निवडपाखातीर आसतात.

अक्षम चेकबॉक्स आनी रेडिओ समर्थीत आसात, पूण पालकाच्या होवराचेर "परवानगी ना" कर्सर पुरवण करपाक <label>, तुमकां .disabledवर्ग पालकांत जोडचो पडटलो .radio, .radio-inline, .checkbox, वा .checkbox-inline.

मुलभूत (स्टॅक केल्लें) .

<div class="checkbox">
  <label>
    <input type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="checkbox disabled">
  <label>
    <input type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
    Option two can be something else and selecting it will deselect option one
  </label>
</div>
<div class="radio disabled">
  <label>
    <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
    Option three is disabled
  </label>
</div>

Inline checkboxes and radios

Use the .checkbox-inline or .radio-inline classes on a series of checkboxes or radios for controls that appear on the same line.

<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox2" value="option2"> 2
</label>
<label class="checkbox-inline">
  <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
</label>

<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="option2"> 2
</label>
<label class="radio-inline">
  <input type="radio" name="inlineRadioOptions" id="inlineRadio3" value="option3"> 3
</label>

Checkboxes and radios without label text

Should you have no text within the <label>, the input is positioned as you'd expect. Currently only works on non-inline checkboxes and radios. Remember to still provide some form of label for assistive technologies (for instance, using aria-label).

<div class="checkbox">
  <label>
    <input type="checkbox" id="blankCheckbox" value="option1" aria-label="...">
  </label>
</div>
<div class="radio">
  <label>
    <input type="radio" name="blankRadio" id="blankRadio1" value="option1" aria-label="...">
  </label>
</div>

Selects

Note that many native select menus—namely in Safari and Chrome—have rounded corners that cannot be modified via border-radius properties.

<select class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

For <select> controls with the multiple attribute, multiple options are shown by default.

<select multiple class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>

Static control

When you need to place plain text next to a form label within a form, use the .form-control-static class on a <p>.

<form class="form-horizontal">
  <div class="form-group">
    <label class="col-sm-2 control-label">Email</label>
    <div class="col-sm-10">
      <p class="form-control-static">[email protected]</p>
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group">
    <label class="sr-only">Email</label>
    <p class="form-control-static">[email protected]</p>
  </div>
  <div class="form-group">
    <label for="inputPassword2" class="sr-only">Password</label>
    <input type="password" class="form-control" id="inputPassword2" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Confirm identity</button>
</form>

Focus state

We remove the default outline styles on some form controls and apply a box-shadow in its place for :focus.

Demo `:focus` state

The above example input uses custom styles in our documentation to demonstrate the :focus state on a .form-control.

Disabled state

Add the disabled boolean attribute on an input to prevent user interactions. Disabled inputs appear lighter and add a not-allowed cursor.

<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>

Disabled fieldsets

Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.

Caveat about link functionality of `<a>`

By default, browsers will treat all native form controls (<input>, <select> and <button> elements) inside a <fieldset disabled> as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes <a ... class="btn btn-*"> elements, these will only be given a style of pointer-events: none. As noted in the section about disabled state for buttons (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.

Cross-browser compatibility

While Bootstrap will apply these styles in all browsers, Internet Explorer 11 and below don't fully support the disabled attribute on a <fieldset>. Use custom JavaScript to disable the fieldset in these browsers.

<form>
  <fieldset disabled>
    <div class="form-group">
      <label for="disabledTextInput">Disabled input</label>
      <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
    </div>
    <div class="form-group">
      <label for="disabledSelect">Disabled select menu</label>
      <select id="disabledSelect" class="form-control">
        <option>Disabled select</option>
      </select>
    </div>
    <div class="checkbox">
      <label>
        <input type="checkbox"> Can't check this
      </label>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
  </fieldset>
</form>

Readonly state

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.

<input class="form-control" type="text" placeholder="Readonly input here…" readonly>

Help text

Block level help text for form controls.

Associating help text with form controls

Help text should be explicitly associated with the form control it relates to using the aria-describedby attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.

<label class="sr-only" for="inputHelpBlock">Input with help text</label>
<input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">
...
<span id="helpBlock" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>

Validation states

Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add .has-warning, .has-error, or .has-success to the parent element. Any .control-label, .form-control, and .help-block within that element will receive the validation styles.

Conveying validation state to assistive technologies and colorblind users

Using these validation styles to denote the state of a form control only provides a visual, color-based indication, which will not be conveyed to users of assistive technologies - such as screen readers - or to colorblind users.

Ensure that an alternative indication of state is also provided. For instance, you can include a hint about state in the form control's <label> text itself (as is the case in the following code example), include a Glyphicon (with appropriate alternative text using the .sr-only class - see the Glyphicon examples), or by providing an additional help text block. Specifically for assistive technologies, invalid form controls can also be assigned an aria-invalid="true" attribute.

<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
  <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">Input with error</label>
  <input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxSuccess" value="option1">
      Checkbox with success
    </label>
  </div>
</div>
<div class="has-warning">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxWarning" value="option1">
      Checkbox with warning
    </label>
  </div>
</div>
<div class="has-error">
  <div class="checkbox">
    <label>
      <input type="checkbox" id="checkboxError" value="option1">
      Checkbox with error
    </label>
  </div>
</div>

With optional icons

You can also add optional feedback icons with the addition of .has-feedback and the right icon.

Feedback icons only work with textual <input class="form-control"> elements.

Icons, labels, and input groups

Manual positioning of feedback icons is required for inputs without a label and for input groups with an add-on on the right. You are strongly encouraged to provide labels for all inputs for accessibility reasons. If you wish to prevent labels from being displayed, hide them with the .sr-only class. If you must do without labels, adjust the top value of the feedback icon. For input groups, adjust the right value to an appropriate pixel value depending on the width of your addon.

Conveying the icon's meaning to assistive technologies

To ensure that assistive technologies – such as screen readers – correctly convey the meaning of an icon, additional hidden text should be included with the .sr-only class and explicitly associated with the form control it relates to using aria-describedby. Alternatively, ensure that the meaning (for instance, the fact that there is a warning for a particular text entry field) is conveyed in some other form, such as changing the text of the actual <label> associated with the form control.

Although the following examples already mention the validation state of their respective form controls in the <label> text itself, the above technique (using .sr-only text and aria-describedby) has been included for illustrative purposes.

<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess2">Input with success</label>
  <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
  <label class="control-label" for="inputWarning2">Input with warning</label>
  <input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
  <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
  <span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
  <label class="control-label" for="inputError2">Input with error</label>
  <input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
  <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
  <span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputGroupSuccess1">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>

Optional icons in horizontal and inline forms

<form class="form-horizontal">
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputSuccess3Status" class="sr-only">(success)</span>
    </div>
  </div>
  <div class="form-group has-success has-feedback">
    <label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
    <div class="col-sm-9">
      <div class="input-group">
        <span class="input-group-addon">@</span>
        <input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
      </div>
      <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
      <span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
    </div>
  </div>
</form>

<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4">Input with success</label>
    <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputSuccess4Status" class="sr-only">(success)</span>
  </div>
</form>
<form class="form-inline">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputGroupSuccess3">Input group with success</label>
    <div class="input-group">
      <span class="input-group-addon">@</span>
      <input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
    </div>
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
    <span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
  </div>
</form>

Optional icons with hidden `.sr-only` labels

If you use the .sr-only class to hide a form control's <label> (rather than using other labelling options, such as the aria-label attribute), Bootstrap will automatically adjust the position of the icon once it's been added.

<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
  <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
  <label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
  <div class="input-group">
    <span class="input-group-addon">@</span>
    <input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
  </div>
  <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
  <span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>

Control sizing

Set heights using classes like .input-lg, and set widths using grid column classes like .col-lg-*.

Height sizing

Create taller or shorter form controls that match button sizes.

<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">

<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>

Horizontal form group sizes

Quickly size labels and form controls within .form-horizontal by adding .form-group-lg or .form-group-sm.

<form class="form-horizontal">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
    </div>
  </div>
</form>

Column sizing

Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.

<div class="row">
  <div class="col-xs-2">
    <input type="text" class="form-control" placeholder=".col-xs-2">
  </div>
  <div class="col-xs-3">
    <input type="text" class="form-control" placeholder=".col-xs-3">
  </div>
  <div class="col-xs-4">
    <input type="text" class="form-control" placeholder=".col-xs-4">
  </div>
</div>

Button tags

Use the button classes on an <a>, <button>, or <input> element.

<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">

Context-specific usage

While button classes can be used on <a> and <button> elements, only <button> elements are supported within our nav and navbar components.

Links acting as buttons

If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Among other things, there's a bug in Firefox <30 that prevents us from setting the line-height of <input>-based buttons, causing them to not exactly match the height of other buttons on Firefox.

Options

Use any of the available button classes to quickly create a styled button.

<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>

<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>

<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>

<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>

<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>

<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>

<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>

Conveying meaning to assistive technologies

Using color to add meaning to a button only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the visible text of the button), or is included through alternative means, such as additional text hidden with the .sr-only class.

Sizes

Fancy larger or smaller buttons? Add .btn-lg, .btn-sm, or .btn-xs for additional sizes.

<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>

Create block level buttons—those that span the full width of a parent— by adding .btn-block.

<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>

Active state

Buttons will appear pressed (with a darker background, darker border, and inset shadow) when active. For <button> elements, this is done via :active. For <a> elements, it's done with .active. However, you may use .active on <button>s (and include the aria-pressed="true" attribute) should you need to replicate the active state programmatically.

Button element

No need to add :active as it's a pseudo-class, but if you need to force the same appearance, go ahead and add .active.

<button type="button" class="btn btn-primary btn-lg active">Primary button</button>
<button type="button" class="btn btn-default btn-lg active">Button</button>

Anchor element

Add the .active class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg active" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg active" role="button">Link</a>

Disabled state

Make buttons look unclickable by fading them back with opacity.

Button element

Add the disabled attribute to <button> buttons.

<button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
<button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>

Cross-browser compatibility

If you add the disabled attribute to a <button>, Internet Explorer 9 and below will render text gray with a nasty text-shadow that we cannot fix.

Anchor element

Add the .disabled class to <a> buttons.

Primary link Link

<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>

We use .disabled as a utility class here, similar to the common .active class, so no prefix is required.

Link functionality caveat

This class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized and isn't fully supported in Opera 18 and below, or in Internet Explorer 11. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, use custom JavaScript to disable such links.

Responsive images

Images in Bootstrap 3 can be made responsive-friendly via the addition of the .img-responsive class. This applies max-width: 100%;, height: auto; and display: block; to the image so that it scales nicely to the parent element.

To center images which use the .img-responsive class, use .center-block instead of .text-center. See the helper classes section for more details about .center-block usage.

SVG images and IE 8-10

In Internet Explorer 8-10, SVG images with .img-responsive are disproportionately sized. To fix this, add width: 100% \9; where necessary. Bootstrap doesn't apply this automatically as it causes complications to other image formats.

<img src="..." class="img-responsive" alt="Responsive image">

Image shapes

Add classes to an <img> element to easily style images in any project.

Cross-browser compatibility

Keep in mind that Internet Explorer 8 lacks support for rounded corners.

<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to links and will darken on hover just like our default link styles.

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="text-muted">...</p>
<p class="text-primary">...</p>
<p class="text-success">...</p>
<p class="text-info">...</p>
<p class="text-warning">...</p>
<p class="text-danger">...</p>

Dealing with specificity

Sometimes emphasis classes cannot be applied due to the specificity of another selector. In most cases, a sufficient workaround is to wrap your text in a <span> with the class.

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (the contextual colors are only used to reinforce meaning that is already present in the text/markup), or is included through alternative means, such as additional text hidden with the .sr-only class.

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>

Dealing with specificity

Sometimes contextual background classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element's content in a <div> with the class.

Conveying meaning to assistive technologies

As with contextual colors, ensure that any meaning conveyed through color is also conveyed in a format that is not purely presentational.

Close icon

Use the generic close icon for dismissing content like modals and alerts.

<button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>

Carets

Use carets to indicate dropdown functionality and direction. Note that the default caret will reverse automatically in dropup menus.

<span class="caret"></span>

Quick floats

Float an element to the left or right with a class. !important is included to avoid specificity issues. Classes can also be used as mixins.

<div class="pull-left">...</div>
<div class="pull-right">...</div>

// Classes
.pull-left {
  float: left !important;
}
.pull-right {
  float: right !important;
}

// Usage as mixins
.element {
  .pull-left();
}
.another-element {
  .pull-right();
}

Center content blocks

Set an element to display: block and center via margin. Available as a mixin and class.

<div class="center-block">...</div>

// Class
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage as a mixin
.element {
  .center-block();
}

Clearfix

Easily clear floats by adding .clearfix to the parent element. Utilizes the micro clearfix as popularized by Nicolas Gallagher. Can also be used as a mixin.

<!-- Usage as a class -->
<div class="clearfix">...</div>

// Mixin itself
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage as a mixin
.element {
  .clearfix();
}

Showing and hiding content

Force an element to be shown or hidden (including for screen readers) with the use of .show and .hidden classes. These classes use !important to avoid specificity conflicts, just like the quick floats. They are only available for block level toggling. They can also be used as mixins.

.hide is available, but it does not always affect screen readers and is deprecated as of v3.0.1. Use .hidden or .sr-only instead.

Furthermore, .invisible can be used to toggle only the visibility of an element, meaning its display is not modified and the element can still affect the flow of the document.

<div class="show">...</div>
<div class="hidden">...</div>

// Classes
.show {
  display: block !important;
}
.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden;
}

// Usage as mixins
.element {
  .show();
}
.another-element {
  .hidden();
}

Screen reader and keyboard navigation content

Hide an element to all devices except screen readers with .sr-only. Combine .sr-only with .sr-only-focusable to show the element again when it's focused (e.g. by a keyboard-only user). Necessary for following accessibility best practices. Can also be used as mixins.

<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>

// Usage as a mixin
.skip-navigation {
  .sr-only();
  .sr-only-focusable();
}

Image replacement

Utilize the .text-hide class or mixin to help replace an element's text content with a background image.

<h1 class="text-hide">Custom heading</h1>

// Usage as a mixin
.heading {
  .text-hide();
}

For faster mobile-friendly development, use these utility classes for showing and hiding content by device via media query. Also included are utility classes for toggling content when printed.

Try to use these on a limited basis and avoid creating entirely different versions of the same site. Instead, use them to complement each device's presentation.

Available classes

Use a single or combination of the available classes for toggling content across viewport breakpoints.

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
`.visible-xs-*`	Visible	Hidden	Hidden	Hidden
`.visible-sm-*`	Hidden	Visible	Hidden	Hidden
`.visible-md-*`	Hidden	Hidden	Visible	Hidden
`.visible-lg-*`	Hidden	Hidden	Hidden	Visible
`.hidden-xs`	Hidden	Visible	Visible	Visible
`.hidden-sm`	Visible	Hidden	Visible	Visible
`.hidden-md`	Visible	Visible	Hidden	Visible
`.hidden-lg`	Visible	Visible	Visible	Hidden

As of v3.2.0, the .visible-*-* classes for each breakpoint come in three variations, one for each CSS display property value listed below.

Group of classes	CSS `display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

So, for extra small (xs) screens for example, the available .visible-*-* classes are: .visible-xs-block, .visible-xs-inline, and .visible-xs-inline-block.

The classes .visible-xs, .visible-sm, .visible-md, and .visible-lg also exist, but are deprecated as of v3.2.0. They are approximately equivalent to .visible-*-block, except with additional special cases for toggling <table>-related elements.

Print classes

नेमान प्रतिसाद दिवपी वर्गां प्रमाणें, छापपाखातीर सामुग्री टॉगल करपाखातीर हे वापरात.

वर्ग घेतात	ब्राउझर हें नांव	छापचें
`.visible-print-block` `.visible-print-inline` `.visible-print-inline-block`	लिपिल्लें	दिश्टी पडटा
`.hidden-print`	दिश्टी पडटा	लिपिल्लें

वर्गूय .visible-printअस्तित्वांत आसा पूण v3.2.0 प्रमाणें नाका जाला. -संबंदीत घटकांखातीर .visible-print-blockअतिरिक्त खाशेले प्रकरण सोडल्यार, तो अदमासाक समतुल्य आसा .<table>

चांचणी केशी

प्रतिसाद दिवपी उपयुक्तताय वर्गांची चांचणी करपाक तुमचो ब्राउझर आकार बदलचो वा वेगवेगळ्या डिव्हायसांचेर लोड करचो.

वर दिश्टी पडटा...

पाचवे चेकमार्क तुमच्या सद्याच्या दृश्यपोर्टांत घटक दिसता अशें दाखयतात.

अतिरिक्त ल्हान ✔ x-small चेर दिसता

ल्हान ✔ ल्हानाचेर दिसता

मध्यम ✔ माध्यमाचेर दिसता

व्हड ✔ व्हडल्याचेर दिसता

अतिरिक्त ल्हान आनी ल्हान ✔ x-ल्हान आनी ल्हान चेर दिसता

मध्यम आनी व्हड ✔ मध्यम आनी व्हड हांचेर दिसता

अतिरिक्त ल्हान आनी मध्यम ✔ x-ल्हान आनी मध्यमाचेर दिसता

ल्हान आनी व्हड ✔ ल्हान व्हडाचेर दिसता

अतिरिक्त ल्हान आनी व्हड ✔ x-ल्हान आनी व्हड वर दिसता

ल्हान आनी मध्यम ✔ ल्हान आनी मध्यमाचेर दिसता

वर लिपलां...

हांगा, पाचवे चेकमार्क तुमच्या सद्याच्या दृश्यपोर्टांत घटक लिपला अशेंय दाखयतात .

अतिरिक्त ल्हान ✔ x-ल्हान वर लिपलां

ल्हान ✔ ल्हान वर लिपलां

मध्यम ✔ माध्यमाचेर लिपलां

व्हड ✔ व्हडल्याचेर लिपलां

अतिरिक्त ल्हान आनी ल्हान ✔ x-ल्हान आनी ल्हान वर लिपलां

मध्यम आनी व्हड ✔ मध्यम आनी व्हड हांचेर लिपलां

अतिरिक्त ल्हान आनी मध्यम ✔ x-ल्हान आनी मध्यमाचेर लिपलां

ल्हान आनी व्हड ✔ ल्हान व्हड हांचेर लिपलां

अतिरिक्त ल्हान आनी व्हड ✔ x-ल्हान आनी व्हड वर लिपलां

ल्हान आनी मध्यम ✔ ल्हान आनी मध्यमाचेर लिपलां

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

ग्रिड व्हेरिएबल आनी मिक्सिन ग्रिड प्रणाली विभागा भितर आस्पावतात .

बूटस्ट्रॅप संकलित करप

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

तिसऱ्या पक्षाचीं संकलन साधनां Bootstrap कडेन काम करूंक शकतात, पूण तांकां आमच्या मुळाव्या पंगडा कडल्यान तेंको ना.

चड-उणें

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

रंगांचो आस्पाव जाता

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

@gray-darker:  lighten(#000, 13.5%); // #222
@gray-dark:    lighten(#000, 20%);   // #333
@gray:         lighten(#000, 33.5%); // #555
@gray-light:   lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee

@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

ह्या खंयच्याय रंग चड-उणें वापरात ते प्रमाणें वा तुमच्या प्रकल्पा खातीर चड अर्थपूर्ण चड-उणें परतून नेमून दिवचें.

// Use as-is
.masthead {
  background-color: @brand-primary;
}

// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
  background-color: @alert-message-background;
}

पाळणी घालप

तुमच्या साइटच्या स्कॅलेटनाच्या मुखेल घटकांक बेगीन पसंतीचे करपाखातीर मुठीभर चड-उणें.

// Scaffolding
@body-bg:    #fff;
@text-color: @black-50;

दुवे आसात

फकत एकाच मोलान योग्य रंगान तुमच्या दुव्यांक सहज स्टायल करात.

// Variables
@link-color:       @brand-primary;
@link-hover-color: darken(@link-color, 15%);

// Usage
a {
  color: @link-color;
  text-decoration: none;

  &:hover {
    color: @link-hover-color;
    text-decoration: underline;
  }
}

लक्षांत दवरात की the @link-hover-colorएक फंक्शन वापरता, Less कडल्यान आनीक एक अद्भुत साधन, आपोआप योग्य होवर रंग तयार करपाक. darkenतुमी , lighten, saturate, आनी वापरूं येता desaturate.

मुद्रणकला

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

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          14px;
@font-size-large:         ceil((@font-size-base * 1.25)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@line-height-base:        1.428571429; // 20/14
@line-height-computed:    floor((@font-size-base * @line-height-base)); // ~20px

@headings-font-family:    inherit;
@headings-font-weight:    500;
@headings-line-height:    1.1;
@headings-color:          inherit;

चिन्नां

तुमच्या चिन्नांचें स्थान आनी फायलनाव पसंतीचे करपाखातीर दोन जलद चड-उणें.

@icon-font-path:          "../fonts/";
@icon-font-name:          "glyphicons-halflings-regular";

घटकांचो आस्पाव जाता

पुराय बूटस्ट्रॅपांतले घटक सामान्य मोलां सेट करपाखातीर कांय मुलभूत चड-उणें वापरतात. हांगा चड करून वापरतात ते आसात.

@padding-base-vertical:          6px;
@padding-base-horizontal:        12px;

@padding-large-vertical:         10px;
@padding-large-horizontal:       16px;

@padding-small-vertical:         5px;
@padding-small-horizontal:       10px;

@padding-xs-vertical:            1px;
@padding-xs-horizontal:          5px;

@line-height-large:              1.33;
@line-height-small:              1.5;

@border-radius-base:             4px;
@border-radius-large:            6px;
@border-radius-small:            3px;

@component-active-color:         #fff;
@component-active-bg:            @brand-primary;

@caret-width-base:               4px;
@caret-width-large:              5px;

विक्रेतो मिक्सिन

तुमच्या संकलित केल्ल्या CSS त सगळे संबंदीत विक्रेतो उपसर्ग समाविष्ट करून जायत्या ब्राउझरांक आदार दिवपाक मदत करपाक विक्रेतो मिक्सिन आसात.

बॉक्स-साइज करप

तुमच्या घटकांचें बॉक्स मॉडेल एकाच मिक्सिनान रिसेट करचें. संदर्भा खातीर, पळयात हो उपकाराक पडपी लेख Mozilla .

मिक्सिन v3.2.0 सावन नाका जाला, ऑटोप्रिफिक्सराची सुरवात केल्या. फाटीं-सुसंगती राखपाखातीर, बूटस्ट्रॅप बूटस्ट्रॅप v4 मेरेन मिक्सिन अंतर्गत वापरत रावतलो.

.box-sizing(@box-model) {
  -webkit-box-sizing: @box-model; // Safari <= 5
     -moz-box-sizing: @box-model; // Firefox <= 19
          box-sizing: @box-model;
}

वाटकुळे कोनशे

आयज सगळे आधुनीक ब्राउझर बिगर उपसर्ग border-radiusगुणधर्माक तेंको दितात. अशे तरेन, .border-radius()मिक्सिन ना, पूण बूटस्ट्रॅपांत वस्तूच्या एका खाशेल्या वटेन दोन कोनशे बेगीन वाटकुळे करपाखातीर शॉर्टकट आसपावीत आसात.

.border-top-radius(@radius) {
  border-top-right-radius: @radius;
   border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
  border-bottom-right-radius: @radius;
     border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
  border-bottom-right-radius: @radius;
   border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
  border-bottom-left-radius: @radius;
     border-top-left-radius: @radius;
}

बॉक्स (ड्रॉप) सावळी

box-shadowतुमचो लक्ष्य प्रेक्षक नवीनतम आनी व्हड ब्राउझर आनी डिव्हायस वापरतात जाल्यार, फकत मालमत्ता स्वता वापरपाची खात्री करात . तुमकां पोरन्या Android (pre-v4) आनी iOS डिव्हायसां खातीर (iOS 5 पयलीं) आदार जाय जाल्यार , गरजेचो उपसर्ग उखलपाक नाका आशिल्लो मिक्सिन वापरात.-webkit

v3.1.0 प्रमाणें मिक्सिन नाका म्हण्टात, कारण बूटस्ट्रॅप अधिकृतपणान मानक गुणधर्माक तेंको दिनाशिल्ल्या काळांतरान गेल्ल्या प्लॅटफॉर्मांक तेंको दिना. फाटीं-सुसंगती राखपाखातीर, बूटस्ट्रॅप बूटस्ट्रॅप v4 मेरेन मिक्सिन अंतर्गत वापरत रावतलो.

तुमच्या बॉक्स सावळेंत रंग वापरपाची खात्री करात rgba()जेणे करून ते पार्श्वभूंय कडेन शक्य तितले विनाविलंब भरसतात.

.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
  -webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
          box-shadow: @shadow;
}

संक्रमणां जातात

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

मिक्सिन v3.2.0 सावन नाका जाल्यात, ऑटोप्रिफिक्सराची सुरवात केल्या. फाटीं-सुसंगती राखपाखातीर, बूटस्ट्रॅप बूटस्ट्रॅप v4 मेरेन मिक्सिन अंतर्गत वापरत रावतलो.

.transition(@transition) {
  -webkit-transition: @transition;
          transition: @transition;
}
.transition-property(@transition-property) {
  -webkit-transition-property: @transition-property;
          transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
  -webkit-transition-delay: @transition-delay;
          transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
  -webkit-transition-duration: @transition-duration;
          transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
  -webkit-transition-timing-function: @timing-function;
          transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
  -webkit-transition: -webkit-transform @transition;
     -moz-transition: -moz-transform @transition;
       -o-transition: -o-transform @transition;
          transition: transform @transition;
}

रुपांतरां जातात

खंयचीय वस्तू घुंवडावप, स्केल करप, अणकार करप (हालप), वा तिरस्कार करप.

.rotate(@degrees) {
  -webkit-transform: rotate(@degrees);
      -ms-transform: rotate(@degrees); // IE9 only
          transform: rotate(@degrees);
}
.scale(@ratio; @ratio-y...) {
  -webkit-transform: scale(@ratio, @ratio-y);
      -ms-transform: scale(@ratio, @ratio-y); // IE9 only
          transform: scale(@ratio, @ratio-y);
}
.translate(@x; @y) {
  -webkit-transform: translate(@x, @y);
      -ms-transform: translate(@x, @y); // IE9 only
          transform: translate(@x, @y);
}
.skew(@x; @y) {
  -webkit-transform: skew(@x, @y);
      -ms-transform: skewX(@x) skewY(@y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
          transform: skew(@x, @y);
}
.translate3d(@x; @y; @z) {
  -webkit-transform: translate3d(@x, @y, @z);
          transform: translate3d(@x, @y, @z);
}

.rotateX(@degrees) {
  -webkit-transform: rotateX(@degrees);
      -ms-transform: rotateX(@degrees); // IE9 only
          transform: rotateX(@degrees);
}
.rotateY(@degrees) {
  -webkit-transform: rotateY(@degrees);
      -ms-transform: rotateY(@degrees); // IE9 only
          transform: rotateY(@degrees);
}
.perspective(@perspective) {
  -webkit-perspective: @perspective;
     -moz-perspective: @perspective;
          perspective: @perspective;
}
.perspective-origin(@perspective) {
  -webkit-perspective-origin: @perspective;
     -moz-perspective-origin: @perspective;
          perspective-origin: @perspective;
}
.transform-origin(@origin) {
  -webkit-transform-origin: @origin;
     -moz-transform-origin: @origin;
      -ms-transform-origin: @origin; // IE9 only
          transform-origin: @origin;
}

एनिमेशनां

एका घोशणापत्रांत CSS3 च्या सगळ्या एनिमेशन गुणधर्मांचो वापर करपाखातीर एकूच मिक्सिन आनी वैयक्तीक गुणधर्मांखातीर हेर मिक्सिन.

.animation(@animation) {
  -webkit-animation: @animation;
          animation: @animation;
}
.animation-name(@name) {
  -webkit-animation-name: @name;
          animation-name: @name;
}
.animation-duration(@duration) {
  -webkit-animation-duration: @duration;
          animation-duration: @duration;
}
.animation-timing-function(@timing-function) {
  -webkit-animation-timing-function: @timing-function;
          animation-timing-function: @timing-function;
}
.animation-delay(@delay) {
  -webkit-animation-delay: @delay;
          animation-delay: @delay;
}
.animation-iteration-count(@iteration-count) {
  -webkit-animation-iteration-count: @iteration-count;
          animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
  -webkit-animation-direction: @direction;
          animation-direction: @direction;
}

अपारदर्शकता

सगळ्या ब्राउझरांखातीर अपारदर्शकता सेट करात आनी filterIE8 खातीर फॉलबॅक पुरवण करात.

.opacity(@opacity) {
  opacity: @opacity;
  // IE8 filter
  @opacity-ie: (@opacity * 100);
  filter: ~"alpha(opacity=@{opacity-ie})";
}

प्लेसहोल्डर मजकूर

दर एका क्षेत्रा भितर फॉर्म नियंत्रणां खातीर संदर्भ दिवचो.

.placeholder(@color: @input-color-placeholder) {
  &::-moz-placeholder           { color: @color; } // Firefox
  &:-ms-input-placeholder       { color: @color; } // Internet Explorer 10+
  &::-webkit-input-placeholder  { color: @color; } // Safari and Chrome
}

स्तंभ आसतात

एकाच घटका भितर CSS वरवीं स्तंभ तयार करात.

.content-columns(@width; @count; @gap) {
  -webkit-column-width: @width;
     -moz-column-width: @width;
          column-width: @width;
  -webkit-column-count: @count;
     -moz-column-count: @count;
          column-count: @count;
  -webkit-column-gap: @gap;
     -moz-column-gap: @gap;
          column-gap: @gap;
}

प्रवणताय

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

#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);

तुमी मानक दोन रंगीत, रेखीव प्रवणतायेचो कोनय निर्देशीत करूंक शकतात:

#gradient > .directional(#333; #000; 45deg);

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

#gradient > .striped(#333; 45deg);

आंटी अप करात आनी ताचे बदला तीन रंग वापरात. पयलो रंग, दुसरो रंग, दुसऱ्या रंगाचो रंग थांब (25% सारके टक्केवारी मोल), आनी तिसरो रंग ह्या मिक्सिनांनी सेट करात:

#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);

तकली वयर काडटा! filterतुमकां केन्नाच ग्रेडियेंट काडून उडोवपाची गरज पडल्यार, तुमी जोडिल्ली खंयचीय IE-विशिश्ट काडून उडोवपाची खात्री करात . .reset-filter()बाजूक मिक्सिन वापरून तें करूं येता background-image: none;.

उपयुक्तताय मिक्सिन

उपयुक्तताय मिक्सिन म्हळ्यार हेर तरेन संबंदीत नाशिल्ले CSS गुणधर्म एकठांय करून विशिश्ट ध्येय वा कार्य साध्य करपी मिक्सिन.

क्लियरफिक्स करप

class="clearfix"खंयच्याय घटकाक जोडपाक विसरात आनी ताचे बदला .clearfix()फावो त्या सुवातेर मिक्सिन घालचें. निकोलस गॅलाघेर हाचे कडल्यान मायक्रो क्लियरफिक्स वापरता .

// Mixin
.clearfix() {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

// Usage
.container {
  .clearfix();
}

आडवें केंद्रीकरण करप

खंयच्याय घटकाक ताच्या पालकांत बेगीन केंद्रीत करचें. सेट करपाची गरज आसा widthवा .max-width

// Mixin
.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

// Usage
.container {
  width: 940px;
  .center-block();
}

आकार दिवपी मदतगार

वस्तूचे परिमाण चड सोंपेंपणान निर्देशीत करात.

// Mixins
.size(@width; @height) {
  width: @width;
  height: @height;
}
.square(@size) {
  .size(@size; @size);
}

// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }

आकार बदलपाक येवपी मजकूरक्षेत्रां

खंयच्याय मजकूरक्षेत्राखातीर, वा हेर खंयच्याय घटकाखातीर आकार बदलपाचे पर्याय सहज संरचीत करात. सामान्य ब्राउझर वर्तनाक पूर्वनिर्धारीत करता ( both).

.resizable(@direction: both) {
  // Options: horizontal, vertical, both
  resize: @direction;
  // Safari fix
  overflow: auto;
}

मजकूर कापून उडोवप

एकाच मिक्सिनान दीर्घवृत्तान मजकूर सहज कापून उडोवचो. घटक आसपाक जाय blockवा inline-blockपातळेचेर आसपाक जाय.

// Mixin
.text-overflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// Usage
.branch-name {
  display: inline-block;
  max-width: 200px;
  .text-overflow();
}

रेटिना प्रतिमा

दोन प्रतिमा मार्ग आनी @1x प्रतिमा परिमाण निर्देशीत करात, आनी बूटस्ट्रॅप @2x माध्यम क्वेरी पुरवण करतलो. तुमचे कडेन सेवा दिवपाक जायत्यो प्रतिमा आसल्यार, तुमची रेटिना प्रतिमा CSS हाताळणीन एकाच माध्यम क्वेरींत बरोवपाचो विचार करात.

.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
  background-image: url("@{file-1x}");

  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}");
    background-size: @width-1x @height-1x;
  }
}

// Usage
.jumbotron {
  .img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}

Bootstrap Less चेर तयार केल्लें आसतना, ताका एक अधिकृत Sass पोर्टूय आसा . आमी ती वेगळ्या GitHub रिपॉझिटरींत सांबाळटात आनी रुपांतर स्क्रिप्टान अद्ययावत हाताळटात.

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

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

मार्ग	वर्णन
`lib/`	माणिक रत्न कोड (सॅस संरचना, रेल्वे आनी कम्पास एकत्रीकरणां)
`tasks/`	रुपांतरीत स्क्रिप्ट (अपस्ट्रीम Less ते Sass घुंवडावप)
`test/`	संकलन चांचण्यो
`templates/`	होकायंत्र पॅकेज मॅनिफेस्ट
`vendor/assets/`	Sass, JavaScript, आनी फॉन्ट फायली
`Rakefile`	रेक आनी कन्वर्ट अशीं अंतर्गत कामां

ह्यो फायली कृतींत पळोवपाक Sass पोर्टाच्या GitHub रिपॉझिटरीक भेट दिवची .

स्थापन करप

Sass खातीर Bootstrap कशें प्रतिष्ठापीत करप आनी वापरप हाचे विशीं म्हायती खातीर, GitHub रिपॉझिटरी readme चो सल्लो घेयात . तो सगळ्यांत अद्ययावत स्रोत आसा आनी Rails, Compass, आनी मानक Sass प्रकल्पां वांगडा वापरपा खातीर म्हायती समाविष्ट करता.

सॅस खातीर बूटस्ट्रॅप

सीएसएस हें नांव

नियाळ

एचटीएमएल 5 डॉकटायप

मोबायल पयलीं

टायपोग्राफी आनी दुवे

सामान्य करचें.css

पात्रां

जाळी पद्दत

वळख

मिडियाचेर प्रस्न विचारतात

जाळी पर्याय

देखीक: रांकयल्लें-आडवें

देखीक: द्रव पदार्थाचें आयदन

देखीक: मोबायल आनी डेस्कटॉप

देखीक: मोबायल, टॅबलेट, डेस्कटॉप

देखीक: स्तंभ गुठलावप

प्रतिसाद दिवपी स्तंभ रीसेट जाता

स्तंभ ऑफसेट करप

घोंस घालपाचे स्तंभ

स्तंभ क्रमवारी करप

मिक्सिन आनी चड-उणें उणें

चड-उणें

मिक्सिन हें वखद

उदाहरण वापर

मुद्रणकला

शीर्षकां

h1. बूटस्ट्रॅप शीर्षक

h2. बूटस्ट्रॅप शीर्षक

h3 हें नांव. बूटस्ट्रॅप शीर्षक

h4 हें नांव. बूटस्ट्रॅप शीर्षक

h5. बूटस्ट्रॅप शीर्षक

h6 हें नांव. बूटस्ट्रॅप शीर्षक

h1. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h2. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h3 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h4 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h5. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

h6 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

शरीराची प्रत

शिंशें बॉडी कॉपी

कमी घेवन बांदिल्लें

इनलायन मजकूर घटक

चिन्हांकीत केल्लो मजकूर

मजकूर काडून उडयला

मजकूरांतल्यान प्रहार करप

मजकूर घाला

रेखांकित केल्लो मजकूर

ल्हान मजकूर

ठळक

इटालिक

पर्यायी घटक

संरेखण वर्ग

परिवर्तनाचे वर्ग

संक्षेप

मुळावें संक्षेप

आरंभवाद

संबोधन करता

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

मुलभूत ब्लॉककोट

ब्लॉककोट पर्याय

एका स्रोताचें नांव दिवप

पर्यायी प्रदर्शनां करप

यादी दिता

अनऑर्डर केल्लें

आदेश दिलो

अनस्टायल केल्लें

इनलायन

वर्णन

आडवें वर्णन

ऑटो-ट्रंकटिंग करप

संहिता

इनलायन

वापरपी इनपुट

मुळावो ब्लॉक

चड-उणें

नमुनेचें उत्पादन

कोश्टकां

मुळावें उदाहरण

पट्टीदार वळी

क्रॉस-ब्राउझर सुसंगती

Demo `:focus` state

Caveat about link functionality of `<a>`

Optional icons with hidden `.sr-only` labels