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>

गटर काडून उडोवप

एके वळींतल्यान गटर काडून उडोवचे आनी ते .row-no-guttersवर्गा वांगडा स्तंभ आसात.

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

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

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

<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <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>
<div class="row row-no-gutters">
  <div class="col-xs-6">.col-xs-6</div>
  <div class="col-xs-6">.col-xs-6</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>

इनलायन चेकबॉक्स आनी रेडिओ

एकाच ओळीचेर दिसपी नियंत्रणांखातीर चेकबॉक्स वा रेडिओच्या माळेचेर .checkbox-inlineवा वर्ग वापरात ..radio-inline

<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>

लेबल मजकूर नाशिल्ले चेकबॉक्स आनी रेडिओ

तुमकां भितर मजकूर नासल्यार <label>, इनपुट तुमी अपेक्षा करतात तशें स्थितींत आसा. सद्या फकत नॉन-इनलायन चेकबॉक्स आनी रेडिओचेर काम करता. सहाय्यक तंत्रज्ञानां खातीर अजूनय कांय प्रकारचें लेबल दिवपाचो उगडास दवरात (देखीक, वापरप 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>

निवडटा

border-radiusलक्षांत दवरात की जायत्या मुळ निवड मेनूंनी-म्हळ्यार Safari आनी Chrome त-गोल कोनशे आसतात जे गुणधर्मां वरवीं बदलूंक शकनात .

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

गुणधर्म आशिल्ल्या <select>नियंत्रणांखातीर multiple, जायते पर्याय पूर्वनिर्धारीतपणान दाखयल्यात.

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

स्थिर नियंत्रण

जेन्ना तुमकां फॉर्मा भितर फॉर्म लेबलाच्या कुशीक सादो मजकूर दवरपाची गरज आसता, तेन्ना .form-control-staticवर्ग वापरात एक <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>

फोकस स्थिती

outlineआमी कांय फॉर्म नियंत्रणांचेर मुलभूत शैली काडून उडयतात आनी box-shadowताचे सुवातेर a लागू करतात :focus.

डेमो `:focus`राज्य

वयलें उदाहरण इनपुट आमच्या दस्तावेजीकरणांत सानुकूल शैली वापरता :focusएक चेर स्थिती दाखोवपाक .form-control.

अक्षम स्थिती

disabledवापरपी परस्पर क्रिया आडावपाखातीर इनपुटाचेर बूलियन गुणधर्म जोडात . अक्षम केल्ले इनपुट हळुवार दिसतात आनी not-allowedकर्सर जोडटात.

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

अक्षम केल्ले क्षेत्रसंग्रह

एकाच वेळार भितर आशिल्ले सगळे नियंत्रण अक्षम disabledकरपाक a कडेन गुणधर्म जोडात .<fieldset><fieldset>

च्या लिंक कार्यक्षमताय विशीं सावधानताय`<a>`

पूर्वनिर्धारीतपणान, ब्राउझर a भितरले सगळे मुळ फॉर्म नियंत्रण ( <input>, <select>आनी <button>घटक) <fieldset disabled>अक्षम मानतले, तांचेर कीबोर्ड आनी माऊस दोनूय परस्पर संवाद आडायत. पूण तुमच्या फॉर्मांत <a ... class="btn btn-*">घटकांचोय आस्पाव आसल्यार, ह्या फकत ची शैली दितले pointer-events: none. बटणां खातीर अक्षम स्थिती विशीं विभागांत नोंद केल्ल्या प्रमाणें (आनी खासा करून एंकर घटकां खातीर उप-विभागांत), हो CSS गुणधर्म अजून प्रमाणीत करूंक ना आनी Opera 18 आनी सकयल, वा Internet Explorer 11 त पुरायपणान समर्थीत ना, आनी जिखला 't कीबोर्ड वापरप्यांक हे दुवे केंद्रीत करूंक वा सक्रिय करूंक शकचे नात. देखून सुरक्षीत रावपा खातीर, अशे दुवे अक्षम करपाक सानुकूल जावास्क्रिप्ट वापरात.

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

disabledBootstrap सगळ्या ब्राउझरांनी ह्यो शैली लागू करतले, जाल्यार Internet Explorer 11 आनी सकयल एक चेर गुणधर्माक पुरायपणान तेंको दिना <fieldset>. ह्या ब्राउझरांनी फील्डसेट अक्षम करपाक सानुकूल जावास्क्रिप्ट वापरात.

<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इनपुटाच्या मोलांत बदल जावचो न्हय म्हूण इनपुटाचेर बूलियन गुणधर्म जोडात . फकत वाचपाखातीर आशिल्ले इनपुट हळुवार दिसतात (अक्षम केल्ल्या इनपुटांभशेन), पूण मानक कर्सर तिगोवन दवरात.

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

मदत मजकूर

फॉर्म नियंत्रणांखातीर ब्लॉक पातळेचेर मदत मजकूर.

मदत मजकूर फॉर्म नियंत्रणांकडेन संबंदीत करप

aria-describedbyमदत मजकूर स्पश्टपणान गुणधर्म वापरपाक संबंदीत आशिल्ल्या फॉर्म नियंत्रणाकडेन संबंदीत आसपाक जाय . हाका लागून वापरपी नियंत्रणांत लक्ष केंद्रीत करता वा प्रवेश करता तेन्ना सहाय्यक तंत्रज्ञान – जशें स्क्रीन रीडर – हो मदत मजकूर जाहीर करतले हाची खात्री जातली.

<label 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>

प्रमाणीकरण राज्यां

बूटस्ट्रॅपांत फॉर्म नियंत्रणांचेर त्रुटी, शिटकावणी, आनी यशस्वी स्थिती खातीर प्रमाणीकरण शैली आसपावीत केल्या. वापरपाक, पालक घटकाक .has-warning, .has-error, वा जोडात. .has-successखंयच्याय .control-label, .form-control, आनी .help-blockत्या घटका भितर प्रमाणीकरण शैली मेळटली.

सहाय्यक तंत्रज्ञान आनी रंगअंध वापरप्यांक प्रमाणीकरण स्थिती पावोवप

फॉर्म नियंत्रणाची स्थिती दाखोवपाक ह्यो प्रमाणीकरण शैली वापरप फकत दृश्य, रंग-आधारीत संकेत पुरवण करता, जो सहाय्यक तंत्रज्ञानाच्या वापरप्यांक - जशें स्क्रीन रीडर - वा रंगअंध वापरप्यांक पावोवचो ना.

राज्याचो पर्यायी संकेतूय दिला हाची खात्री करप. देखीक, तुमी फॉर्म नियंत्रणाच्या <label>मजकूरांतच स्थिती विशीं सुचोवणी समाविष्ट करूंक शकतात (जशें सकयल दिल्ल्या कोड उदाहरणांत आसा), एक Glyphicon समाविष्ट करूंक शकतात (वर्ग वापरून योग्य पर्यायी मजकूर .sr-only- पळयात Glyphicon उदाहरणां ), वा एक पुरवण करून अतिरिक्त मदत मजकूर आडावप. aria-invalid="true"खासा करून सहाय्यक तंत्रज्ञानांखातीर, अवैध फॉर्म नियंत्रणांकय एक गुणधर्म नेमूं येता .

<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>

पर्यायी चिन्नां सयत

.has-feedbackतुमी आनी उजवें चिन्न जोडून पर्यायी प्रतिसाद चिन्नांय जोडूंक शकतात .

प्रतिसाद चिन्नां फकत मजकूर <input class="form-control">घटकां वांगडा काम करतात.

चिन्नां, लेबलां, आनी इनपुट गट

लेबल नाशिल्ल्या इनपुटांखातीर आनी उजवे वटेन ऍड-ऑन आशिल्ल्या इनपुट गटांखातीर प्रतिसाद चिन्नांची हाताळणी स्थिती गरजेची आसा . सुलभताय कारणांक लागून सगळ्या इनपुटां खातीर लेबलां दिवपाक तुमकां खर प्रोत्साहन दितात. तुमकां लेबलां दाखोवपाक आडावपाक जाय जाल्यार, तीं .sr-onlyवर्गा वांगडा लिपोवचीं. तुमकां लेबलां बगर करपाक जाय जाल्यार, topप्रतिसाद चिन्नाचें मोल समायोजीत करात. इनपुट गटांखातीर, rightतुमच्या अॅडॉनाचे रुंदायेचेर आदारून मोल योग्य पिक्सेल मोलाचेर समायोजीत करात.

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

सहाय्यक तंत्रज्ञान – जशें स्क्रीन रीडर – चिन्नाचो अर्थ योग्य रितीन दितात हाची खात्री करपा खातीर, अतिरिक्त लिपल्लो मजकूर .sr-onlyवर्गा वांगडा आस्पाव करचो आनी वापरपाक संबंदीत आशिल्ल्या फॉर्म नियंत्रणा कडेन स्पश्टपणान संबंदीत करचो aria-describedby. पर्यायान, अर्थ (देखीक, एका विशिश्ट मजकूर नोंदणी क्षेत्राखातीर शिटकावणी आसा हें खरें) हेर खंयच्याय स्वरुपांत पावोवपाची खात्री करात, जशे की <label>फॉर्म नियंत्रणाकडेन संबंदीत आशिल्ल्या प्रत्यक्षाच्या मजकूरांत बदल करप.

सकयल दिल्ल्या उदाहरणांनी पयलींच मजकूरांतच तांच्या तांच्या फॉर्म नियंत्रणांची प्रमाणीकरण स्थितीचो उल्लेख केल्लो आसलो तरी <label>वयलें तंत्र ( .sr-onlyमजकूर आनी aria-describedby) वापरून सचित्र उद्देशां खातीर आस्पाव केला.

<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>

आडव्या आनी इनलायन स्वरुपांत पर्यायी चिन्नां

<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>

`.sr-only`लिपल्ले लेबल आशिल्ले पर्यायी चिन्न

जर तुमी .sr-onlyवर्गाचो वापर फॉर्म नियंत्रणाचो लिपोवपाक वापरतात जाल्यार <label>(हेर लेबलिंग पर्याय वापरचे परस, जशे की aria-labelगुणधर्म), Bootstrap एकदां जोडल्या उपरांत चिन्नाची सुवात आपसूक समायोजीत करतलो.

@ हांणी केला.

<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>

आकारमानाचेर नियंत्रण दवरप

सारके वर्ग वापरून उंचाय सेट करात .input-lg, आनी सारके ग्रिड स्तंभ वर्ग वापरून रुंदाय सेट करात .col-lg-*.

उंचायेचो आकारमान

बटण आकारांकडेन जुळपी उंच वा ल्हान फॉर्म नियंत्रण तयार करात.

<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>

आडवे रूप गट आकार

वा .form-horizontalजोडून भितर लेबलांचो आकार बेगीन आकार आनी फॉर्म नियंत्रणां ..form-group-lg.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>

स्तंभ आकारमान करप

जाय आशिल्ली रुंदाय सहजपणान लागू करपाक, ग्रिड स्तंभांत, वा खंयच्याय सानुकूल पालक घटकांत इनपुट गुठलावचे.

<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>

बटण टॅग करतात

<a>, <button>, वा <input>घटकाचेर बटण वर्ग वापरात .

<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">

संदर्भविशिश्ट वापर

<a>बटण वर्ग आनी घटकांचेर वापरूं येता <button>, जाल्यार फकत <button>घटक आमच्या nav आनी navbar घटकां भितर समर्थीत आसात.

बटण म्हणून काम करपी दुवे

घटक बटण म्हणून काम करपाक वापरतात जाल्यार <a>– सद्याच्या पानांतल्या दुसऱ्या दस्तावेजांत वा विभागांत वचचे परस, पानांतली कार्यक्षमताय सुरू करप – तांकां योग्य role="button".

क्रॉस-ब्राउझर रेंडरींग

एक उत्तम पद्दत म्हणून, जुळपी क्रॉस-ब्राउझर रेंडरींग सुनिश्चीत करपाक आमी शक्य आसल्यार घटक वापरपाची खूब शिफारस करतात .<button>

हेर गजालीं मदीं, Firefox <30 त एक बग आसाline-height जो आमकां of -आधारीत बटणां सेट करपाक आडायता <input>, जाका लागून ते Firefox चेर हेर बटणां उंचाये कडेन सारके जुळनात.

पर्याय आसात

बेगीन शैलीबध्द बटण तयार करपाक उपलब्ध आशिल्ल्या खंयच्याय बटण वर्गाचो वापर करचो.

<!-- 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>

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

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

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

फॅन्सी व्हडले वा ल्हान बटण? अतिरिक्त आकारांखातीर .btn-lg, .btn-sm, वा जोडात ..btn-xs

<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>

ब्लॉक पातळेचे बटण तयार करात-जे पालकाची पुराय रुंदाय पातळटात- जोडून .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>

सक्रिय अवस्था

सक्रिय आसतना बटणां दामून दिसतलीं (काळी पार्श्वभूंय, काळी शिमो, आनी इनसेट सावळी आशिल्ली). <button>घटकांखातीर, हें :active. घटकांखातीर , <a>तें . पूण, तुमकां सक्रिय स्थिती प्रोग्रामेटिक रितीन प्रतिकृती करपाची गरज आसल्यार तुमी s चेर .activeवापरूं येता (आनी गुणधर्म समाविष्ट करूंक शकतात)..active<button>aria-pressed="true"

बटण तत्व

तो एक छद्म वर्ग आशिल्ल्यान जोडपाची गरज ना :active, पूण तुमकां तेंच दिसपाक जबरदस्ती करपाची गरज आसल्यार, मुखार वचून जोडचें .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>

एंकर तत्व

बटणां कडेन .activeवर्ग जोडात .<a>

प्राथमीक दुवो लिंक

<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>

अक्षम स्थिती

बटणां परतून फीके करून क्लिक करपाक शकना अशें दिसपाक करात opacity.

बटण तत्व

बटणां कडेन disabledगुणधर्म जोडात .<button>

<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>

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

तुमी disableda कडेन गुणधर्म जोडल्यार <button>, Internet Explorer 9 आनी सकयल आमी सुदारूंक शकना अशा वायट मजकूर-सावळे वांगडा मजकूर करडो रेंडर करतले.

एंकर तत्व

बटणां कडेन .disabledवर्ग जोडात .<a>

प्राथमीक दुवो लिंक

<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>

आमी .disabledहांगा एक उपयुक्तताय वर्ग म्हणून वापरतात, सामान्य वर्गा सारकोच .active, देखून उपसर्गाची गरज ना.

दुवो कार्यक्षमताय सावधानताय

हो वर्ग s ची pointer-events: noneदुवो कार्यक्षमताय अक्षम करपाचो यत्न करपाक वापरता <a>, पूण तो CSS गुणधर्म अजून प्रमाणीत करूंक ना आनी Opera 18 आनी सकयल, वा Internet Explorer 11 त पुरायपणान समर्थीत ना.ते भायर, समर्थन करपी ब्राउझरांनी लेगीत pointer-events: none, कीबोर्ड नेव्हिगेशनाचेर परिणाम जावंक ना, म्हळ्यार नदरेक पडपी कीबोर्ड वापरपी आनी सहाय्यक तंत्रगिन्यानाचे वापरपी अजूनय हे दुवे सक्रिय करूंक शकतले. देखून सुरक्षीत रावपा खातीर, अशे दुवे अक्षम करपाक सानुकूल जावास्क्रिप्ट वापरात.

प्रतिसाद दिवपी प्रतिमा

.img-responsiveबूटस्ट्रॅप 3 तली प्रतिमा वर्ग जोडपा वरवीं प्रतिसाद-अनुकूल करूं येतात . हे लागू जाता max-width: 100%;, height: auto;आनी display: block;प्रतिमेक जेणे करून ती पालक घटकाक छान स्केल करता.

.img-responsiveवर्ग वापरपी प्रतिमा केंद्रीत करपाक , .center-blockबदला वापरात .text-center. वापराविशीं चड तपशीलांखातीर मदतगार वर्ग विभाग पळयात.center-block .

एसव्हीजी प्रतिमा आनी आयई 8-10

Internet Explorer 8-10 त, SVG प्रतिमा with .img-responsiveविपरीत आकाराचे आसात. हें सुदारपाक, width: 100% \9;गरज पडटा थंय जोडचें. हेर प्रतिमा स्वरूपांक गुंतागुंत निर्माण जाल्ल्यान बूटस्ट्रॅप आपोआप हें लागू करिना.

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

प्रतिमा आकार करतात

<img>खंयच्याय प्रकल्पांत प्रतिमा सहज शैली करपाक एका घटकाक वर्ग जोडात .

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

इंटरनॅट एक्सप्लोरर 8 कडेन वाटकुळ्या कोनशांक आदार ना हें लक्षांत दवरात.

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

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

मुठीभर भर दिवपी उपयुक्तताय वर्गां सयत रंगा वरवीं अर्थ दिवप. हे दुव्यांकय लागू जावंक शकतात आनी आमच्या मुलभूत दुव्या शैलीं प्रमाण होवराचेर काळोख जातले.

फुसे दापिबस, टेलस एसी कर्सस कोमोडो, टॉर्टोर मौरिस निभ.

नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला.

मेसेनास सेड डायम एगेट रिसुस व्हॅरिअस ब्लॅंडिट सिट अमेट नॉन मॅग्ना.

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

डोनेक उल्लमकोर्पर नुल्ला नॉन मेटस ऑक्टर फ्रिंगिला.

<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>

विशिश्टतायेकडेन वेव्हार करप

केन्ना केन्नाय दुसऱ्या निवडकाच्या विशिश्टतायेक लागून भर दिवपी वर्ग लागू करपाक मेळनात. चडशा प्रकरणांनी, एक फावो तो उपाय म्हणल्यार तुमचो मजकूर <span>वर्गा वांगडा a मदीं गुठलावप.

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

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

संदर्भात्मक फाटभूंय

संदर्भ मजकूर रंग वर्गां प्रमाणें, खंयच्याय संदर्भ वर्गाक एका घटकाची पार्श्वभूंय सहज सेट करात. एंकर घटक होवराचेर काळोख जातले, जशे मजकूर वर्गां प्रमाण.

नुल्लम आयडी डोलोर आयडी निभ उल्ट्रिसीस वेहिकुला उत आयडी एलिट.

डुइस मोलिस, एस्ट नॉन कोमोडो लक्टस, निसी एराट पोर्टिटोर लिगुला.

मेसेनास सेड डायम एगेट रिसुस व्हॅरिअस ब्लॅंडिट सिट अमेट नॉन मॅग्ना.

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

डोनेक उल्लमकोर्पर नुल्ला नॉन मेटस ऑक्टर फ्रिंगिला.

<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>

विशिश्टतायेकडेन वेव्हार करप

केन्ना केन्नाय दुसऱ्या निवडकाच्या विशिश्टतायेक लागून संदर्भात्मक पार्श्वभूंय वर्ग लागू करपाक मेळनात. कांय प्रकरणांनी, एक फावो तो उपाय म्हळ्यार तुमच्या घटकाची सामग्री <div>वर्गा वांगडा a मदीं गुठलावप.

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

As with contextual colors , रंगा वरवीं दिवपी खंयचोय अर्थ शुध्द सादरीकरण नाशिल्ल्या स्वरूपांतय पावोवपाची खात्री करात.

बंद करचें चिन्ह

मोडल आनी सावधानताय सारकिल्या सामुग्री न्हयकारपा खातीर सामान्य बंद चिन्न वापरात.

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

कॅरेट्स हें नांव

ड्रॉपडावन कार्यक्षमता आनी दिका दाखोवपाक कॅरेट वापरात. लक्षांत दवरात की मुलभूत कॅरेट आपोआप ड्रॉपअप मेनूंत उलटतलें .

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

जलद तरंगता

एक घटक एक वर्गा वांगडा डावी वा उजवे वटेन तरंगता.!importantविशिश्टतायेचे प्रस्न टाळपा खातीर आस्पाव केला. वर्ग मिक्सिन म्हणूनय वापरूं येतात.

<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();
}

केंद्र सामुग्री ब्लॉक करतात

वरवीं एक घटक सेट करात display: blockआनी माध्यमांतल्यान केंद्र करात margin. मिक्सिन आनी वर्ग म्हणून उपलब्ध आसा.

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

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

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

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

पालक घटकांतfloat जोडून s सहज निवळ करचें . निकोलस गॅलाघेर हाणें लोकप्रिय केल्ल्या प्रमाण मायक्रो क्लियरफिक्स वापरता . मिक्सिन म्हणूनय वापरूं येता..clearfix

<!-- 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();
}

सामुग्री दाखोवप आनी लिपोवप

आनी वर्गांचो वापर करून घटक दाखोवपाक वा लिपोवपाखातीर सक्ती ( स्क्रीन रीडरांखातीर सयत ). हे वर्ग विशिश्टताय संघर्श टाळपाक वापरतात, जशें जलद तरंगता . ते फकत ब्लॉक पातळेचेर टॉगल करपा खातीर उपलब्ध आसात. तशेंच मिक्सिन म्हणूनय तांचो उपेग करूं येता..show.hidden!important

.hideउपलब्ध आसा, पूण ताचो सदांच स्क्रीन रीडरांचेर परिणाम जायना आनी v3.0.1 सावन नाका आसा. ताचे बदला .hiddenवा वापरात ..sr-only

ते भायर, .invisibleफकत घटकाची दृश्यताय टॉगल करपाक वापरूं येता, म्हळ्यार displayतातूंत बदल करूंक ना आनी घटक अजूनय दस्तावेजाच्या प्रवाहाचेर परिणाम करूंक शकता.

<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();
}

स्क्रीन रीडर आनी कीबोर्ड नेव्हिगेशन सामुग्री

स्क्रीन रीडर सोडून सगळ्या डिव्हायसांक एक घटक लिपोवचो .sr-only. घटक केंद्रीत आसतना परतून दाखोवपाक एकठांय करात .sr-only( देखीक फकत कीबोर्ड वापरप्यान). सुलभताय उत्तम पद्दती.sr-only-focusable पाळपा खातीर गरजेचें . मिक्सिन म्हणूनय वापरूं येता.

<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();
}

प्रतिमा बदलप

.text-hideघटकाची मजकूर आशय पार्श्वभूंय प्रतिमेन बदलपाक मदत करपाक वर्ग वा मिक्सिन वापरात .

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

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

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

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

उपलब्ध वर्ग

दृश्यपोर्ट ब्रेकपॉइंटांतल्यान सामुग्री टॉगल करपा खातीर उपलब्ध वर्गांचो एक वा संयोजन वापरात.

	अतिरिक्त ल्हान साधनांफोन (<768px) 1.5.	ल्हान ल्हान साधनांटॅबलेट (≥768px) 1.5.	मध्यम साधनांडेस्कटॉप (≥992px) 1.5.	व्हड व्हड साधनांडेस्कटॉप (≥1200px) 1.5.
`.visible-xs-*`	दिश्टी पडटा	लिपिल्लें	लिपिल्लें	लिपिल्लें
`.visible-sm-*`	लिपिल्लें	दिश्टी पडटा	लिपिल्लें	लिपिल्लें
`.visible-md-*`	लिपिल्लें	लिपिल्लें	दिश्टी पडटा	लिपिल्लें
`.visible-lg-*`	लिपिल्लें	लिपिल्लें	लिपिल्लें	दिश्टी पडटा
`.hidden-xs`	लिपिल्लें	दिश्टी पडटा	दिश्टी पडटा	दिश्टी पडटा
`.hidden-sm`	दिश्टी पडटा	लिपिल्लें	दिश्टी पडटा	दिश्टी पडटा
`.hidden-md`	दिश्टी पडटा	दिश्टी पडटा	लिपिल्लें	दिश्टी पडटा
`.hidden-lg`	दिश्टी पडटा	दिश्टी पडटा	दिश्टी पडटा	लिपिल्लें

v3.2.0 प्रमाणें, .visible-*-*दरेक ब्रेकपॉइंट खातीर वर्ग तीन बदलांनी येतात, displayसकयल दिल्ल्या दरेक CSS गुणधर्म मोला खातीर एक.

वर्गांचो गट	सीएसएस हें नांव`display`
`.visible-*-block`	`display: block;`
`.visible-*-inline`	`display: inline;`
`.visible-*-inline-block`	`display: inline-block;`

तर, अतिरिक्त ल्हान ( xs) पडद्याखातीर देखीक, उपलब्ध .visible-*-*वर्ग अशे आसात: .visible-xs-block, .visible-xs-inline, आनी .visible-xs-inline-block.

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

वर्ग छापतात

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

वर्ग घेतात	ब्राउझर हें नांव	छापचें
`.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-ल्हान वर लिपलां

ल्हान ✔ Hidden on small

मध्यम ✔ Hidden on medium

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

अतिरिक्त ल्हान आनी ल्हान ✔ Hidden on x-small and small

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

अतिरिक्त ल्हान आनी मध्यम ✔ Hidden on x-small and medium

Small and large ✔ ल्हान व्हडाचेर लिपलां

Extra small and large ✔ x-ल्हान आनी व्हड वर लिपलां

ल्हान आनी मध्यम ✔ Hidden on small and medium

बूटस्ट्रॅपाचो 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 हें नांव. बूटस्ट्रॅप शीर्षक दुय्यम मजकूर

शरीराची प्रत

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

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

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

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

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

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

मजकूर घाला

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

ल्हान मजकूर

ठळक

इटालिक

पर्यायी घटक

संरेखण वर्ग

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

संक्षेप

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

आरंभवाद

संबोधन करता

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

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

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

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

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

यादी दिता

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

आदेश दिलो

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

इनलायन

वर्णन

आडवें वर्णन

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

संहिता

इनलायन

वापरपी इनपुट

मुळावो ब्लॉक

चड-उणें

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

कोश्टकां

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

पट्टीदार वळी

शीर��षकां

डेमो `:focus`राज्य

च्या लिंक कार्यक्षमताय विशीं सावधानताय`<a>`

`.sr-only`लिपल्ले लेबल आशिल्ले पर्यायी चिन्न