Source

పరిచయం

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

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

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

CSS

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

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

JS

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

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

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

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

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

JavaScript అవసరమయ్యే భాగాలను చూపు
  • తొలగించడం కోసం హెచ్చరికలు
  • రాష్ట్రాలు మరియు చెక్‌బాక్స్/రేడియో కార్యాచరణను టోగుల్ చేయడం కోసం బటన్‌లు
  • అన్ని స్లయిడ్ ప్రవర్తనలు, నియంత్రణలు మరియు సూచికల కోసం రంగులరాట్నం
  • కంటెంట్ దృశ్యమానతను టోగుల్ చేయడం కోసం కుదించు
  • ప్రదర్శించడం మరియు ఉంచడం కోసం డ్రాప్‌డౌన్‌లు ( Popper.js కూడా అవసరం )
  • ప్రవర్తనను ప్రదర్శించడం, ఉంచడం మరియు స్క్రోల్ చేయడం కోసం నమూనాలు
  • ప్రతిస్పందించే ప్రవర్తనను అమలు చేయడానికి మా కుదించు ప్లగ్‌ఇన్‌ని విస్తరించడానికి Navbar
  • ప్రదర్శించడం మరియు ఉంచడం కోసం టూల్‌టిప్‌లు మరియు పాపవర్‌లు ( Popper.js కూడా అవసరం )
  • స్క్రోల్ ప్రవర్తన మరియు నావిగేషన్ నవీకరణల కోసం 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-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

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

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" 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 మూలకాలకు కొంచెం ఎక్కువ అభిప్రాయ రీసెట్‌లను అందించేటప్పుడు బ్రౌజర్‌లు మరియు పరికరాల్లో అసమానతలను సరిచేయడానికి రీబూట్‌ని ఉపయోగిస్తాము .

సంఘం

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

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

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