in English

పరిచయం

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

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

మీ ప్రాజెక్ట్‌కి త్వరగా బూట్‌స్ట్రాప్‌ని జోడించాలనుకుంటున్నారా? jsDelivr, ఉచిత ఓపెన్ సోర్స్ CDNని ఉపయోగించండి. ప్యాకేజీ మేనేజర్‌ని ఉపయోగిస్తున్నారా లేదా సోర్స్ ఫైల్‌లను డౌన్‌లోడ్ చేయాలా? డౌన్‌లోడ్‌ల పేజీకి వెళ్లండి .

CSS

మా CSSని లోడ్ చేయడానికి అన్ని ఇతర స్టైల్‌షీట్‌ల కంటే ముందుగా <link>మీ స్టైల్‌షీట్‌ను కాపీ-పేస్ట్ చేయండి.<head>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

JS

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

వాటిని ఎనేబుల్ చేయడానికి, ముగింపు ట్యాగ్‌కు ముందు, మీ పేజీల చివరలో కింది వాటిలో ఒకదాన్ని<script> ఉంచండి . </body>j క్వెరీ ముందుగా రావాలి, తర్వాత పాపర్, ఆపై మా జావాస్క్రిప్ట్ ప్లగిన్‌లు.

కట్ట

మా రెండు బండిల్‌లలో ఒకదానితో ప్రతి బూట్‌స్ట్రాప్ జావాస్క్రిప్ట్ ప్లగిన్‌ను చేర్చండి. రెండూ bootstrap.bundle.jsమరియు మా టూల్‌టిప్‌లు మరియు పాపవర్‌లbootstrap.bundle.min.js కోసం పాపర్‌ని చేర్చండి , కానీ j క్వెరీ కాదు . ముందుగా j క్వెరీని చేర్చండి, ఆపై బూట్‌స్ట్రాప్ జావాస్క్రిప్ట్ బండిల్‌ను చేర్చండి. బూట్‌స్ట్రాప్‌లో చేర్చబడిన వాటి గురించి మరింత సమాచారం కోసం, దయచేసి మా కంటెంట్‌ల విభాగాన్ని చూడండి.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

వేరు

మీరు ప్రత్యేక స్క్రిప్ట్‌ల సొల్యూషన్‌తో వెళ్లాలని నిర్ణయించుకుంటే, పాప్పర్ తప్పనిసరిగా ముందుగా రావాలి (మీరు టూల్‌టిప్‌లు లేదా పాపవర్‌లను ఉపయోగిస్తుంటే), ఆపై మా జావాస్క్రిప్ట్ ప్లగిన్‌లు.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>

భాగాలు

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

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

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

మీ పేజీలను తాజా డిజైన్ మరియు డెవలప్‌మెంట్ ప్రమాణాలతో సెటప్ చేశారని నిర్ధారించుకోండి. అంటే HTML5 డాక్టైప్‌ని ఉపయోగించడం మరియు సరైన ప్రతిస్పందించే ప్రవర్తనల కోసం వీక్షణపోర్ట్ మెటా ట్యాగ్‌ని ఉపయోగించడం. అన్నింటినీ కలిపి ఉంచండి మరియు మీ పేజీలు ఇలా ఉండాలి:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-+sLIOodYLS7CIrQpBjl+C7nPvqq+FbNUBDunl/OZv93DB7Ln/533i8e/mZXLi/P+" crossorigin="anonymous"></script>
    -->
  </body>
</html>

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

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

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

HTML5 సిద్ధాంతం

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

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

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

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

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

మీరు స్టార్టర్ టెంప్లేట్‌లో చర్యలో దీనికి ఉదాహరణను చూడవచ్చు .

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

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

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

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

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

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

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

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

సంఘం

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

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

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

CSPలు మరియు ఎంబెడెడ్ SVGలు

అనేక బూట్‌స్ట్రాప్ కాంపోనెంట్‌లు మా CSSలో పొందుపరిచిన SVGలను బ్రౌజర్‌లు మరియు పరికరాలలో స్థిరంగా మరియు సులభంగా స్టైల్ చేయడానికి కలిగి ఉంటాయి. మరింత కఠినమైన CSP కాన్ఫిగరేషన్‌లు ఉన్న సంస్థల కోసం , మేము మా పొందుపరిచిన SVGల యొక్క అన్ని సందర్భాలను డాక్యుమెంట్ చేసాము (ఇవన్నీ ద్వారా వర్తింపజేయబడతాయి background-image) కాబట్టి మీరు మీ ఎంపికలను మరింత క్షుణ్ణంగా సమీక్షించవచ్చు.

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