CSS
గ్లోబల్ CSS సెట్టింగ్లు, ప్రాథమిక HTML అంశాలు స్టైల్ మరియు ఎక్స్టెన్సిబుల్ క్లాస్‌లతో మెరుగుపరచబడ్డాయి మరియు అధునాతన గ్రిడ్ సిస్టమ్.
అవలోకనం
మెరుగైన, వేగవంతమైన, బలమైన వెబ్ డెవలప్‌మెంట్‌కు మా విధానంతో సహా బూట్స్ట్రాప్ ఇన్‌ఫ్రాస్ట్రక్చర్ యొక్క ముఖ్య భాగాలపై తక్కువ స్థాయిని పొందండి.
HTML5 సిద్ధాంతం
బూట్స్ట్రాప్ కొన్ని HTML మూలకాలు మరియు HTML5 డాక్టైప్‌ని ఉపయోగించాల్సిన CSS లక్షణాలను ఉపయోగించుకుంటుంది. మీ అన్ని ప్రాజెక్ట్‌ల ప్రారంభంలో దీన్ని చేర్చండి.
<!DOCTYPE html>
<html lang="en">
...
</html>ముందుగా మొబైల్
బూట్స్ట్రాప్ 2తో, మేము ఫ్రేమ్‌వర్క్ యొక్క ముఖ్య అంశాల కోసం ఐచ్ఛిక మొబైల్ స్నేహపూర్వక శైలులను జోడించాము. బూట్స్ట్రాప్ 3తో, మేము ప్రాజెక్ట్‌ను మొదటి నుండి మొబైల్ స్నేహపూర్వకంగా తిరిగి వ్రాసాము. ఐచ్ఛిక మొబైల్ స్టైల్‌లను జోడించే బదులు, అవి కోర్‌లో బేక్ చేయబడతాయి. నిజానికి, బూట్స్ట్రాప్ మొదట మొబైల్ . ప్రత్యేక ఫైల్‌లలో కాకుండా మొత్తం లైబ్రరీ అంతటా మొబైల్ ఫస్ట్ స్టైల్‌లను కనుగొనవచ్చు.
సరైన రెండరింగ్ మరియు టచ్ జూమింగ్‌ని నిర్ధారించడానికి, మీ వ్యూపోర్ట్ మెటా ట్యాగ్‌ని జోడించండి<head> .
<meta name="viewport" content="width=device-width, initial-scale=1">user-scalable=noమీరు వ్యూపోర్ట్ మెటా ట్యాగ్‌కి జోడించడం ద్వారా మొబైల్ పరికరాలలో జూమ్ చేసే సామర్థ్యాలను నిలిపివేయవచ్చు . ఇది జూమ్ చేయడాన్ని నిలిపివేస్తుంది, అంటే వినియోగదారులు మాత్రమే స్క్రోల్ చేయగలరు మరియు ఫలితంగా మీ సైట్ స్థానిక అప్లికేషన్ లాగా కొంత ఎక్కువ అనుభూతి చెందుతుంది. మొత్తంమీద, మేము దీన్ని ప్రతి సైట్‌లో సిఫార్సు చేయము, కాబట్టి జాగ్రత్తగా ఉండండి!
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">టైపోగ్రఫీ మరియు లింకులు
బూట్స్ట్రాప్ ప్రాథమిక ప్రపంచ ప్రదర్శన, టైపోగ్రఫీ మరియు లింక్ శైలులను సెట్ చేస్తుంది. ప్రత్యేకంగా, మేము:
background-color: #fff;న సెట్body- మా టైపోగ్రాఫిక్ బేస్‌గా
@font-family-base,@font-size-base, మరియు లక్షణాలను ఉపయోగించండి@line-height-base - దీని ద్వారా గ్లోబల్ లింక్ రంగును సెట్ చేయండి
@link-colorమరియు లింక్ అండర్‌లైన్‌లను మాత్రమే వర్తింపజేయండి:hover
ఈ శైలులు లోపల చూడవచ్చు scaffolding.less.
Normalize.css
మెరుగైన క్రాస్-బ్రౌజర్ రెండరింగ్ కోసం, మేము Normalize.css ను ఉపయోగిస్తాము, ఇది Nicolas Gallagher మరియు Jonathan Neal రూపొందించిన ప్రాజెక్ట్ .
కంటైనర్లు
బూట్‌స్ట్రాప్‌కు సైట్ కంటెంట్‌లను చుట్టడానికి మరియు మా గ్రిడ్ సిస్టమ్‌ను ఉంచడానికి కలిగి ఉన్న మూలకం అవసరం. మీరు మీ ప్రాజెక్ట్‌లలో ఉపయోగించడానికి రెండు కంటైనర్‌లలో ఒకదాన్ని ఎంచుకోవచ్చు. మరియు మరిన్ని కారణంగా padding, ఏ కంటైనర్ కూడా గూడులో ఉండదని గమనించండి.
.containerప్రతిస్పందించే స్థిర వెడల్పు కంటైనర్ కోసం ఉపయోగించండి .
<div class="container">
...
</div>.container-fluidమీ వీక్షణపోర్ట్ యొక్క మొత్తం వెడల్పును విస్తరించి, పూర్తి వెడల్పు కంటైనర్ కోసం ఉపయోగించండి .
<div class="container-fluid">
...
</div>గ్రిడ్ వ్యవస్థ
బూట్స్ట్రాప్ ప్రతిస్పందించే, మొబైల్ ఫస్ట్ ఫ్లూయిడ్ గ్రిడ్ సిస్టమ్‌ని కలిగి ఉంటుంది, ఇది పరికరం లేదా వీక్షణపోర్ట్ పరిమాణం పెరిగేకొద్దీ తగిన విధంగా 12 నిలువు వరుసల వరకు స్కేల్ చేస్తుంది. ఇది సులభమైన లేఅవుట్ ఎంపికల కోసం ముందే నిర్వచించిన తరగతులను , అలాగే మరిన్ని అర్థ లేఅవుట్‌లను రూపొందించడానికి శక్తివంతమైన మిక్సిన్‌లను కలిగి ఉంటుంది .
పరిచయం
మీ కంటెంట్‌ను కలిగి ఉండే వరుసలు మరియు నిలువు వరుసల ద్వారా పేజీ లేఅవుట్‌లను రూపొందించడానికి గ్రిడ్ సిస్టమ్‌లు ఉపయోగించబడతాయి. బూట్స్ట్రాప్ గ్రిడ్ సిస్టమ్ ఎలా పనిచేస్తుందో ఇక్కడ ఉంది:
- సరైన అమరిక మరియు పాడింగ్ కోసం అడ్డు వరుసలు తప్పనిసరిగా
.container(స్థిర-వెడల్పు) లేదా (పూర్తి-వెడల్పు) లోపల ఉంచాలి ..container-fluid - నిలువు వరుసల సమూహ సమూహాలను సృష్టించడానికి అడ్డు వరుసలను ఉపయోగించండి.
- కంటెంట్‌ని నిలువు వరుసలలోనే ఉంచాలి మరియు నిలువు వరుసలు మాత్రమే తక్షణ పిల్లలు కావచ్చు.
- గ్రిడ్ లేఅవుట్‌లను త్వరగా రూపొందించడానికి ముందే నిర్వచించబడిన గ్రిడ్ తరగతులు
.rowఅందుబాటులో ఉన్నాయి..col-xs-4ఎక్కువ సెమాంటిక్ లేఅవుట్‌ల కోసం తక్కువ మిక్సిన్‌లను కూడా ఉపయోగించవచ్చు. - నిలువు వరుసలు ద్వారా గట్టర్‌లను (కాలమ్ కంటెంట్ మధ్య ఖాళీలు) సృష్టిస్తాయి
padding. ఆ పాడింగ్ మొదటి మరియు చివరి నిలువు వరుసలలో ప్రతికూల మార్జిన్ ద్వారా.rowsలో ఆఫ్‌సెట్ చేయబడింది. - ప్రతికూల మార్జిన్ అంటే దిగువ ఉదాహరణలు ఎందుకు బయటపడ్డాయి. గ్రిడ్ నిలువు వరుసలలోని కంటెంట్ నాన్-గ్రిడ్ కంటెంట్‌తో వరుసలో ఉంటుంది కాబట్టి.
- మీరు విస్తరించాలనుకుంటున్న పన్నెండు అందుబాటులో ఉన్న నిలువు వరుసల సంఖ్యను పేర్కొనడం ద్వారా గ్రిడ్ నిలువు వరుసలు సృష్టించబడతాయి. ఉదాహరణకు, మూడు సమాన నిలువు వరుసలు మూడు ఉపయోగిస్తాయి
.col-xs-4. - ఒకే అడ్డు వరుసలో 12 కంటే ఎక్కువ నిలువు వరుసలను ఉంచినట్లయితే, అదనపు నిలువు వరుసల యొక్క ప్రతి సమూహం ఒక యూనిట్‌గా, ఒక కొత్త లైన్‌లో చుట్టబడుతుంది.
- గ్రిడ్ తరగతులు బ్రేక్‌పాయింట్ పరిమాణాల కంటే ఎక్కువ లేదా సమానమైన స్క్రీన్ వెడల్పు ఉన్న పరికరాలకు వర్తిస్తాయి మరియు చిన్న పరికరాలను లక్ష్యంగా చేసుకున్న గ్రిడ్ తరగతులను భర్తీ చేస్తాయి. అందువల్ల, ఉదా. ఏదైనా తరగతిని మూలకానికి వర్తింపజేయడం అనేది మీడియం పరికరాల్లో మాత్రమే కాకుండా, తరగతి
.col-md-*లేనట్లయితే పెద్ద పరికరాలపై కూడా దాని స్టైలింగ్‌ను ప్రభావితం చేస్తుంది ..col-lg-*
మీ కోడ్‌కు ఈ సూత్రాలను వర్తింపజేయడానికి ఉదాహరణలను చూడండి.
మీడియా ప్రశ్నలు
మా గ్రిడ్ సిస్టమ్‌లో కీ బ్రేక్‌పాయింట్‌లను సృష్టించడానికి మేము మా తక్కువ ఫైల్‌లలో క్రింది మీడియా ప్రశ్నలను ఉపయోగిస్తాము.
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }max-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- |
| # నిలువు వరుసలు | 12 | |||
| కాలమ్ వెడల్పు | దానంతట అదే | ~62px | ~81px | ~97px |
| గట్టర్ వెడల్పు | 30px (నిలువు వరుసలో 15px) | |||
| నెస్టబుల్ | అవును | |||
| ఆఫ్‌సెట్‌లు | అవును | |||
| కాలమ్ ఆర్డరింగ్ | అవును | |||
ఉదాహరణ: స్టాక్డ్-టు-క్షితిజ సమాంతర
గ్రిడ్ తరగతుల యొక్క ఒకే సెట్‌ని ఉపయోగించి .col-md-*, మీరు డెస్క్‌టాప్ (మధ్యస్థ) పరికరాల్లో అడ్డంగా మారడానికి ముందు మొబైల్ పరికరాలు మరియు టాబ్లెట్ పరికరాల్లో (అదనపు చిన్న నుండి చిన్న పరిధి వరకు) పేర్చబడిన ప్రాథమిక గ్రిడ్ సిస్టమ్‌ను సృష్టించవచ్చు. ఏదైనా గ్రిడ్ నిలువు వరుసలను ఉంచండి .row.
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.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 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.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
.col-xs-6 .col-sm-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-నిలువు వరుసల వెడల్పు గల డివి ఒక ప్రక్కనే ఉన్న యూనిట్‌గా కొత్త లైన్‌లో చుట్టబడి ఉంటుంది.
9 + 4 = 13 > 12 నుండి, ఈ 4-నిలువు వరుసల వెడల్పు గల డివి ఒక ప్రక్కనే ఉన్న యూనిట్‌గా కొత్త లైన్‌లో చుట్టబడి ఉంటుంది.
.col-xs-6
తదుపరి నిలువు వరుసలు కొత్త పంక్తిలో కొనసాగుతాయి.
తదుపరి నిలువు వరుసలు కొత్త పంక్తిలో కొనసాగుతాయి.
<div class="row">
<div class="col-xs-9">.col-xs-9</div>
<div class="col-xs-4">.col-xs-4<br>Since 9 + 4 = 13 > 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
.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-3 .col-md-offset-3
.col-md-6 .col-md-offset-3
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 col-md-offset-4">.col-md-4 .col-md-offset-4</div>
</div>
<div class="row">
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
<div class="col-md-3 col-md-offset-3">.col-md-3 .col-md-offset-3</div>
</div>
<div class="row">
<div class="col-md-6 col-md-offset-3">.col-md-6 .col-md-offset-3</div>
</div>.col-*-offset-0మీరు తరగతులతో దిగువ గ్రిడ్ స్థాయిల నుండి ఆఫ్‌సెట్‌లను కూడా భర్తీ చేయవచ్చు .
<div class="row">
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-sm-4">
</div>
<div class="col-xs-6 col-xs-offset-3 col-sm-4 col-sm-offset-0">
</div>
</div>గూడు నిలువు వరుసలు
డిఫాల్ట్ గ్రిడ్‌తో మీ కంటెంట్‌ను నెస్ట్ చేయడానికి, ఇప్పటికే ఉన్న నిలువు వరుసలో కొత్త .rowమరియు నిలువు వరుసల సెట్‌ను జోడించండి . సమూహ అడ్డు వరుసలు 12 లేదా అంతకంటే తక్కువ వరకు జోడించే నిలువు వరుసల సమితిని కలిగి ఉండాలి (మీరు అందుబాటులో ఉన్న మొత్తం 12 నిలువు వరుసలను ఉపయోగించాల్సిన అవసరం లేదు)..col-sm-*.col-sm-*
స్థాయి 1: .col-sm-9
స్థాయి 2: .col-xs-8 .col-sm-6
స్థాయి 2: .col-xs-4 .col-sm-6
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>కాలమ్ ఆర్డరింగ్
మా అంతర్నిర్మిత గ్రిడ్ నిలువు వరుసలను .col-md-push-*మరియు .col-md-pull-*మాడిఫైయర్ తరగతుల క్రమాన్ని సులభంగా మార్చండి.
.col-md-9 .col-md-push-3
.col-md-3 .col-md-పుల్-9
<div class="row">
<div class="col-md-9 col-md-push-3">.col-md-9 .col-md-push-3</div>
<div class="col-md-3 col-md-pull-9">.col-md-3 .col-md-pull-9</div>
</div>తక్కువ మిక్సిన్స్ మరియు వేరియబుల్స్
వేగవంతమైన లేఅవుట్‌ల కోసం ప్రీబిల్ట్ గ్రిడ్ క్లాస్‌లతో పాటు , బూట్స్ట్రాప్ తక్కువ వేరియబుల్స్ మరియు మీ స్వంత సాధారణ, సెమాంటిక్ లేఅవుట్‌లను త్వరగా రూపొందించడానికి మిక్సిన్‌లను కలిగి ఉంటుంది.
వేరియబుల్స్
నిలువు వరుసల సంఖ్య, గట్టర్ వెడల్పు మరియు ఫ్లోటింగ్ నిలువు వరుసలను ప్రారంభించే మీడియా ప్రశ్న పాయింట్‌ను వేరియబుల్స్ నిర్ణయిస్తాయి. పైన డాక్యుమెంట్ చేయబడిన ముందే నిర్వచించబడిన గ్రిడ్ క్లాస్‌లను రూపొందించడానికి, అలాగే దిగువ జాబితా చేయబడిన కస్టమ్ మిక్సిన్‌ల కోసం మేము వీటిని ఉపయోగిస్తాము.
@grid-columns: 12;
@grid-gutter-width: 30px;
@grid-float-breakpoint: 768px;మిక్సిన్స్
వ్యక్తిగత గ్రిడ్ నిలువు వరుసల కోసం సెమాంటిక్ CSSని రూపొందించడానికి గ్రిడ్ వేరియబుల్స్‌తో కలిపి మిక్సిన్‌లు ఉపయోగించబడతాయి.
// Creates a wrapper for a series of columns
.make-row(@gutter: @grid-gutter-width) {
// Then clear the floated columns
.clearfix();
@media (min-width: @screen-sm-min) {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
// Negative margin nested rows out to align the content of columns
.row {
margin-left: (@gutter / -2);
margin-right: (@gutter / -2);
}
}
// Generate the extra small columns
.make-xs-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @grid-float-breakpoint) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small columns
.make-sm-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-sm-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the small column offsets
.make-sm-column-offset(@columns) {
@media (min-width: @screen-sm-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-push(@columns) {
@media (min-width: @screen-sm-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-sm-column-pull(@columns) {
@media (min-width: @screen-sm-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the medium columns
.make-md-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-md-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the medium column offsets
.make-md-column-offset(@columns) {
@media (min-width: @screen-md-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-md-column-push(@columns) {
@media (min-width: @screen-md-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-md-column-pull(@columns) {
@media (min-width: @screen-md-min) {
right: percentage((@columns / @grid-columns));
}
}
// Generate the large columns
.make-lg-column(@columns; @gutter: @grid-gutter-width) {
position: relative;
// Prevent columns from collapsing when empty
min-height: 1px;
// Inner gutter via padding
padding-left: (@gutter / 2);
padding-right: (@gutter / 2);
// Calculate width based on number of columns available
@media (min-width: @screen-lg-min) {
float: left;
width: percentage((@columns / @grid-columns));
}
}
// Generate the large column offsets
.make-lg-column-offset(@columns) {
@media (min-width: @screen-lg-min) {
margin-left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-push(@columns) {
@media (min-width: @screen-lg-min) {
left: percentage((@columns / @grid-columns));
}
}
.make-lg-column-pull(@columns) {
@media (min-width: @screen-lg-min) {
right: percentage((@columns / @grid-columns));
}
}ఉదాహరణ వినియోగం
మీరు వేరియబుల్స్‌ను మీ స్వంత అనుకూల విలువలకు సవరించవచ్చు లేదా మిక్సిన్‌లను వాటి డిఫాల్ట్ విలువలతో ఉపయోగించవచ్చు. మధ్య అంతరంతో రెండు-నిలువు వరుసల లేఅవుట్‌ని సృష్టించడానికి డిఫాల్ట్ సెట్టింగ్‌లను ఉపయోగించే ఉదాహరణ ఇక్కడ ఉంది.
.wrapper {
.make-row();
}
.content-main {
.make-lg-column(8);
}
.content-secondary {
.make-lg-column(3);
.make-lg-column-offset(1);
}<div class="wrapper">
<div class="content-main">...</div>
<div class="content-secondary">...</div>
</div>టైపోగ్రఫీ
శీర్షికలు
<h1>ద్వారా అన్ని HTML శీర్షికలు <h6>అందుబాటులో ఉన్నాయి. మీరు హెడ్డింగ్ యొక్క ఫాంట్ స్టైలింగ్‌ను సరిపోల్చాలనుకున్నప్పుడు కానీ మీ టెక్స్ట్ ఇన్‌లైన్‌లో ప్రదర్శించబడాలని కోరుకుంటున్నప్పుడు తరగతుల ద్వారా కూడా అందుబాటులో ఉన్నాయి .h1..h6
h1. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 36px |
h2. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 30px |
h3. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 24px |
h4. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 18px |
h5. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 14px |
h6. బూట్స్ట్రాప్ శీర్షిక |
సెమీబోల్డ్ 12px |
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6><small>సాధారణ ట్యాగ్ లేదా .smallతరగతితో ఏదైనా శీర్షికలో తేలికైన, ద్వితీయ వచనాన్ని సృష్టించండి .
h1. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
h2. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
h3. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
h4. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
h5. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
h6. బూట్స్ట్రాప్ హెడ్డింగ్ సెకండరీ టెక్స్ట్ |
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>బాడీ కాపీ
బూట్స్ట్రాప్ యొక్క గ్లోబల్ డిఫాల్ట్ 1.428 font-sizeతో 14px . ఇది అన్ని పేరాగ్రాఫ్‌లకు వర్తించబడుతుంది . అదనంగా, (పేరాగ్రాఫ్‌లు) వాటి కంప్యూటెడ్ లైన్-ఎత్తులో సగం దిగువ మార్జిన్‌ను పొందుతాయి (డిఫాల్ట్‌గా 10px).line-height<body><p>
నుల్లమ్ క్విస్ రిసస్ ఎగెట్ ఉర్నా మొల్లిస్ ఓర్నారే వెల్ యూ లియో. కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మాంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. Nullam id dolor id nibh ultricies వాహనాలు.
కమ్ సోసిస్ నాటోక్ పెనాటిబస్ మరియు మాగ్నిస్ డిస్ పార్ట్యురియెంట్ మాంటెస్, నాస్కేటర్ రిడిక్యులస్ మస్. డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా. డ్యూయిస్ మోల్లిస్, ఈస్ట్ నాన్ కమోడో లూక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా, ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్. డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా.
మెసెనాస్ సెడ్ డైమ్ ఎగెట్ రిసస్ వేరియస్ బ్లాండిట్ సిట్ అమెట్ నాన్ మాగ్నా. డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్. డ్యూయిస్ మోల్లిస్, ఈస్ట్ నాన్ కమోడో లూక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా, ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్.
<p>...</p>లీడ్ బాడీ కాపీ
జోడించడం ద్వారా పేరాను ప్రత్యేకంగా కనిపించేలా చేయండి .lead.
వివామస్ సాగిటిస్ లాకస్ వెల్ ఆగ్ లారీట్ రూట్రం ఫౌసిబస్ డోలర్ ఆక్టర్. డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్.
<p class="lead">...</p>తక్కువతో నిర్మించారు
టైపోగ్రాఫిక్ స్కేల్ వేరియబుల్స్‌లోని రెండు తక్కువ వేరియబుల్స్‌పై ఆధారపడి ఉంటుంది.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 మార్కెట్ స్ట్రీట్, సూట్ 900
శాన్ ఫ్రాన్సిస్కో, CA 94103
P: (123) 456-7890 పూర్తి పేరు
[email protected]
1355 మార్కెట్ స్ట్రీట్, సూట్ 900
శాన్ ఫ్రాన్సిస్కో, 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 చుట్టూ చుట్టండి. సూటి కోట్‌ల కోసం, మేము aని సిఫార్సు చేస్తున్నాము <p>.
లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్. పూర్ణాంకం మరియు పూర్వం.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>బ్లాక్‌కోట్ ఎంపికలు
ప్రమాణంపై సాధారణ వైవిధ్యాల కోసం శైలి మరియు కంటెంట్ మార్పులు <blockquote>.
మూలానికి పేరు పెట్టడం
<footer>మూలాన్ని గుర్తించడానికి a జోడించండి . సోర్స్ వర్క్ పేరును లో వ్రాప్ చేయండి <cite>.
లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్, కాన్సెక్టెచర్ అడిపిసింగ్ ఎలిట్. పూర్ణాంకం మరియు పూర్వం.
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>ప్రత్యామ్నాయ ప్రదర్శనలు
.blockquote-reverseకుడి-సమలేఖనం చేయబడిన కంటెంట్‌తో బ్లాక్‌కోట్ కోసం జోడించండి .
<blockquote class="blockquote-reverse">
...
</blockquote>జాబితాలు
ఆర్డర్ చేయబడలేదు
ఆర్డర్ స్పష్టంగా పట్టింపు లేని అంశాల జాబితా .
- లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
- కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
- మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
- ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
- నుల్ల వొలుత్పట్ అలికం వెలిట్
- ఫాసెల్లస్ ఇయాక్యులిస్ నెక్యూ
- పురస్ సోడల్స్ అల్ట్రిసీస్
- వెస్టిబులం లారీట్ పోర్టిటర్ సెమ్
- Ac tristique libero volutpat వద్ద
- ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
- ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
- ఈగెట్ పోర్టిటర్ లోరెం
<ul>
<li>...</li>
</ul>ఆదేశించారు
ఆర్డర్ స్పష్టంగా ముఖ్యమైన అంశాల జాబితా .
- లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
- కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
- మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
- ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
- నుల్ల వొలుత్పట్ అలికం వెలిట్
- ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
- ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
- ఈగెట్ పోర్టిటర్ లోరెం
<ol>
<li>...</li>
</ol>శైలి లేని
జాబితా ఐటెమ్‌లపై డిఫాల్ట్ list-styleమరియు ఎడమ మార్జిన్‌ను తీసివేయండి (తక్షణమే పిల్లలు మాత్రమే). ఇది తక్షణ పిల్లల జాబితా ఐటెమ్‌లకు మాత్రమే వర్తిస్తుంది , అంటే మీరు ఏదైనా సమూహ జాబితాల కోసం తరగతిని కూడా జోడించాలి.
- లోరెమ్ ఇప్సమ్ డోలర్ సిట్ అమెట్
- కాన్సెక్టెచర్ అడిపిస్సింగ్ ఎలిట్
- మాసా వద్ద పూర్ణాంకం మోలెస్టీ లోరెమ్
- ప్రీటియమ్ నిస్ల్ అలిక్వెట్‌లో సులభతరం
- నుల్ల వొలుత్పట్ అలికం వెలిట్
- ఫాసెల్లస్ ఇయాక్యులిస్ నెక్యూ
- పురస్ సోడల్స్ అల్ట్రిసీస్
- వెస్టిబులం లారీట్ పోర్టిటర్ సెమ్
- Ac tristique libero volutpat వద్ద
- ఫౌసిబస్ పోర్టా లాకస్ ఫ్రింగిల్లా వెల్
- ఏనేన్ సిట్ ఇప్పుడు ఇప్పుడు ఉంది
- ఈగెట్ పోర్టిటర్ లోరెం
<ul class="list-unstyled">
<li>...</li>
</ul>లైన్ లో
అన్ని జాబితా ఐటెమ్‌లను ఒకే లైన్‌లో display: inline-block;మరియు కొన్ని లైట్ పాడింగ్‌తో ఉంచండి.
- లోరెమ్ ఇప్సమ్
- ఫాసెల్లస్ ఐకులిస్
- నుల్ల వొలుత్పట్
<ul class="list-inline">
<li>...</li>
</ul>వివరణ
వాటి అనుబంధిత వివరణలతో కూడిన నిబంధనల జాబితా.
- వివరణ జాబితాలు
- నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
- యూయిస్మోడ్
- వెస్టిబులమ్ ఐడి లిగులా పోర్టా ఫెలిస్ యూయిస్మోడ్ సెంపర్ ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్.
- డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్.
- Malesuada పోర్టా
- ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.
<dl>
<dt>...</dt>
<dd>...</dd>
</dl>క్షితిజ సమాంతర వివరణ
నిబంధనలు మరియు వివరణలను <dl>వరుసలో పక్కపక్కనే చేయండి. డిఫాల్ట్ s లాగా పేర్చబడి ప్రారంభమవుతుంది <dl>, కానీ navbar విస్తరించినప్పుడు, వీటిని చేయండి.
- వివరణ జాబితాలు
- నిబంధనలను నిర్వచించడానికి వివరణ జాబితా సరైనది.
- యూయిస్మోడ్
- వెస్టిబులమ్ ఐడి లిగులా పోర్టా ఫెలిస్ యూయిస్మోడ్ సెంపర్ ఎగెట్ లాసినియా ఒడియో సెమ్ నెక్ ఎలిట్.
- డోనెక్ ఐడి ఎలిట్ నాన్ మై పోర్టా గ్రావిడా ఎట్ ఎగెట్ మెటస్.
- Malesuada పోర్టా
- ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.
- ఫెలిస్ యూయిస్మోడ్ సెమ్పర్ ఎగెట్ లాసినియా
- ఫ్యూస్ డాపిబస్, టెల్లస్ ఎసి కర్సస్ కమోడో, టార్టర్ మౌరిస్ కాండిమెంటమ్ నిబ్, యుట్ ఫెర్మెంటమ్ మాసా జస్టో సిట్ అమెట్ రిసస్.
<dl class="dl-horizontal">
<dt>...</dt>
<dd>...</dd>
</dl>స్వయంచాలకంగా కత్తిరించడం
క్షితిజసమాంతర వివరణ జాబితాలు ఎడమ నిలువు వరుసలో సరిపోయేంత పొడవుగా ఉన్న పదాలను కుదించాయి text-overflow. ఇరుకైన వీక్షణపోర్ట్‌లలో, అవి డిఫాల్ట్ పేర్చబడిన లేఅవుట్‌కి మారుతాయి.
కోడ్
లైన్ లో
తో కోడ్ యొక్క ఇన్లైన్ స్నిప్పెట్‌లను చుట్టండి <code>.
ఉదాహరణకు,
<section>ఇన్‌లైన్‌గా చుట్టి ఉండాలి.
For example, <code><section></code> should be wrapped as inline.వినియోగదారు ఇన్పుట్
<kbd>కీబోర్డ్ ద్వారా సాధారణంగా నమోదు చేయబడిన ఇన్‌పుట్‌ని సూచించడానికి ఉపయోగించండి .
డైరెక్టరీలను మార్చడానికి, డైరెక్టరీ
cdపేరును టైప్ చేయండి.
సెట్టింగ్‌లను సవరించడానికి, నొక్కండి ctrl + ,
సెట్టింగ్‌లను సవరించడానికి, నొక్కండి 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><p>Sample text here...</p></pre>మీరు ఐచ్ఛికంగా .pre-scrollableతరగతిని జోడించవచ్చు, ఇది గరిష్టంగా 350px ఎత్తును సెట్ చేస్తుంది మరియు y-యాక్సిస్ స్క్రోల్‌బార్‌ను అందిస్తుంది.
వేరియబుల్స్
వేరియబుల్స్‌ని సూచించడానికి <var>ట్యాగ్‌ని ఉపయోగించండి.
y = m x + b
<var>y</var> = <var>m</var><var>x</var> + <var>b</var>నమూనా అవుట్‌పుట్
ప్రోగ్రామ్ నుండి బ్లాక్‌ల నమూనా అవుట్‌పుట్‌ను సూచించడానికి <samp>ట్యాగ్‌ని ఉపయోగించండి.
ఈ వచనం కంప్యూటర్ ప్రోగ్రామ్ నుండి నమూనా అవుట్‌పుట్‌గా పరిగణించబడుతుంది.
<samp>This text is meant to be treated as sample output from a computer program.</samp>పట్టికలు
ప్రాథమిక ఉదాహరణ
ప్రాథమిక స్టైలింగ్-లైట్ పాడింగ్ మరియు క్షితిజ సమాంతర డివైడర్‌లు మాత్రమే-బేస్ క్లాస్‌ని .tableదేనికైనా జోడించండి <table>. ఇది చాలా అనవసరంగా అనిపించవచ్చు, కానీ క్యాలెండర్‌లు మరియు తేదీ పికర్‌ల వంటి ఇతర ప్లగిన్‌ల కోసం టేబుల్‌లను విస్తృతంగా ఉపయోగించడం వలన, మేము మా అనుకూల పట్టిక శైలులను వేరుచేయాలని ఎంచుకున్నాము.
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | థోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
<table class="table">
...
</table>చారల వరుసలు
.table-stripedలోపల ఏదైనా టేబుల్ అడ్డు వరుసకు జీబ్రా-స్ట్రిపింగ్‌ని జోడించడానికి ఉపయోగించండి <tbody>.
క్రాస్ బ్రౌజర్ అనుకూలత
:nth-childఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 8లో అందుబాటులో లేని CSS సెలెక్టర్ ద్వారా చారల పట్టికలు స్టైల్ చేయబడ్డాయి .
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | థోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
<table class="table table-striped">
...
</table>సరిహద్దు పట్టిక
.table-borderedపట్టిక మరియు సెల్‌లకు అన్ని వైపులా సరిహద్దుల కోసం జోడించండి .
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | థోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
<table class="table table-bordered">
...
</table>వరుసలను హోవర్ చేయండి
.table-hoverఒక లోపల పట్టిక అడ్డు వరుసలలో హోవర్ స్థితిని ప్రారంభించడానికి జోడించండి <tbody>.
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | థోర్న్టన్ | @కొవ్వు |
| 3 | లారీ | పక్షి | @ట్విట్టర్ |
<table class="table table-hover">
...
</table>ఘనీభవించిన పట్టిక
.table-condensedసెల్ పాడింగ్‌ను సగానికి తగ్గించడం ద్వారా టేబుల్‌లను మరింత కాంపాక్ట్‌గా చేయడానికి జోడించండి .
| # | మొదటి పేరు | చివరి పేరు | వినియోగదారు పేరు |
|---|---|---|---|
| 1 | మార్క్ | ఒట్టో | @mdo |
| 2 | జాకబ్ | థోర్న్టన్ | @కొవ్వు |
| 3 | లారీ ది బర్డ్ | @ట్విట్టర్ | |
<table class="table table-condensed">
...
</table>సందర్భోచిత తరగతులు
పట్టిక వరుసలు లేదా వ్యక్తిగత సెల్‌లకు రంగు వేయడానికి సందర్భోచిత తరగతులను ఉపయోగించండి.
| తరగతి | వివరణ |
|---|---|
.active |
నిర్దిష్ట అడ్డు వరుస లేదా సెల్‌కు హోవర్ రంగును వర్తింపజేస్తుంది |
.success |
విజయవంతమైన లేదా సానుకూల చర్యను సూచిస్తుంది |
.info |
తటస్థ సమాచార మార్పు లేదా చర్యను సూచిస్తుంది |
.warning |
శ్రద్ధ అవసరమయ్యే హెచ్చరికను సూచిస్తుంది |
.danger |
ప్రమాదకరమైన లేదా సంభావ్య ప్రతికూల చర్యను సూచిస్తుంది |
| # | కాలమ్ శీర్షిక | కాలమ్ శీర్షిక | కాలమ్ శీర్షిక |
|---|---|---|---|
| 1 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 2 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 3 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 4 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 5 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 6 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 7 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 8 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
| 9 | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ | కాలమ్ కంటెంట్ |
<!-- On rows -->
<tr class="active">...</tr>
<tr class="success">...</tr>
<tr class="warning">...</tr>
<tr class="danger">...</tr>
<tr class="info">...</tr>
<!-- On cells (`td` or `th`) -->
<tr>
<td class="active">...</td>
<td class="success">...</td>
<td class="warning">...</td>
<td class="danger">...</td>
<td class="info">...</td>
</tr>సహాయక సాంకేతికతలకు అర్థాన్ని తెలియజేయడం
పట్టిక అడ్డు వరుస లేదా వ్యక్తిగత సెల్‌కు అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం దృశ్య సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్‌ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్ నుండి స్పష్టంగా ఉందని (సంబంధిత పట్టిక అడ్డు వరుస/సెల్‌లో కనిపించే వచనం) లేదా .sr-onlyతరగతితో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.
ప్రతిస్పందించే పట్టికలు
చిన్న పరికరాల్లో (768px లోపు) క్షితిజ సమాంతరంగా స్క్రోల్ చేసేలా చేయడానికి ఏదైనా చుట్టడం .tableద్వారా ప్రతిస్పందించే పట్టికలను సృష్టించండి . .table-responsive768px వెడల్పు కంటే ఎక్కువ దేనినైనా వీక్షిస్తున్నప్పుడు, ఈ పట్టికలలో మీకు ఎలాంటి తేడా కనిపించదు.
వర్టికల్ క్లిప్పింగ్/ట్రంకేషన్
ప్రతిస్పందించే పట్టికలు ఉపయోగించబడతాయి overflow-y: hidden, ఇది పట్టిక దిగువన లేదా ఎగువ అంచులను దాటి ఏదైనా కంటెంట్‌ను క్లిప్ చేస్తుంది. ప్రత్యేకించి, ఇది డ్రాప్‌డౌన్ మెనులను మరియు ఇతర మూడవ పక్ష విడ్జెట్‌లను క్లిప్ చేయగలదు.
ఫైర్‌ఫాక్స్ మరియు ఫీల్డ్‌సెట్‌లు
widthFirefox ప్రతిస్పందించే పట్టికతో జోక్యం చేసుకునే కొన్ని ఇబ్బందికరమైన ఫీల్డ్‌సెట్ స్టైలింగ్‌ను కలిగి ఉంది. బూట్‌స్ట్రాప్‌లో మేము అందించని Firefox-నిర్దిష్ట హ్యాక్ లేకుండా ఇది భర్తీ చేయబడదు :
@-moz-document url-prefix() {
fieldset { display: table-cell; }
}మరింత సమాచారం కోసం, ఈ స్టాక్ ఓవర్‌ఫ్లో సమాధానాన్ని చదవండి .
| # | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక |
|---|---|---|---|---|---|---|
| 1 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
| 2 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
| 3 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
| # | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక | పట్టిక శీర్షిక |
|---|---|---|---|---|---|---|
| 1 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
| 2 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
| 3 | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ | టేబుల్ సెల్ |
<div class="table-responsive">
<table class="table">
...
</table>
</div>రూపాలు
ప్రాథమిక ఉదాహరణ
వ్యక్తిగత ఫారమ్ నియంత్రణలు స్వయంచాలకంగా కొంత గ్లోబల్ స్టైలింగ్‌ను అందుకుంటాయి. అన్ని వచన <input>, <textarea>మరియు <select>మూలకాలు డిఫాల్ట్‌గా .form-controlసెట్ చేయబడ్డాయి . వాంఛనీయ అంతరం కోసం width: 100%;లేబుల్‌లు మరియు నియంత్రణలను చుట్టండి..form-group
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>ఫారమ్ సమూహాలను ఇన్పుట్ సమూహాలతో కలపవద్దు
ఫారమ్ సమూహాలను నేరుగా ఇన్పుట్ సమూహాలతో కలపవద్దు . బదులుగా, ఫారమ్ సమూహం లోపల ఇన్పుట్ సమూహాన్ని నెస్ట్ చేయండి.
ఇన్లైన్ ఫారమ్
ఎడమకు సమలేఖనం చేయబడిన మరియు ఇన్లైన్-బ్లాక్ నియంత్రణల కోసం .form-inlineమీ ఫారమ్‌కి (ఇది ఒక ) జోడించు . ఇది కనీసం 768px వెడల్పు ఉన్న వీక్షణపోర్ట్‌లలోని ఫారమ్‌లకు మాత్రమే వర్తిస్తుంది.<form>
అనుకూల వెడల్పులు అవసరం కావచ్చు
బూట్‌స్ట్రాప్‌లో ఇన్‌పుట్‌లు మరియు ఎంపికలు width: 100%;డిఫాల్ట్‌గా వర్తింపజేయబడ్డాయి. ఇన్లైన్ ఫారమ్‌లలో, width: auto;బహుళ నియంత్రణలు ఒకే లైన్‌లో ఉండేలా మేము రీసెట్ చేస్తాము. మీ లేఅవుట్ ఆధారంగా, అదనపు అనుకూల వెడల్పులు అవసరం కావచ్చు.
ఎల్లప్పుడూ లేబుల్‌లను జోడించండి
మీరు ప్రతి ఇన్‌పుట్‌కు లేబుల్‌ని చేర్చకుంటే స్క్రీన్ రీడర్‌లు మీ ఫారమ్‌లతో సమస్యను ఎదుర్కొంటారు. ఈ ఇన్లైన్ ఫారమ్‌ల కోసం, మీరు .sr-onlyక్లాస్‌ని ఉపయోగించి లేబుల్‌లను దాచవచ్చు. aria-label, aria-labelledbyలేదా titleలక్షణం వంటి సహాయక సాంకేతికతలకు లేబుల్‌ను అందించడానికి మరిన్ని ప్రత్యామ్నాయ పద్ధతులు ఉన్నాయి . వీటిలో ఏదీ లేనట్లయితే, స్క్రీన్ రీడర్‌లు placeholderఅట్రిబ్యూట్‌ని ఉపయోగించడాన్ని ఆశ్రయించవచ్చు, అయితే placeholderఇతర లేబులింగ్ పద్ధతులకు ప్రత్యామ్నాయంగా ఉపయోగించడం మంచిది కాదని గమనించండి.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="[email protected]">
</div>
<button type="submit" class="btn btn-default">Send invitation</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail3">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail3" placeholder="Email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword3">Password</label>
<input type="password" class="form-control" id="exampleInputPassword3" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
<div class="input-group-addon">.00</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Transfer cash</button>
</form>క్షితిజ సమాంతర రూపం
ఫారమ్‌కి జోడించడం ద్వారా క్షితిజ సమాంతర లేఅవుట్‌లో లేబుల్‌లు మరియు ఫారమ్ నియంత్రణల సమూహాలను సమలేఖనం చేయడానికి బూట్స్ట్రాప్ యొక్క ముందే నిర్వచించిన గ్రిడ్ తరగతులను ఉపయోగించండి .form-horizontal(ఇది ఒక <form>. .form-groupఅలా చేయడం వలన లు గ్రిడ్ వరుసలుగా ప్రవర్తించేలా మారుస్తుంది , కాబట్టి అవసరం లేదు .row.
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Sign in</button>
</div>
</div>
</form>మద్దతు ఉన్న నియంత్రణలు
ఉదాహరణ ఫారమ్ లేఅవుట్‌లో మద్దతు ఇచ్చే ప్రామాణిక ఫారమ్ నియంత్రణల ఉదాహరణలు.
ఇన్‌పుట్‌లు
అత్యంత సాధారణ ఫారమ్ నియంత్రణ, టెక్స్ట్-ఆధారిత ఇన్పుట్ ఫీల్డ్‌లు. అన్ని HTML5 రకాలకు మద్దతును కలిగి ఉంటుంది: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, telమరియు color.
రకం డిక్లరేషన్ అవసరం
ఇన్‌పుట్‌లు typeసరిగ్గా ప్రకటించబడితే మాత్రమే పూర్తిగా స్టైల్ చేయబడతాయి.
<input type="text" class="form-control" placeholder="Text input">ఇన్పుట్ సమూహాలు
ఏదైనా టెక్స్ట్-ఆధారిత ముందు మరియు/లేదా తర్వాత ఇంటిగ్రేటెడ్ టెక్స్ట్ లేదా బటన్‌లను జోడించడానికి <input>, ఇన్పుట్ గ్రూప్ కాంపోనెంట్‌ని తనిఖీ చేయండి .
టెక్స్టారియా
టెక్స్ట్ యొక్క బహుళ పంక్తులకు మద్దతు ఇచ్చే ఫారమ్ నియంత్రణ. rowsఅవసరమైన విధంగా లక్షణాన్ని మార్చండి .
<textarea class="form-control" rows="3"></textarea>చెక్‌బాక్స్‌లు మరియు రేడియోలు
చెక్‌బాక్స్‌లు జాబితాలో ఒకటి లేదా అనేక ఎంపికలను ఎంచుకోవడానికి ఉంటాయి, అయితే రేడియోలు చాలా వాటి నుండి ఒక ఎంపికను ఎంచుకోవడానికి ఉంటాయి.
డిసేబుల్ చెక్‌బాక్స్‌లు మరియు రేడియోలకు మద్దతు ఉంది, కానీ పేరెంట్ హోవర్‌లో "అనుమతించబడని" కర్సర్‌ని అందించడానికి , మీరు పేరెంట్‌కి తరగతిని <label>జోడించాలి , , , లేదా ..disabled.radio.radio-inline.checkbox.checkbox-inline
డిఫాల్ట్ (పేర్చబడినది)
<div class="checkbox">
<label>
<input type="checkbox" value="">
Option one is this and that—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>స్టాటిక్ నియంత్రణ
మీరు ఫారమ్‌లో ఫారమ్ లేబుల్ పక్కన సాదా వచనాన్ని ఉంచవలసి వచ్చినప్పుడు, a లో .form-control-staticతరగతిని ఉపయోగించండి <p>.
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<p class="form-control-static">[email protected]</p>
</div>
</div>
<div class="form-group">
<label for="inputPassword" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword" placeholder="Password">
</div>
</div>
</form><form class="form-inline">
<div class="form-group">
<label class="sr-only">Email</label>
<p class="form-control-static">[email protected]</p>
</div>
<div class="form-group">
<label for="inputPassword2" class="sr-only">Password</label>
<input type="password" class="form-control" id="inputPassword2" placeholder="Password">
</div>
<button type="submit" class="btn btn-default">Confirm identity</button>
</form>ఫోకస్ స్టేట్
మేము కొన్ని ఫారమ్ నియంత్రణలలో డిఫాల్ట్ స్టైల్‌లను తీసివేసి, దాని స్థానంలో outlineఒక కోసం వర్తింపజేస్తాము .box-shadow:focus
డెమో:focus రాష్ట్రం
:focusపై ఉదాహరణ ఇన్పుట్ ఒక స్థితిని ప్రదర్శించడానికి మా డాక్యుమెంటేషన్‌లో అనుకూల శైలులను ఉపయోగిస్తుంది .form-control.
వికలాంగ స్థితి
disabledవినియోగదారు పరస్పర చర్యలను నిరోధించడానికి ఇన్‌పుట్‌లో బూలియన్ లక్షణాన్ని జోడించండి . డిసేబుల్ ఇన్‌పుట్‌లు తేలికగా కనిపిస్తాయి మరియు not-allowedకర్సర్‌ను జోడించండి.
<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>డిసేబుల్ ఫీల్డ్‌సెట్‌లు
లోపల ఉన్న అన్ని నియంత్రణలను ఒకేసారి నిలిపివేయడానికి disableda కు లక్షణాన్ని జోడించండి .<fieldset><fieldset>
యొక్క లింక్ కార్యాచరణ గురించి హెచ్చరిక<a>
డిఫాల్ట్‌గా, బ్రౌజర్‌లు ఒక లోపల ఉన్న అన్ని స్థానిక ఫారమ్ నియంత్రణలను ( <input>, <select>మరియు <button>మూలకాలు) <fieldset disabled>డిసేబుల్‌గా పరిగణిస్తాయి, వాటిపై కీబోర్డ్ మరియు మౌస్ పరస్పర చర్యలను నిరోధిస్తాయి. అయినప్పటికీ, మీ ఫారమ్ <a ... class="btn btn-*">మూలకాలను కూడా కలిగి ఉంటే, వీటికి స్టైల్ మాత్రమే ఇవ్వబడుతుంది pointer-events: none. బటన్‌ల కోసం డిసేబుల్ స్టేట్ గురించి విభాగంలో (మరియు ప్రత్యేకంగా యాంకర్ ఎలిమెంట్‌ల కోసం ఉప-విభాగంలో) పేర్కొన్న విధంగా, ఈ CSS ప్రాపర్టీ ఇంకా ప్రామాణికం కాలేదు మరియు Opera 18 మరియు దిగువన లేదా ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 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>టెక్స్ట్‌లోనే స్టేట్ గురించి సూచనను చేర్చవచ్చు (క్రింది కోడ్ ఉదాహరణలో ఉన్నట్లుగా), Glyphicon.sr-only ను చేర్చవచ్చు ( తరగతిని ఉపయోగించి తగిన ప్రత్యామ్నాయ వచనంతో - Glyphicon ఉదాహరణలను చూడండి ) లేదా అందించడం ద్వారా అదనపు సహాయం టెక్స్ట్ బ్లాక్. ప్రత్యేకంగా సహాయక సాంకేతికతల కోసం, చెల్లని ఫారమ్ నియంత్రణలు కూడా ఒక aria-invalid="true"లక్షణాన్ని కేటాయించవచ్చు.
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">Input with success</label>
<input type="text" class="form-control" id="inputSuccess1" aria-describedby="helpBlock2">
<span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">Input with warning</label>
<input type="text" class="form-control" id="inputWarning1">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">Input with error</label>
<input type="text" class="form-control" id="inputError1">
</div>
<div class="has-success">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxSuccess" value="option1">
Checkbox with success
</label>
</div>
</div>
<div class="has-warning">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxWarning" value="option1">
Checkbox with warning
</label>
</div>
</div>
<div class="has-error">
<div class="checkbox">
<label>
<input type="checkbox" id="checkboxError" value="option1">
Checkbox with error
</label>
</div>
</div>ఐచ్ఛిక చిహ్నాలతో
.has-feedbackమీరు అదనంగా మరియు కుడి చిహ్నంతో ఐచ్ఛిక అభిప్రాయ చిహ్నాలను కూడా జోడించవచ్చు .
అభిప్రాయ చిహ్నాలు వచన <input class="form-control">అంశాలతో మాత్రమే పని చేస్తాయి.
చిహ్నాలు, లేబుల్‌లు మరియు ఇన్పుట్ సమూహాలు
లేబుల్ లేని ఇన్‌పుట్‌లకు మరియు కుడి వైపున యాడ్- ఆన్‌తో ఇన్పుట్ సమూహాలకు ఫీడ్‌బ్యాక్ చిహ్నాల మాన్యువల్ పొజిషనింగ్ అవసరం . యాక్సెసిబిలిటీ కారణాల దృష్ట్యా అన్ని ఇన్‌పుట్‌లకు లేబుల్‌లను అందించమని మీరు గట్టిగా ప్రోత్సహించబడ్డారు. మీరు లేబుల్‌లు ప్రదర్శించబడకుండా నిరోధించాలనుకుంటే, వాటిని .sr-onlyతరగతితో దాచండి. మీరు లేబుల్స్ లేకుండా చేయవలసి topవస్తే, అభిప్రాయ చిహ్నం విలువను సర్దుబాటు చేయండి. rightఇన్పుట్ సమూహాల కోసం, మీ యాడ్ఆన్ వెడల్పుపై ఆధారపడి తగిన పిక్సెల్ విలువకు విలువను సర్దుబాటు చేయండి.
సహాయక సాంకేతికతలకు చిహ్నం యొక్క అర్థాన్ని తెలియజేయడం
స్క్రీన్ రీడర్‌ల వంటి సహాయక సాంకేతికతలు ఐకాన్ యొక్క అర్థాన్ని సరిగ్గా తెలియజేసేలా చూసుకోవడానికి, అదనపు దాచిన వచనాన్ని .sr-onlyక్లాస్‌తో చేర్చాలి మరియు దానిని ఉపయోగించేందుకు సంబంధించిన ఫారమ్ నియంత్రణతో స్పష్టంగా అనుబంధించబడాలి aria-describedby. ప్రత్యామ్నాయంగా, అర్థాన్ని (ఉదాహరణకు, నిర్దిష్ట టెక్స్ట్ ఎంట్రీ ఫీల్డ్‌కు హెచ్చరిక ఉందనే వాస్తవం) <label>ఫారమ్ కంట్రోల్‌తో అనుబంధించబడిన వాస్తవ వచనాన్ని మార్చడం వంటి ఇతర రూపంలో తెలియజేయబడిందని నిర్ధారించుకోండి.
కింది ఉదాహరణలు ఇప్పటికే టెక్స్ట్‌లోనే వాటి సంబంధిత ఫారమ్ నియంత్రణల యొక్క ధృవీకరణ స్థితిని పేర్కొన్నప్పటికీ, <label>పై సాంకేతికత ( .sr-onlyటెక్స్ట్ మరియు ఉపయోగించి aria-describedby) సచిత్ర ప్రయోజనాల కోసం చేర్చబడింది.
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess2">Input with success</label>
<input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess2Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-warning has-feedback">
<label class="control-label" for="inputWarning2">Input with warning</label>
<input type="text" class="form-control" id="inputWarning2" aria-describedby="inputWarning2Status">
<span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
<span id="inputWarning2Status" class="sr-only">(warning)</span>
</div>
<div class="form-group has-error has-feedback">
<label class="control-label" for="inputError2">Input with error</label>
<input type="text" class="form-control" id="inputError2" aria-describedby="inputError2Status">
<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
<span id="inputError2Status" class="sr-only">(error)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess1">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess1" aria-describedby="inputGroupSuccess1Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess1Status" class="sr-only">(success)</span>
</div>క్షితిజ సమాంతర మరియు ఇన్లైన్ రూపాల్లో ఐచ్ఛిక చిహ్నాలు
<form class="form-horizontal">
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputSuccess3" aria-describedby="inputSuccess3Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess3Status" class="sr-only">(success)</span>
</div>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label col-sm-3" for="inputGroupSuccess2">Input group with success</label>
<div class="col-sm-9">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess2" aria-describedby="inputGroupSuccess2Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess2Status" class="sr-only">(success)</span>
</div>
</div>
</form><form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess4">Input with success</label>
<input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess4Status" class="sr-only">(success)</span>
</div>
</form>
<form class="form-inline">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputGroupSuccess3">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess3" aria-describedby="inputGroupSuccess3Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess3Status" class="sr-only">(success)</span>
</div>
</form>.sr-onlyదాచిన లేబుల్‌లతో ఐచ్ఛిక చిహ్నాలు
మీరు .sr-onlyఫారమ్ నియంత్రణను దాచడానికి తరగతిని ఉపయోగిస్తే <label>(లక్షణం వంటి ఇతర లేబులింగ్ ఎంపికలను ఉపయోగించడం కంటే aria-label), బూట్స్ట్రాప్ ఐకాన్ జోడించబడిన తర్వాత దాని స్థానాన్ని స్వయంచాలకంగా సర్దుబాటు చేస్తుంది.
(విజయం)
@
(విజయం)
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
<input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputSuccess5Status" class="sr-only">(success)</span>
</div>
<div class="form-group has-success has-feedback">
<label class="control-label sr-only" for="inputGroupSuccess4">Input group with success</label>
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" id="inputGroupSuccess4" aria-describedby="inputGroupSuccess4Status">
</div>
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
<span id="inputGroupSuccess4Status" class="sr-only">(success)</span>
</div>పరిమాణాన్ని నియంత్రించండి
వంటి తరగతులను ఉపయోగించి ఎత్తులను సెట్ చేయండి .input-lgమరియు గ్రిడ్ నిలువు వరుస తరగతులను ఉపయోగించి వెడల్పులను సెట్ చేయండి .col-lg-*.
ఎత్తు పరిమాణం
బటన్ పరిమాణాలకు సరిపోలే పొడవైన లేదా చిన్న ఫారమ్ నియంత్రణలను సృష్టించండి.
<input class="form-control input-lg" type="text" placeholder=".input-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control input-sm" type="text" placeholder=".input-sm">
<select class="form-control input-lg">...</select>
<select class="form-control">...</select>
<select class="form-control input-sm">...</select>క్షితిజ సమాంతర రూపం సమూహ పరిమాణాలు
త్వరిత పరిమాణం లేబుల్‌లు మరియు ఫారమ్ నియంత్రణలను .form-horizontalజోడించడం ద్వారా .form-group-lgలేదా .form-group-sm.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputLarge" placeholder="Large input">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label>
<div class="col-sm-10">
<input class="form-control" type="text" id="formGroupInputSmall" placeholder="Small input">
</div>
</div>
</form>కాలమ్ పరిమాణం
కావలసిన వెడల్పులను సులభంగా అమలు చేయడానికి గ్రిడ్ నిలువు వరుసలలో ఇన్‌పుట్‌లను వ్రాప్ చేయండి లేదా ఏదైనా అనుకూల పేరెంట్ ఎలిమెంట్.
<div class="row">
<div class="col-xs-2">
<input type="text" class="form-control" placeholder=".col-xs-2">
</div>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder=".col-xs-3">
</div>
<div class="col-xs-4">
<input type="text" class="form-control" placeholder=".col-xs-4">
</div>
</div>బటన్లు
బటన్ ట్యాగ్‌లు
<a>ఒక , <button>, లేదా <input>మూలకంపై బటన్ తరగతులను ఉపయోగించండి .
<a class="btn btn-default" href="#" role="button">Link</a>
<button class="btn btn-default" type="submit">Button</button>
<input class="btn btn-default" type="button" value="Input">
<input class="btn btn-default" type="submit" value="Submit">సందర్భ-నిర్దిష్ట వినియోగం
బటన్ క్లాస్‌లను ఆన్ <a>మరియు <button>ఎలిమెంట్స్ ఉపయోగించగలిగినప్పటికీ, <button>మా nav మరియు navbar కాంపోనెంట్‌లలో ఎలిమెంట్‌లకు మాత్రమే మద్దతు ఉంటుంది.
లింక్‌లు బటన్‌లుగా పనిచేస్తాయి
మూలకాలు బటన్‌ల వలె పని చేయడానికి <a>ఉపయోగించినట్లయితే - పేజీలోని కార్యాచరణను ట్రిగ్గర్ చేయడం, ప్రస్తుత పేజీలోని మరొక పత్రం లేదా విభాగానికి నావిగేట్ చేయడం కంటే - వాటికి తగినది కూడా ఇవ్వాలి role="button".
క్రాస్ బ్రౌజర్ రెండరింగ్
ఉత్తమ అభ్యాసం వలె, క్రాస్-బ్రౌజర్ రెండరింగ్ సరిపోతుందని నిర్ధారించుకోవడానికి సాధ్యమైనప్పుడల్లా మూలకాన్ని ఉపయోగించమని మేము సిఫార్సు చేస్తున్నాము .<button>
ఇతర విషయాలతోపాటు, Firefox <30లో ఒక బగ్ ఉంది,line-height అది -ఆధారిత బటన్‌లను సెట్ చేయకుండా నిరోధిస్తుంది <input>, దీని వలన అవి Firefoxలోని ఇతర బటన్‌ల ఎత్తుతో సరిగ్గా సరిపోలడం లేదు.
ఎంపికలు
స్టైల్ బటన్‌ను త్వరగా సృష్టించడానికి అందుబాటులో ఉన్న బటన్ తరగతుల్లో దేనినైనా ఉపయోగించండి.
<!-- Standard button -->
<button type="button" class="btn btn-default">Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button>సహాయక సాంకేతికతలకు అర్థాన్ని తెలియజేయడం
బటన్‌కు అర్థాన్ని జోడించడానికి రంగును ఉపయోగించడం దృశ్య సూచనను మాత్రమే అందిస్తుంది, ఇది స్క్రీన్ రీడర్‌ల వంటి సహాయక సాంకేతికతల వినియోగదారులకు తెలియజేయబడదు. రంగు ద్వారా సూచించబడిన సమాచారం కంటెంట్‌లోనే (బటన్ కనిపించే వచనం) స్పష్టంగా ఉందని లేదా .sr-onlyతరగతితో దాచిన అదనపు వచనం వంటి ప్రత్యామ్నాయ మార్గాల ద్వారా చేర్చబడిందని నిర్ధారించుకోండి.
పరిమాణాలు
పెద్ద లేదా చిన్న బటన్‌లను ఇష్టపడుతున్నారా? .btn-lg, .btn-sm, లేదా .btn-xsఅదనపు పరిమాణాల కోసం జోడించండి .
<p>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
<button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
<button type="button" class="btn btn-primary">Default button</button>
<button type="button" class="btn btn-default">Default button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm">Small button</button>
<button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-xs">Extra small button</button>
<button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>జోడించడం ద్వారా బ్లాక్ స్థాయి బటన్‌లను సృష్టించండి—తల్లిదండ్రుల పూర్తి వెడల్పులో ఉండేవి— .btn-block.
<button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
<button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>క్రియాశీల స్థితి
సక్రియంగా ఉన్నప్పుడు బటన్లు నొక్కినప్పుడు (ముదురు నేపథ్యం, ముదురు అంచు మరియు ఇన్‌సెట్ షాడోతో) కనిపిస్తాయి. మూలకాల కోసం <button>, ఇది ద్వారా చేయబడుతుంది :active. <a>మూలకాల కోసం , ఇది తో చేయబడుతుంది .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>క్రాస్ బ్రౌజర్ అనుకూలత
మీరు disableda కు లక్షణాన్ని జోడిస్తే <button>, Internet Explorer 9 మరియు దిగువన మేము సరిదిద్దలేని దుష్ట టెక్స్ట్-షాడోతో వచనాన్ని బూడిద రంగులోకి మారుస్తుంది.
యాంకర్ మూలకం
బటన్‌లకు .disabledతరగతిని జోడించండి .<a>
<a href="#" class="btn btn-primary btn-lg disabled" role="button">Primary link</a>
<a href="#" class="btn btn-default btn-lg disabled" role="button">Link</a>మేము .disabledఇక్కడ సాధారణ తరగతి మాదిరిగానే యుటిలిటీ క్లాస్‌గా ఉపయోగిస్తాము .active, కాబట్టి ఉపసర్గ అవసరం లేదు.
లింక్ కార్యాచరణ హెచ్చరిక
pointer-events: nones యొక్క లింక్ కార్యాచరణను నిలిపివేయడానికి ప్రయత్నించడానికి ఈ తరగతి ఉపయోగిస్తుంది <a>, కానీ ఆ CSS ప్రాపర్టీ ఇంకా ప్రామాణికం కాలేదు మరియు Opera 18 మరియు దిగువన లేదా Internet Explorer 11లో పూర్తిగా మద్దతు లేదు. అదనంగా, మద్దతు ఇచ్చే బ్రౌజర్‌లలో కూడా pointer-events: none, కీబోర్డ్ నావిగేషన్ ప్రభావితం కాదు, అంటే దృష్టిగల కీబోర్డ్ వినియోగదారులు మరియు సహాయక సాంకేతికతలను ఉపయోగించే వినియోగదారులు ఇప్పటికీ ఈ లింక్‌లను సక్రియం చేయగలరు. కాబట్టి సురక్షితంగా ఉండటానికి, అటువంటి లింక్‌లను నిలిపివేయడానికి అనుకూల JavaScriptని ఉపయోగించండి.
చిత్రాలు
ప్రతిస్పందించే చిత్రాలు
.img-responsiveబూట్స్ట్రాప్ 3లోని చిత్రాలను తరగతిని జోడించడం ద్వారా ప్రతిస్పందించే-స్నేహపూర్వకంగా చేయవచ్చు . max-width: 100%;ఇది పేరెంట్ ఎలిమెంట్‌కు చక్కగా స్కేల్ అయ్యేలా ఇమేజ్‌కి height: auto;వర్తిస్తుంది .display: block;
.img-responsiveతరగతిని ఉపయోగించే చిత్రాలను మధ్యలో ఉంచడానికి, .center-blockబదులుగా ఉపయోగించండి .text-center. వినియోగం గురించి మరిన్ని వివరాల కోసం సహాయక తరగతుల విభాగాన్ని చూడండి ..center-block
SVG చిత్రాలు మరియు IE 8-10
Internet Explorer 8-10లో, SVG చిత్రాలు .img-responsiveఅసమాన పరిమాణంలో ఉంటాయి. దీన్ని పరిష్కరించడానికి, width: 100% \9;అవసరమైన చోట జోడించండి. బూట్స్ట్రాప్ దీన్ని స్వయంచాలకంగా వర్తింపజేయదు, ఎందుకంటే ఇది ఇతర చిత్ర ఫార్మాట్‌లకు సమస్యలను కలిగిస్తుంది.
<img src="..." class="img-responsive" alt="Responsive image">చిత్ర రూపాలు
<img>ఏదైనా ప్రాజెక్ట్‌లో చిత్రాలను సులభంగా స్టైల్ చేయడానికి ఒక మూలకానికి తరగతులను జోడించండి .
క్రాస్ బ్రౌజర్ అనుకూలత
Internet Explorer 8లో గుండ్రని మూలలకు మద్దతు లేదని గుర్తుంచుకోండి.
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">సహాయక తరగతులు
సందర్భోచిత రంగులు
కొన్ని ఉద్ఘాటన వినియోగ తరగతులతో రంగు ద్వారా అర్థాన్ని తెలియజేయండి. ఇవి లింక్‌లకు కూడా వర్తింపజేయవచ్చు మరియు మా డిఫాల్ట్ లింక్ స్టైల్‌ల వలె హోవర్‌లో చీకటిగా మారుతాయి.
ఫ్యూస్ డాపిబస్, టెల్లస్ ఎసి కర్సస్ కమోడో, టార్టర్ మౌరిస్ నిబ్.
Nullam id dolor id nibh ultricies వాహనాలు ut id elit.
డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా.
మెసెనాస్ సెడ్ డైమ్ ఎగెట్ రిసస్ వేరియస్ బ్లాండిట్ సిట్ అమెట్ నాన్ మాగ్నా.
ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.
డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా.
<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 వాహనాలు ut id elit.
డ్యూయిస్ మోలిస్, నాన్ కమోడో లక్టస్, నిసి ఎరట్ పోర్టిటర్ లిగులా.
మెసెనాస్ సెడ్ డైమ్ ఎగెట్ రిసస్ వేరియస్ బ్లాండిట్ సిట్ అమెట్ నాన్ మాగ్నా.
ఎటియామ్ పోర్టా సెమ్ మలేసువాడా మాగ్నా మోల్లిస్ యూయిస్మోడ్.
డోనెక్ ఉల్లమ్‌కార్పర్ నుల్లా నాన్ మెటస్ ఆక్టర్ ఫ్రింగిల్లా.
<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 జోడించడం ద్వారా లను సులభంగా క్లియర్ చేయండి . నికోలస్ గల్లఘర్ ద్వారా ప్రాచుర్యం పొందిన మైక్రో క్లియర్‌ఫిక్స్‌ని ఉపయోగిస్తుంది . మిక్సిన్‌గా కూడా ఉపయోగించవచ్చు..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>
పరీక్ష కేసులు
మీ బ్రౌజర్ పరిమాణాన్ని మార్చండి లేదా ప్రతిస్పందించే యుటిలిటీ తరగతులను పరీక్షించడానికి వివిధ పరికరాలలో లోడ్ చేయండి.
ఇందులో కనిపిస్తుంది...
మీ ప్రస్తుత వీక్షణపోర్ట్‌లో మూలకం కనిపిస్తుందని ఆకుపచ్చ చెక్‌మార్క్‌లు సూచిస్తున్నాయి .
చాలా చిన్న
✔ x-స్మాల్‌లో కనిపిస్తుంది
చిన్నది
✔ చిన్నవిగా కనిపిస్తాయి
మధ్యస్థం
✔ మధ్యస్థంగా కనిపిస్తుంది
పెద్దది
✔ పెద్దగా కనిపిస్తుంది
✔ x-చిన్న మరియు చిన్న వాటిపై కనిపిస్తుంది
✔ మధ్యస్థంగా మరియు పెద్దగా కనిపిస్తుంది
✔ x-చిన్న మరియు మధ్యస్థంలో కనిపిస్తుంది
✔ చిన్నవి మరియు పెద్దవి కనిపిస్తాయి
✔ x-చిన్న మరియు పెద్ద వాటిపై కనిపిస్తుంది
✔ చిన్న మరియు మధ్యస్థంగా కనిపిస్తుంది
దాగి ఉంది...
ఇక్కడ, ఆకుపచ్చ చెక్‌మార్క్‌లు మీ ప్రస్తుత వీక్షణపోర్ట్‌లో మూలకం దాచబడిందని కూడా సూచిస్తాయి.
తక్కువగా ఉపయోగించడం
బూట్స్ట్రాప్ యొక్క CSS తక్కువ, వేరియబుల్స్, మిక్సిన్‌లు మరియు CSS కంపైలింగ్ కోసం ఫంక్షన్‌ల వంటి అదనపు కార్యాచరణతో కూడిన ప్రీప్రాసెసర్‌లో నిర్మించబడింది. మా కంపైల్ చేసిన CSS ఫైల్‌లకు బదులుగా సోర్స్ తక్కువ ఫైల్‌లను ఉపయోగించాలని చూస్తున్న వారు ఫ్రేమ్‌వర్క్ అంతటా మనం ఉపయోగించే అనేక వేరియబుల్స్ మరియు మిక్సిన్‌లను ఉపయోగించుకోవచ్చు.
గ్రిడ్ వేరియబుల్స్ మరియు మిక్సిన్‌లు గ్రిడ్ సిస్టమ్ విభాగంలో కవర్ చేయబడతాయి .
బూట్స్ట్రాప్ కంపైల్ చేస్తోంది
బూట్స్ట్రాప్ కనీసం రెండు మార్గాల్లో ఉపయోగించబడుతుంది: కంపైల్ చేయబడిన CSS లేదా సోర్స్ లెస్ ఫైల్‌లతో. తక్కువ ఫైల్‌లను కంపైల్ చేయడానికి , అవసరమైన ఆదేశాలను అమలు చేయడానికి మీ అభివృద్ధి వాతావరణాన్ని ఎలా సెటప్ చేయాలో కోసం ప్రారంభించడం విభాగాన్ని సంప్రదించండి .
థర్డ్ పార్టీ కంపైలేషన్ టూల్స్ బూట్‌స్ట్రాప్‌తో పని చేయవచ్చు, కానీ వాటికి మా కోర్ టీమ్ మద్దతు లేదు.
వేరియబుల్స్
రంగులు, అంతరం లేదా ఫాంట్ స్టాక్‌లు వంటి సాధారణంగా ఉపయోగించే విలువలను కేంద్రీకరించడానికి మరియు భాగస్వామ్యం చేయడానికి మొత్తం ప్రాజెక్ట్‌లో వేరియబుల్స్ ఉపయోగించబడతాయి. పూర్తి విచ్ఛిన్నం కోసం, దయచేసి కస్టమైజర్‌ని చూడండి .
రంగులు
రెండు రంగు పథకాలను సులభంగా ఉపయోగించుకోండి: గ్రేస్కేల్ మరియు సెమాంటిక్. గ్రేస్కేల్ రంగులు సాధారణంగా ఉపయోగించే నలుపు షేడ్స్‌కు శీఘ్ర ప్రాప్యతను అందిస్తాయి, అయితే అర్థవంతమైన సందర్భోచిత విలువలకు కేటాయించబడిన వివిధ రంగులను సెమాంటిక్ కలిగి ఉంటుంది.
@gray-darker: lighten(#000, 13.5%); // #222
@gray-dark: lighten(#000, 20%); // #333
@gray: lighten(#000, 33.5%); // #555
@gray-light: lighten(#000, 46.7%); // #777
@gray-lighter: lighten(#000, 93.5%); // #eee@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;ఈ రంగు వేరియబుల్స్‌లో దేనినైనా ఉపయోగించుకోండి లేదా వాటిని మీ ప్రాజెక్ట్ కోసం మరింత అర్థవంతమైన వేరియబుల్స్‌కు మళ్లీ కేటాయించండి.
// Use as-is
.masthead {
background-color: @brand-primary;
}
// Reassigned variables in Less
@alert-message-background: @brand-info;
.alert {
background-color: @alert-message-background;
}పరంజా
మీ సైట్ యొక్క అస్థిపంజరం యొక్క ముఖ్య అంశాలను త్వరగా అనుకూలీకరించడానికి కొన్ని వేరియబుల్స్.
// Scaffolding
@body-bg: #fff;
@text-color: @black-50;లింకులు
ఒకే ఒక విలువతో సరైన రంగుతో మీ లింక్‌లను సులభంగా స్టైల్ చేయండి.
// Variables
@link-color: @brand-primary;
@link-hover-color: darken(@link-color, 15%);
// Usage
a {
color: @link-color;
text-decoration: none;
&:hover {
color: @link-hover-color;
text-decoration: underline;
}
}@link-hover-colorసరైన హోవర్ రంగును స్వయంచాలకంగా సృష్టించడానికి తక్కువ నుండి మరొక అద్భుతమైన సాధనం ఫంక్షన్‌ని ఉపయోగిస్తుందని గమనించండి . మీరు ఉపయోగించవచ్చు 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 నుండి తీసివేయబడింది . వెనుకకు అనుకూలతను సంరక్షించడానికి, బూట్స్ట్రాప్ v4 వరకు అంతర్గతంగా మిక్సిన్‌ని ఉపయోగించడం బూట్స్ట్రాప్ కొనసాగుతుంది.
.box-sizing(@box-model) {
-webkit-box-sizing: @box-model; // Safari <= 5
-moz-box-sizing: @box-model; // Firefox <= 19
box-sizing: @box-model;
}గుండ్రని మూలలు
నేడు అన్ని ఆధునిక బ్రౌజర్‌లు నాన్-ప్రిఫిక్స్డ్ border-radiusప్రాపర్టీకి మద్దతిస్తున్నాయి. అలాగే, .border-radius()మిక్సిన్ లేదు, కానీ బూట్స్ట్రాప్ ఒక వస్తువు యొక్క నిర్దిష్ట వైపున రెండు మూలలను త్వరగా చుట్టుముట్టే సత్వరమార్గాలను కలిగి ఉంటుంది.
.border-top-radius(@radius) {
border-top-right-radius: @radius;
border-top-left-radius: @radius;
}
.border-right-radius(@radius) {
border-bottom-right-radius: @radius;
border-top-right-radius: @radius;
}
.border-bottom-radius(@radius) {
border-bottom-right-radius: @radius;
border-bottom-left-radius: @radius;
}
.border-left-radius(@radius) {
border-bottom-left-radius: @radius;
border-top-left-radius: @radius;
}బాక్స్ (డ్రాప్) నీడలు
box-shadowమీ లక్ష్య ప్రేక్షకులు తాజా మరియు గొప్ప బ్రౌజర్‌లు మరియు పరికరాలను ఉపయోగిస్తుంటే, దాని స్వంత ప్రాపర్టీని ఉపయోగించాలని నిర్ధారించుకోండి . మీకు పాత Android (ప్రీ-v4) మరియు iOS పరికరాలకు (ప్రీ-iOS 5) మద్దతు అవసరమైతే, అవసరమైన ప్రిఫిక్స్‌ని తీయడానికి నిలిపివేయబడిన మిక్సిన్‌ని ఉపయోగించండి.-webkit
ప్రామాణిక ప్రాపర్టీకి మద్దతు ఇవ్వని పాత ప్లాట్‌ఫారమ్‌లకు బూట్స్ట్రాప్ అధికారికంగా మద్దతు ఇవ్వనందున మిక్సిన్ v3.1.0 నుండి తీసివేయబడింది . వెనుకకు అనుకూలతను సంరక్షించడానికి, బూట్స్ట్రాప్ v4 వరకు అంతర్గతంగా మిక్సిన్‌ని ఉపయోగించడం బూట్స్ట్రాప్ కొనసాగుతుంది.
మీ బాక్స్ షాడోలలో రంగులను ఉపయోగించాలని నిర్ధారించుకోండి, rgba()తద్వారా అవి బ్యాక్‌గ్రౌండ్‌లతో వీలైనంత సజావుగా మిళితం అవుతాయి.
.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-webkit-box-shadow: @shadow; // iOS <4.3 & Android <4.1
box-shadow: @shadow;
}పరివర్తనాలు
వశ్యత కోసం బహుళ మిక్సిన్‌లు. మొత్తం పరివర్తన సమాచారాన్ని ఒకదానితో సెట్ చేయండి లేదా అవసరమైన విధంగా ప్రత్యేక ఆలస్యం మరియు వ్యవధిని పేర్కొనండి.
Autoprefixer పరిచయంతో మిక్సిన్‌లు v3.2.0 నుండి తీసివేయబడ్డాయి . వెనుకకు అనుకూలతను సంరక్షించడానికి, బూట్స్ట్రాప్ v4 వరకు అంతర్గతంగా మిక్సిన్‌లను ఉపయోగించడం కొనసాగిస్తుంది.
.transition(@transition) {
-webkit-transition: @transition;
transition: @transition;
}
.transition-property(@transition-property) {
-webkit-transition-property: @transition-property;
transition-property: @transition-property;
}
.transition-delay(@transition-delay) {
-webkit-transition-delay: @transition-delay;
transition-delay: @transition-delay;
}
.transition-duration(@transition-duration) {
-webkit-transition-duration: @transition-duration;
transition-duration: @transition-duration;
}
.transition-timing-function(@timing-function) {
-webkit-transition-timing-function: @timing-function;
transition-timing-function: @timing-function;
}
.transition-transform(@transition) {
-webkit-transition: -webkit-transform @transition;
-moz-transition: -moz-transform @transition;
-o-transition: -o-transform @transition;
transition: transform @transition;
}రూపాంతరాలు
ఏదైనా వస్తువును తిప్పండి, స్కేల్ చేయండి, అనువదించండి (తరలించండి) లేదా వక్రంగా మార్చండి.
Autoprefixer పరిచయంతో మిక్సిన్‌లు v3.2.0 నుండి తీసివేయబడ్డాయి . వెనుకకు అనుకూలతను సంరక్షించడానికి, బూట్స్ట్రాప్ 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 నుండి తీసివేయబడ్డాయి . వెనుకకు అనుకూలతను సంరక్షించడానికి, బూట్స్ట్రాప్ 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;
}అస్పష్టత
అన్ని బ్రౌజర్‌ల కోసం అస్పష్టతను సెట్ చేయండి మరియు filterIE8 కోసం ఫాల్‌బ్యాక్‌ను అందించండి.
.opacity(@opacity) {
opacity: @opacity;
// IE8 filter
@opacity-ie: (@opacity * 100);
filter: ~"alpha(opacity=@{opacity-ie})";
}ప్లేస్‌హోల్డర్ వచనం
ప్రతి ఫీల్డ్‌లో ఫారమ్ నియంత్రణల కోసం సందర్భాన్ని అందించండి.
.placeholder(@color: @input-color-placeholder) {
&::-moz-placeholder { color: @color; } // Firefox
&:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
&::-webkit-input-placeholder { color: @color; } // Safari and Chrome
}నిలువు వరుసలు
ఒకే మూలకంలో CSS ద్వారా నిలువు వరుసలను రూపొందించండి.
.content-columns(@width; @count; @gap) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}ప్రవణతలు
ఏదైనా రెండు రంగులను సులభంగా బ్యాక్‌గ్రౌండ్ గ్రేడియంట్‌గా మార్చండి. మరింత ఆధునికతను పొందండి మరియు దిశను సెట్ చేయండి, మూడు రంగులను ఉపయోగించండి లేదా రేడియల్ గ్రేడియంట్‌ను ఉపయోగించండి. ఒకే మిక్సిన్‌తో మీకు అవసరమైన అన్ని ప్రిఫిక్స్డ్ సింటాక్స్‌లు లభిస్తాయి.
#gradient > .vertical(#333; #000);
#gradient > .horizontal(#333; #000);
#gradient > .radial(#333; #000);మీరు ప్రామాణిక రెండు-రంగు, లీనియర్ గ్రేడియంట్ యొక్క కోణాన్ని కూడా పేర్కొనవచ్చు:
#gradient > .directional(#333; #000; 45deg);మీకు బార్బర్-స్ట్రిప్ స్టైల్ గ్రేడియంట్ అవసరమైతే, అది కూడా సులభం. ఒకే రంగును పేర్కొనండి మరియు మేము అపారదర్శక తెల్లటి గీతను అతివ్యాప్తి చేస్తాము.
#gradient > .striped(#333; 45deg);ముందుగా పైకి మరియు బదులుగా మూడు రంగులను ఉపయోగించండి. మొదటి రంగు, రెండవ రంగు, రెండవ రంగు యొక్క రంగు స్టాప్ (25% వంటి శాతం విలువ) మరియు ఈ మిక్సిన్‌లతో మూడవ రంగును సెట్ చేయండి:
#gradient > .vertical-three-colors(#777; #333; 25%; #000);
#gradient > .horizontal-three-colors(#777; #333; 25%; #000);హెడ్ అప్! మీరు ఎప్పుడైనా గ్రేడియంట్‌ను తీసివేయవలసి వస్తే, filterమీరు జోడించిన ఏదైనా IE-నిర్దిష్టాన్ని తప్పకుండా తీసివేయండి. .reset-filter()పక్కనే ఉన్న మిక్సిన్‌ని ఉపయోగించడం ద్వారా మీరు దీన్ని చేయవచ్చు background-image: none;.
యుటిలిటీ మిక్సిన్స్
యుటిలిటీ మిక్సిన్‌లు ఒక నిర్దిష్ట లక్ష్యం లేదా పనిని సాధించడానికి సంబంధం లేని CSS లక్షణాలను మిళితం చేసే మిక్సిన్‌లు.
క్లియర్‌ఫిక్స్
class="clearfix"ఏదైనా మూలకానికి జోడించడం మర్చిపోయి , బదులుగా .clearfix()తగిన చోట మిక్సిన్‌ని జోడించండి. Nicolas Gallagher నుండి మైక్రో క్లియర్‌ఫిక్స్‌ని ఉపయోగిస్తుంది .
// Mixin
.clearfix() {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
// Usage
.container {
.clearfix();
}క్షితిజ సమాంతర కేంద్రీకరణ
ఏదైనా మూలకాన్ని దాని పేరెంట్‌లో త్వరగా కేంద్రీకరించండి. అవసరం widthలేదా max-widthసెట్ చేయాలి.
// Mixin
.center-block() {
display: block;
margin-left: auto;
margin-right: auto;
}
// Usage
.container {
width: 940px;
.center-block();
}సైజింగ్ సహాయకులు
ఒక వస్తువు యొక్క కొలతలు మరింత సులభంగా పేర్కొనండి.
// Mixins
.size(@width; @height) {
width: @width;
height: @height;
}
.square(@size) {
.size(@size; @size);
}
// Usage
.image { .size(400px; 300px); }
.avatar { .square(48px); }పునఃపరిమాణం చేయగల టెక్స్ట్‌ఏరియాలు
ఏదైనా టెక్స్ట్‌ఏరియా లేదా ఏదైనా ఇతర మూలకం కోసం పునఃపరిమాణం ఎంపికలను సులభంగా కాన్ఫిగర్ చేయండి. సాధారణ బ్రౌజర్ ప్రవర్తనకు డిఫాల్ట్‌లు ( both).
.resizable(@direction: both) {
// Options: horizontal, vertical, both
resize: @direction;
// Safari fix
overflow: auto;
}వచనాన్ని కత్తిరించడం
ఒకే మిక్సిన్‌తో ఎలిప్సిస్‌తో వచనాన్ని సులభంగా కత్తిరించండి. మూలకం ఉండాలి blockలేదా inline-blockస్థాయి ఉండాలి.
// Mixin
.text-overflow() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Usage
.branch-name {
display: inline-block;
max-width: 200px;
.text-overflow();
}రెటీనా చిత్రాలు
రెండు ఇమేజ్ పాత్‌లు మరియు @1x ఇమేజ్ డైమెన్షన్‌లను పేర్కొనండి మరియు బూట్స్ట్రాప్ @2x మీడియా ప్రశ్నను అందిస్తుంది. మీరు సర్వ్ చేయడానికి అనేక చిత్రాలను కలిగి ఉంటే, మీ రెటీనా ఇమేజ్ CSSని ఒకే మీడియా ప్రశ్నలో మాన్యువల్‌గా వ్రాయడాన్ని పరిగణించండి.
.img-retina(@file-1x; @file-2x; @width-1x; @height-1x) {
background-image: url("@{file-1x}");
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
background-image: url("@{file-2x}");
background-size: @width-1x @height-1x;
}
}
// Usage
.jumbotron {
.img-retina("/img/bg-1x.png", "/img/bg-2x.png", 100px, 100px);
}సాస్ ఉపయోగించి
బూట్స్ట్రాప్ తక్కువగా నిర్మించబడినప్పటికీ, ఇది అధికారిక సాస్ పోర్ట్‌ను కూడా కలిగి ఉంది . మేము దానిని ప్రత్యేక GitHub రిపోజిటరీలో నిర్వహిస్తాము మరియు మార్పిడి స్క్రిప్ట్‌తో నవీకరణలను నిర్వహిస్తాము.
ఏమి చేర్చబడింది
సాస్ పోర్ట్ ప్రత్యేక రెపోను కలిగి ఉంది మరియు కొద్దిగా భిన్నమైన ప్రేక్షకులకు సేవలు అందిస్తుంది కాబట్టి, ప్రాజెక్ట్ యొక్క కంటెంట్‌లు ప్రధాన బూట్స్ట్రాప్ ప్రాజెక్ట్ నుండి చాలా భిన్నంగా ఉంటాయి. ఇది సాస్ పోర్ట్ వీలైనన్ని ఎక్కువ సాస్-ఆధారిత సిస్టమ్‌లకు అనుకూలంగా ఉందని నిర్ధారిస్తుంది.
| మార్గం | వివరణ |
|---|---|
lib/ |
రూబీ జెమ్ కోడ్ (సాస్ కాన్ఫిగరేషన్, రైల్స్ మరియు కంపాస్ ఇంటిగ్రేషన్స్) |
tasks/ |
కన్వర్టర్ స్క్రిప్ట్‌లు (అప్‌స్ట్రీమ్ లెస్‌గా సాస్‌కి మారుతున్నాయి) |
test/ |
సంకలన పరీక్షలు |
templates/ |
కంపాస్ ప్యాకేజీ మానిఫెస్ట్ |
vendor/assets/ |
సాస్, జావాస్క్రిప్ట్ మరియు ఫాంట్ ఫైల్‌లు |
Rakefile |
రేక్ మరియు కన్వర్ట్ వంటి అంతర్గత పనులు |
ఈ ఫైల్‌లను చర్యలో చూడటానికి Sass పోర్ట్ యొక్క GitHub రిపోజిటరీని సందర్శించండి .
సంస్థాపన
Sass కోసం బూట్‌స్ట్రాప్‌ను ఎలా ఇన్‌స్టాల్ చేయాలి మరియు ఉపయోగించాలి అనే సమాచారం కోసం, GitHub రిపోజిటరీ రీడ్‌మీని సంప్రదించండి . ఇది అత్యంత తాజా మూలం మరియు రైల్స్, కంపాస్ మరియు స్టాండర్డ్ సాస్ ప్రాజెక్ట్‌లతో ఉపయోగం కోసం సమాచారాన్ని కలిగి ఉంటుంది.