Bootstrap Case: আমার প্রথম বুটস্ট্র্যাপ ওয়েবসাইট (My First Bootstrap Website)

অনুবাদ করেছেন Abu Jubair Mahin

 

স্ক্র্যাচ থেকে একটি বুটস্ট্র্যাপ ওয়েব পৃষ্ঠা তৈরি করুন

নিচের পৃষ্ঠায় Scratch (স্ক্র্যাচ) থেকে একটি বুটস্ট্র্যাপ ওয়েবসাইট কিভাবে নির্মাণ করা হয় সেটা প্রদর্শন করা হবে

আমরা একটি সহজ HTML পৃষ্ঠা দিয়ে শুরু করব, এবং পরে আমরা অনেক বেশি বেশি components সেখানে যোগ করব,
যতক্ষণ না আমরা একটি সম্পূর্ণরূপে কার্যকরী এবং প্রতিক্রিয়াশীল ওয়েবসাইট পাব ।

আমরা নিম্নলিখিত HTML পৃষ্ঠা দিয়ে শুরু করব:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 </head>
<body>
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </body>
 </html>

 

 

Bootstrap CDN যোগ এবং Containers এর ভিতরে বিভিন্ন উপাদান যুক্ত করা

আমাদের প্রথম কাজ হল Bootstrap CDN যুক্ত করা এবং jQuery তে একটি লিঙ্ক যুক্ত করা

পরবর্তীতে আমরা <body> এর ভিতর সকল HTML উপাদানগুলো যোগ করব এবং এর ভিতরে <div class="container"> ও থাকবেঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
 <div class="container">
      <h1>My first Bootstrap website!</h1>
      <p>This page will grow as we add more and more components from Bootstrap...</p>
      <p>This is another paragraph.</p>
      <p>This is a paragraph.</p>
      <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

 

টিপস: সম্পূর্ণ স্কিনটা পেইজ দিয়ে Fill করতে চাইলে .container কে পরিবর্তন করে .container-fluid লিখুনঃ

উদাহরনঃ

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>Bootstrap Case</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 </head>
 <body>
<div class="container-fluid">
     <h1>My first Bootstrap website!</h1>
     <p>This page will grow as we add more and more components from Bootstrap...</p>
     <p>This is another paragraph.</p>
     <p>This is a paragraph.</p>
     <p>This is another paragraph.</p>
 </div>
 </body>
 </html>

 

ধন্যবাদ , আশা করি বুঝতে পেরেছেন।

Author-Check- Article-or-Video

Permanent link to this article: http://bangla.sitestree.com/bootstrap-case-my-first-bootstrap-website/