Bootstrap සමඟ ආරම්භ කරන්න

Bootstrap යනු ප්‍රබල, විශේෂාංගවලින් පිරුණු ඉදිරිපස මෙවලම් කට්ටලයකි. මූලාකෘතියේ සිට නිෂ්පාදනය දක්වා ඕනෑම දෙයක් මිනිත්තු කිහිපයකින් ගොඩනඟන්න.

මෙම පිටුවේ

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

කිසිදු ගොඩනැගීමේ පියවරක් අවශ්‍ය නොවී CDN හරහා Bootstrap හි නිෂ්පාදනයට සූදානම් CSS සහ JavaScript ඇතුළත් කිරීමෙන් ආරම්භ කරන්න. මෙම Bootstrap CodePen demo සමඟ එය ප්‍රායෝගිකව බලන්න .

index.htmlඔබගේ ව්‍යාපෘති මූලයේ නව ගොනුවක් සාදන්න . ජංගම උපාංගවල නිසි ප්‍රතිචාර දැක්වීමේ හැසිරීම<meta name="viewport"> සඳහා ටැගයද ඇතුළත් කරන්න .
```
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>
```

Bootstrap හි CSS සහ JS ඇතුලත් කරන්න. වැසීමට පෙර අපගේ CSS සඳහා <link>ටැගය සහ අපගේ ජාවාස්ක්‍රිප්ට් බණ්ඩලය සඳහා ටැගය (ඩ්‍රොප් ඩවුන්, පොපර්ස් සහ මෙවලම් ඉඟි ස්ථානගත කිරීම සඳහා පොපර් ඇතුළුව) තබන්න . අපගේ CDN සබැඳි ගැන තව දැනගන්න .<head><script></body>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <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">
  </head>
  <body>
    <h1>Hello, world!</h1>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
  </body>
</html>

ඔබට Popper සහ අපගේ JS වෙන වෙනම ඇතුළත් කළ හැකිය. ඔබ dropdowns, popovers, හෝ මෙවලම් ඉඟි භාවිතා කිරීමට අදහස් නොකරන්නේ නම්, Popper ඇතුළත් නොකිරීමෙන් කිලෝබයිට් කිහිපයක් ඉතිරි කරන්න.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>

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

CDN සබැඳි

යොමුවක් ලෙස, මෙන්න අපගේ මූලික CDN සබැඳි.

විස්තර	URL
CSS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css`
JS	`https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js`

අන්තර්ගත පිටුවේ ලැයිස්තුගත කර ඇති අපගේ අතිරේක ගොඩනැගීම් ලබා ගැනීමට ඔබට CDN භාවිතා කළ හැක .

ඊළඟ පියවර

Bootstrap භාවිතා කරන සමහර වැදගත් ගෝලීය පරිසර සැකසුම් ගැන තව ටිකක් කියවන්න .
අපගේ අන්තර්ගත කොටසේ Bootstrap හි ඇතුළත් කර ඇති දේ සහ පහත JavaScript අවශ්‍ය වන සංරචක ලැයිස්තුව කියවන්න .
තව ටිකක් බලය අවශ්‍යද? පැකේජ කළමනාකරු හරහා මූලාශ්‍ර ගොනු ඇතුළත් කිරීමෙන් Bootstrap සමඟ ගොඩනැගීම සලකා බලන්න .
සමඟ මොඩියුලයක් ලෙස Bootstrap භාවිතා කිරීමට බලාපොරොත්තු <script type="module">වන්නේද? කරුණාකර මොඩියුල අංශයක් ලෙස අපගේ Bootstrap භාවිතා කිරීම වෙත යොමු වන්න.

JS සංරචක

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

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

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

වැදගත් ගෝලීය

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

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