හැදින්වීම

jsDelivr සහ අච්චු ආරම්භක පිටුවක් සමඟ ප්‍රතිචාරාත්මක, ජංගම-පළමු අඩවි ගොඩනැගීම සඳහා ලොව ජනප්‍රියම රාමුව වන Bootstrap සමඟින් ආරම්භ කරන්න.

මෙම පිටුවේ

ඉක්මන් ආරම්භය

ඔබේ ව්‍යාපෘතියට ඉක්මනින් Bootstrap එක් කිරීමට බලාපොරොත්තු වෙනවාද? නොමිලේ විවෘත කේත CDN එකක් වන jsDelivr භාවිතා කරන්න. පැකේජ කළමණාකරුවෙකු භාවිතා කරන්නේද නැතහොත් මූලාශ්‍ර ගොනු බාගත කිරීමට අවශ්‍යද? බාගැනීම් පිටුවට යන්න .

CSS

අපගේ CSS පූරණය කිරීමට අනෙකුත් සියලුම මෝස්තර පත්‍ර <link>වලට පෙර ඔබේ මෝස්තර පත්‍රය පිටපත් කර අලවන්න .<head>

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

JS

අපගේ බොහෝ සංරචක ක්‍රියාත්මක වීමට JavaScript භාවිතා කිරීම අවශ්‍ය වේ. විශේෂයෙන්ම, ඔවුන්ට අපගේම JavaScript ප්ලගීන සහ Popper අවශ්‍ය වේ. ඒවා සක්‍රීය කිරීම සඳහා, වසා දැමීමේ ටැගයට පෙර, පහත දැක්වෙන <script>s වලින් එකක් ඔබේ පිටුවේ අවසානයට ආසන්නව තබන්න .</body>

බණ්ඩලය

සෑම බූට්ස්ට්‍රැප් ජාවාස්ක්‍රිප්ට් ප්ලගිනයක් සහ පරායත්තතාවයක් අපගේ මිටි දෙකෙන් එකක් ඇතුළත් කරන්න. දෙකම bootstrap.bundle.jsසහ අපගේ මෙවලම් ඉඟි සහ popovers සඳහා Popperbootstrap.bundle.min.js ඇතුළත් කරන්න. Bootstrap හි ඇතුළත් කර ඇති දේ පිළිබඳ වැඩි විස්තර සඳහා, කරුණාකර අපගේ අන්තර්ගත කොටස බලන්න.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

වෙනම

ඔබ වෙනම ස්ක්‍රිප්ට් විසඳුම සමඟ යාමට තීරණය කරන්නේ නම්, Popper පළමුව පැමිණිය යුතුය (ඔබ මෙවලම් ඉඟි හෝ popovers භාවිතා කරන්නේ නම්), ඉන්පසු අපගේ JavaScript ප්ලගීන.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

මොඩියුල

ඔබ භාවිතා කරන්නේ නම් <script type="module">, කරුණාකර මොඩියුල අංශයක් ලෙස Bootstrap භාවිතා කිරීම වෙත යොමු වන්න.

සංරචක

අපගේ ජාවාස්ක්‍රිප්ට් සහ පොපර් පැහැදිලිව අවශ්‍ය කුමන සංරචක සඳහා කුතුහලයෙන් සිටිනවාද? පහත සංදර්ශන සංරචක සබැඳිය ක්ලික් කරන්න. සාමාන්‍ය පිටු ව්‍යුහය ගැන ඔබට කිසිසේත්ම විශ්වාස නැත්නම්, උදාහරණ පිටු අච්චුවක් සඳහා කියවන්න.

JavaScript අවශ්‍ය සංරචක පෙන්වන්න

ඉවත් කිරීම සඳහා ඇඟවීම්
ටොගල් ප්‍රාන්ත සහ පිරික්සුම් පෙට්ටිය/ගුවන්විදුලි ක්‍රියාකාරිත්වය සඳහා බොත්තම්
සියලුම විනිවිදක හැසිරීම්, පාලන සහ දර්ශක සඳහා කැරොසල්
අන්තර්ගතයේ දෘශ්‍යතාව ටොගල් කිරීම ස��හා හකුළන්න
ප්‍රදර්ශනය සහ ස්ථානගත කිරීම සඳහා පතන ( පොපර් ද අවශ්‍ය වේ )
හැසිරීම, ස්ථානගත කිරීම සහ අනුචලනය කිරීම සඳහා ආකෘති
ප්‍රතිචාරාත්මක හැසිරීම ක්‍රියාවට නැංවීම සඳහා අපගේ හැකිලීම ප්ලගිනය දිගු කිරීම සඳහා Navbar
සංදර්ශන, ස්ථානගත, සහ අනුචලන හැසිරීම සඳහා Offcanvases
ප්රදර්ශනය කිරීම සහ ඉවත් කිරීම සඳහා ටෝස්ට්
ප්‍රදර්ශනය සහ ස්ථානගත කිරීම සඳහා මෙවලම් ඉඟි සහ පොපෝවර් ( පොපර් ද අවශ්‍ය වේ )
අනුචලන හැසිරීම සහ සංචාලන යාවත්කාලීන සඳහා Scrollspy

ආරම්භක අච්චුව

ඔබගේ පිටු නවතම සැලසුම් සහ සංවර්ධන ප්‍රමිතීන් සමඟ සකසා ඇති බවට වග බලා ගන්න. ඒ කියන්නේ HTML5 doctype භාවිතා කිරීම සහ නිසි ප්‍රතිචාරාත්මක හැසිරීම් සඳහා viewport meta tag එකක් ඇතුළත් කිරීමයි. ඒ සියල්ල එකට එකතු කරන්න, ඔබේ පිටු මේ වගේ විය යුතුය:

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

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

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

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

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
    -->
  </body>
</html>

මීළඟ පියවර සඳහා, ඔබේ වෙබ් අඩවියේ අන්තර්ගතය සහ සංරචක තැබීම ආරම්භ කිරීමට පිරිසැලසුම් ලේඛන හෝ අපගේ නිල උදාහරණ වෙත පිවිසෙන්න.

වැදගත් ගෝලීය

Bootstrap භාවිතා කරන විට ඔබ දැනුවත් විය යුතු වැදගත් ගෝලීය මෝස්තර සහ සැකසුම් අතලොස්සක් භාවිතා කරයි, ඒ සියල්ලම පාහේ හරස් බ්‍රවුසර විලාස සාමාන්‍යකරණයට යොමු කර ඇත. අපි කිමිදෙමු.

HTML5 doctype

Bootstrap සඳහා HTML5 doctype භාවිතා කිරීම අවශ්‍ය වේ. එය නොමැතිව, ඔබට විනෝදජනක අසම්පූර්ණ මෝස්තර කිහිපයක් පෙනෙනු ඇත, නමුත් එය ඇතුළුව සැලකිය යුතු ඉක්කාවක් ඇති නොවිය යුතුය.

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

ප්‍රතිචාරාත්මක මෙටා ටැගය

Bootstrap මුලින්ම ජංගම දුරකථන සංවර්ධනය කර ඇත, අපි මුලින්ම ජංගම උපාංග සඳහා කේතය ප්‍රශස්ත කර පසුව CSS මාධ්‍ය විමසුම් භාවිතයෙන් අවශ්‍ය පරිදි සංරචක පරිමාණය කරන උපාය මාර්ගයකි. සියලුම උපාංග සඳහා නිසි විදැහුම්කරණය සහ ස්පර්ශ විශාලනය සහතික කිරීම සඳහා, ප්‍රතිචාරාත්මක viewport meta tag එක ඔබේ වෙත එක් කරන්න <head>.

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

You can see an example of this in action in the starter template.

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element, but it can cause problems with some third-party software like Google Maps and Google Custom Search Engine.

On the rare occasion you need to override it, use something like the following:

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

With the above snippet, nested elements—including generated content via ::before and ::after—will all inherit the specified box-sizing for that .selector-for-some-widget.

Learn more about box model and sizing at CSS Tricks.

Reboot

For improved cross-browser rendering, we use Reboot to correct inconsistencies across browsers and devices while providing slightly more opinionated resets to common HTML elements.

Community

Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.

Read and subscribe to The Official Bootstrap Blog.
Chat with fellow Bootstrappers in IRC. On the irc.libera.chat server, in the #bootstrap channel.
Implementation help may be found at Stack Overflow (tagged bootstrap-5).
Developers should use the keyword bootstrap on packages that modify or add to the functionality of Bootstrap when distributing through npm or similar delivery mechanisms for maximum discoverability.

ඔබට නවතම ඕපාදූප සහ නියම සංගීත වීඩියෝ සඳහා Twitter හි @getbootstrap අනුගමනය කළ හැකිය.