වෙබ් පැත්ත ගැනත් ටිකක් ලියන්න හිතුනා.ඉතින් මුලින්ම හොඳ සයිට් එකක් හදාගන්න පුළුවන් tutorial එකක් කරන්න තමයි හිතන් ඉන්නේ.මුලින්ම කියන්න ඕන තරමක HTML දැනුමක් නම් ඕන කරනවා(ඒක ඉතින් කොහොමත් ඕනනේ :p ).මේකෙදි framework එකක් use කරලා කොහොමද site එකක් හදාගන්නේ කියලා තමයි කියන්නේ.
framework එක තමයි Twitter Bootstrap කියලා කියන්නේ.මේකේ 3.20 version එක මේ වෙද්දී තියෙන්නේ.මෙතනින් අරගන්න පුළුවන්.මේ වගේ front-end framework එකක් use කරන එකේ වාසිය වෙන්නේ ලියන්න වෙන codes ප්‍රමාණය අඩුයි, නමුත් පේලි කීපයකින් වැඩේ සුපිරියටම කරගන්න පුළුවන්.නමේ තියන විදියටම මේක twitter එකට සම්බන්ධයි.twitter එකේ වැඩ කරන Mark Otto, Jacob Thorntonදෙන්නා තමයි මේකේ නිර්මාණ කරුවෝ වෙන්නේ.2011 අවුරුද්දේදී මුලින්ම release කරන්නේ open source product එකක් විදියට.ඒ වගේම 2012 ඉදන් අද වෙනකන්ම GitHub එකේ most starred GitHub development project එක උනේ මේ නිර්මාණය.කරන්න පුළුවන් වැඩ නම් ඉවරයක් නැහැ.එකින් එක බලමු ඒවා ගැන.මේකේ තියනවා files, (.css, .js වගේ ඒවා)
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.min.css │ ├── bootstrap-theme.css │ └── bootstrap-theme.min.css ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf └── glyphicons-halflings-regular.woff
ගොඩක් වෙලාවට use කරන්නේ මේ CDN ටික.ඒකෙන් සයිට් එකේ loading time එක අඩු වෙනවා, ISP ගේ servers වල cache වෙලා තියන නිසා.
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
මේකේ තියන අනිත් ප්‍රධානම වාසිය වෙන්නේ site එක responsive වෙන එක.ඒකේ තියන වටිනාකම ඉතින් අමුතුවෙන් කියන්න ඕන වෙන්නේ නැහැනේ 🙂
මේ තියෙන්නේ sample code එකක්.coding structure එක අඳුරගන්න පුළුවන් මේකෙන්.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Template - dhanushka's blog</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>Hello, world!</h1> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- Bootstrap --> <script src="js/bootstrap.min.js"></script> </body> </html>
JQuery – අනිවාර්යයෙන්ම ඕන කරනවා.මෙතනින් ගන්න පුළුවන්.
මේකෙදි bootstrap.min.js file එක Jquery.min.js එකට යටින් තියෙන්න ඕන අනිවාර්යයෙන්ම.පටන් ගන්න මේ ඇති මම හිතන්නේ ඉස්සරහට බලමු අලුත් දේවල්.
Web Site with Twitter Bootstrap – 2
අදහසක් තියලා යනවා නම් ගොඩක් වටිනවා මට ඒක.
Web Site with Twitter Bootstrap – 1 | සතුටු වැස්ස බ්ලොග් කියවනය
[…] Web Site with Twitter Bootstrap – 1 […]
pitigala arachchillage damith malinda pitigala
meter une ne wage bn.koikatath digatama liyapan. man thawa 3, 4 parakath kiyawala share karanawa. sure.
dhanush_c
මේකේ මේ නිකන් විස්තර කරා විතරයි මචන් මොකද්ද කියන එක.අනිත් ඒවා බලද්දී වැඩේ පැහැදිලි වෙනවා අනිවා..