Create a Bootstrap starter pack

අපි ‍responsive webpage එකක් design කරද්දි යොදා ගන්නෙ bootstrap කියන framework එක.මේ bootstrap වල අලුත්ම update එක තමයි bootstrap 4 කියන්නෙ.අපි මෙතනදි යොදා ගන්නෙත් මේ අලුත්ම version එක.

අපි එහෙනම් මෙ starterpack එක හදමු.

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
  </head>
    <body>
       <h1>This is a Heading</h1>
       <p>This is a paragraph.</p>
    </body>
</html>

සාමාන්‍යෙන් මේක තමයි HTML starter pack එක.ඒ කියන්නෙ HTML වලින් web page එකක් design කරද්දි මුලින්ම හදා ගන්න template එක.ඉතින් අපි මේකටම තමයි bootstrap 4 කියන framework එකෙ අදාල file import කරගන්නෙත්.

මුලින්ම <!DOCTYPE html> කියන tag එකට යටින් <html lang=”en”> කියන attribute  එක add කරනවා.මේකෙන් වෙන්නෙ web page එකට language එකක් declare කරන එක. මී ලඟට head එක ඇතුලෙන් Responsive meta tag එක <meta name=”viewport” content=”width=device-width, initial-scale=1, shrink-to-fit=no”> add කරගන්නවා. ඊට පස්සෙ boostrap වලට අදාල css හා js file import කරගන්න ඕන.මේ සඳහා ක්‍රම කිහිපයක් තියෙනව.එකක් තමයි online file import කරගන්න එක.අනිත් ක්‍රමය තමයි ඒ file ටික download කරලා අපේ starterpack එකට paste කරලා ඒකෙ path එක දෙන එක.මේ මොන විදිහට කරත් css file <head> tag එක ඇතුලෙත් js file <body> tag එක ඇතුලෙත් import කරන්න ඕන.

Online විදිහට කරනවනම්,


මේ තමයි boostrap css file එක import කරන link එක,

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


මේ තමයි boostrap js file import කරන link ටික

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


මේ link ටික code එකෙ අදාල ස්තාන වලට import කරගන්න පුලුවන්.මේ method එකේ අවාසිය තමයි internet connection එකක් නැතුව වැඩ කරන්නෙ නෑ.

මේ  තියෙන්නෙ online file import කරල හදාගත්ත HTML code එකක්.
<!doctype html>
<html lang="en">
  <head>
    <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://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
 
    <title> Bootstrap 4 Starter Pack </title>
  </head>
  <body>
    <h1>Hello, world!</h1>
 
    <!-- Bootstrap  JavaScript -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

අනිත් method එක තමයි ඒ file download කරලා locally import කරගන්න එක.ඒකට මෙ link එකට ගිහින් ඒ file ටික download කරන්න පුලුවන්.

https://getbootstrap.com/docs/4.0/getting-started/download/

මේකෙන් download කරාම ලැබෙන්ව css හා js file කිහිපයක්ම.ඒවයින් අපිට මූලිකව අවශ්‍ය file ටික විතරයි import කරගන්නෙ. අපි සාමාන්‍යෙන් අපෙ folder එක arrange කරගන්නෙ මේ විදිහට. ඒ කියන්නෙ css, js හා font folder වෙන වෙනම.

මේකෙ css folder එකට අපි download කරගත්ත css folder එකෙ තියෙන bootstrap.min.css (හෝ bootstrap.css) කියන file එක paste කරනවා. ඊට පසුව ඒකෙ පාත් එක code එකෙ <head> tag එක ඇතුලට import කරගන්නව.

<head>

<link rel=”stylesheet” href=”css/bootstrap.min.css”>

</head>

මේ විදිහටම download කර ගත්තු bootstrap.min.js file එකත් අපෙ js folder එකට දාගෙන ඒකෙ පාත් එක <body> එක ඇතුලට දා ගන්න්වා.

අපි boostrap css හා js file download කලාම අපිට ලැබෙනව නිකන්ම .css හා .js කියල file ටිකකුයි, .min.css හා min.js කියලයි වර්ග දෙකක file. මේවගෙන් use කරන්න වඩාත්ම සුදුසු file විදිහට යෝජන වෙන්නෙ .min. කියන files. එයට හේතුව තමයි මේ .min.css හා .min.js file වල සියලුම whitespace හා අනවශ්‍ය characters ඉවත කරල තියෙන නිසා size එක අඩු වීම හා web site එකෙ speed එක වැඩිවීම.ඒ කියන්නෙ bootstrap.css හා bootstrap.js file use කරනවාට වඩා bootstrap.min.css හා bootstrap.min.js file බාවිත කිරීමෙන් website එකෙ speed එක වැඩි කරගන්න පුලුවන් කියන එක.

<body>

  <script src=”js/bootstrap.min.js”></script>

</body>

ඊට අමතරව jquery file එක poppver.js file දෙකත් import කරන්න ඕන.

https://jquery.com/download/

https://popper.js.org/

මේ link දෙකෙන් ඒ file දෙකත් download කරල අපෙ js folder එකට දාල ඒවගෙ පාත් දෙකත් <body> tag එක ඇතුලෙ දාගන්න ඕන.

මේ තියෙන්නෙ ඒ විදිහට locally file import කරල හදා ගත්ත starter pack එකක සම්පූර්ණ HTML code එකක්.
(css හා js file import කල folder එක අනුව path එක වෙනස් වේ.)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Bootstrap 4 Starter Pack</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
this is body section

  <script src="js/bootstrap.min.js"></script>
  <script src="js/jquery.min.js"></script>
  <script src="js/popper.min.js"></script>
</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

shares