CSS
ग्लोबल CSS सेटिङहरू, आधारभूत HTML तत्वहरू स्टाइल गरिएका र एक्स्टेन्सिबल कक्षाहरू, र एक उन्नत ग्रिड प्रणालीको साथ परिष्कृत।
ग्लोबल CSS सेटिङहरू, आधारभूत HTML तत्वहरू स्टाइल गरिएका र एक्स्टेन्सिबल कक्षाहरू, र एक उन्नत ग्रिड प्रणालीको साथ परिष्कृत।
राम्रो, छिटो, बलियो वेब विकासको लागि हाम्रो दृष्टिकोण सहित, बुटस्ट्र्यापको पूर्वाधारको मुख्य टुक्राहरूमा कम जानकारी प्राप्त गर्नुहोस्।
बुटस्ट्र्यापले निश्चित 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
।
सुधारिएको क्रस-ब्राउजर रेन्डरिङको लागि, हामी 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
।.col-md-*
वर्गलाई एलिमेन्टमा लागू गर्नाले यसको स्टाइललाई मध्यम यन्त्रहरूमा मात्र असर गर्दैन तर ठूला यन्त्रहरूमा पनि यदि .col-lg-*
क्लास उपस्थित छैन भने।तपाईंको कोडमा यी सिद्धान्तहरू लागू गर्नका लागि उदाहरणहरू हेर्नुहोस्।
हामी हाम्रो ग्रिड प्रणालीमा मुख्य ब्रेकपोइन्टहरू सिर्जना गर्न हाम्रो कम फाइलहरूमा निम्न मिडिया प्रश्नहरू प्रयोग गर्छौं।
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
हामी कहिलेकाहीँ यी मिडिया प्रश्नहरूमा max-width
CSS लाई यन्त्रहरूको साँघुरो सेटमा सीमित गर्न समावेश गर्दछौं।
@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
।
<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-*
तपाईंको स्तम्भहरूमा थपेर अतिरिक्त साना र मध्यम उपकरण ग्रिड वर्गहरू प्रयोग गर्नुहोस्। यो सबै कसरी काम गर्दछ भन्ने राम्रो विचारको लागि तलको उदाहरण हेर्नुहोस्।
<!-- 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-*
ट्याब्लेट कक्षाहरूसँग अझ बढी गतिशील र शक्तिशाली लेआउटहरू सिर्जना गरेर अघिल्लो उदाहरणमा निर्माण गर्नुहोस् ।
<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 भन्दा बढी स्तम्भहरू एउटै पङ्क्ति भित्र राखिएको छ भने, अतिरिक्त स्तम्भहरूको प्रत्येक समूह, एक एकाइको रूपमा, नयाँ रेखामा लपेट्नेछ।
<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 > 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
र हाम्रो उत्तरदायी उपयोगिता वर्गहरूको संयोजन प्रयोग गर्नुहोस् ।
<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
<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-*
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
सजिलैसँग हाम्रो निर्मित ग्रिड स्तम्भहरूको क्रम .col-md-push-*
र .col-md-pull-*
परिमार्जक वर्गहरूको साथ परिवर्तन गर्नुहोस्।
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>
छिटो लेआउटहरूका लागि पूर्वनिर्मित ग्रिड कक्षाहरूका अतिरिक्त , बुटस्ट्र्यापले तपाईंको आफ्नै सरल, सिमेन्टिक लेआउटहरू द्रुत रूपमा उत्पन्न गर्नको लागि कम चरहरू र मिक्सिनहरू समावेश गर्दछ।
चरहरूले स्तम्भहरूको संख्या, नालीको चौडाइ, र मिडिया क्वेरी बिन्दुमा फ्लोटिंग स्तम्भहरू सुरु गर्ने निर्धारण गर्दछ। हामी माथि उल्लेखित पूर्वनिर्धारित ग्रिड वर्गहरू उत्पन्न गर्न प्रयोग गर्छौं, साथै तल सूचीबद्ध अनुकूलन मिक्सनहरूको लागि।
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;
व्यक्तिगत ग्रिड स्तम्भहरूको लागि सिमान्टिक CSS उत्पन्न गर्न ग्रिड चरहरूसँग संयोजनमा मिक्सिनहरू प्रयोग गरिन्छ।
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}
तपाइँ चरहरूलाई तपाइँको आफ्नै अनुकूल मानहरूमा परिमार्जन गर्न सक्नुहुन्छ, वा केवल तिनीहरूको पूर्वनिर्धारित मानहरूसँग मिक्सिनहरू प्रयोग गर्नुहोस्। बीचको अन्तरको साथ दुई-स्तम्भ लेआउट सिर्जना गर्न पूर्वनिर्धारित सेटिङहरू प्रयोग गर्ने उदाहरण यहाँ छ।
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}
<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>
सबै HTML शीर्षकहरू, <h1>
मार्फत <h6>
उपलब्ध छन्। .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>
।
<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>
तपाईंको कागजात भित्रको अर्को स्रोतबाट सामग्रीको ब्लकहरू उद्धृत गर्नका लागि।
उद्धरणको रूपमा कुनै पनि 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>
।
<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
दायाँ पङ्क्तिबद्ध सामग्रीको साथ ब्लककोटको लागि थप्नुहोस् ।
<blockquote class="blockquote-reverse">
...
</blockquote>
वस्तुहरूको सूची जसमा आदेश स्पष्ट रूपमा फरक पर्दैन ।
<ul>
<li>...</li>
</ul>
वस्तुहरूको सूची जसमा क्रम स्पष्ट रूपमा महत्त्वपूर्ण छ ।
<ol>
<li>...</li>
</ol>
सूची वस्तुहरूमा पूर्वनिर्धारित list-style
र बायाँ मार्जिन हटाउनुहोस् (तत्काल बच्चाहरू मात्र)। यो केवल तत्काल बच्चाहरूको सूची वस्तुहरूमा लागू हुन्छ , यसको मतलब तपाईंले कुनै पनि नेस्टेड सूचीहरूको लागि पनि कक्षा थप्नु पर्छ।
<ul class="list-unstyled">
<li>...</li>
</ul>
सबै सूची वस्तुहरू एउटै लाइनमा राख्नुहोस् display: inline-block;
र केही हल्का प्याडिङ।
<ul class="list-inline">
<li>...</li>
</ul>
तिनीहरूसँग सम्बन्धित विवरणहरूको साथ सर्तहरूको सूची।
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>
सर्तहरू र विवरणहरू <dl>
लाईन-अप-साइड-अप गर्नुहोस्। पूर्वनिर्धारित s जस्तै स्ट्याक बन्द सुरु हुन्छ <dl>
, तर जब navbar विस्तार हुन्छ, त्यसो गर्नुहोस्।
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>
तेर्सो वर्णन सूचीहरूले सर्तहरू काट्नेछ जुन बायाँ स्तम्भमा फिट हुन धेरै लामो छ text-overflow
। साँघुरो भ्यूपोर्टहरूमा, तिनीहरू पूर्वनिर्धारित स्ट्याक गरिएको लेआउटमा परिवर्तन हुनेछन्।
कोडको इनलाइन स्निपेटहरू र्याप गर्नुहोस् <code>
।
<section>
इनलाइनको रूपमा बेरिएको हुनुपर्छ।
For example, <code><section></code> should be wrapped as inline.
<kbd>
किबोर्ड मार्फत सामान्यतया प्रविष्ट गरिएको इनपुट संकेत गर्न प्रयोग गर्नुहोस् ।
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><p>Sample text here...</p></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 |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<table class="table">
...
</table>
.table-striped
भित्र कुनै पनि तालिका पङ्क्तिमा जेब्रा-स्ट्रिपिङ थप्न प्रयोग गर्नुहोस् <tbody>
।
स्ट्रिप गरिएको तालिकाहरू CSS चयनकर्ता मार्फत स्टाइल गरिएका छन् :nth-child
, जुन इन्टरनेट एक्सप्लोरर 8 मा उपलब्ध छैन।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<table class="table table-striped">
...
</table>
.table-bordered
तालिका र कक्षहरूको सबै छेउमा किनाराहरूको लागि थप्नुहोस् ।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<table class="table table-bordered">
...
</table>
.table-hover
एक भित्र तालिका पङ्क्तिहरूमा होभर स्थिति सक्षम गर्न थप्नुहोस् <tbody>
।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी | चरा |
<table class="table table-hover">
...
</table>
.table-condensed
सेल प्याडिङलाई आधामा काटेर तालिकाहरू थप कम्प्याक्ट बनाउन थप्नुहोस् ।
# | पहिलो नाम | थर | प्रयोगकर्ता नाम |
---|---|---|---|
१ | मार्क | ओटो | @mdo |
२ | याकूब | थोरन्टन | @मोटो |
३ | ल्यारी द बर्ड |
<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-responsive
768px चौडा भन्दा ठुलो कुनै पनि कुरामा हेर्दा, तपाईंले यी तालिकाहरूमा कुनै फरक देख्नुहुने छैन।
उत्तरदायी तालिकाहरूले तालिकाको 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
, tel
and color
.
इनपुटहरू मात्र पूर्ण रूपमा स्टाइल हुनेछन् यदि तिनीहरूको type
सही रूपमा घोषणा गरिएको छ।
<input type="text" class="form-control" placeholder="Text input">
कुनै पनि पाठ-आधारित अघि र/वा पछि एकीकृत पाठ वा बटनहरू थप्नको लागि <input>
, इनपुट समूह कम्पोनेन्ट जाँच गर्नुहोस् ।
फारम नियन्त्रण जसले पाठको बहु रेखाहरूलाई समर्थन गर्दछ। rows
आवश्यकता अनुसार विशेषता परिवर्तन गर्नुहोस् ।
<textarea class="form-control" rows="3"></textarea>
चेकबक्सहरू सूचीमा एक वा धेरै विकल्पहरू चयन गर्नका लागि हुन्, जबकि रेडियोहरू धेरैबाट एउटा विकल्प चयन गर्नका लागि हुन्।
असक्षम गरिएका चेकबक्सहरू र रेडियोहरू समर्थित छन्, तर अभिभावकको होभरमा "अनुमति छैन" कर्सर प्रदान गर्नको लागि <label>
, तपाईंले .disabled
कक्षालाई अभिभावकमा थप्न आवश्यक छ .radio
, .radio-inline
, .checkbox
वा .checkbox-inline
।
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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—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-responsive
Bootstrap 3 मा छविहरू कक्षाको थप मार्फत उत्तरदायी-अनुकूल बनाउन सकिन्छ । यो लागू हुन्छ max-width: 100%;
, height: auto;
र display: block;
छविमा ताकि यसले अभिभावक तत्वमा राम्रोसँग मापन गर्दछ।
.img-responsive
वर्ग प्रयोग गर्ने छविहरूलाई केन्द्रमा राख्न , .center-block
को सट्टा प्रयोग गर्नुहोस् .text-center
। प्रयोगको बारेमा थप विवरणहरूको लागि सहायक कक्षाहरू हेर्नुहोस् ।.center-block
इन्टरनेट एक्सप्लोरर 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">×</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 गुण मूल्यको लागि।
कक्षाहरूको समूह | CSSdisplay |
---|---|
.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>
तपाईंको ब्राउजरको आकार बदल्नुहोस् वा प्रतिक्रियाशील उपयोगिता कक्षाहरू परीक्षण गर्न विभिन्न उपकरणहरूमा लोड गर्नुहोस्।
हरियो चेकमार्कले तत्वलाई संकेत गर्छहरियो चेकमार्कहरूले तपाईंको हालको भ्यूपोर्टमा देखिने संकेत गर्दछ।
यहाँ, हरियो चेकमार्कहरूले तपाईंको हालको भ्यूपोर्टमा तत्व लुकेको छ भनेर पनि संकेत गर्दछ।
बुटस्ट्र्यापको 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;
}
घुमाउनुहोस्, मापन गर्नुहोस्, अनुवाद गर्नुहोस् (सार्नुहोस्), वा कुनै पनि वस्तु स्क्यु गर्नुहोस्।
Autoprefixer को परिचयको साथ, v3.2.0 को रूपमा मिक्सिनहरू हटाइएको छ। ब्याकवर्ड-कम्प्याटिबिलिटी जोगाउन, बुटस्ट्र्यापले Bootstrap v4 सम्म आन्तरिक रूपमा मिक्सिनहरू प्रयोग गर्न जारी राख्नेछ।
.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 का सबै एनिमेसन गुणहरू प्रयोग गर्नको लागि एकल मिक्सिन र व्यक्तिगत गुणहरूको लागि अन्य मिक्सिनहरू।
Autoprefixer को परिचयको साथ, v3.2.0 को रूपमा मिक्सिनहरू हटाइएको छ। ब्याकवर्ड-कम्प्याटिबिलिटी जोगाउन, बुटस्ट्र्यापले Bootstrap v4 सम्म आन्तरिक रूपमा मिक्सिनहरू प्रयोग गर्न जारी राख्नेछ।
.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;
}
सबै ब्राउजरहरूको लागि अस्पष्टता सेट गर्नुहोस् र filter
IE8 को लागि फलब्याक प्रदान गर्नुहोस्।
.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 परियोजनाहरूसँग प्रयोगको लागि जानकारी समावेश गर्दछ।