সবাইকে সালাম ও শুভেচ্ছা জানিয়ে শুরু করছি Twitter Bootstrap (দ্বিতীয় পর্ব) । আমারা আজকের এই পর্বে Twitter Bootstrap এর গঠন ও Twitter Bootstrap এর নমুনা Template নিয়ে আলোচনা করব । কথা না বাড়িয়ে চলুন Twitter bootstrap file structure:
bootstrap/
├── css/
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js/
│ ├── bootstrap.js
│ ├── bootstrap.min.js
└── img/
├── glyphicons-halflings.png
└── glyphicons-halflings-white.png
এখানে দেখা যায় যে Twitter Bootstrap ডাউনলোড করলে আমারা এর মধ্যে তিনটি ফোল্ডার পায়। যথা ঃ css,js
এবং img। তার মানে হল stylesheet এর জন্য css folder, javascript এর জন্য js folder এবং images এর
জন্য img folder. আর bootstrap.min হল minified version.
এবার দেখা যাক bootstrap এর ডকুমেন্টেশন এর জন্য কি কি কাটাগরি রয়েছে । bootstrap এর ডকুমেন্টেশন
এর জন্য চার ধরনের কাটাগরি রয়েছে ।
১। Scaffolding : global stylesheet , Grid system, body background ইত্যাদি নিয়ে এই অংশে আলোচনা করা হয়।
2। Base CSS : Common style, button, forms, tables, icons ইত্যাদি নিয়ে এই অংশে আলোচনা করা হয়।
3। Components : page header, navbar, pills, tab, alert ইত্যাদি নিয়ে এই অংশে আলোচনা করা হয়।
4। JavaScript plugins : tooltips, popovers, modals ইত্যাদি নিয়ে এই অংশে আলোচনা করা হয়।
এবার চলুন simple HTML Template এবং Simple Bootstrap Template এর নমুনা দেখি :
simple HTML Template এর নমুনা :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
</body>
</html>
Simple bootstrap Template এর নমুনা :
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
আজ এখানেই শেষ করছি । সামনের পর্বে bootstrap Scaffolding section নিয়ে আলোচনা করব ইনশিআল্লাহ। আর Bootstrap সহ ওয়েবসাইট ডিজাইন সম্পর্কে টিউটোরিয়াল পাবেন আমার ব্লগ সাইট থেকে ।
