పరిచయం

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

JS

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

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

కట్ట

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

<script src="https://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

వేరు

మీరు ప్రత్యేక స్క్రిప్ట్‌ల పరిష్కారంతో వెళ్లాలని నిర్ణయించుకుంటే, ముందుగా Popper.js, ఆపై మా JavaScript ప్లగిన్‌లు రావాలి.

<script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>

భాగాలు

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

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-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 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://code.jquery.com/jquery-3.5.1.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-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

    <!-- Option 2: jQuery, Popper.js, and Bootstrap JS
    <script src="https://code.jquery.com/jquery-3.5.1.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-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" 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ని కూడా అనుసరించవచ్చు .