శక్తివంతమైన, విస్తరించదగిన మరియు ఫీచర్-ప్యాక్డ్ ఫ్రంటెండ్ టూల్‌కిట్. Sassతో రూపొందించండి మరియు అనుకూలీకరించండి, ముందుగా నిర్మించిన గ్రిడ్ సిస్టమ్ మరియు భాగాలను ఉపయోగించుకోండి మరియు శక్తివంతమైన JavaScript ప్లగిన్‌లతో ప్రాజెక్ట్‌లకు జీవం పోయండి.
ప్రస్తుతం v5.2.1 · డౌన్‌లోడ్ · v4.6.x డాక్స్ · అన్ని విడుదలలు
బూట్‌స్ట్రాప్‌తో బిల్డింగ్‌లోకి వెళ్లండి-CDNని ఉపయోగించండి, ప్యాకేజీ మేనేజర్ ద్వారా ఇన్‌స్టాల్ చేయండి లేదా సోర్స్ కోడ్‌ను డౌన్‌లోడ్ చేయండి.
npm, RubyGems, Composer లేదా Meteor ద్వారా బూట్స్ట్రాప్ యొక్క మూలం Sass మరియు JavaScript ఫైల్‌లను ఇన్‌స్టాల్ చేయండి. ప్యాకేజీ నిర్వహించబడే ఇన్‌స్టాల్‌లలో డాక్యుమెంటేషన్ లేదా మా పూర్తి బిల్డ్ స్క్రిప్ట్‌లు ఉండవు. npm ద్వారా బూట్స్ట్రాప్ ప్రాజెక్ట్‌ను త్వరగా రూపొందించడానికి మీరు మా npm టెంప్లేట్ రెపోను కూడా ఉపయోగించవచ్చు.
npm install [email protected]gem install bootstrap -v 5.2.1మరింత సమాచారం మరియు అదనపు ప్యాకేజీ నిర్వాహకుల కోసం మా ఇన్‌స్టాలేషన్ డాక్స్ చదవండి .
మీరు బూట్స్ట్రాప్ యొక్క కంపైల్ చేయబడిన CSS లేదా JSని మాత్రమే చేర్చవలసి వచ్చినప్పుడు, మీరు jsDelivr ని ఉపయోగించవచ్చు . మా సాధారణ శీఘ్ర ప్రారంభంతో దీన్ని చర్యలో చూడండి లేదా మీ తదుపరి ప్రాజెక్ట్‌ను జంప్‌స్టార్ట్ చేయడానికి ఉదాహరణలను బ్రౌజ్ చేయండి . మీరు పాప్పర్ మరియు మా JSని విడిగా చేర్చడాన్ని కూడా ఎంచుకోవచ్చు .
<!-- CSS only -->
<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">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
మా అధికారిక గైడ్‌లతో కొత్త ప్రాజెక్ట్‌లో బూట్స్ట్రాప్ యొక్క సోర్స్ ఫైల్‌లను చేర్చడంపై ముందుకు సాగండి.
బూట్స్ట్రాప్ మాడ్యులర్ మరియు అనుకూలీకరించదగిన ఆర్కిటెక్చర్ కోసం సాస్‌ను ఉపయోగిస్తుంది. మీకు అవసరమైన భాగాలను మాత్రమే దిగుమతి చేసుకోండి, గ్రేడియంట్స్ మరియు షాడోస్ వంటి గ్లోబల్ ఎంపికలను ప్రారంభించండి మరియు మా వేరియబుల్స్, మ్యాప్‌లు, ఫంక్షన్‌లు మరియు మిక్సిన్‌లతో మీ స్వంత CSSని వ్రాయండి.
ఒక స్టైల్‌షీట్‌ను దిగుమతి చేయండి మరియు మీరు మా CSS యొక్క ప్రతి ఫీచర్‌తో రేసుల్లో పాల్గొంటారు.
// Variable overrides first
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Then import Bootstrap
@import "../node_modules/bootstrap/scss/bootstrap";
మా గ్లోబల్ సాస్ ఎంపికల గురించి మరింత తెలుసుకోండి .
బూట్‌స్ట్రాప్‌ను అనుకూలీకరించడానికి సులభమైన మార్గం—మీకు అవసరమైన CSSని మాత్రమే చేర్చండి.
// Functions first
@import "../node_modules/bootstrap/scss/functions";
// Variable overrides second
$primary: #900;
$enable-shadows: true;
$prefix: "mo-";
// Required Bootstrap imports
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";
// Optional components
@import "../node_modules/bootstrap/scss/utilities";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
@import "../node_modules/bootstrap/scss/utilities/api";
Sassతో బూట్స్ట్రాప్ ఉపయోగించడం గురించి మరింత తెలుసుకోండి .
గ్లోబల్ థీమ్ స్టైల్స్, వ్యక్తిగత భాగాలు మరియు యుటిలిటీల కోసం CSS వేరియబుల్స్‌ను మెరుగ్గా ఉపయోగించుకోవడానికి బూట్స్ట్రాప్ 5 ప్రతి విడుదలతో అభివృద్ధి చెందుతోంది. మేము రంగులు, ఫాంట్ స్టైల్‌లు మరియు మరిన్నింటి కోసం డజన్ల కొద్దీ వేరియబుల్స్‌ని :rootఎక్కడైనా ఉపయోగించడానికి ఒక స్థాయిలో అందిస్తాము. భాగాలు మరియు యుటిలిటీలపై, CSS వేరియబుల్స్ సంబంధిత తరగతికి స్కోప్ చేయబడతాయి మరియు సులభంగా సవరించబడతాయి.
కొత్త శైలులను వ్రాయడానికి మా గ్లోబల్ :rootవేరియబుల్స్‌లో దేనినైనా ఉపయోగించండి. CSS వేరియబుల్స్ var(--bs-variableName)సింటాక్స్‌ని ఉపయోగిస్తాయి మరియు పిల్లల మూలకాల ద్వారా వారసత్వంగా పొందవచ్చు.
.component {
color: var(--bs-gray-800);
background-color: var(--bs-gray-100);
border: 1px solid var(--bs-gray-200);
border-radius: .25rem;
}
.component-header {
color: var(--bs-purple);
}మీకు నచ్చిన విధంగా బూట్‌స్ట్రాప్‌ను అనుకూలీకరించడానికి గ్లోబల్, కాంపోనెంట్ లేదా యుటిలిటీ క్లాస్ వేరియబుల్‌లను భర్తీ చేయండి. ప్రతి నియమాన్ని మళ్లీ ప్రకటించాల్సిన అవసరం లేదు, కేవలం కొత్త వేరియబుల్ విలువ మాత్రమే.
body {
--bs-body-font-family: var(--bs-font-monospace);
--bs-body-line-height: 1.4;
--bs-body-bg: var(--bs-gray-100);
}
.table {
--bs-table-color: var(--bs-gray-600);
--bs-table-bg: var(--bs-gray-100);
--bs-table-border-color: transparent;
}బూట్స్ట్రాప్ 5లో కొత్తది, మా యుటిలిటీలు ఇప్పుడు మా యుటిలిటీ API ద్వారా రూపొందించబడ్డాయి . మేము దీన్ని ఫీచర్-ప్యాక్డ్ సాస్ మ్యాప్‌గా రూపొందించాము, దానిని త్వరగా మరియు సులభంగా అనుకూలీకరించవచ్చు. ఏదైనా యుటిలిటీ తరగతులను జోడించడం, తీసివేయడం లేదా సవరించడం అంత సులభం కాదు. యుటిలిటీలను ప్రతిస్పందించేలా చేయండి, సూడో-క్లాస్ వేరియంట్‌లను జోడించండి మరియు వాటికి అనుకూల పేర్లను ఇవ్వండి.
యుటిలిటీల గురించి మరింత తెలుసుకోండి అనుకూలీకరించిన భాగాలను అన్వేషించండి
// Create and extend utilities with the Utility API
@import "bootstrap/scss/bootstrap";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor,
responsive: true,
values: auto pointer grab,
)
)
);
టోగుల్ చేయగల దాచిన అంశాలు, మోడల్‌లు మరియు ఆఫ్కాన్వాస్ మెనులు, పాప్‌ఓవర్‌లు మరియు టూల్‌టిప్‌లు మరియు మరిన్నింటిని సులభంగా జోడించండి-అన్నీ j క్వెరీ లేకుండా. బూట్‌స్ట్రాప్‌లోని జావాస్క్రిప్ట్ HTML-మొదటిది, అంటే ప్లగిన్‌లను జోడించడం అనేది dataలక్షణాలను జోడించినంత సులభం. మరింత నియంత్రణ కావాలా? వ్యక్తిగత ప్లగిన్‌లను ప్రోగ్రామాటిక్‌గా చేర్చండి.
మీరు HTML వ్రాయగలిగినప్పుడు మరింత జావాస్క్రిప్ట్ ఎందుకు వ్రాయాలి? dataబూట్స్ట్రాప్ యొక్క దాదాపు అన్ని జావాస్క్రిప్ట్ ప్లగిన్‌లు ఫస్ట్-క్లాస్ డేటా APIని కలిగి ఉంటాయి, ఇది కేవలం లక్షణాలను జోడించడం ద్వారా జావాస్క్రిప్ట్‌ను ఉపయోగించడానికి మిమ్మల్ని అనుమతిస్తుంది .
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
<li><a class="dropdown-item" href="#">Dropdown item</a></li>
</ul>
</div>
మాడ్యుల్‌లుగా మరియు ప్రోగ్రామాటిక్ APIని ఉపయోగించడం గురించి మా JavaScript గురించి మరింత తెలుసుకోండి .
బూట్స్ట్రాప్ డజను ప్లగిన్‌లను మీరు ఏ ప్రాజెక్ట్‌లోనైనా వదలవచ్చు. వాటిని ఒకేసారి వదలండి లేదా మీకు అవసరమైన వాటిని ఎంచుకోండి.
బూట్స్ట్రాప్ చిహ్నాలు 1,500 కంటే ఎక్కువ గ్లిఫ్‌లను కలిగి ఉన్న ఓపెన్ సోర్స్ SVG ఐకాన్ లైబ్రరీ, ప్రతి విడుదలకు మరిన్ని జోడించబడ్డాయి. మీరు బూట్‌స్ట్రాప్‌ని ఉపయోగించినా లేదా ఉపయోగించకపోయినా, ఏదైనా ప్రాజెక్ట్‌లో పని చేయడానికి అవి రూపొందించబడ్డాయి. వాటిని SVGలు లేదా ఐకాన్ ఫాంట్‌లుగా ఉపయోగించండి-రెండు ఎంపికలు మీకు వెక్టార్ స్కేలింగ్ మరియు CSS ద్వారా సులభమైన అనుకూలీకరణను అందిస్తాయి.
అధికారిక బూట్స్ట్రాప్ థీమ్‌ల మార్కెట్‌ప్లేస్ నుండి ప్రీమియం థీమ్‌లతో బూట్‌స్ట్రాప్‌ను తదుపరి స్థాయికి తీసుకెళ్లండి . థీమ్‌లు బూట్‌స్ట్రాప్‌లో వాటి స్వంత పొడిగించిన ఫ్రేమ్‌వర్క్‌లుగా నిర్మించబడ్డాయి, కొత్త భాగాలు మరియు ప్లగిన్‌లు, డాక్యుమెంటేషన్ మరియు శక్తివంతమైన బిల్డ్ టూల్స్‌తో సమృద్ధిగా ఉంటాయి.
