හැදින්වීම

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

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

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

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 භාවිතා කිරීම අවශ්‍ය වේ. විශේෂයෙන්, ඔවුන්ට jQuery , Popper.js , සහ අපගේම JavaScript ප්ලගීන අවශ්‍ය වේ. අපි jQuery හි සිහින් ගොඩනැගීම භාවිතා කරයි , නමුත් සම්පූර්ණ අනුවාදය ද සහය දක්වයි.

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

බණ්ඩලය

අපගේ බණ්ඩලය සමඟ ඔබට අවශ්‍ය සියල්ල එක් පිටපතක ඇතුළත් කරන්න. අපගේ bootstrap.bundle.jsසහ පොපර්bootstrap.bundle.min.js ඇතුළත් , නමුත් jQuery නොවේ . Bootstrap හි ඇතුළත් කර ඇති දේ පිළිබඳ වැඩි විස්තර සඳහා, කරුණාකර අපගේ අන්තර්ගත කොටස බලන්න.

<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>

සංරචක

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

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

ඉවත් කිරීම සඳහා ඇඟවීම්
ටොගල් ප්‍රාන්ත සහ පිරික්සුම් පෙට්ටිය/ගුවන්විදුලි ක්‍රියාකාරිත්වය සඳහා බොත්තම්
සියලුම විනිවිදක හැසිරීම්, පාලන සහ දර්ශක සඳහා කැරොසල්
අන්තර්ගතයේ දෘශ්‍යතාව ටොගල් කිරීම සඳහා හකුළන්න
ප්‍රදර්ශනය කිරීම සහ ස්ථානගත කිරීම සඳහා පතන ( Popper.js ද අවශ්‍ය වේ )
හැසිරීම, ස්ථානගත කිරීම සහ අනුචලනය කිරීම සඳහා ආකෘති
ප්‍රතිචාරාත්මක හැසිරීම ක්‍රියාවට නැංවීම සඳහා අපගේ හැකිලීම ප්ලගිනය දිගු කිරීම සඳහා Navbar
ප්රදර්ශනය කිරීම සහ ඉවත් කිරීම සඳහා ටෝස්ට්
ප්‍රදර්ශනය කිරීම සහ ස්ථානගත කිරීම සඳහා මෙවලම් ඉඟි සහ popovers ( Popper.js ද අවශ්‍ය වේ )
අනුචලන හැසිරීම සහ සංචාලන යාවත්කාලීන සඳහා 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, 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>

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

වැදගත් ගෝලීය

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, shrink-to-fit=no">

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

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

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 සංවර්ධනය පිළිබඳව යාවත්කාලීනව සිටින්න සහ මෙම ප්‍රයෝජනවත් සම්පත් සමඟ ප්‍රජාව වෙත ළඟා වන්න.

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

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