राम्रो, छिटो, बलियो वेब विकासको लागि हाम्रो दृष्टिकोण सहित, बुटस्ट्र्यापको पूर्वाधारको मुख्य टुक्राहरूमा कम जानकारी प्राप्त गर्नुहोस्।

HTML5 doctype

बुटस्ट्र्यापले निश्चित HTML तत्वहरू र CSS गुणहरूको प्रयोग गर्दछ जुन HTML5 doctype को प्रयोग आवश्यक छ। तपाइँका सबै परियोजनाहरूको सुरुमा यसलाई समावेश गर्नुहोस्।

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

पहिले मोबाइल

Bootstrap 2 को साथ, हामीले फ्रेमवर्कको मुख्य पक्षहरूको लागि वैकल्पिक मोबाइल अनुकूल शैलीहरू थप्यौं। Bootstrap 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। त्यो प्याडिङ s मा ऋणात्मक मार्जिन मार्फत पहिलो र अन्तिम स्तम्भका लागि पङ्क्तिहरूमा अफसेट गरिएको छ .row।
नकारात्मक मार्जिनको कारणले गर्दा तलका उदाहरणहरू बाहिर छन्। ग्रिड स्तम्भहरू भित्रको सामग्री गैर-ग्रिड सामग्रीसँग पङ्क्तिबद्ध छ।
ग्रिड स्तम्भहरू तपाईंले स्प्यान गर्न चाहनुहुने बाह्र उपलब्ध स्तम्भहरूको संख्या निर्दिष्ट गरेर सिर्जना गरिन्छ। उदाहरणका लागि, तीन बराबर स्तम्भहरूले तीन प्रयोग गर्नेछ .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-widthCSS लाई यन्त्रहरूको साँघुरो सेटमा सीमित गर्न समावेश गर्दछौं।

@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-`
स्तम्भहरूको #	१२
स्तम्भ चौडाइ	अटो	~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र स्तम्भहरूको सेट थप्नुहोस् । नेस्ट गरिएका पङ्क्तिहरूले स्तम्भहरूको सेट समावेश गर्नुपर्छ जसले १२ वा सोभन्दा कम थप्छन् (तपाईले सबै उपलब्ध १२ स्तम्भहरू प्रयोग गर्नु आवश्यक छैन)।.col-sm-*.col-sm-*

स्तर १: .col-sm-9

स्तर २: .col-xs-8 .col-sm-6

स्तर २: .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-pull-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। बुटस्ट्र्याप शीर्षक	Semibold 30px
h3। बुटस्ट्र्याप शीर्षक	Semibold 24px
h4। बुटस्ट्र्याप शीर्षक	सेमिबोल्ड 18px
h5। बुटस्ट्र्याप शीर्षक	Semibold 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>

Nullam quis risus eget urna mollis ornare vel eu leo। Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. नुल्लम आईडी डोलर आईडी निभ अल्ट्रासिस वाहन।

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus 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। Duis mollis, est non commodo luctus।

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

वैकल्पिक तत्वहरू

HTML5 मा प्रयोग <b>गर्न स्वतन्त्र महसुस गर्नुहोस् । शब्दहरू वा वाक्यांशहरूलाई थप महत्त्व नदिई हाइलाइट गर्नको लागि हो, जबकि प्रायः आवाज, प्राविधिक शब्दहरू, इत्यादिका लागि हो।<i><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<blockquote> वरिपरि लपेट्नुहोस् । सीधा उद्धरणहरूको लागि, हामी सिफारिस गर्छौं ।<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer posuere erat a ante.

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

Blockquote विकल्प

मानकमा साधारण भिन्नताहरूको लागि शैली र सामग्री परिवर्तनहरू <blockquote>।

स्रोतको नामकरण

<footer>स्रोत पहिचानको लागि थप्नुहोस् । मा स्रोत कामको नाम बेर्नुहोस् <cite>।

Lorem ipsum dolor sit amet, consectetur adipiscing elit। Integer 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। Integer posuere erat a ante.

स्रोत शीर्षकमा प्रसिद्ध कोही

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

सूचीहरू

क्रमरहित

वस्तुहरूको सूची जसमा आदेश स्पष्ट रूपमा फरक पर्दैन ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

<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
Eget porttitor lorem

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

अनस्टाइल

सूची वस्तुहरूमा पूर्वनिर्धारित list-styleर बायाँ मार्जिन हटाउनुहोस् (तत्काल बच्चाहरू मात्र)। यो केवल तत्काल बच्चाहरूको सूची वस्तुहरूमा लागू हुन्छ , यसको मतलब तपाईंले कुनै पनि नेस्टेड सूचीहरूको लागि पनि कक्षा थप्नु पर्छ।

Lorem ipsum dolor sit amet
Consectetur adipiscing elit
मासामा पूर्णांक मोलेस्टी लोरेम
प्रिटियम निस्ल एलिकेटमा फेसिलिसिस
नुल्ला volutpat aliquam velit
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat मा
Faucibus porta lacus fringilla vel
Aenean sit amet erat nunc
Eget porttitor lorem

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

क्रममा

सबै सूची वस्तुहरू एउटै लाइनमा राख्नुहोस् display: inline-block;र केही हल्का प्याडिङ।

Lorem ipsum
Phasellus iaculis
नुल्ला भोल्टपाट

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

विवरण

तिनीहरूसँग सम्बन्धित विवरणहरूको साथ सर्तहरूको सूची।

विवरण सूचीहरू: वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus।
Malesuada Porta: Etiam porta sem malesuada magna mollis euismod।

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

तेर्सो वर्णन

सर्तहरू र विवरणहरू <dl>लाईन-अप-साइड-अप गर्नुहोस्। पूर्वनिर्धारित s जस्तै स्ट्याक बन्द सुरु हुन्छ <dl>, तर जब navbar विस्तार हुन्छ, त्यसो गर्नुहोस्।

विवरण सूचीहरू: वर्णन सूची सर्तहरू परिभाषित गर्नका लागि उपयुक्त छ।
Euismod: Vestibulum id ligula porta felis euismod sempre eget lacinia odio sem nec elit.; Donec id elit non mi porta gravida at eget metus।
Malesuada Porta: Etiam porta sem malesuada magna mollis euismod।
Felis euismod sempre eget lacinia: Fusce dapibus, telus 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कक्षा थप्न सक्नुहुन्छ, जसले ३५० पिक्सेलको अधिकतम उचाइ सेट गर्नेछ र 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
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

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

धारीदार पङ्क्तिहरू

.table-stripedभित्र कुनै पनि तालिका पङ्क्तिमा जेब्रा-स्ट्रिपिङ थप्न प्रयोग गर्नुहोस् <tbody>।

क्रस-ब्राउजर अनुकूलता

स्ट्रिप गरिएको तालिकाहरू CSS चयनकर्ता मार्फत स्टाइल गरिएका छन् :nth-child, जुन इन्टरनेट एक्सप्लोरर 8 मा उपलब्ध छैन।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

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

बोर्डर गरिएको तालिका

.table-borderedतालिका र कक्षहरूको सबै छेउमा किनाराहरूको लागि थप्नुहोस् ।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

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

होभर पङ्क्तिहरू

.table-hoverएक भित्र तालिका पङ्क्तिहरूमा होभर स्थिति सक्षम गर्न थप्नुहोस् <tbody>।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी	चरा	@twitter

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

गाढा तालिका

.table-condensedसेल प्याडिङलाई आधामा काटेर तालिकाहरू थप कम्प्याक्ट बनाउन थप्नुहोस् ।

#	पहिलो नाम	थर	प्रयोगकर्ता नाम
१	मार्क	ओटो	@mdo
२	याकूब	थोरन्टन	@मोटो
३	ल्यारी द बर्ड		@twitter

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

प्रासंगिक कक्षाहरू

तालिका पङ्क्तिहरू वा व्यक्तिगत कक्षहरू रङ गर्न सन्दर्भ वर्गहरू प्रयोग गर्नुहोस्।

कक्षा	विवरण
`.active`	एक विशेष पङ्क्ति वा कक्षमा होभर रंग लागू गर्दछ
`.success`	सफल वा सकारात्मक कार्यलाई संकेत गर्दछ
`.info`	एक तटस्थ सूचनात्मक परिवर्तन वा कार्यलाई संकेत गर्दछ
`.warning`	ध्यान आवश्यक हुन सक्ने चेतावनीलाई संकेत गर्दछ
`.danger`	खतरनाक वा सम्भावित नकारात्मक कार्यलाई संकेत गर्दछ

#	स्तम्भ शीर्षक	स्तम्भ शीर्षक	स्तम्भ शीर्षक
१	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
२	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
३	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
४	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
५	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
६	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
७	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
८	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री
९	स्तम्भ सामग्री	स्तम्भ सामग्री	स्तम्भ सामग्री

<!-- 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कक्षासँग लुकेको अतिरिक्त पाठ।

उत्तरदायी तालिकाहरू

साना यन्त्रहरूमा (७६८ पिक्सेल मुनि) लाई तेर्सो रूपमा स्क्रोल गर्नका लागि कुनै .tableपनि र्‍याप गरेर प्रतिक्रियाशील तालिकाहरू सिर्जना गर्नुहोस् । .table-responsive768px चौडा भन्दा ठुलो कुनै पनि कुरामा हेर्दा, तपाईंले यी तालिकाहरूमा कुनै फरक देख्नुहुने छैन।

ठाडो क्लिपिङ/ट्रङ्केसन

उत्तरदायी तालिकाहरूले तालिकाको overflow-y: hiddenतल्लो वा माथिल्लो किनारहरूभन्दा बाहिर जाने कुनै पनि सामग्रीलाई क्लिप गर्ने प्रयोग गर्दछ। विशेष गरी, यसले ड्रपडाउन मेनु र अन्य तेस्रो-पक्ष विजेटहरू क्लिप गर्न सक्छ।

फायरफक्स र फिल्डसेटहरू

फायरफक्ससँग केहि अप्ठ्यारो फिल्डसेट स्टाइल समावेश widthछ जसले उत्तरदायी तालिकामा हस्तक्षेप गर्दछ। यो फायरफक्स-विशिष्ट ह्याक बिना ओभरराइड गर्न सकिँदैन जुन हामीले बुटस्ट्र्यापमा प्रदान गर्दैनौं :

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

थप जानकारीको लागि, यो स्ट्याक ओभरफ्लो जवाफ पढ्नुहोस् ।

#	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
१	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल
२	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल
३	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल

#	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक	तालिका शीर्षक
१	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल
२	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल
३	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल	तालिका सेल

<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ग्रिड पङ्क्तिहरूको रूपमा व्यवहार गर्न s परिवर्तन हुन्छ, त्यसैले आवश्यक पर्दैन .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, teland color.

प्रकारको घोषणा आवश्यक छ

इनपुटहरू मात्र पूर्ण रूपमा स्टाइल हुनेछन् यदि तिनीहरूको typeसही रूपमा घोषणा गरिएको छ।

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

इनपुट समूहहरू

कुनै पनि पाठ-आधारित अघि र/वा पछि एकीकृत पाठ वा बटनहरू थप्नको लागि <input>, इनपुट समूह कम्पोनेन्ट जाँच गर्नुहोस् ।

Textarea

फारम नियन्त्रण जसले पाठको बहु रेखाहरूलाई समर्थन गर्दछ। 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>

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

जब तपाईंले फारम भित्र फारम लेबलको छेउमा सादा पाठ राख्न आवश्यक छ, .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 प्रयोग गर्नुहोस्।

क्रस-ब्राउजर अनुकूलता

disabledजबकि बुटस्ट्र्यापले यी शैलीहरू सबै ब्राउजरहरूमा लागू गर्नेछ, इन्टरनेट एक्सप्लोरर 11 र तलक�� एट्रिब्यूटलाई पूर्ण रूपमा समर्थन गर्दैन <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>

क्रस-ब्राउजर अनुकूलता

यदि तपाईंले disabledएक मा विशेषता थप्नुभयो भने <button>, इन्टरनेट एक्सप्लोरर 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, किबोर्ड । नेभिगेसन अप्रभावित रहन्छ, यसको अर्थ किबोर्ड प्रयोगकर्ताहरू र सहायक प्रविधिहरूको प्रयोगकर्ताहरूले अझै पनि यी लिङ्कहरू सक्रिय गर्न सक्षम हुनेछन्। त्यसैले सुरक्षित हुन, त्यस्ता लिङ्कहरू असक्षम गर्न अनुकूलन JavaScript प्रयोग गर्नुहोस्।

उत्तरदायी छविहरू

.img-responsiveBootstrap 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">

प्रासंगिक रंगहरू

जोर उपयोगिता वर्ग को एक मुट्ठी भर संग रंग मार्फत अर्थ व्यक्त गर्नुहोस्। यो लिङ्कहरूमा पनि लागू हुन सक्छ र हाम्रो पूर्वनिर्धारित लिङ्क शैलीहरू जस्तै होभरमा अँध्यारो हुनेछ।

Fusce dapibus, telus ac cursus commodo, tortor mauris nibh।

Nullam id dolor id nibh ultricies vehicula ut id elit।

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

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

Etiam porta sem malesuada magna mollis euismod।

Donec ullamcorper nulla non metus Auctor fringilla।

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

विशिष्टता संग व्यवहार

कहिलेकाहीँ अर्को चयनकर्ताको विशिष्टताको कारणले जोर कक्षाहरू लागू गर्न सकिँदैन। धेरै जसो केसहरूमा, एक पर्याप्त समाधान भनेको तपाइँको पाठलाई <span>कक्षाको साथमा लपेट्नु हो।

सहयोगी टेक्नोलोजीहरूको अर्थ बुझाउँदै

अर्थ थप्न रङको प्रयोगले मात्र दृश्य सङ्केत प्रदान गर्दछ, जुन सहायक प्रविधिहरूका प्रयोगकर्ताहरूलाई जानकारी दिइने छैन - जस्तै स्क्रिन रिडरहरू। सुनिश्चित गर्नुहोस् कि रङद्वारा संकेत गरिएको जानकारी या त सामग्रीबाट नै स्पष्ट छ (प्रासंगिक रङहरू मात्र पाठ/मार्कअपमा अवस्थित अर्थलाई सुदृढ पार्न प्रयोग गरिन्छ), वा वैकल्पिक माध्यमहरू मार्फत समावेश गरिएको छ, जस्तै .sr-onlyकक्षासँग लुकेको अतिरिक्त पाठ। ।

प्रासंगिक पृष्ठभूमि

सान्दर्भिक पाठ रङ वर्गहरू जस्तै, सजिलैसँग कुनै पनि प्रासंगिक वर्गमा तत्वको पृष्ठभूमि सेट गर्नुहोस्। एङ्कर कम्पोनेन्टहरू पाठ वर्गहरू जस्तै होभरमा अँध्यारो हुनेछन्।

Nullam id dolor id nibh ultricies vehicula ut id elit।

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

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

Etiam porta sem malesuada magna mollis euismod।

Donec ullamcorper nulla non metus Auctor fringilla।

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

विशिष्टता संग व्यवहार

कहिलेकाहीँ अर्को चयनकर्ताको विशिष्टताको कारणले गर्दा प्रासंगिक पृष्ठभूमि वर्गहरू लागू गर्न सकिँदैन। केहि अवस्थामा, एक पर्याप्त समाधान भनेको तपाइँको तत्वको सामग्रीलाई <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-*-*प्रत्येक ब्रेकपोइन्टका लागि कक्षाहरू तीन भिन्नताहरूमा आउँछन्, displayतल सूचीबद्ध प्रत्येक CSS गुण मूल्यको लागि।

कक्षाहरूको समूह	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-small मा लुकेको छ

सानो ✔ सानोमा लुकेको

मध्यम ✔ माध्यममा लुकेको

ठूलो ✔ ठूलोमा लुकेको

अतिरिक्त सानो र सानो ✔ x-सानो र सानोमा लुकेको छ

मध्यम र ठूलो ✔ मध्यम र ठूलो मा लुकेको

अतिरिक्त सानो र मध्यम ✔ x-सानो र मध्यममा लुकेको छ

सानो र ठूलो ✔ साना र ठूला लुकेका छन्

अतिरिक्त सानो र ठूलो ✔ x-सानो र ठूलो मा लुकेको

साना र मध्यम ✔ सानो र मध्यम मा लुकेको

बुटस्ट्र्यापको CSS लेस मा बनाइएको छ, अतिरिक्त कार्यक्षमता जस्तै चर, मिक्सिन, र CSS कम्पाइल गर्नका लागि कार्यहरू सहितको प्रिप्रोसेसर। हाम्रा संकलित CSS फाइलहरूको सट्टा स्रोत कम फाइलहरू प्रयोग गर्न खोज्नेहरूले हामीले फ्रेमवर्कमा प्रयोग गर्ने असंख्य चरहरू र मिक्सिनहरू प्रयोग गर्न सक्छन्।

ग्रिड चर र मिक्सिनहरू ग्रिड प्रणाली खण्ड भित्र समेटिएका छन् समेटिएका छन् ।

बुटस्ट्र्याप कम्पाइल गर्दै

बुटस्ट्र्याप कम्तिमा दुई तरिकामा प्रयोग गर्न सकिन्छ: कम्पाइल गरिएको CSS वा स्रोत कम फाइलहरूसँग। कम फाइलहरू कम्पाइल गर्न , आवश्यक आदेशहरू चलाउनको लागि तपाईंको विकास वातावरण कसरी सेटअप गर्ने भनेर सुरु गर्ने खण्डमा परामर्श गर्नुहोस्।

तेस्रो पक्ष संकलन उपकरणहरूले बुटस्ट्र्यापसँग काम गर्न सक्छ, तर तिनीहरू हाम्रो मुख्य टोलीद्वारा समर्थित छैनन्।

चरहरू

रङ, स्पेसिङ, वा फन्ट स्ट्याकहरू जस्ता सामान्यतया प्रयोग गरिएका मानहरूलाई केन्द्रीकृत र साझेदारी गर्ने तरिकाको रूपमा चरहरू सम्पूर्ण परियोजनामा प्रयोग गरिन्छ। पूर्ण ब्रेकडाउनको लागि, कृपया Customizer हेर्नुहोस् ।

रंगहरू

सजिलैसँग दुई रङ योजनाहरू प्रयोग गर्नुहोस्: ग्रेस्केल र सिमेन्टिक। ग्रेस्केल रङहरूले कालोको सामान्य रूपमा प्रयोग हुने शेडहरूमा द्रुत पहुँच प्रदान गर्दछ जबकि अर्थमा अर्थपूर्ण सन्दर्भ मानहरूमा तोकिएका विभिन्न रङहरू समावेश हुन्छन्।

@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कार्य प्रयोग गर्दछ, कम बाट अर्को उत्कृष्ट उपकरण, स्वचालित रूपमा सही होभर रंग सिर्जना गर्न। तपाईं 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 मा सबै सान्दर्भिक विक्रेता उपसर्गहरू समावेश गरेर धेरै ब्राउजरहरूलाई समर्थन गर्न मद्दत गर्न मिक्सिनहरू हुन्।

बक्स आकार

एकल मिक्सिनको साथ आफ्नो कम्पोनेन्टको बक्स मोडेल रिसेट गर्नुहोस्। सन्दर्भको लागि, मोजिलाबाट यो उपयोगी लेख हेर्नुहोस् ।

Autoprefixer को परिचय संग, v3.2.0 को रूपमा मिक्सिनलाई बहिष्कृत गरिएको छ । ब्याकवर्ड-कम्प्याटिबिलिटी जोगाउन, बुटस्ट्र्यापले Bootstrap 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यदि तपाइँका लक्षित दर्शकहरूले नवीनतम र सबैभन्दा ठूलो ब्राउजर र उपकरणहरू प्रयोग गर्दै हुनुहुन्छ भने, केवल आफ्नै रूपमा सम्पत्ति प्रयोग गर्न निश्चित हुनुहोस् । यदि तपाईंलाई पुरानो एन्ड्रोइड (पूर्व-v4) र आईओएस यन्त्रहरू (प्रि-आईओएस 5) को लागि समर्थन चाहिन्छ भने , आवश्यक लिनको लागि हटाइएको मिक्सिन प्रयोग गर्नुहोस् ।-webkit , आवश्यक उपसर्ग

मिक्सिनलाई रोकिएको छ समर्थन नगर्ने पुरानो प्लेटफर्महरूलाई आधिकारिक रूपमा समर्थन गर्दैन। ब्याकवर्ड-कम्प्याटिबिलिटी जोगाउन, बुटस्ट्र्यापले Bootstrap 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;
}

संक्रमण

लचिलोपनको लागि बहु मिक्सहरू। एक संग सबै संक्रमण जानकारी सेट गर्नुहोस्, वा आवश्यकता अनुसार छुट्टै ढिलाइ र अवधि निर्दिष्ट गर्नुहोस्।

Autoprefixer को परिचयको साथ, v3.2.0 को रूपमा मिक्सिनहरू हटाइएको छ। ब्याकवर्ड-कम्प्याटिबिलिटी जोगाउन, बुटस्ट्र्यापले Bootstrap 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);

पहिले माथि र यसको सट्टा तीन रङ प्रयोग गर्नुहोस्। पहिलो रङ, दोस्रो रङ, दोस्रो रङको रङ स्टप (प्रतिशत मान जस्तै २५%), र तेस्रो रङ यी मिश्रणहरूसँग सेट गर्नुहोस्:

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

हेड अप! यदि तपाइँले कहिल्यै ढाँचा हटाउन आवश्यक छ भने, तपाइँले थप्नु भएको कुनै पनि IE-विशिष्ट हटाउन निश्चित हुनुहोस् filter। .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); }

रिसाइज गर्न मिल्ने पाठ क्षेत्रहरू

कुनै पनि textarea, वा कुनै अन्य तत्वको लागि सजिलैसँग रिसाइज विकल्पहरू कन्फिगर गर्नुहोस्। सामान्य ब्राउजर व्यवहार ( 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-आधारित प्रणालीहरूसँग उपयुक्त छ भन्ने सुनिश्चित गर्दछ।

बाटो	विवरण
`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। बुटस्ट्र्याप हेडिङ माध्यमिक पाठ

शरीर प्रतिलिपि

नेतृत्व शरीर प्रतिलिपि

कम संग निर्मित

इनलाइन पाठ तत्वहरू

चिन्ह लगाइएको पाठ

मेटाइएको पाठ

स्ट्राइकथ्रु पाठ

सम्मिलित पाठ

अधोरेखित पाठ

सानो पाठ

बोल्ड

इटालिक

वैकल्पिक तत्वहरू

पङ्क्तिबद्ध कक्षाहरू

रूपान्तरण कक्षाहरू

संक्षिप्त रूपहरू

आधारभूत संक्षिप्त नाम

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

ठेगानाहरू

ब्लककोटहरू

पूर्वनिर्धारित blockquote

Blockquote विकल्प

स्रोतको नामकरण

वैकल्पिक प्रदर्शनहरू

सूचीहरू

क्रमरहित

आदेश

अनस्टाइल

क्रममा

विवरण

तेर्सो वर्णन

स्वतः काट्ने

कोड

क्रममा

प्रयोगकर्ता इनपुट

आधारभूत ब्लक

चरहरू

नमूना आउटपुट

तालिकाहरू

आधारभूत उदाहरण

धारीदार पङ्क्तिहरू

क्रस-ब्राउजर अनुकूलता

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

को लिङ्क कार्यक्षमता बारे चेतावनी`<a>`

लुकेका `.sr-only`लेबलहरूसँग वैकल्पिक आइकनहरू