బూట్‌స్ట్రాప్‌తో ప్రారంభించండి

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

ఈ పేజీలో

త్వరగా ప్రారంభించు

బూట్‌స్ట్రాప్ యొక్క ఉత్పత్తికి సిద్ధంగా ఉన్న CSS మరియు జావాస్క్రిప్ట్‌లను CDN ద్వారా ఎటువంటి నిర్మాణ దశలు అవసరం లేకుండా చేర్చడం ద్వారా ప్రారంభించండి. దీన్ని ఈ బూట్‌స్ట్రాప్ కోడ్‌పెన్ డెమోతో ఆచరణలో చూడండి .

index.htmlమీ ప్రాజెక్ట్ రూట్‌లో కొత్త ఫైల్‌ను సృష్టించండి . మొబైల్ పరికరాలలో సరైన ప్రతిస్పందించే ప్రవర్తన<meta name="viewport"> కోసం ట్యాగ్‌ని కూడా చేర్చండి .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

బూట్‌స్ట్రాప్ యొక్క CSS మరియు JSలను చేర్చండి. మూసివేసే ముందు మా CSS కోసం ట్యాగ్‌ని మరియు <link>మా JavaScript బండిల్‌కు ట్యాగ్‌ని (డ్రాప్‌డౌన్‌లు, పాపర్స్ మరియు టూల్‌టిప్‌లను ఉంచడానికి పాపర్‌తో సహా) ఉంచండి . మా CDN లింక్‌ల గురించి మరింత తెలుసుకోండి .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

మీరు పాప్పర్ మరియు మా JSని కూడా విడిగా చేర్చవచ్చు. మీరు డ్రాప్‌డౌన్‌లు, పాప్‌ఓవర్‌లు లేదా టూల్‌టిప్‌లను ఉపయోగించకూడదనుకుంటే, పాపర్‌ని చేర్చకుండా కొన్ని కిలోబైట్‌లను ఆదా చేసుకోండి.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN లింక్‌లు

సూచనగా, మా ప్రాథమిక CDN లింక్‌లు ఇక్కడ ఉన్నాయి.

వివరణ	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

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

తదుపరి దశలు

బూట్‌స్ట్రాప్ ఉపయోగించే కొన్ని ముఖ్యమైన గ్లోబల్ ఎన్విరాన్‌మెంట్ సెట్టింగ్‌ల గురించి కొంచెం చదవండి .
మా కంటెంట్‌ల విభాగంలో బూట్‌స్ట్రాప్‌లో ఏమి చేర్చబడిందో మరియు దిగువ జావాస్క్రిప్ట్ అవసరమయ్యే భాగాల జాబితాను చదవండి .
మరికొంత శక్తి కావాలా? ప్యాకేజీ మేనేజర్ ద్వారా సోర్స్ ఫైల్‌లను చేర్చడం ద్వారా బూట్‌స్ట్రాప్‌తో నిర్మించడాన్ని పరిగణించండి .
బూట్‌స్ట్రాప్‌ని మాడ్యూల్‌గా ఉపయోగించాలనుకుంటున్నారా <script type="module">? దయచేసి మా బూట్‌స్ట్రాప్‌ను మాడ్యూల్ విభాగంగా ఉపయోగిస్తున్నాము.

JS భాగాలు

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

JavaScript అవసరమయ్యే భాగాలను చూపు

తొలగించడం కోసం హెచ్చరికలు
రాష్ట్రాలు మరియు చెక్‌బాక్స్/రేడియో కార్యాచరణను టోగుల్ చేయడం కోసం బటన్‌లు
అన్ని స్లయిడ్ ప్రవర్తనలు, నియంత్రణలు మరియు సూచికల కోసం రంగులరాట్నం
కంటెంట్ దృశ్యమానతను టోగుల్ చేయడం కోసం కుదించు
ప్రదర్శించడం మరియు ఉంచడం కోసం డ్రాప్‌డౌన్‌లు ( పాపర్ కూడా అవసరం )
ప్రవర్తనను ప్రదర్శించడం, ఉంచడం మరియు స్క్రోల్ చేయడం కోసం నమూనాలు
ప్రతిస్పందించే ప్రవర్తనలను అమలు చేయడానికి మా కుదించు మరియు ఆఫ్‌కాన్వాస్ ప్లగిన్‌లను విస్తరించడానికి Navbar
కంటెంట్ పేన్‌లను టోగుల్ చేయడానికి ట్యాబ్ ప్లగిన్‌తో నవ్స్
ప్రదర్శన, స్థానాలు మరియు స్క్రోల్ ప్రవర్తన కోసం ఆఫ్కాన్వాస్‌లు
స్క్రోల్ ప్రవర్తన మరియు నావిగేషన్ నవీకరణల కోసం Scrollspy
ప్రదర్శించడం మరియు తీసివేయడం కోసం టోస్ట్‌లు
ప్రదర్శించడం మరియు ఉంచడం కోసం టూల్‌టిప్‌లు మరియు పాప్‌ఓవర్‌లు ( పాపర్ కూడా అవసరం )

ముఖ్యమైన గ్లోబల్స్

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

HTML5 సిద్ధాంతం

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

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

ప్రతిస్పందించే మెటా ట్యాగ్

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

<meta name="viewport" content="width=device-width, initial-scale=1">

మీరు శీఘ్ర ప్రారంభంలో చర్యలో దీనికి ఉదాహరణను చూడవచ్చు .

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

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

అరుదైన సందర్భంలో మీరు దానిని భర్తీ చేయవలసి ఉంటుంది, ఈ క్రింది వాటిని ఉపయోగించండి:

.selector-for-some-widget {
  box-sizing: content-box;
}

పైన పేర్కొన్న స్నిప్పెట్‌తో, సమూహ మూలకాలు—ద్వారా రూపొందించబడిన కంటెంట్‌తో సహా ::beforeమరియు —అన్నీ దాని కోసం ::afterపేర్కొన్న వాటిని వారసత్వంగా పొందుతాయి .box-sizing.selector-for-some-widget

CSS ట్రిక్స్‌లో బాక్స్ మోడల్ మరియు సైజింగ్ గురించి మరింత తెలుసుకోండి .

రీబూట్ చేయండి

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

సంఘం

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

అధికారిక బూట్‌స్ట్రాప్ బ్లాగ్‌ని చదవండి మరియు సభ్యత్వాన్ని పొందండి .
మా GitHub చర్చలను అడగండి మరియు అన్వేషించండి .
IRCలో తోటి బూట్‌స్ట్రాపర్‌లతో చాట్ చేయండి. irc.libera.chatసర్వర్‌లో, ఛానెల్‌లో #bootstrap.
bootstrap-5అమలు సహాయాన్ని స్టాక్ ఓవర్‌ఫ్లో (ట్యాగ్ చేయబడింది ) వద్ద కనుగొనవచ్చు .
డెవలపర్‌లు npm లేదా ఇలాంటి డెలివరీ మెకానిజమ్‌ల bootstrapద్వారా గరిష్ట ఆవిష్కరణ కోసం పంపిణీ చేసేటప్పుడు బూట్‌స్ట్రాప్ యొక్క కార్యాచరణను సవరించే లేదా జోడించే ప్యాకేజీలపై కీవర్డ్‌ని ఉపయోగించాలి.

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