డౌన్‌లోడ్ చేయండి

బూట్‌స్ట్రాప్ (ప్రస్తుతం v3.3.7) త్వరితగతిన ప్రారంభించడానికి కొన్ని సులభమైన మార్గాలను కలిగి ఉంది, ప్రతి ఒక్కటి విభిన్న నైపుణ్య స్థాయి మరియు వినియోగ సందర్భాన్ని ఆకర్షిస్తుంది. మీ ప్రత్యేక అవసరాలకు ఏది సరిపోతుందో చూడడానికి చదవండి.

బూట్‌స్ట్రాప్ CDN

jsDelivr వద్ద ఉన్న వ్యక్తులు బూట్‌స్ట్రాప్ యొక్క CSS మరియు జావాస్క్రిప్ట్‌లకు CDN మద్దతును దయతో అందిస్తారు. ఈ బూట్‌స్ట్రాప్ CDN లింక్‌లను ఉపయోగించండి.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

బోవర్‌తో ఇన్‌స్టాల్ చేయండి

మీరు బోవర్‌ని ఉపయోగించి బూట్‌స్ట్రాప్ యొక్క తక్కువ, CSS, జావాస్క్రిప్ట్ మరియు ఫాంట్‌లను కూడా ఇన్‌స్టాల్ చేయవచ్చు మరియు నిర్వహించవచ్చు :

$ bower install bootstrap

npmతో ఇన్‌స్టాల్ చేయండి

మీరు npm ఉపయోగించి బూట్‌స్ట్రాప్‌ను కూడా ఇన్‌స్టాల్ చేయవచ్చు :

$ npm install bootstrap@3

require('bootstrap')బూట్‌స్ట్రాప్ యొక్క అన్ని j క్వెరీ ప్లగిన్‌లను j క్వెరీ ఆబ్జెక్ట్‌పై లోడ్ చేస్తుంది. bootstrapమాడ్యూల్ ఏదైనా ఎగుమతి చేయదు . /js/*.jsప్యాకేజీ యొక్క అగ్ర-స్థాయి డైరెక్టరీ క్రింద ఉన్న ఫైల్‌లను లోడ్ చేయడం ద్వారా మీరు బూట్‌స్ట్రాప్ యొక్క j క్వెరీ ప్లగిన్‌లను ఒక్కొక్కటిగా మాన్యువల్‌గా లోడ్ చేయవచ్చు .

బూట్‌స్ట్రాప్ package.jsonకింది కీల క్రింద కొన్ని అదనపు మెటాడేటాను కలిగి ఉంది:

• less- బూట్‌స్ట్రాప్ యొక్క ప్రధాన తక్కువ సోర్స్ ఫైల్‌కి మార్గం
• style- డిఫాల్ట్ సెట్టింగ్‌లను ఉపయోగించి ముందుగా కంపైల్ చేయబడిన బూట్‌స్ట్రాప్ యొక్క నాన్-మినిఫైడ్ CSSకి మార్గం (కస్టమైజేషన్ లేదు)

కంపోజర్‌తో ఇన్‌స్టాల్ చేయండి

మీరు కంపోజర్‌ని ఉపయోగించి బూట్‌స్ట్రాప్ యొక్క తక్కువ, CSS, జావాస్క్రిప్ట్ మరియు ఫాంట్‌లను కూడా ఇన్‌స్టాల్ చేయవచ్చు మరియు నిర్వహించవచ్చు :

$ composer require twbs/bootstrap

తక్కువ/సాస్ కోసం ఆటోప్రిఫిక్సర్ అవసరం

CSS వెండర్ ప్రిఫిక్స్‌లతో వ్యవహరించడానికి బూట్‌స్ట్రాప్ ఆటోప్రిఫిక్సర్‌ని ఉపయోగిస్తుంది . మీరు బూట్‌స్ట్రాప్‌ను దాని లెస్/సాస్ సోర్స్ నుండి కంపైల్ చేస్తుంటే మరియు మా గ్రుంట్‌ఫైల్‌ని ఉపయోగించకుంటే, మీరు మీ బిల్డ్ ప్రాసెస్‌లో ఆటోప్రిఫిక్సర్‌ని ఏకీకృతం చేయాలి. మీరు ప్రీకంపైల్ చేసిన బూట్‌స్ట్రాప్‌ని ఉపయోగిస్తుంటే లేదా మా గ్రుంట్‌ఫైల్‌ని ఉపయోగిస్తుంటే, మీరు దీని గురించి చింతించాల్సిన అవసరం లేదు ఎందుకంటే ఆటోప్రెఫిక్సర్ ఇప్పటికే మా గ్రుంట్‌ఫైల్‌లో విలీనం చేయబడింది.

ఏమి చేర్చబడింది

బూట్‌స్ట్రాప్ రెండు రూపాల్లో డౌన్‌లోడ్ చేయబడుతుంది, దానిలో మీరు క్రింది డైరెక్టరీలు మరియు ఫైల్‌లను కనుగొంటారు, సాధారణ వనరులను తార్కికంగా సమూహపరచడం మరియు సంకలనం చేయబడిన మరియు చిన్నీకరించబడిన వైవిధ్యాలను అందించడం.

ముందుగా కంపైల్ చేసిన బూట్‌స్ట్రాప్

డౌన్‌లోడ్ చేసిన తర్వాత, (కంపైల్ చేయబడిన) బూట్‌స్ట్రాప్ యొక్క నిర్మాణాన్ని చూడటానికి కంప్రెస్ చేయబడిన ఫోల్డర్‌ను అన్జిప్ చేయండి. మీరు ఇలాంటివి చూస్తారు:

bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

ఇది బూట్‌స్ట్రాప్ యొక్క అత్యంత ప్రాథమిక రూపం: దాదాపు ఏదైనా వెబ్ ప్రాజెక్ట్‌లో శీఘ్ర డ్రాప్-ఇన్ వినియోగం కోసం ప్రీకంపైల్డ్ ఫైల్‌లు. మేము కంపైల్ చేయబడిన CSS మరియు JS ( bootstrap.*), అలాగే కంపైల్డ్ మరియు మినిఫైడ్ CSS మరియు JS ( bootstrap.min.*)లను అందిస్తాము. నిర్దిష్ట బ్రౌజర్‌ల డెవలపర్ సాధనాలతో ఉపయోగించడానికి CSS సోర్స్ మ్యాప్‌లు ( ) అందుబాటులో ఉన్నాయి. bootstrap.*.mapఐచ్ఛిక బూట్‌స్ట్రాప్ థీమ్ వలె Glyphicons నుండి ఫాంట్‌లు చేర్చబడ్డాయి.

బూట్స్ట్రాప్ సోర్స్ కోడ్

బూట్‌స్ట్రాప్ సోర్స్ కోడ్ డౌన్‌లోడ్‌లో సోర్స్ లెస్, జావాస్క్రిప్ట్ మరియు డాక్యుమెంటేషన్‌తో పాటు ప్రీకంపైల్డ్ CSS, జావాస్క్రిప్ట్ మరియు ఫాంట్ ఆస్తులు ఉంటాయి. మరింత ప్రత్యేకంగా, ఇది క్రింది మరియు మరిన్నింటిని కలిగి ఉంటుంది:

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

ది less/, js/, మరియు fonts/మా CSS, JS మరియు ఐకాన్ ఫాంట్‌ల (వరుసగా) సోర్స్ కోడ్. ఫోల్డర్ పైన dist/ఉన్న ప్రీకంపైల్డ్ డౌన్‌లోడ్ విభాగంలో జాబితా చేయబడిన ప్రతిదాన్ని కలిగి ఉంటుంది. ఫోల్డర్‌లో మా డాక్యుమెంటేషన్ మరియు బూట్‌స్ట్రాప్ వినియోగం యొక్క docs/సోర్స్ కోడ్ ఉంటుంది . examples/అంతకు మించి, ఏదైనా ఇతర చేర్చబడిన ఫైల్ ప్యాకేజీలు, లైసెన్స్ సమాచారం మరియు అభివృద్ధికి మద్దతునిస్తుంది.

CSS మరియు జావాస్క్రిప్ట్‌ను కంపైల్ చేస్తోంది

బూట్‌స్ట్రాప్ ఫ్రేమ్‌వర్క్‌తో పని చేయడానికి అనుకూలమైన పద్ధతులతో దాని బిల్డ్ సిస్టమ్ కోసం గ్రంట్‌ని ఉపయోగిస్తుంది. ఇది మేము మా కోడ్‌ను ఎలా కంపైల్ చేస్తాము, పరీక్షలను అమలు చేస్తాము మరియు మరిన్ని చేస్తాము.

గుసగుసలను ఇన్స్టాల్ చేస్తోంది

గుసగుసలను ఇన్‌స్టాల్ చేయడానికి, మీరు ముందుగా node.js ని డౌన్‌లోడ్ చేసి, ఇన్‌స్టాల్ చేయాలి (ఇందులో npm ఉంటుంది). npm అంటే నోడ్ ప్యాక్ చేయబడిన మాడ్యూల్స్ మరియు ఇది node.js ద్వారా డెవలప్‌మెంట్ డిపెండెన్సీలను నిర్వహించడానికి ఒక మార్గం.

1. grunt-cliతో ప్రపంచవ్యాప్తంగా ఇన్‌స్టాల్ చేయండి npm install -g grunt-cli.
2. రూట్ డైరెక్టరీకి నావిగేట్ చేసి /bootstrap/, ఆపై రన్ చేయండి npm install. npm ఫైల్‌ని చూస్తుంది package.jsonమరియు అక్కడ జాబితా చేయబడిన అవసరమైన స్థానిక డిపెండెన్సీలను స్వయంచాలకంగా ఇన్‌స్టాల్ చేస్తుంది.

పూర్తయినప్పుడు, మీరు కమాండ్ లైన్ నుండి అందించబడిన వివిధ గ్రంట్ ఆదేశాలను అమలు చేయగలరు.

అందుబాటులో ఉన్న గుసగుసలు కమాండ్‌లు

grunt dist(కేవలం CSS మరియు జావాస్క్రిప్ట్‌ను కంపైల్ చేయండి)

/dist/కంపైల్ చేయబడిన మరియు కనిష్టీకరించబడిన CSS మరియు JavaScript ఫైల్‌లతో డైరెక్టరీని పునరుత్పత్తి చేస్తుంది . బూట్‌స్ట్రాప్ వినియోగదారుగా, ఇది సాధారణంగా మీకు కావలసిన ఆదేశం.

grunt watch(చూడండి)

మీరు మార్పును సేవ్ చేసినప్పుడల్లా తక్కువ సోర్స్ ఫైల్‌లను చూస్తుంది మరియు వాటిని ఆటోమేటిక్‌గా CSSకి రీకంపైల్ చేస్తుంది.

grunt test(పరీక్షలను అమలు చేయండి)

JSHint ని అమలు చేస్తుంది మరియు PhantomJS లో QUnit పరీక్షలను తల లేకుండా అమలు చేస్తుంది .

grunt docs(డాక్స్ ఆస్తులను రూపొందించండి & పరీక్షించండి)

ద్వారా డాక్యుమెంటేషన్‌ను స్థానికంగా అమలు చేస్తున్నప్పుడు ఉపయోగించే CSS, JavaScript మరియు ఇతర ఆస్తులను రూపొందించి పరీక్షిస్తుంది bundle exec jekyll serve.

grunt(ఖచ్చితంగా ప్రతిదీ రూపొందించండి మరియు పరీక్షలను అమలు చేయండి)

CSS మరియు జావాస్క్రిప్ట్‌లను కంపైల్ చేస్తుంది మరియు మినిఫై చేస్తుంది, డాక్యుమెంటేషన్ వెబ్‌సైట్‌ను నిర్మిస్తుంది, డాక్స్‌కు వ్యతిరేకంగా HTML5 వాలిడేటర్‌ను అమలు చేస్తుంది, కస్టమైజర్ ఆస్తులను పునరుత్పత్తి చేస్తుంది మరియు మరిన్ని చేస్తుంది. జెకిల్ అవసరం . సాధారణంగా మీరు బూట్‌స్ట్రాప్‌లోనే హ్యాకింగ్ చేస్తుంటే మాత్రమే అవసరం.

సమస్య పరిష్కరించు

డిపెండెన్సీలను ఇన్‌స్టాల్ చేయడంలో లేదా గ్రంట్ ఆదేశాలను అమలు చేయడంలో మీకు సమస్యలు ఎదురైతే, ముందుగా /node_modules/npm ద్వారా రూపొందించబడిన డైరెక్టరీని తొలగించండి. అప్పుడు, మళ్లీ అమలు చేయండి npm install.

ప్రాథమిక టెంప్లేట్

ఈ ప్రాథమిక HTML టెంప్లేట్‌తో ప్రారంభించండి లేదా ఈ ఉదాహరణలను సవరించండి . మీరు మా టెంప్లేట్‌లు మరియు ఉదాహరణలను అనుకూలీకరించి, వాటిని మీ అవసరాలకు అనుగుణంగా మార్చుకుంటారని మేము ఆశిస్తున్నాము.

కనిష్ట బూట్‌స్ట్రాప్ పత్రంతో పని చేయడం ప్రారంభించడానికి దిగువ HTMLని కాపీ చేయండి.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

ఉదాహరణలు

బూట్‌స్ట్రాప్ యొక్క అనేక భాగాలతో పై ప్రాథమిక టెంప్లేట్‌పై రూపొందించండి. మీ వ్యక్తిగత ప్రాజెక్ట్ అవసరాలకు అనుగుణంగా బూట్‌స్ట్రాప్‌ను అనుకూలీకరించడానికి మరియు స్వీకరించడానికి మేము మిమ్మల్ని ప్రోత్సహిస్తున్నాము.

బూట్‌స్ట్రాప్ రిపోజిటరీని డౌన్‌లోడ్ చేయడం ద్వారా దిగువ ప్రతి ఉదాహరణ కోసం సోర్స్ కోడ్‌ను పొందండి . ఉదాహరణలు docs/examples/డైరెక్టరీలో చూడవచ్చు.

ఫ్రేమ్‌వర్క్‌ని ఉపయోగించడం

స్టార్టర్ టెంప్లేట్

బేసిక్స్ తప్ప మరేమీ లేదు: కంటైనర్‌తో పాటు CSS మరియు JavaScript కంపైల్ చేయబడింది.

బూట్స్ట్రాప్ థీమ్

దృశ్యపరంగా మెరుగైన అనుభవం కోసం ఐచ్ఛిక బూట్‌స్ట్రాప్ థీమ్‌ను లోడ్ చేయండి.

గ్రిడ్లు

నాలుగు శ్రేణులు, గూడు మరియు మరిన్ని ఉన్న గ్రిడ్ లేఅవుట్‌ల యొక్క బహుళ ఉదాహరణలు.

జంబోట్రాన్

నావ్‌బార్ మరియు కొన్ని ప్రాథమిక గ్రిడ్ నిలువు వరుసలతో జంబోట్రాన్ చుట్టూ బిల్డ్ చేయండి.

ఇరుకైన జంబోట్రాన్

డిఫాల్ట్ కంటైనర్ మరియు జంబోట్రాన్‌ను తగ్గించడం ద్వారా మరింత అనుకూల పేజీని రూపొందించండి.

చర్యలో Navbars

నవబార్

కొన్ని అదనపు కంటెంట్‌తో పాటు నావ్‌బార్‌ను కలిగి ఉన్న సూపర్ బేసిక్ టెంప్లేట్.

స్టాటిక్ టాప్ నావ్‌బార్

కొన్ని అదనపు కంటెంట్‌తో పాటు స్టాటిక్ టాప్ నావ్‌బార్‌తో కూడిన సూపర్ బేసిక్ టెంప్లేట్.

స్థిర navbar

కొన్ని అదనపు కంటెంట్‌తో పాటు స్థిర టాప్ నావ్‌బార్‌తో కూడిన సూపర్ బేసిక్ టెంప్లేట్.

అనుకూల భాగాలు

కవర్

సరళమైన మరియు అందమైన హోమ్ పేజీలను రూపొందించడానికి ఒక పేజీ టెంప్లేట్.

రంగులరాట్నం

నావ్‌బార్ మరియు రంగులరాట్నంను అనుకూలీకరించండి, ఆపై కొన్ని కొత్త భాగాలను జోడించండి.

బ్లాగు

అనుకూల నావిగేషన్, హెడర్ మరియు రకంతో సరళమైన రెండు-నిలువు వరుస బ్లాగ్ లేఅవుట్.

డాష్బోర్డ్

స్థిర సైడ్‌బార్ మరియు నావ్‌బార్‌తో అడ్మిన్ డాష్‌బోర్డ్ కోసం ప్రాథమిక నిర్మాణం.

సైన్-ఇన్ పేజీ

సాధారణ సైన్ ఇన్ ఫారమ్ కోసం అనుకూల ఫారమ్ లేఅవుట్ మరియు డిజైన్.

సమర్థించబడిన nav

సమర్థించబడిన లింక్‌లతో అనుకూల నావ్‌బార్‌ను సృష్టించండి. హెడ్ ​​అప్! మరీ సఫారీ ఫ్రెండ్లీ కాదు.

అంటుకునే ఫుటర్

కంటెంట్ దాని కంటే తక్కువగా ఉన్నప్పుడు వీక్షణపోర్ట్ దిగువన ఫుటర్‌ను అటాచ్ చేయండి.

నావ్‌బార్‌తో అంటుకునే ఫుటర్

ఎగువన స్థిర నావ్‌బార్‌తో వీక్షణపోర్ట్ దిగువన ఫుటర్‌ను అటాచ్ చేయండి.

ప్రయోగాలు

ప్రతిస్పందించని బూట్స్ట్రాప్

మా డాక్స్ ప్రకారం బూట్‌స్ట్రాప్ ప్రతిస్పందనను సులభంగా నిలిపివేయండి .

ఆఫ్-కాన్వాస్

బూట్‌స్ట్రాప్‌తో ఉపయోగించడానికి టోగుల్ చేయగల ఆఫ్-కాన్వాస్ నావిగేషన్ మెనుని రూపొందించండి.

ఉపకరణాలు

బూట్‌లింట్

బూట్‌లింట్ అనేది అధికారిక బూట్‌స్ట్రాప్ HTML లింటర్ సాధనం. బూట్‌స్ట్రాప్‌ను చాలా "వనిల్లా" ​​పద్ధతిలో ఉపయోగిస్తున్న వెబ్‌పేజీలలో అనేక సాధారణ HTML తప్పులను ఇది స్వయంచాలకంగా తనిఖీ చేస్తుంది. వెనిలా బూట్‌స్ట్రాప్ యొక్క భాగాలు/విడ్జెట్‌లు నిర్దిష్ట నిర్మాణాలకు అనుగుణంగా DOM యొక్క వాటి భాగాలు అవసరం. బూట్‌స్ట్రాప్ కాంపోనెంట్‌ల ఉదాహరణలు సరిగ్గా-నిర్మాణాత్మక HTMLని కలిగి ఉన్నాయని బూట్‌లింట్ తనిఖీ చేస్తుంది. మీ బూట్‌స్ట్రాప్ వెబ్ డెవలప్‌మెంట్ టూల్‌చెయిన్‌కు బూట్‌లింట్‌ని జోడించడాన్ని పరిగణించండి, తద్వారా సాధారణ తప్పులు ఏవీ మీ ప్రాజెక్ట్ అభివృద్ధిని మందగించవు.

సంఘం

బూట్‌స్ట్రాప్ అభివృద్ధిపై తాజాగా ఉండండి మరియు ఈ సహాయక వనరులతో సంఘాన్ని చేరుకోండి.

• అధికారిక బూట్‌స్ట్రాప్ బ్లాగ్‌ని చదవండి మరియు సభ్యత్వాన్ని పొందండి .
• ##bootstrap ఛానెల్‌లోనిirc.freenode.net సర్వర్‌లో IRCని ఉపయోగించి తోటి బూట్‌స్ట్రాపర్‌లతో చాట్ చేయండి .
• బూట్‌స్ట్రాప్ ఉపయోగించి సహాయం కోసం , ట్యాగ్‌ని ఉపయోగించి StackOverflowనిtwitter-bootstrap-3 అడగండి .
• డెవలపర్‌లు npm లేదా ఇలాంటి డెలివరీ మెకానిజమ్‌ల ద్వారా గరిష్టంగా కనుగొనగలిగేలా bootstrapపంపిణీ చేసేటప్పుడు బూట్‌స్ట్రాప్ యొక్క కార్యాచరణను సవరించే లేదా జోడించే ప్యాకేజీలపై కీవర్డ్‌ని ఉపయోగించాలి.
• బూట్‌స్ట్రాప్ ఎక్స్‌పోలో బూట్‌స్ట్రాప్‌తో నిర్మించే వ్యక్తుల స్ఫూర్తిదాయక ఉదాహరణలను కనుగొనండి .

మీరు తాజా గాసిప్ మరియు అద్భుతమైన సంగీత వీడియోల కోసం Twitterలో @getbootstrapని కూడా అనుసరించవచ్చు .

ప్రతిస్పందనను నిలిపివేస్తోంది

బూట్‌స్ట్రాప్ మీ పేజీలను వివిధ స్క్రీన్ పరిమాణాల కోసం స్వయంచాలకంగా మారుస్తుంది. ఈ లక్షణాన్ని ఎలా డిసేబుల్ చేయాలో ఇక్కడ ఉంది కాబట్టి మీ పేజీ ఈ విధంగా పని చేస్తుంది ప్రతిస్పందించని ఉదాహరణ .

పేజీ ప్రతిస్పందనను నిలిపివేయడానికి దశలు

1. CSS డాక్స్‌లో<meta> పేర్కొన్న వీక్షణపోర్ట్‌ను వదిలివేయండి
2. ప్రతి గ్రిడ్ టైర్ కోసం ఒకే వెడల్పుతో ఓవర్‌రైడ్ చేయండి, widthఉదాహరణకు ఇది డిఫాల్ట్ బూట్‌స్ట్రాప్ CSS తర్వాత వస్తుందని నిర్ధారించుకోండి. మీరు మీడియా ప్రశ్నలు లేదా కొన్ని సెలెక్టర్-ఫుతో ఐచ్ఛికంగా నివారించవచ్చు ..containerwidth: 970px !important;!important
3. నావ్‌బార్‌లను ఉపయోగిస్తుంటే, అన్ని నావ్‌బార్ కూలిపోతున్న మరియు విస్తరిస్తున్న ప్రవర్తనను తీసివేయండి.
4. గ్రిడ్ లేఅవుట్‌ల .col-xs-*కోసం, మీడియం/పెద్ద వాటికి అదనంగా లేదా వాటి స్థానంలో తరగతులను ఉపయోగించండి. చింతించకండి, అదనపు-చిన్న పరికరం గ్రిడ్ అన్ని రిజల్యూషన్‌లకు స్కేల్ చేస్తుంది.

IE8 కోసం మీకు ఇప్పటికీ Respond.js అవసరం (మా మీడియా ప్రశ్నలు ఇప్పటికీ ఉన్నాయి మరియు ప్రాసెస్ చేయవలసి ఉంటుంది). ఇది బూట్‌స్ట్రాప్ యొక్క "మొబైల్ సైట్" అంశాలను నిలిపివేస్తుంది.

ప్రతిస్పందనతో కూడిన బూట్‌స్ట్రాప్ టెంప్లేట్ నిలిపివేయబడింది

మేము ఈ దశలను ఒక ఉదాహరణకి వర్తింపజేసాము. అమలు చేయబడిన నిర్దిష్ట మార్పులను చూడటానికి దాని సోర్స్ కోడ్‌ను చదవండి.

ప్రతిస్పందించని ఉదాహరణను వీక్షించండి

బ్రౌజర్ మరియు పరికర మద్దతు

బూట్‌స్ట్రాప్ అనేది తాజా డెస్క్‌టాప్ మరియు మొబైల్ బ్రౌజర్‌లలో ఉత్తమంగా పని చేసేలా నిర్మించబడింది, అంటే పాత బ్రౌజర్‌లు పూర్తిగా ఫంక్షనల్‌గా ఉన్నప్పటికీ, నిర్దిష్ట భాగాల రెండరింగ్‌లను విభిన్నంగా ప్రదర్శించవచ్చు.

మద్దతు ఉన్న బ్రౌజర్‌లు

ప్రత్యేకంగా, మేము క్రింది బ్రౌజర్‌లు మరియు ప్లాట్‌ఫారమ్‌ల యొక్క తాజా వెర్షన్‌లకు మద్దతు ఇస్తున్నాము.

వెబ్‌కిట్, బ్లింక్ లేదా గెక్కో యొక్క తాజా వెర్షన్‌ను ఉపయోగించే ప్రత్యామ్నాయ బ్రౌజర్‌లు, నేరుగా లేదా ప్లాట్‌ఫారమ్ యొక్క వెబ్ వీక్షణ API ద్వారా, స్పష్టంగా మద్దతు ఇవ్వవు. అయినప్పటికీ, బూట్‌స్ట్రాప్ (చాలా సందర్భాలలో) ఈ బ్రౌజర్‌లలో కూడా సరిగ్గా ప్రదర్శించబడాలి మరియు పని చేయాలి. మరింత నిర్దిష్టమైన మద్దతు సమాచారం క్రింద అందించబడింది.

మొబైల్ పరికరాలు

సాధారణంగా చెప్పాలంటే, బూట్‌స్ట్రాప్ ప్రతి ప్రధాన ప్లాట్‌ఫారమ్ యొక్క డిఫాల్ట్ బ్రౌజర్‌ల యొక్క తాజా వెర్షన్‌లకు మద్దతు ఇస్తుంది. ప్రాక్సీ బ్రౌజర్‌లు (Opera Mini, Opera Mobile's Turbo mode, UC Browser Mini, Amazon Silk వంటివి) సపోర్ట్ చేయవని గమనించండి.

డెస్క్‌టాప్ బ్రౌజర్‌లు

అదేవిధంగా, చాలా డెస్క్‌టాప్ బ్రౌజర్‌ల యొక్క తాజా వెర్షన్‌లకు మద్దతు ఉంది.

Windowsలో, మేము Internet Explorer 8-11కి మద్దతిస్తాము .

Firefox కోసం, తాజా సాధారణ స్థిరమైన విడుదలతో పాటు, Firefox యొక్క తాజా ఎక్స్‌టెండెడ్ సపోర్ట్ రిలీజ్ (ESR) వెర్షన్‌కు కూడా మేము మద్దతు ఇస్తున్నాము.

అనధికారికంగా, బూట్‌స్ట్రాప్ Linux కోసం Chromium మరియు Chrome, Linux కోసం Firefox మరియు Internet Explorer 7, అలాగే Microsoft Edge వంటి వాటికి అధికారికంగా మద్దతివ్వనప్పటికీ తగినంతగా కనిపించాలి మరియు ప్రవర్తించాలి.

బూట్‌స్ట్రాప్‌తో పోరాడాల్సిన కొన్ని బ్రౌజర్ బగ్‌ల జాబితా కోసం, మా బ్రౌజర్ బగ్‌ల గోడను చూడండి .

ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 8 మరియు 9

Internet Explorer 8 మరియు 9 లకు కూడా మద్దతు ఉంది, అయితే, దయచేసి కొన్ని CSS3 లక్షణాలు మరియు HTML5 మూలకాలను ఈ బ్రౌజర్‌లు పూర్తిగా మద్దతివ్వడం లేదని గుర్తుంచుకోండి. అదనంగా, Internet Explorer 8కి మీడియా ప్రశ్న మద్దతును ప్రారంభించడానికి Respond.js ని ఉపయోగించడం అవసరం.

CSS3 మరియు HTML5 ఫీచర్‌ల బ్రౌజర్ మద్దతుపై వివరాల కోసం నేను ఉపయోగించవచ్చా... ని సందర్శించండి .

Internet Explorer 8 మరియు Respond.js

Internet Explorer 8 కోసం మీ అభివృద్ధి మరియు ఉత్పత్తి పరిసరాలలో Respond.jsని ఉపయోగిస్తున్నప్పుడు క్రింది హెచ్చరికల పట్ల జాగ్రత్త వహించండి.

Respond.js మరియు క్రాస్-డొమైన్ CSS

వేరే (ఉప)డొమైన్‌లో (ఉదాహరణకు, CDNలో) హోస్ట్ చేయబడిన CSSతో Respond.jsని ఉపయోగించడానికి కొంత అదనపు సెటప్ అవసరం. వివరాల కోసం Respond.js డాక్స్ చూడండి .

Respond.js మరియుfile://

file://బ్రౌజర్ భద్రతా నియమాల కారణంగా, ప్రోటోకాల్ (స్థానిక HTML ఫైల్‌ని తెరిచేటప్పుడు) ద్వారా వీక్షించిన పేజీలతో Respond.js పని చేయదు . IE8లో ప్రతిస్పందించే లక్షణాలను పరీక్షించడానికి, HTTP(S) ద్వారా మీ పేజీలను వీక్షించండి. వివరాల కోసం Respond.js డాక్స్ చూడండి .

Respond.js మరియు@import

ద్వారా సూచించబడిన CSSతో Respond.js పని చేయదు @import. ప్రత్యేకించి, కొన్ని Drupal కాన్ఫిగరేషన్‌లు ఉపయోగించబడతాయి @import. వివరాల కోసం Respond.js డాక్స్ చూడండి .

ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ 8 మరియు బాక్స్-సైజింగ్

IE8 , , , లేదా box-sizing: border-box;తో కలిపి ఉన్నప్పుడు పూర్తిగా మద్దతు ఇవ్వదు . ఆ కారణంగా, v3.0.1 నాటికి, మేము ఇకపై s లో ఉపయోగించము .min-widthmax-widthmin-heightmax-heightmax-width.container

Internet Explorer 8 మరియు @font-face

@font-faceIE8 తో కలిపి ఉన్నప్పుడు కొన్ని సమస్యలు ఉన్నాయి :before. బూట్‌స్ట్రాప్ దాని గ్లిఫికాన్‌లతో ఆ కలయికను ఉపయోగిస్తుంది. ఒక పేజీ కాష్ చేయబడి, విండోలో మౌస్ లేకుండా లోడ్ చేయబడితే (అంటే రిఫ్రెష్ బటన్‌ను నొక్కండి లేదా ఐఫ్రేమ్‌లో ఏదైనా లోడ్ చేయండి) అప్పుడు ఫాంట్ లోడ్ అయ్యే ముందు పేజీ రెండర్ అవుతుంది. పేజీ (శరీరం)పై హోవర్ చేయడం వల్ల కొన్ని చిహ్నాలు కనిపిస్తాయి మరియు మిగిలిన చిహ్నాలపై హోవర్ చేస్తే వాటిని కూడా చూపుతుంది. వివరాల కోసం సంచిక #13863 చూడండి .

IE అనుకూలత మోడ్‌లు

పాత Internet Explorer అనుకూలత మోడ్‌లలో బూట్‌స్ట్రాప్‌కు మద్దతు లేదు. మీరు IE కోసం తాజా రెండరింగ్ మోడ్‌ని ఉపయోగిస���తున్నారని నిర్ధారించుకోవడానికి, <meta>మీ పేజీలలో తగిన ట్యాగ్‌ని చేర్చడాన్ని పరిగణించండి:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

డీబగ్గింగ్ సాధనాలను తెరవడం ద్వారా డాక్యుమెంట్ మోడ్‌ను నిర్ధారించండి: F12"డాక్యుమెంట్ మోడ్"ని నొక్కండి మరియు తనిఖీ చేయండి.

ఈ ట్యాగ్ అన్ని బూట్‌స్ట్రాప్ డాక్యుమెంటేషన్‌లో చేర్చబడింది మరియు ఇంటర్నెట్ ఎక్స్‌ప్లోరర్ యొక్క ప్రతి మద్దతు ఉన్న సంస్కరణలో సాధ్యమైనంత ఉత్తమమైన రెండరింగ్‌ను నిర్ధారించడానికి ఉదాహరణలను అందిస్తుంది.

మరింత సమాచారం కోసం ఈ StackOverflow ప్రశ్నను చూడండి .

Windows 8 మరియు Windows Phone 8లో Internet Explorer 10

Internet Explorer 10 పరికర వెడల్పును వీక్షణపోర్ట్ వెడల్పు నుండి వేరు చేయదు మరియు బూట్‌స్ట్రాప్ యొక్క CSSలో మీడియా ప్రశ్నలను సరిగ్గా వర్తింపజేయదు. సాధారణంగా మీరు దీన్ని పరిష్కరించడానికి CSS యొక్క శీఘ్ర స్నిప్పెట్‌ని జోడించాలి:

@-ms-viewport       { width: device-width; }

అయినప్పటికీ, అప్‌డేట్ 3 (అకా GDR3) కంటే పాత Windows Phone 8 వెర్షన్‌లను అమలు చేసే పరికరాలకు ఇది పని చేయదు , ఎందుకంటే ఇటువంటి పరికరాలు ఇరుకైన "ఫోన్" వీక్షణకు బదులుగా డెస్క్‌టాప్ వీక్షణను ఎక్కువగా చూపేలా చేస్తుంది. దీన్ని పరిష్కరించడానికి, బగ్ చుట్టూ పని చేయడానికి మీరు క్రింది CSS మరియు JavaScriptని చేర్చాలి .

@-ms-viewport       { width: device-width; }
@-o-viewport        { width: device-width; }
@viewport           { width: device-width; }

// Copyright 2014-2015 Twitter, Inc.
// Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
if (navigator.userAgent.match(/IEMobile\/10\.0/)) {
  var msViewportStyle = document.createElement('style')
  msViewportStyle.appendChild(
    document.createTextNode(
      '@-ms-viewport{width:auto!important}'
    )
  )
  document.querySelector('head').appendChild(msViewportStyle)
}

మరింత సమాచారం మరియు వినియోగ మార్గదర్శకాల కోసం, Windows Phone 8 మరియు పరికరం వెడల్పు చదవండి .

ముందస్తుగా, మేము దీన్ని అన్ని బూట్‌స్ట్రాప్ డాక్యుమెంటేషన్‌లో మరియు ఉదాహరణల ప్రదర్శనగా చేర్చాము.

సఫారీ శాతం చుట్టుముట్టింది

.col-*-1OS X కోసం v7.1 మరియు iOS v8.0 కోసం Safariకి ముందు సఫారి వెర్షన్‌ల రెండరింగ్ ఇంజిన్ మా గ్రిడ్ క్లాస్‌లలో ఉపయోగించిన దశాంశ స్థానాల సంఖ్యతో కొంత సమస్య ఎదుర్కొంది . కాబట్టి మీరు 12 వ్యక్తిగత గ్రిడ్ నిలువు వరుసలను కలిగి ఉన్నట్లయితే, ఇతర నిలువు వరుసలతో పోలిస్తే అవి తక్కువగా ఉన్నాయని మీరు గమనించవచ్చు. Safari/iOS అప్‌గ్రేడ్ చేయడంతో పాటు, మీకు పరిష్కారాల కోసం కొన్ని ఎంపికలు ఉన్నాయి:

• .pull-rightహార్డ్-రైట్ అలైన్‌మెంట్ పొందడానికి మీ చివరి గ్రిడ్ నిలువు వరుసకు జోడించండి
• Safari కోసం ఖచ్చితమైన రౌండింగ్‌ను పొందడానికి మీ శాతాలను మాన్యువల్‌గా సర్దుబాటు చేయండి (మొదటి ఎంపిక కంటే చాలా కష్టం)

మోడల్‌లు, నావ్‌బార్‌లు మరియు వర్చువల్ కీబోర్డ్‌లు

ఓవర్‌ఫ్లో మరియు స్క్రోలింగ్

overflow: hiddenమూలకంపై మద్దతు <body>iOS మరియు Androidలో చాలా పరిమితంగా ఉంది. ఆ క్రమంలో, మీరు ఆ పరికరాల బ్రౌజర్‌లలో దేనిలోనైనా మోడల్ ఎగువన లేదా దిగువన స్క్రోల్ చేసినప్పుడు, <body>కంటెంట్ స్క్రోల్ చేయడం ప్రారంభమవుతుంది. Chrome బగ్ #175502 ( Chrome v40లో పరిష్కరించబడింది) మరియు WebKit బగ్ #153852 చూడండి .

iOS టెక్స్ట్ ఫీల్డ్‌లు మరియు స్క్రోలింగ్

<input>iOS 9.3 నాటికి, మోడల్ తెరిచి ఉన్నప్పుడు, స్క్రోల్ సంజ్ఞ యొక్క ప్రారంభ స్పర్శ టెక్స్ట్ లేదా a యొక్క సరిహద్దులో ఉంటే , మోడల్‌కు బదులుగా మోడల్ కింద ఉన్న కంటెంట్ స్క్రోల్ చేయబడుతుంది <textarea>. WebKit బగ్ #153856<body> చూడండి .

వర్చువల్ కీబోర్డులు

అలాగే, మీరు ఫిక్స్‌డ్ నావ్‌బార్‌ని ఉపయోగిస్తుంటే లేదా మోడల్‌లో ఇన్‌పుట్‌లను ఉపయోగిస్తుంటే, iOSకి రెండరింగ్ బగ్ ఉంది, అది వర్చువల్ కీబోర్డ్ ట్రిగ్గర్ చేయబడినప్పుడు స్థిర మూలకాల స్థానాన్ని నవీకరించదు. మాన్యువల్‌గా పొజిషనింగ్‌ని సరిచేయడానికి మీ ఎలిమెంట్‌లను మార్చడం position: absoluteలేదా ఫోకస్‌పై టైమర్‌ను ప్రారంభించడం దీని కోసం కొన్ని ప్రత్యామ్నాయాలు. ఇది బూట్‌స్ట్రాప్ ద్వారా నిర్వహించబడదు, కాబట్టి మీ అప్లికేషన్‌కు ఏ పరిష్కారం ఉత్తమమో నిర్ణయించుకోవడం మీ ఇష్టం.

Navbar డ్రాప్‌డౌన్‌లు

.dropdown-backdropz-ఇండెక్సింగ్ సంక్లిష్టత కారణంగా navలో iOSలో మూలకం ఉపయోగించబడదు . కాబట్టి, నావ్‌బార్‌లలో డ్రాప్‌డౌన్‌లను మూసివేయడానికి, మీరు నేరుగా డ్రాప్‌డౌన్ ఎలిమెంట్‌పై క్లిక్ చేయాలి (లేదా iOSలో క్లిక్ ఈవెంట్‌ను కాల్చే ఏదైనా ఇతర మూలకం ).

బ్రౌజర్ జూమ్ చేస్తోంది

పేజీ జూమింగ్ అనివార్యంగా బూట్‌స్ట్రాప్ మరియు వెబ్‌లోని మిగిలిన భాగాలలో రెండరింగ్ ఆర్టిఫ్యాక్ట్‌లను అందిస్తుంది. సమస్యను బట్టి, మేము దాన్ని పరిష్కరించగలము (మొదట శోధించండి మరియు అవసరమైతే సమస్యను తెరవండి). అయినప్పటికీ, మేము వీటిని తరచుగా విస్మరిస్తాము ఎందుకంటే వాటికి హ్యాకీ పరిష్కారాలు తప్ప వేరే ప్రత్యక్ష పరిష్కారం ఉండదు.

మొబైల్‌లో స్టికీ :hover_:focus

చాలా టచ్‌స్క్రీన్‌లలో నిజమైన హోవర్ చేయడం సాధ్యం కానప్పటికీ, చాలా మొబైల్ బ్రౌజర్‌లు హోవర్ సపోర్ట్‌ను అనుకరిస్తాయి మరియు :hover"స్టికీ" చేస్తాయి. మరో మాటలో చెప్పాలంటే, :hoverఒక మూలకాన్ని నొక్కిన తర్వాత శైలులు వర్తింపజేయడం ప్రారంభిస్తాయి మరియు వినియోగదారు వేరే మూలకాన్ని నొక్కిన తర్వాత మాత్రమే వర్తింపజేయడం ఆపివేస్తాయి. ఇది బూట్‌స్ట్రాప్ యొక్క :hoverస్థితులు అటువంటి బ్రౌజర్‌లలో అవాంఛనీయంగా "స్టక్" అయ్యేలా చేస్తుంది. కొన్ని మొబైల్ బ్రౌజర్‌లు కూడా :focusఅదే విధంగా అంటుకునేలా చేస్తాయి. అటువంటి స్టైల్‌లను పూర్తిగా తొలగించడం మినహా ఈ సమస్యలకు ప్రస్తుతం సులభమైన పరిష్కారం లేదు.

ప్రింటింగ్

కొన్ని ఆధునిక బ్రౌజర్‌లలో కూడా, ప్రింటింగ్ చమత్కారంగా ఉంటుంది.

ప్రత్యేకించి, Chrome v32 మరియు మార్జిన్ సెట్టింగ్‌లతో సంబంధం లేకుండా, వెబ్‌పేజీని ప్రింట్ చేస్తున్నప్పుడు మీడియా ప్రశ్నలను పరిష్కరించేటప్పుడు Chrome భౌతిక కాగితం పరిమాణం కంటే గణనీయంగా ఇరుకైన వీక్షణపోర్ట్ వెడల్పును ఉపయోగిస్తుంది. దీని ఫలితంగా బూట్‌స్ట్రాప్ యొక్క అదనపు-చిన్న గ్రిడ్ ముద్రించేటప్పుడు ఊహించని విధంగా సక్రియం చేయబడవచ్చు. కొన్ని వివరాల కోసం సంచిక #12078 మరియు Chrome బగ్ #273306 చూడండి. సూచించిన పరిష్కారాలు:

• అదనపు-చిన్న గ్రిడ్‌ని ఆలింగనం చేసుకోండి మరియు దాని కింద మీ పేజీ ఆమోదయోగ్యమైనదిగా ఉందని నిర్ధారించుకోండి.
• తక్కువ వేరియబుల్స్ యొక్క విలువలను అనుకూలీకరించండి, @screen-*తద్వారా మీ ప్రింటర్ పేపర్ అదనపు చిన్నది కంటే పెద్దదిగా పరిగణించబడుతుంది.
• ప్రింట్ మీడియా కోసం మాత్రమే గ్రిడ్ సైజు బ్రేక్‌పాయింట్‌లను మార్చడానికి అనుకూల మీడియా ప్రశ్నలను జోడించండి.

అలాగే, Safari v8.0 నాటికి, స్థిర-వెడల్పు .containerలు ముద్రించేటప్పుడు సఫారి అసాధారణంగా చిన్న ఫాంట్ పరిమాణాన్ని ఉపయోగించగలవు. మరిన్ని వివరాల కోసం #14868 మరియు WebKit బగ్ #138192 చూడండి. దీని కోసం ఒక సంభావ్య ప్రత్యామ్నాయం క్రింది CSSని జోడించడం:

@media print {
  .container {
    width: auto;
  }
}

ఆండ్రాయిడ్ స్టాక్ బ్రౌజర్

బాక్స్ వెలుపల, Android 4.1 (మరియు కొన్ని కొత్త విడుదలలు కూడా స్పష్టంగా) బ్రౌజర్ యాప్‌తో డిఫాల్ట్ వెబ్ బ్రౌజర్ ఎంపికగా (Chromeకి విరుద్ధంగా) రవాణా చేయబడతాయి. దురదృష్టవశాత్తూ, బ్రౌజర్ యాప్‌లో సాధారణంగా CSSతో చాలా బగ్‌లు మరియు అసమానతలు ఉన్నాయి.

మెనులను ఎంచుకోండి

మూలకాలపై <select>, Android స్టాక్ బ్రౌజర్ సైడ్ కంట్రోల్‌లను ప్రదర్శించదు border-radiusమరియు/లేదా borderవర్తింపజేస్తుంది. (వివరాల కోసం ఈ StackOverflow ప్రశ్నను చూడండి .) ఆక్షేపణీయ CSSని తీసివేయడానికి దిగువ కోడ్ స్నిప్పెట్‌ని ఉపయోగించండి మరియు <select>Android స్టాక్ బ్రౌజర్‌లో స్టైల్ చేయని మూలకం వలె రెండర్ చేయండి. వినియోగదారు ఏజెంట్ స్నిఫింగ్ Chrome, Safari మరియు Mozilla బ్రౌజర్‌లతో జోక్యాన్ని నివారిస్తుంది.

<script>
$(function () {
  var nua = navigator.userAgent
  var isAndroid = (nua.indexOf('Mozilla/5.0') > -1 && nua.indexOf('Android ') > -1 && nua.indexOf('AppleWebKit') > -1 && nua.indexOf('Chrome') === -1)
  if (isAndroid) {
    $('select.form-control').removeClass('form-control').css('width', '100%')
  }
})
</script>

ఒక ఉదాహరణ చూడాలనుకుంటున్నారా? ఈ JS బిన్ డెమోని చూడండి.

వాలిడేటర్లు

పాత మరియు బగ్గీ బ్రౌజర్‌లకు సాధ్యమైనంత ఉత్తమమైన అనుభవాన్ని అందించడానికి, బూట్‌స్ట్రాప్ అనేక ప్రదేశాలలో CSS బ్రౌజర్ హ్యాక్‌లను ఉపయోగిస్తుంది, బ్రౌజర్‌లలోని బగ్‌ల చుట్టూ పని చేయడానికి నిర్దిష్ట బ్రౌజర్ వెర్షన్‌లకు ప్రత్యేక CSSని లక్ష్యంగా చేసుకుంటుంది. ఈ హ్యాక్‌లు అర్థం చేసుకోగలిగే విధంగా CSS వ్యాలిడేటర్‌లు అవి చెల్లవని ఫిర్యాదు చేస్తాయి. రెండు ప్రదేశాలలో, మేము ఇంకా పూర్తిగా ప్రామాణికం కాని రక్తస్రావం-అంచు CSS లక్షణాలను కూడా ఉపయోగిస్తాము, కానీ ఇవి పూర్తిగా ప్రగతిశీల మెరుగుదల కోసం ఉపయోగించబడతాయి.

ఈ ధ్రువీకరణ హెచ్చరికలు ఆచరణలో పట్టింపు లేదు ఎందుకంటే మా CSS యొక్క నాన్-హ్యాకీ భాగం పూర్తిగా ధృవీకరించబడుతుంది మరియు హ్యాకీ భాగాలు నాన్-హ్యాకీ భాగం యొక్క సరైన పనితీరుకు అంతరాయం కలిగించవు, అందుకే మేము ఈ ప్రత్యేక హెచ్చరికలను ఎందుకు విస్మరిస్తాము.

మా HTML డాక్స్ కూడా ఒక నిర్దిష్ట Firefox బగ్ కోసం ఒక ప్రత్యామ్నాయాన్ని చేర్చడం వలన కొన్ని చిన్నవిషయమైన మరియు అసంగతమైన HTML ధ్రువీకరణ హెచ్చరికలను కలిగి ఉన్నాయి .

మూడవ పార్టీ మద్దతు

మేము అధికారికంగా ఏ థర్డ్ పార్టీ ప్లగిన్‌లు లేదా యాడ్-ఆన్‌లకు మద్దతు ఇవ్వనప్పటికీ, మీ ప్రాజెక్ట్‌లలో సంభావ్య సమస్యలను నివారించడంలో సహాయపడటానికి మేము కొన్ని ఉపయోగకరమైన సలహాలను అందిస్తాము.

పెట్టె పరిమాణం

Google మ్యాప్స్ మరియు Google అనుకూల శోధన ఇంజిన్‌తో సహా కొన్ని మూడవ పక్ష సాఫ్ట్‌వేర్ కారణంగా బూట్‌స్ట్రాప్‌తో వైరుధ్యం ఉంది * { box-sizing: border-box; }, ఇది paddingమూలకం యొక్క తుది గణిత వెడల్పును ప్రభావితం చేయదు. CSS ట్రిక్స్‌లో బాక్స్ మోడల్ మరియు సైజింగ్ గురించి మరింత తెలుసుకోండి .

సందర్భాన్ని బట్టి, మీరు అవసరమైన విధంగా భర్తీ చేయవచ్చు (ఎంపిక 1) లేదా మొత్తం ప్రాంతాల కోసం బాక్స్ పరిమాణాన్ని రీసెట్ చేయవచ్చు (ఎంపిక 2).

/* Box-sizing resets
 *
 * Reset individual elements or override regions to avoid conflicts due to
 * global box model settings of Bootstrap. Two options, individual overrides and
 * region resets, are available as plain CSS and uncompiled Less formats.
 */

/* Option 1A: Override a single element's box model via CSS */
.element {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 1B: Override a single element's box model by using a Bootstrap Less mixin */
.element {
  .box-sizing(content-box);
}

/* Option 2A: Reset an entire region via CSS */
.reset-box-sizing,
.reset-box-sizing *,
.reset-box-sizing *:before,
.reset-box-sizing *:after {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
}

/* Option 2B: Reset an entire region with a custom Less mixin */
.reset-box-sizing {
  &,
  *,
  *:before,
  *:after {
    .box-sizing(content-box);
  }
}
.element {
  .reset-box-sizing();
}

సౌలభ్యాన్ని

బూట్‌స్ట్రాప్ సాధారణ వెబ్ ప్రమాణాలను అనుసరిస్తుంది మరియు-కనిష్ట అదనపు శ్రమతో- AT ని ఉపయోగించే వారికి అందుబాటులో ఉండే సైట్‌లను సృష్టించడానికి ఉపయోగించవచ్చు .

నావిగేషన్‌ను దాటవేయి

మీ నావిగేషన్ చాలా లింక్‌లను కలిగి ఉంటే మరియు DOMలోని ప్రధాన కంటెంట్ కంటే ముందు వచ్చినట్లయితే Skip to main content, నావిగేషన్‌కు ముందు ఒక లింక్‌ను జోడించండి (సాధారణ వివరణ కోసం, స్కిప్ నావిగేషన్ లింక్‌లపై ఈ A11Y ప్రాజెక్ట్ కథనాన్ని చూడండి ). క్లాస్‌ని ఉపయోగించడం వలన .sr-onlyస్కిప్ లింక్‌ను దృశ్యమానంగా దాచిపెడుతుంది మరియు .sr-only-focusableఒకసారి ఫోకస్ చేసిన లింక్ కనిపించేలా క్లాస్ నిర్ధారిస్తుంది (కంటి చూపు ఉన్న కీబోర్డ్ వినియోగదారుల కోసం).

<body>
  <a href="#content" class="sr-only sr-only-focusable">Skip to main content</a>
  ...
  <div class="container" id="content" tabindex="-1">
    <!-- The main page content -->
  </div>
</body>

సమూహ శీర్షికలు

హెడ్డింగ్‌లను ( <h1>- <h6>) గూడు కట్టుకున్నప్పుడు, మీ ప్రాథమిక పత్రం హెడర్ ఒక అయి ఉండాలి <h1>. తదుపరి శీర్షికలు తార్కికంగా ఉపయోగించాలి <h2>- <h6>స్క్రీన్ రీడర్‌లు మీ పేజీల కోసం విషయాల పట్టికను నిర్మించగలవు.

HTML CodeSniffer మరియు Penn State's AccessAbility లో మరింత తెలుసుకోండి .

రంగు విరుద్ధంగా

ప్రస్తుతం, బూట్‌స్ట్రాప్‌లో అందుబాటులో ఉన్న కొన్ని డిఫాల్ట్ కలర్ కాంబినేషన్‌లు (వివిధ శైలి బటన్ తరగతులు, ప్రాథమిక కోడ్ బ్లాక్‌ల కోసం ఉపయోగించే కొన్ని కోడ్ హైలైట్ చేసే రంగులు , .bg-primary సందర్భోచిత నేపథ్య సహాయక తరగతి మరియు తెలుపు నేపథ్యంలో ఉపయోగించినప్పుడు డిఫాల్ట్ లింక్ రంగు వంటివి) తక్కువ కాంట్రాస్ట్ రేషియోని కలిగి ఉంటుంది ( సిఫార్సు చేసిన నిష్పత్తి 4.5:1 కంటే తక్కువ ). ఇది తక్కువ దృష్టితో లేదా రంగు అంధత్వం ఉన్న వినియోగదార��లకు సమస్యలను కలిగిస్తుంది. ఈ డిఫాల్ట్ రంగులు వాటి కాంట్రాస్ట్ మరియు స్పష్టతను పెంచడానికి సవరించవలసి ఉంటుంది.

అదనపు వనరులు

• ప్రాప్యత సమస్యలను గుర్తించడానికి "HTML కోడ్‌స్నిఫర్" బుక్‌మార్క్‌లెట్
• Chrome యొక్క యాక్సెసిబిలిటీ డెవలపర్ టూల్స్ పొడిగింపు
• రంగు కాంట్రాస్ట్ ఎనలైజర్
• A11Y ప్రాజెక్ట్
• MDN యాక్సెసిబిలిటీ డాక్యుమెంటేషన్

లైసెన్స్ FAQలు

బూట్‌స్ట్రాప్ MIT లైసెన్స్ క్రింద విడుదల చేయబడింది మరియు కాపీరైట్ 2016 Twitter. చిన్న చిన్న ముక్కలుగా ఉడకబెట్టి, ఈ క్రింది షరతులతో వర్ణించవచ్చు.

ఇది మీకు అవసరం:

• బూట్‌స్ట్రాప్ యొక్క CSS మరియు JavaScript ఫైల్‌లను మీరు మీ పనులలో ఉపయోగించినప్పుడు వాటిలో లైసెన్స్ మరియు కాపీరైట్ నోటీసును చేర్చండి

ఇది మిమ్మల్ని అనుమతిస్తుంది:

• వ్యక్తిగత, ప్రైవేట్, కంపెనీ అంతర్గత లేదా వాణిజ్య ప్రయోజనాల కోసం పూర్తిగా లేదా పాక్షికంగా బూట్‌స్ట్రాప్‌ను ఉచితంగా డౌన్‌లోడ్ చేయండి మరియు ఉపయోగించండి
• మీరు సృష్టించే ప్యాకేజీలు లేదా పంపిణీలలో బూట్‌స్ట్రాప్‌ని ఉపయోగించండి
• సోర్స్ కోడ్‌ని సవరించండి
• లైసెన్స్‌లో చేర్చని థర్డ్ పార్టీలకు బూట్‌స్ట్రాప్‌ను సవరించడానికి మరియు పంపిణీ చేయడానికి సబ్‌లైసెన్స్‌ను మంజూరు చేయండి

ఇది మిమ్మల్ని నిషేధిస్తుంది:

• బూట్‌స్ట్రాప్ వారంటీ లేకుండా అందించబడినందున నష్టాలకు రచయితలు మరియు లైసెన్స్ యజమానులను బాధ్యులను చేయండి
• బూట్‌స్ట్రాప్ సృష్టికర్తలు లేదా కాపీరైట్ హోల్డర్‌లను బాధ్యులుగా ఉంచండి
• సరైన అట్రిబ్యూషన్ లేకుండా బూట్‌స్ట్రాప్ యొక్క ఏదైనా భాగాన్ని పునఃపంపిణీ చేయండి
• Twitter మీ పంపిణీని ఆమోదిస్తుందని తెలిపే లేదా సూచించే విధంగా Twitter యాజమాన్యంలోని ఏవైనా మార్కులను ఉపయోగించండి
• మీరు సందేహాస్పదమైన Twitter సాఫ్ట్‌వేర్‌ను సృష్టించారని తెలిపే లేదా సూచించే విధంగా Twitter యాజమాన్యంలోని ఏవైనా మార్కులను ఉపయోగించండి

ఇది మీకు అవసరం లేదు:

• బూట్‌స్ట్రాప్ యొక్క మూలాన్ని లేదా దానికి మీరు చేసిన ఏవైనా సవరణలను చేర్చండి, మీరు దానిని కలిగి ఉన్న ఏదైనా పునఃపంపిణీలో సమీకరించవచ్చు
• బూట్‌స్ట్రాప్‌కి మీరు చేసే మార్పులను తిరిగి బూట్‌స్ట్రాప్ ప్రాజెక్ట్‌కు సమర్పించండి (అటువంటి అభిప్రాయం ప్రోత్సహించబడినప్పటికీ)

పూర్తి బూట్‌స్ట్రాప్ లైసెన్స్ మరింత సమాచారం కోసం ప్రాజెక్ట్ రిపోజిటరీలో ఉంది.

అనువాదాలు

సంఘం సభ్యులు బూట్‌స్ట్రాప్ డాక్యుమెంటేషన్‌ను వివిధ భాషల్లోకి అనువదించారు. ఎవరికీ అధికారికంగా మద్దతు లేదు మరియు అవి ఎల్లప్పుడూ తాజాగా ఉండకపోవచ్చు.

• బూట్‌స్ట్రాప్ 中文文档 (చైనీస్)
• బూట్‌స్ట్రాప్ 3 中文手冊 (చైనీస్ (సాంప్రదాయ))
• బూట్‌స్ట్రాప్ డాన్స్క్ (డానిష్)
• బూట్‌స్ట్రాప్ ఎన్ ఫ్రాంకైస్ (ఫ్రెంచ్)
• బూట్‌స్ట్రాప్ auf Deutsch (జర్మన్)
• ఇటాలియన్‌లో బూట్‌స్ట్రాప్ (ఇటాలియన్)
• బూట్‌స్ట్రాప్ 한국어 (కొరియన్)
• బూట్‌స్ట్రాప్ em Português do Brasil (బ్రెజిలియన్ పోర్చుగీస్)
• బూట్స్ట్రాప్ по-русски (రష్యన్)
• బూట్‌స్ట్రాప్ ఎన్ ఎస్పానోల్ (స్పానిష్)
• Türkçe Bootstrap (టర్కిష్)
• బూట్స్ట్రాప్ українською (ఉక్రేనియన్)
• బూట్‌స్ట్రాప్ బ్యాంగ్ టింగ్ వియాట్ (వియత్నామీస్)

మేము అనువాదాలను నిర్వహించడానికి లేదా హోస్ట్ చేయడానికి సహాయం చేయము, మేము వాటికి లింక్ చేస్తాము.

కొత్త లేదా మెరుగైన అనువాదాన్ని పూర్తి చేశారా? దీన్ని మా జాబితాకు జోడించడానికి పుల్ అభ్యర్థనను తెరవండి.