अधिक चांगल्या, जलद, मजबूत वेब डेव्हलपमेंटसाठी आमचा दृष्टीकोन यासह बूटस्ट्रॅपच्या पायाभूत सुविधांच्या मुख्य भागांवर कमी करा.

HTML5 doctype

बूटस्ट्रॅप विशिष्ट HTML घटक आणि CSS गुणधर्मांचा वापर करते ज्यांना HTML5 doctype वापरण्याची आवश्यकता असते. तुमच्या सर्व प्रकल्पांच्या सुरुवातीला ते समाविष्ट करा.

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

Normalize.css

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

कंटेनर

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

.containerप्रतिसादात्मक निश्चित रुंदीच्या कंटेनरसाठी वापरा .

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

.container-fluidतुमच्या व्ह्यूपोर्टच्या संपूर्ण रुंदीमध्ये पसरलेल्या पूर्ण रुंदीच्या कंटेनरसाठी वापरा .

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

बूटस्ट्रॅपमध्ये रिस्पॉन्सिव्ह, मोबाइल फर्स्ट फ्लुइड ग्रिड सिस्टीम समाविष्ट आहे जी डिव्हाइस किंवा व्ह्यूपोर्ट आकार वाढल्यावर 12 स्तंभांपर्यंत योग्यरित्या स्केल करते. यामध्ये सोप्या लेआउट पर्यायांसाठी पूर्वनिर्धारित वर्ग , तसेच अधिक अर्थपूर्ण मांडणी निर्माण करण्यासाठी शक्तिशाली मिक्सन्स समाविष्ट आहेत .

परिचय

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

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

ही तत्त्वे तुमच्या कोडमध्ये लागू करण्यासाठी उदाहरणे पहा.

मीडिया प्रश्न

आमच्या ग्रिड सिस्टीममधील प्रमुख ब्रेकपॉइंट्स तयार करण्यासाठी आम्ही आमच्या कमी फाइल्समध्ये खालील मीडिया क्वेरी वापरतो.

/* 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-widthजेणेकरून सीएसएस मर्यादित करण्यासाठी डिव्हाइसेसच्या संचापर्यंत मर्यादित ठेवता येईल.

@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) { ... }

ग्रिड पर्याय

सुलभ सारणीसह बूटस्ट्रॅप ग्रिड प्रणालीचे पैलू एकाधिक उपकरणांवर कसे कार्य करतात ते पहा.

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

उदाहरण: स्टॅक केलेले ते क्षैतिज

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

.col-md-1

.col-md-8

.col-md-4

.col-md-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-*तुमच्या स्तंभांमध्ये जोडून अतिरिक्त लहान आणि मध्यम डिव्हाइस ग्रिड वर्ग वापरा . हे सर्व कसे कार्य करते याच्या चांगल्या कल्पनांसाठी खालील उदाहरण पहा.

.col-xs-12 .col-md-8

.col-xs-6 .col-md-4

.col-xs-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-*टॅबलेट वर्गांसह आणखी डायनॅमिक आणि शक्तिशाली लेआउट तयार करून मागील उदाहरणावर तयार करा .

.col-xs-12 .col-sm-6 .col-md-8

.col-xs-6 .col-md-4

.col-xs-6 .col-sm-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 पेक्षा जास्त स्तंभ ठेवल्यास, अतिरिक्त स्तंभांचा प्रत्येक गट, एक युनिट म्हणून, नवीन ओळीवर गुंडाळला जाईल.

.col-xs-9

.col-xs-4
9 + 4 = 13 > 12 पासून, हा 4-स्तंभ-विस्तृत div नवीन ओळीवर एक संलग्न युनिट म्हणून गुंडाळला जातो.

.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
तुमच्या व्ह्यूपोर्टचा आकार बदला किंवा उदाहरणासाठी तुमच्या फोनवर तपासा.

.col-xs-6 .col-sm-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

.col-md-4

.col-md-4 .col-md-offset-4

.col-md-3 .col-md-offset-3

.col-md-6 .col-md-offset-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-*सुधारक वर्गांसह सहजतेने बदला.

.col-md-9 .col-md-push-3

.col-md-3 .col-md-पुल-9

<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>, उपलब्ध आहेत. .h1थ्रू .h6क्लासेस देखील उपलब्ध आहेत, जेव्हा तुम्हाला हेडिंगच्या फॉन्ट शैलीशी जुळवायचे असेल परंतु तरीही तुमचा मजकूर इनलाइन प्रदर्शित व्हावा असे वाटते.

h1. बूटस्ट्रॅप शीर्षक	सेमीबोल्ड 36px
h2. बूटस्ट्रॅप शीर्षक	सेमीबोल्ड ३०px
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>

शरीराची प्रत

बूटस्ट्रॅपचे ग्लोबल डीफॉल्ट 14pxfont-size आहे , 1.428 चे . हे आणि सर्व परिच्छेदांवर लागू आहे. याव्यतिरिक्त, (परिच्छेद) त्यांच्या संगणित रेखा-उंचीच्या अर्ध्या तळाचा मार्जिन प्राप्त करतात (डिफॉल्टनुसार 10px).line-height<body><p>

नुल्लम क्विस रिझस एगेट उर्ना मोलिस ऑर्नरे वेल ईयू लिओ. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. नल्लम आयडी डोलोर आयडी निभ अल्ट्रिकेस वाहने.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur dediculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.

<p>...</p>

लीड बॉडी कॉपी

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

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. ड्यूस मोलिस, हे नॉन कमोडो लक्टस आहे.

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

कमी सह बांधले

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

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

चिन्हांकित मजकूर

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

यासाठी तुम्ही मार्क टॅग वापरू शकताहायलाइटमजकूर

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थोड्याशा लहान फॉन्ट-आकारासाठी संक्षेपात जोडा .

स्लाईस ब्रेड नंतर HTML ही सर्वोत्तम गोष्ट आहे.

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

पत्ते

जवळच्या पूर्वजांसाठी किंवा कामाच्या संपूर्ण भागासाठी संपर्क माहिती सादर करा. सह सर्व ओळी समाप्त करून स्वरूपन जतन करा <br>.

Twitter, Inc.
1355 Market Street, Suite 900
San Francisco, CA 94103
P: (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>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.

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

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

स्टँडर्डवरील साध्या भिन्नतेसाठी शैली आणि सामग्री बदलते <blockquote>.

स्त्रोताचे नाव देणे

<footer>स्त्रोत ओळखण्यासाठी एक जोडा . मध्ये स्त्रोत कार्याचे नाव गुंडाळा <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.

स्रोत शीर्षक मध्ये प्रसिद्ध कोणीतरी

<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उजव्या संरेखित सामग्रीसह ब्लॉककोटसाठी जोडा .

Lorem ipsum dolor sit amet, consectetur adipiscing elit. पूर्णांक posuere erat a ante.

स्रोत शीर्षक मध्ये प्रसिद्ध कोणीतरी

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

याद्या

क्रमरहित

आयटमची सूची ज्यामध्ये ऑर्डर स्पष्टपणे फरक पडत नाही .

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
- फॅसेलस आयकुलिस नेक
- पुरूस सोडलेस ultricies
- वेस्टिबुलम लाओरेट पोर्टिटर सेम
- Ac tristique libero volutpat येथे
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

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

आज्ञा केली

आयटमची सूची ज्यामध्ये ऑर्डर स्पष्टपणे महत्त्वाची आहे.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

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

अनस्टाइल

list-styleसूची आयटमवरील डीफॉल्ट आणि डावे मार्जिन काढा (फक्त तात्काळ मुले). हे फक्त तात्काळ मुलांच्या सूची आयटमवर लागू होते , म्हणजे तुम्हाला कोणत्याही नेस्टेड सूचीसाठी वर्ग जोडणे आवश्यक आहे.

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मस्सा येथे पूर्णांक मोलेस्टी लॉरेम
प्रीटियम निस्ल अॅलिकेटमध्ये फॅसिलिसिस
नुल्ला volutpat aliquam velit
- फॅसेलस आयकुलिस नेक
- पुरूस सोडलेस ultricies
- वेस्टिबुलम लाओरेट पोर्टिटर सेम
- Ac tristique libero volutpat येथे
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
porttitor lorem Eget

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

इनलाइन

सर्व सूची आयटम एका ओळीवर display: inline-block;आणि काही हलके पॅडिंगसह ठेवा.

Lorem ipsum
फॅसेलस आयकुलिस
नुल्ला वोलतपाट

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

वर्णन

त्यांच्या संबंधित वर्णनांसह संज्ञांची सूची.

वर्णन याद्या: अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod: Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा: Etiam porta sem malesuada magna mollis euismod.

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

क्षैतिज वर्णन

अटी आणि वर्णने <dl>शेजारी-शेजारी करा. डीफॉल्ट <dl>s प्रमाणे स्टॅक केलेले प्रारंभ होते, परंतु जेव्हा navbar विस्तृत होते, तेव्हा हे करा.

वर्णन याद्या: अटी परिभाषित करण्यासाठी वर्णन सूची योग्य आहे.
Euismod: Vestibulum id ligula porta felis euismod Semper eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus.
मालेसुडा पोर्टा: Etiam porta sem malesuada magna mollis euismod.
Felis euismod semper eget lacinia: Fusce dapibus, टेलस ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

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

स्वयं-ट्रंकटिंग

क्षैतिज वर्णन सूची डाव्या स्तंभात बरोबर बसण्यासाठी खूप लांब असलेल्या अटी कापून टाकतील text-overflow. अरुंद व्ह्यूपोर्टमध्ये, ते डीफॉल्ट स्टॅक केलेल्या लेआउटमध्ये बदलतील.

इनलाइन

सह कोडचे इनलाइन स्निपेट गुंडाळा <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 + b

<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>. हे अगदी निरर्थक वाटू शकते, परंतु कॅलेंडर आणि तारीख निवडक यांसारख्या इतर प्लगइनसाठी सारण्यांचा व्यापक वापर पाहता, आम्ही आमच्या सानुकूल सारणी शैली वेगळ्या करण्याचा पर्याय निवडला आहे.

पर्यायी टेबल मथळा.
#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

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

पट्टेदार पंक्ती

.table-stripedमधील कोणत्याही सारणी पंक्तीमध्ये झेब्रा-स्ट्रिपिंग जोडण्यासाठी वापरा <tbody>.

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

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

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

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

किनारी टेबल

.table-borderedटेबल आणि सेलच्या सर्व बाजूंच्या सीमांसाठी जोडा .

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

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

पंक्ती फिरवा

.table-hoverटेबलच्या पंक्तींवर होव्हर स्थिती सक्षम करण्यासाठी जोडा <tbody>.

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी	पक्षी	@ट्विटर

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

कंडेन्स्ड टेबल

.table-condensedसेल पॅडिंग अर्ध्यामध्ये कापून टेबल अधिक कॉम्पॅक्ट करण्यासाठी जोडा .

#	पहिले नाव	आडनाव	वापरकर्तानाव
१	खूण करा	ओटो	@mdo
2	जेकब	थॉर्नटन	@फॅट
3	लॅरी द बर्ड		@ट्विटर

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

संदर्भित वर्ग

सारणी पंक्ती किंवा वैयक्तिक सेल रंगविण्यासाठी संदर्भित वर्ग वापरा.

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

#	स्तंभ शीर्षक	स्तंभ शीर्षक	स्तंभ शीर्षक
१	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
2	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
3	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
4	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
५	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
6	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
७	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
8	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री
९	स्तंभ सामग्री	स्तंभ सामग्री	स्तंभ सामग्री

<!-- 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, जे टेबलच्या तळाशी किंवा वरच्या कडांच्या पलीकडे जाणारी कोणतीही सामग्री काढून टाकते. विशेषतः, हे ड्रॉपडाउन मेनू आणि इतर तृतीय-पक्ष विजेट बंद करू शकते.

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

फायरफॉक्समध्ये काही अस्ताव्यस्त फील्डसेट स्टाइल आहे ज्यामध्ये widthरिस्पॉन्सिव्ह टेबलमध्ये हस्तक्षेप होतो. हे फायरफॉक्स-विशिष्ट हॅकशिवाय अधिलिखित केले जाऊ शकत नाही जे आम्ही बूटस्ट्रॅपमध्ये प्रदान करत नाही :

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

अधिक माहितीसाठी, हे स्टॅक ओव्हरफ्लो उत्तर वाचा .

#	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग
१	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल
2	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल
3	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल

#	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग	टेबल हेडिंग
१	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल
2	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल
3	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल	टेबल सेल

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

क्षैतिज फॉर्म

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

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

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

जेव्हा तुम्हाला फॉर्ममधील फॉर्म लेबलच्या पुढे साधा मजकूर ठेवायचा असेल, तेव्हा a .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त्याच्या जागी एक लागू करतो :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>`

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

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

बूटस्ट्रॅप सर्व ब्राउझरमध्ये या शैली लागू करेल, इंटरनेट एक्सप्लोरर 11 आणि खालील disabledवरील विशेषताला पूर्णपणे समर्थन देत नाही <fieldset>. या ब्राउझरमध्ये फील्डसेट अक्षम करण्यासाठी सानुकूल JavaScript वापरा.

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

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

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

सहाय्यक तंत्रज्ञान आणि कलरब्लाइंड वापरकर्त्यांपर्यंत प्रमाणीकरण स्थिती पोहोचवणे

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

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

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

इतर गोष्टींबरोबरच, फायरफॉक्स <30 मध्ये एक बग आहे जो आम्हाला -आधारित बटणे सेट करण्यापासून प्रतिबंधित करतो line-height, <input>ज्यामुळे ते फायरफॉक्सवरील इतर बटणांच्या उंचीशी अचूक जुळत नाहीत.

पर्याय

स्टाईल केलेले बटण द्रुतपणे तयार करण्यासाठी कोणत्याही उपलब्ध बटण वर्गांचा वापर करा.

<!-- 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>घटकांसाठी, हे सोबत केले आहे .active. तथापि, आपण सक्रिय स्थितीची प्रोग्रामॅटिकपणे प्रतिकृती तयार करणे आवश्यक असल्यास आपण s .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>

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

तुम्ही , इंटरनेट एक्स्प्लोरर 9 आणि त्याखालील disabledविशेषता <button>जोडल्यास मजकूर धूसर होईल ज्याचे आम्ही निराकरण करू शकत नाही.

अँकर घटक

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

प्रतिसादात्मक प्रतिमा

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

.img-responsiveवर्ग वापरणाऱ्या प्रतिमा केंद्रस्थानी ठेवण्यासाठी , .center-blockऐवजी वापरा .text-center. वापराबद्दल अधिक तपशीलांसाठी मदतनीस वर्ग विभाग पहा ..center-block

SVG प्रतिमा आणि IE 8-10

इंटरनेट एक्सप्लोरर 8-10 मध्ये, SVG प्रतिमा .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">

संदर्भित रंग

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

फ्यूस डॅपीबस, टेलस एसी कर्सस कमोडो, टॉर्टर मौरिस निभ.

नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

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>

विशिष्टतेसह व्यवहार करणे

कधीकधी दुसर्‍या निवडकर्त्याच्या विशिष्टतेमुळे जोर देणारे वर्ग लागू केले जाऊ शकत नाहीत. <span>बर्‍याच प्रकरणांमध्ये, तुमचा मजकूर वर्गात गुंडाळणे हा पुरेसा उपाय आहे .

सहाय्यक तंत्रज्ञानाचा अर्थ सांगणे

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

संदर्भित पार्श्वभूमी

संदर्भित मजकूर रंग वर्गांप्रमाणेच, घटकाची पार्श्वभूमी कोणत्याही संदर्भीय वर्गावर सहज सेट करा. मजकूर वर्गांप्रमाणेच अँकर घटक हॉव्हरवर गडद होतील.

नल्लम आयडी डोलोर आयडी निभ अल्ट्रीसीज वाहने आणि आयडी एलिट.

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>

विशिष्टतेसह व्यवहार करणे

कधीकधी इतर निवडकर्त्याच्या विशिष्टतेमुळे संदर्भित पार्श्वभूमी वर्ग लागू केले जाऊ शकत नाहीत. काही प्रकरणांमध्ये, एक पुरेसा उपाय म्हणजे तुमच्या घटकाची सामग्री <div>वर्गात गुंडाळणे.

सहाय्यक तंत्रज्ञानाचा अर्थ सांगणे

संदर्भित रंगांप्रमाणे , रंगाद्वारे व्यक्त केलेला कोणताही अर्थ पूर्णपणे सादरीकरणात्मक नसलेल्या स्वरूपात व्यक्त केला जातो याची खात्री करा .

चिन्ह बंद करा

मॉडेल आणि सूचनांसारखी सामग्री डिसमिस करण्यासाठी जेनेरिक क्लोज आयकॉन वापरा.

<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)	लहान उपकरणेगोळ्या (≥768px)	मध्यम उपकरणेडेस्कटॉप (≥992px)	मोठी उपकरणेडेस्कटॉप (≥1200px)
`.visible-xs-*`	दृश्यमान	लपलेले	लपलेले	लपलेले
`.visible-sm-*`	लपलेले	दृश्यमान	लपलेले	लपलेले
`.visible-md-*`	लपलेले	लपलेले	दृश्यमान	लपलेले
`.visible-lg-*`	लपलेले	लपलेले	लपलेले	दृश्यमान
`.hidden-xs`	लपलेले	दृश्यमान	दृश्यमान	दृश्यमान
`.hidden-sm`	दृश्यमान	लपलेले	दृश्यमान	दृश्यमान
`.hidden-md`	दृश्यमान	दृश्यमान	लपलेले	दृश्यमान
`.hidden-lg`	दृश्यमान	दृश्यमान	दृश्यमान	लपलेले

v3.2.0 नुसार, .visible-*-*प्रत्येक ब्रेकपॉइंटचे वर्ग तीन भिन्नतेमध्ये येतात, खाली सूचीबद्ध केलेल्या प्रत्येक CSS 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-स्मॉल वर दृश्यमान

लहान ✔ लहान वर दृश्यमान

मध्यम ✔ मध्यम वर दृश्यमान

मोठा ✔ मोठ्या वर दृश्यमान

अतिरिक्त लहान आणि लहान ✔ x-स्मॉल आणि स्मॉल वर दृश्यमान

मध्यम आणि मोठे ✔ मध्यम आणि मोठ्या वर दृश्यमान

अतिरिक्त लहान आणि मध्यम ✔ x-लहान आणि मध्यम वर दृश्यमान

लहान मोठे ✔ लहान आणि मोठ्या वर दृश्यमान

अतिरिक्त लहान आणि मोठे ✔ x-लहान आणि मोठ्या वर दृश्यमान

लहान आणि मध्यम ✔ लहान आणि मध्यम वर दृश्यमान

वर लपलेले...

येथे, हिरव्या चेकमार्क देखील सूचित करतात की घटक तुमच्या वर्तमान व्ह्यूपोर्टमध्ये लपलेला आहे.

अतिरिक्त लहान ✔ x-स्मॉल वर लपलेले

लहान ✔ लहान वर लपलेले

मध्यम ✔ मध्यम वर लपलेले

मोठा ✔ मोठ्या वर लपलेले

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

मध्यम आणि मोठे ✔ मध्यम आणि मोठ्या वर लपलेले

अतिरिक्त लहान आणि मध्यम ✔ x-लहान आणि मध्यम वर लपलेले

लहान मोठे ✔ लहान आणि मोठ्या वर लपलेले

अतिरिक्त लहान आणि मोठे ✔ x-लहान आणि मोठ्या वर लपलेले

लहान आणि मध्यम ✔ लहान आणि मध्यम वर लपलेले

बूटस्ट्रॅपचे CSS लेस वर तयार केले आहे, एक प्रीप्रोसेसर आहे ज्यामध्ये व्हेरिएबल्स, मिक्सिन्स आणि CSS संकलित करण्यासाठी फंक्शन्स सारख्या अतिरिक्त कार्यक्षमता आहेत. आमच्या संकलित CSS फायलींऐवजी स्त्रोत कमी फायली वापरू पाहणारे आम्ही संपूर्ण फ्रेमवर्कमध्ये वापरत असलेल्या असंख्य व्हेरिएबल्स आणि मिक्सन्सचा वापर करू शकतात.

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

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

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

तृतीय पक्ष संकलन साधने बूटस्ट्रॅपसह कार्य करू शकतात, परंतु ते आमच्या मुख्य कार्यसंघाद्वारे समर्थित नाहीत.

चल

रंग, अंतर किंवा फॉन्ट स्टॅक यासारख्या सामान्यतः वापरल्या जाणार्‍या मूल्यांना केंद्रीकृत आणि सामायिक करण्याचा मार्ग म्हणून संपूर्ण प्रोजेक्टमध्ये व्हेरिएबल्सचा वापर केला जातो. संपूर्ण ब्रेकडाउनसाठी, कृपया कस्टमायझर पहा .

रंग

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

@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;
  }
}

लक्षात घ्या की @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()योग्य तेथे मिक्सिन जोडा. Nicolas Gallagher चे मायक्रो क्लिअरफिक्स वापरते .

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

बूटस्ट्रॅप कमी वर बांधला गेला असताना, त्यात अधिकृत Sass पोर्ट देखील आहे . आम्ही ते वेगळ्या GitHub रेपॉजिटरीमध्ये ठेवतो आणि रूपांतरण स्क्रिप्टसह अद्यतने हाताळतो.

काय समाविष्ट आहे

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

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

या फायली कृतीत पाहण्यासाठी Sass पोर्टच्या GitHub रेपॉजिटरीला भेट द्या .

स्थापना

Sass साठी Bootstrap कसे स्थापित करावे आणि कसे वापरावे याबद्दल माहितीसाठी, GitHub रेपॉजिटरी रीडमीचा सल्ला घ्या . हे सर्वात अद्ययावत स्त्रोत आहे आणि त्यात रेल, कंपास आणि मानक Sass प्रकल्पांसह वापरण्यासाठी माहिती समाविष्ट आहे.

Sass साठी बूटस्ट्रॅप

CSS

आढावा

HTML5 doctype

आधी मोबाईल

टायपोग्राफी आणि लिंक्स

Normalize.css

कंटेनर

ग्रीड प्रणाली

परिचय

मीडिया प्रश्न

ग्रिड पर्याय

उदाहरण: स्टॅक केलेले ते क्षैतिज

उदाहरण: द्रव कंटेनर

उदाहरण: मोबाइल आणि डेस्कटॉप

उदाहरण: मोबाइल, टॅबलेट, डेस्कटॉप

उदाहरण: स्तंभ लपेटणे

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

ऑफसेटिंग स्तंभ

नेस्टिंग स्तंभ

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

कमी मिक्सिन्स आणि व्हेरिएबल्स

चल

मिक्सन्स

उदाहरण वापर

टायपोग्राफी

मथळे

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

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

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

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

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

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

h1. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

h2. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

h3. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

h4. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

h5. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

h6. बूटस्ट्रॅप हेडिंग दुय्यम मजकूर

शरीराची प्रत

लीड बॉडी कॉपी

कमी सह बांधले

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

चिन्हांकित मजकूर

हटवलेला मजकूर

स्ट्राइकथ्रू मजकूर

मजकूर घातला

अधोरेखित मजकूर

लहान मजकूर

धीट

तिर्यक

पर्यायी घटक

संरेखन वर्ग

परिवर्तन वर्ग

लघुरुपे

मूलभूत संक्षेप

आरंभवाद

पत्ते

ब्लॉककोट्स

डीफॉल्ट ब्लॉककोट

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

स्त्रोताचे नाव देणे

पर्यायी डिस्प्ले

याद्या

क्रमरहित

आज्ञा केली

अनस्टाइल

इनलाइन

वर्णन

क्षैतिज वर्णन

स्वयं-ट्रंकटिंग

कोड

इनलाइन

वापरकर्ता इनपुट

मूलभूत ब्लॉक

चल

नमुना आउटपुट

टेबल्स

मूळ उदाहरण

पट्टेदार पंक्ती

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

डेमो `:focus`स्थिती

च्या लिंक कार्यक्षमतेबद्दल चेतावणी`<a>`

लपलेल्या `.sr-only`लेबलांसह पर्यायी चिन्ह