TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে বুটস্ট্র্যাপ দিয়ে সম্পূর্ণ প্রস্থ লম্বা পৃষ্ঠা তৈরি করবেন?

2

জাম্বোট্রন একটি বুটস্ট্র্যাপ উপাদান যা কল টু অ্যাকশন বোতামের সাহায্যে আকর্ষণীয় পেজ হেডার তৈরি করতে সাহায্য করে। ডিফল্ট জাম্বোট্রন কম্পোনেন্টের হালকা রঙের পটভূমি রয়েছে এবং এটি সম্পূর্ণ প্রস্থ দিয়ে তৈরি করা যেতে পারে বা একটি পাত্রে ফিট করা যায়। ছোটখাট CSS সমন্বয়ের মাধ্যমে আপনি জাম্বোট্রন কম্পোনেন্টে প্যারালাক্স ব্যাকগ্রাউন্ড ইমেজ যোগ করতে পারেন এবং একটি সম্পূর্ণ প্রস্থ লম্বা পৃষ্ঠা লেআউট তৈরি করতে পারেন। এই প্রবন্ধে আসুন বুটস্ট্র্যাপ জাম্বোট্রন উপাদান দিয়ে পূর্ণ প্রস্থের লম্বা পাতা কীভাবে তৈরি করা যায় সে সম্পর্কে আরও আলোচনা করা যাক। আমরা সংস্করণ 4 সিএসএস ব্যবহার করি, তবে, আপনি সর্বশেষ সংস্করণটিও ব্যবহার করতে পারেন।

কিভাবে বুটস্ট্র্যাপ দিয়ে সম্পূর্ণ প্রস্থ লম্বা পৃষ্ঠা তৈরি করবেন?

  • সিএসএস প্যারাল্যাক্স পৃষ্ঠা
    1. বুটস্ট্র্যাপ লম্বা পৃষ্ঠার ডেমো
    2. স্টার্টার টেমপ্লেট দিয়ে শুরু
    3. লম্বা প্রভাবের জন্য CSS
    4. লম্বা বিভাগের জন্য HTML
    5. নেভিগেশন এবং পাদলেখ যোগ করা হচ্ছে
    6. লম্বা পৃষ্ঠার জন্য সম্পূর্ণ কোড
  • জাভাস্ক্রিপ্ট প্যারাল্যাক্স পৃষ্ঠা

সিএসএস প্যারাল্যাক্স পৃষ্ঠা

প্রথমে আসুন সিএসএস প্যারাল্যাক্স পৃষ্ঠাটি নির্দিষ্ট পটভূমি সহ ব্যাখ্যা করি।

জাম্বোট্রন ব্যবহার করে বুটস্ট্র্যাপ প্যারালাক্স পৃষ্ঠার 1 ডেমো

বুটস্ট্র্যাপ পৃষ্ঠার লম্বা অংশটি নীচের মত দেখতে হবে।

কিভাবে বুটস্ট্র্যাপ দিয়ে সম্পূর্ণ প্রস্থ লম্বা পৃষ্ঠা তৈরি করবেন?

জাম্বোট্রন সহ বুটস্ট্র্যাপ 4 লম্বা পাতা

2 স্টার্টার টেমপ্লেট দিয়ে শুরু

প্রথম ধাপ হল কঙ্কাল বুটস্ট্র্যাপ স্টার্টার টেমপ্লেট দিয়ে শুরু করা । আপনি স্টাইলশীট এবং স্ক্রিপ্টের জন্য CDN লিঙ্ক ব্যবহার করতে পারেন অথবা সেগুলো আপনার নিজের সার্ভারে হোস্ট করতে পারেন। আসুন আমাদের পৃষ্ঠা লেআউটের সূচনা পয়েন্ট হিসেবে সিডিএন লিঙ্ক সহ নীচের স্টার্টার টেমপ্লেটটি গ্রহণ করি।

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> Add Your Content Here... <!-- Bootstrap 4 Scripts --> <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>

3 লম্বা প্রভাবের জন্য CSS

আমাদের প্যারালাক্স বিভাগে একটি ব্যাকগ্রাউন্ড ইমেজ রয়েছে যার সর্বনিম্ন উচ্চতা 600px, একটি h1 শিরোনাম এবং সংক্ষিপ্ত বিবরণ যোগ করার জন্য একটি অনুচ্ছেদ।

প্রথমে আসুন স্থির ব্যাকগ্রাউন্ড ইমেজ সহ লম্বা বিভাগ তৈরি করি, আপনি আপনার পছন্দসই উচ্চতায় ন্যূনতম উচ্চতা সেট করতে পারেন।

/* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; }

তারপরে নীচের মত অনুচ্ছেদ এবং H1 শিরোনামে কিছু শৈলী যোগ করা যাক। আপনি আপনার পছন্দ অনুযায়ী মান পরিবর্তন করতে পারেন।

/* Paragraph for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; }

তারপরে আমরা পৃথক বিভাগের পটভূমির জন্য চিত্র যুক্ত করি, আমরা এখানে তিনটি বিভাগ যুক্ত করার জন্য তিনটি CSS ক্লাস দেখিয়েছি। আপনি শুধু ".paralsec3", ".paralsec4", ইত্যাদি যোগ করতে পারেন পরবর্তী বিভাগের জন্য বিভিন্ন ছবি যোগ করতে।

/* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */

অবশেষে আসুন ডিফল্ট জাম্বোট্রন উপাদান থেকে নীচের মার্জিনটি সরিয়ে ফেলি।

/* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;}

আপনি স্টার্টার টেমপ্লেটের হেডার বিভাগে ট্যাগের ভিতরে সমস্ত সিএসএস যোগ করতে পারেন অথবা একটি বহিরাগত স্টাইলশীট এবং লিঙ্ক তৈরি করতে পারেন।

4 লম্বা অংশের জন্য HTML তৈরি করা

নিচে তিনটি বিভাগ সহ লম্বা পৃষ্ঠার সম্পূর্ণ HTML কোড দেওয়া হল। আমরা প্রতিটি বিভাগে ডিফল্ট বোতাম উপাদান ব্যবহার করেছি ।

<!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here -->

5 ন্যাভিগেশন এবং ফুটার যোগ করা

স্টার্টার টেমপ্লেট সহ উপরের সিএসএস এবং এইচটিএমএল কোড ব্লকগুলি নেভিগেশন এবং ফুটার ছাড়াই সম্পূর্ণ প্রস্থের লম্বা পৃষ্ঠা তৈরি করবে। নীচের কাস্টম CSS ব্যবহার করে navbar কম্পোনেন্ট এবং ফুটার ব্যবহার করে নেভিগেশন বার যোগ করুন । নেভিগেশন এবং ফুটার পৃষ্ঠাটিকে সম্পূর্ণ করবে যা স্বাধীনভাবে যে কোন জায়গায় ব্যবহার করা যাবে।

/* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; }

6 সম্পূর্ণ জাম্বোট্রন লম্বা পৃষ্ঠা

বুটস্ট্র্যাপ 4 জাম্বোট্রন প্যারালাক্স পৃষ্ঠার সম্পূর্ণ কোডটি নীচের মত দেখাবে। আপনি ইমেজ ইউআরএল এবং ডামি কন্টেন্ট প্রতিস্থাপন করে কপি করে ব্যবহার করতে পারেন।

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap 4 CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <style> /* Header Parallax Element Style*/ .paral { min-height: 600px; background-attachment: fixed; background-size: cover; background-position: 50% 50%; } /* Paragrapgh for Parallax Section */ .paral p { font-size: 24px; color:#f5f5f5; text-align: center; line-height: 60px; } /* Heading for Parallax Section */ .paral h1 { color: rgba(255, 255, 255, 0.8); font-size: 60px; text-align: center; padding-top: 60px; line-height: 100px; } /* Image for Parallax Section */ .paralsec { background-image: url("https://img.webnots.com/2017/05/parallax.jpg"); } .paralsec1 { background-image: url("https://img.webnots.com/2017/05/parallax1.jpg");} .paralsec2 { background-image: url("https://img.webnots.com/2015/11/parallax2.jpg"); } /* Add more images for more sections */ /* Remove Bottom Margin from Jumbotron */ .jumbotron{margin-bottom: 0;} /* Footer */ .wn-footer { padding: 2.5rem 0; text-align: center; color: white; background-color: #607D8B; border-top: .05rem solid #e5e5e5; } .wn-footer a { color: yellow; } </style> </head> <body> <!-- First Parallax Section --> <div class="jumbotron paral paralsec"> <h1 class="display-3">Here is a heading 1</h1> <p class="lead">Here is a short description 1</p> <p class="lead"> <a class="btn btn-info btn-lg btn-md" href="#" role="button">Here is a button 1</a> </p> </div> <!-- Second Parallax Section --> <div class="jumbotron paral paralsec1"> <h1 class="display-3">Here is a heading 2</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-warning btn-lg btn-md" href="widgets.html" role="button">Here is a button 2</a> </p> </div> <!-- Third Parallax Section --> <div class="jumbotron paral paralsec2"> <h1 class="display-3">Here is a heading 3</h1> <p class="lead">Here is a short description 2</p> <p class="lead"> <a class="btn btn-primary btn-lg btn-md" href="themes.html" role="button">Here is a button 3</a> </p> </div> <!-- Add More Parallax Sections Here --> <!-- Footer Section --> <footer class="wn-footer"> <p>This is a Bootstrap 4 parallax page with jumbotron created by <a href="https://www.webnots.com/">WebNots Web Consulting Services</a></p> <p> <a href="#">Back to top</a> </p> </footer> <!-- Bootstrap 4 Scripts --> <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> </body> </html>

জাভাস্ক্রিপ্ট প্যারাল্যাক্স পৃষ্ঠা

যদিও উপরের সিএসএস ফিক্সড ইমেজ একটি লম্বা মত দেখায়, এটি সত্যিই একটি লম্বন প্রভাব নয়। প্যারালাক্সে, ব্যাকগ্রাউন্ড ইমেজটিও তুলনামূলকভাবে কন্টেন্ট মুভমেন্টের দিকে যেতে হবে। এটি শুধুমাত্র জাভাস্ক্রিপ্ট ব্যবহার করে করা যেতে পারে। Jarallax.js এর মত রেডিমেড জাভাস্ক্রিপ্ট লাইব্রেরি আছে যা আপনি সম্পূর্ণ প্রস্থের লম্বা বিভাগ তৈরি করতে ব্যবহার করতে পারেন। দুর্ভাগ্যক্রমে, পুরো প্রক্রিয়াটি ব্যাখ্যা করা এখানে আরও জটিল হবে। আপনি নীচের ডেমোগুলি পরীক্ষা করতে পারেন এবং বুটস্ট্র্যাপ দিয়ে তৈরি থিমগুলি ডাউনলোড করতে পারেন ।

রেকর্ডিং উত্স: webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত