ප්‍රධාන අන්තර්ගතය වෙත යන්න ලේඛන සංචාලනය වෙත යන්න
in English

හැදින්වීම

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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

වෙනම

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

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>

මොඩියුල

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

සංරචක

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

JavaScript අවශ්‍ය සංරචක පෙන්වන්න
  • ඉවත් කිරීම සඳහා ඇඟවීම්
  • ටොගල් ප්‍රාන්ත සහ පිරික්සුම් පෙට්ටිය/ගුවන්විදුලි ක්‍රියාකාරිත්වය සඳහා බොත්තම්
  • සියලුම විනිවිදක හැසිරීම්, පාලන සහ දර්ශක සඳහා කැරොසල්
  • අන්තර්ගතයේ දෘශ්‍යතාව ටොගල් කිරීම සඳහා හකුළන්න
  • ප්‍රදර්ශනය කිරීම සහ ස්ථානගත කිරීම සඳහා පතන ( පොපර් ද අවශ්‍ය වේ )
  • හැසිරීම, ස්ථානගත කිරීම සහ අනුචලනය කිරීම සඳහා ආකෘති
  • ප්‍රතිචාරාත්මක හැසිරීම ක්‍රියාවට නැංවීම සඳහා අපගේ හැකිලීම ප්ලගිනය දිගු කිරීම සඳහා Navbar
  • ප්රදර්ශනය කිරීම සහ ඉවත් කිරීම සඳහා ටෝස්ට්
  • ප්‍රදර්ශනය සහ ස්ථානගත කිරීම සඳහා මෙවලම් ඉඟි සහ පොපෝවර් ( පොපර් ද අවශ්‍ය වේ )
  • අනුචලන හැසිරීම සහ සංචාලන යාවත්කාලීන සඳහා 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-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 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-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 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-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" 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">

ආරම්භක අච්චුවෙහි ඔබට මෙය ක්‍රියාත්මක වන උදාහරණයක් දැකිය හැක .

පෙට්ටි ප්රමාණය

CSS හි වඩාත් සරල ප්‍රමාණ සඳහා, අපි ගෝලීය box-sizingඅගය සිට content-boxවෙත මාරු කරමු border-box. paddingමෙය මූලද්‍රව්‍යයක අවසාන ගණනය කළ පළලට බලපාන්නේ නැති බව සහතික කරයි , නමුත් එය Google Maps සහ Google Custom Search Engine වැනි සමහර තෙවන පාර්ශවීය මෘදුකාංග සමඟ ගැටලු ඇති කළ හැක.

ඔබට එය ප්‍රතික්ෂේප කිරීමට අවශ්‍ය දුර්ලභ අවස්ථාවන්හිදී, පහත සඳහන් දේ භාවිතා කරන්න:

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

ඉහත ස්නිපටය සමඟින්, කැදලි මූලද්‍රව්‍ය - හරහා ජනනය කරන ලද අන්තර්ගතය ඇතුළුව ::beforeසහ - ::afterසියල්ල ඒ සඳහා නිශ්චිතව උරුම box-sizingවනු .selector-for-some-widgetඇත.

CSS උපක්‍රමවලින් පෙට්ටි ආකෘතිය සහ ප්‍රමාණය ගැන තව දැන ගන්න .

නැවත ආරම්භ කරන්න

වැඩිදියුණු කළ හරස් බ්‍රවුසර විදැහුම්කරණය සඳහා, අපි සාමාන්‍ය HTML මූලද්‍රව්‍යවලට තරමක් වැඩි මතධාරී යළි පිහිටුවීම් සපයන අතරම බ්‍රවුසර සහ උපාංග හරහා ඇති නොගැලපීම් නිවැරදි කිරීමට නැවත පණගැන්වීම භාවිතා කරමු.

ප්රජාව

Bootstrap සංවර්ධනය පිළිබඳව යාවත්කාලීනව සිටින්න සහ මෙම ප්‍රයෝජනවත් සම්පත් සමඟ ප්‍රජාව වෙත ළඟා වන්න.

  • නිල Bootstrap බ්ලොග් කියවන්න සහ දායක වන්න .
  • IRC හි සෙසු Bootstrappers සමඟ කතාබස් කරන්න. irc.libera.chatසේවාදායකයේ, නාලිකාවේ #bootstrap.
  • ක්‍රියාත්මක කිරීමේ උදවු Stack Overflow (ටැග් කර bootstrap-5ඇත) හිදී සොයා ගත හැක.
  • සංවර්ධකයින් npm හෝ ඒ හා සමාන බෙදාහැරීමේ යාන්ත්‍රණ හරහා උපරිම සොයාගැනීම් සඳහා bootstrapබෙදා හැරීමේදී Bootstrap හි ක්‍රියාකාරීත්වය වෙනස් කරන හෝ එකතු කරන පැකේජවල මූල පදය භාවිතා කළ යුතුය .

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