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

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

1

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

শুরু থেকে বুটস্ট্র্যাপ থিম তৈরির পদক্ষেপ

  1. আপনার থিমের ওয়্যারফ্রেম স্কেচ প্রস্তুত করুন
  2. বুটস্ট্র্যাপ 4 স্টার্টার টেমপ্লেট বোঝা
  3. নেভিগেশন মেনু োকান
  4. হেডার স্লাইডশো যোগ করুন
  5. হিরো হেডার বিভাগ অন্তর্ভুক্ত করুন
  6. শোকেস বৈশিষ্ট্যযুক্ত বিভাগ
  7. FAQ এবং যোগাযোগ ফর্ম যোগ করুন
  8. পাদলেখ বিভাগ োকান
  9. CSS দিয়ে কাস্টমাইজ করা
  10. চূড়ান্ত টেমপ্লেট পান

আরও বিভাগগুলি ডামি সামগ্রী এবং চিত্র দিয়ে ব্যাখ্যা করা হয়েছে, সেগুলি আপনার নিজের সামগ্রী দিয়ে প্রতিস্থাপন করা নিশ্চিত করুন।

1 আপনার থিমের কঙ্কাল আঁকা

এগিয়ে যাওয়ার আগে আসুন প্রথমে আঁকুন কিভাবে আমাদের থিমটি ডিফল্ট বুটস্ট্র্যাপ উপাদানগুলি ব্যবহার করার উপর মনোযোগ কেন্দ্রীভূত হওয়া উচিত। মূলত একটি থিমের নিম্নলিখিত উপাদান থাকা উচিত:

  • মেনু আইটেম দেখানোর জন্য নেভিগেশন বার।
  • শিরোনাম স্লাইডশো ক্যাপশন সহ ছবি ঘোরানোর জন্য
  • চোখ ধাঁধানো শিরোনাম দেখানোর জন্য হিরো হেডার বিভাগ
  • আপনার পণ্য বা হাইলাইটগুলি দেখানোর জন্য বৈশিষ্ট্যযুক্ত বিভাগ
  • প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী এবং কিছু যোগাযোগের বিবরণ
  • কপিরাইট বার্তার জন্য পাদলেখ বিভাগ

সুতরাং থিমটি নীচের মতো দেখতে হবে:

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

আসুন এখন থেকেই আমাদের থিম তৈরি করি।

2 বুটস্ট্র্যাপ 4 স্টার্টার টেমপ্লেট

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

আমাদের উদাহরণে আমরা বুটস্ট্র্যাপ স্টার্টার টেমপ্লেট দিয়ে শুরু করি । এটি CSS এবং স্ক্রিপ্ট ফাইল সহ একটি কঙ্কাল টেমপ্লেট যা নীচে দেখানো হয়েছে:

<!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>

আপনি আপনার সার্ভারে বুটস্ট্র্যাপ ফাইলগুলি হোস্ট করতে পারেন এবং আপনার নিজের সাথে সিডিএন লিঙ্কগুলি প্রতিস্থাপন করতে পারেন। আমরা আমাদের থিম তৈরির জন্য বুটস্ট্র্যাপ সংস্করণ 4 ব্যবহার করছি। স্টার্টার টেমপ্লেটটি আপনার স্থানীয় কম্পিউটারে "bootstrap-theme.html" হিসাবে সংরক্ষণ করুন এবং আপনার পছন্দের টেক্সট এডিটর ব্যবহার করে ফাইলটি খুলুন। আমরা সহজে সম্পাদনার জন্য নোটপ্যাড ++, বন্ধনী বা অনুরূপ টেক্সট এডিটর ব্যবহার করার পরামর্শ দিই ।

3 স্টার্টার টেমপ্লেটে নেভিগেশন যোগ করা

প্রথম ধাপ হল ন্যাভিবার কম্পোনেন্ট ব্যবহার করে নেভিগেশন বার যোগ করা । নীচে ডিফল্ট বুটস্ট্র্যাপ 4 ন্যাভার উপাদানটির কোড রয়েছে:

<!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Theme</a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto ml-auto"> <li class="nav-item outframe"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item outframe"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown outframe"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 3</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br><br>

নেভিগেশন বারে নিম্নলিখিত আইটেম রয়েছে:

  • ফেভিকন
  • পরিচিতিমুলক নাম
  • মেনু আইটেম – একক এবং ড্রপডাউন মেনু আইটেম
  • নমুনা অনুসন্ধান বাক্স

এই মেনুটি ছোট ডিভাইসে হ্যামবার্গার আইকনে পরিবর্তন করা উচিত। ট্যাগের নীচে আপনার নিজের দিয়ে ডামি কন্টেন্ট পরিবর্তন করে ডিফল্ট নাভবার কম্পোনেন্ট কোড োকান। মনে রাখবেন এটি থিমের আমাদের প্রথম উপাদান, তাই প্রথম আইটেম হিসাবে ট্যাগের ঠিক নীচে কোড যোগ করা নিশ্চিত করুন।

4 স্লাইডশো বা ক্যারোজেল যুক্ত করা

নেভবারের নীচে আমরা ছবির ক্যাপশন এবং বিবরণ সহ স্ট্যান্ডার্ড ক্যারোজেল কম্পোনেন্ট insুকিয়ে দেই । আমরা ইনলাইন স্টাইল “প্রস্থ =" 100%”;” যোগ করে ছবিগুলিকে সম্পূর্ণ প্রস্থ করেছি। অন্যথায় বড় ইমেজগুলি ব্যবহার করা নিশ্চিত করুন যা ডিভাইসের প্রস্থের সাথে মানানসই হবে।

<!-- Carousel --> <div id="slidercaption" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slidercaption" data-slide-to="0" class="active"></li> <li data-target="#slidercaption" data-slide-to="1"></li> <li data-target="#slidercaption" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 1</h3> <p>Here is short description for slide 1</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 2</h3> <p>Here is short description for slide 2</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 3</h3> <p>Here is short description for slide 3</p> </div> </div> </div> <a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div>

সাবধান থাকুন যে ন্যাভার এবং ক্যারোজেল ওভারল্যাপিং হতে পারে। ওভারল্যাপিং অ্যাডজাস্ট করার জন্য আপনার সঠিক ইমেজ উচ্চতা বা কাস্টম CSS ব্যবহার করা উচিত। এই উদাহরণে আমরা কেবল দুটি লাইন বিরতি যোগ করি

ক্যারোসেলের সাথে ফাঁক সামঞ্জস্য করতে নাভবারের নীচে।

5 হিরো বিভাগ বা জাম্বোট্রন যোগ করা

এরপরে শিরোনাম, বিবরণ এবং একটি বোতাম সহ একটি নায়ক বিভাগ প্রদর্শনের জন্য একটি পূর্ণ প্রস্থের জাম্বোট্রন উপাদান যোগ করা যাক । হেডার হিরো বিভাগের জন্য কোডটি নিচে দেওয়া হয়েছে যা ক্যারাউজেল কোডের ঠিক নিচে যোগ করা উচিত:

<!-- Hero Header Jumbotron --> <div class="jumbotron"> <h1 class="display-3">Bootstrap 4 Template</h1> <p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p> <hr class="my-4"> <p>Add your subtitle here to explain more about this page in detail.</p> <a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a> </div>

আমরা নীচের মত কাস্টম CSS সহ ব্যাকগ্রাউন্ডকে সাদা এবং ডিফল্ট জাম্বোট্রনের বৈশিষ্ট্যগুলিকে সামঞ্জস্য করি। এর মধ্যে কাস্টম CSS যোগ করুন …. ট্যাগ.

<style> /* Header Jumbotron */ .jumbotron{ color: #990000; background-color: #fafafa; margin-bottom: -20px; background: #fff; text-align: center; border-radius: 0; } </style>

এখন আমাদের বুটস্ট্র্যাপ 4 থিমটি নীচের মত দেখতে হবে:

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

6 কার্ড লেআউটের সাথে বৈশিষ্ট্যযুক্ত বিভাগ যুক্ত করা

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

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

নীচে কার্ড লেআউটের কোড যা হিরো জাম্বোট্রন কম্পোনেন্টের ঠিক নিচে যোগ করা উচিত। আপনি ব্যবহারকারীদের কাছ থেকে পেমেন্ট সংগ্রহ করতে পেপ্যাল ​​বা বোতাম এলিমেন্টে অন্য যেকোন পেমেন্ট প্রসেসর থেকে "অ্যাড টু কার্ট" বা "এখনই কিনুন" বোতাম কোড যোগ করতে পারেন।

<!-- Card Deck --> <div class="card-deck"> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 1</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 2</h4> <p class="card-text">Here is a shorter description of the card.</p> <button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 3</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div>

7 দুটি কলামে বিভক্ত

পরবর্তী বিভাগে দুটি কলাম রয়েছে – একটি FAQ বিভাগ যোগ করার জন্য এবং অন্যটি নিচে দেখানো একটি যোগাযোগ ফর্ম যোগ করার জন্য:

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

বুটস্ট্র্যাপ দুই কলাম বিভাগ

দুটি কলাম তৈরি করা হয়েছে সারি ক্লাসের সাথে একটি ডিভ ব্যবহার করে এবং তারপরে আরও দুটি বিভাগ "কল-এমডি -6" ক্লাসের সাথে নীচের মতো:

<div class="row"> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <!-- FAQ Collapse --> </div> </div> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <!-- Contact Form --> </div> </div> </div>

7.1 সংক্ষিপ্ততার সাথে প্রথম কলামে FAQ যোগ করা

নীচের মত ডিফল্ট পতন উপাদান ব্যবহার করে FAQ বিভাগ তৈরি করা হয়েছে :

<!-- Collapse --> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header btn-spl" role="tab" id="firstheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading"> <div class="card-block"> Here is the content for the first section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-block"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingFour"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3"> Heading 4 </a> </h5> </div> <div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> </div>

7.2 ফর্ম ব্যবহার করে দ্বিতীয় কলামে যোগাযোগ ফর্ম যোগ করা

পরিচিতি ফর্মটি ডিফল্ট বুটস্ট্র্যাপ 4 ফর্ম কম্পোনেন্টের সাথে নাম দিয়ে তৈরি করা হয়েছে, ড্রপডাউন থেকে বেছে নেওয়ার বিকল্প, মন্তব্য জমা দেওয়ার জন্য একটি টেক্সটারিয়া।

<!-- Form --> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Contact Us</span></h3> <form> <!-- Text Input --> <div class="form-group"> <label for="username">Enter Username:</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> </div> <!-- Single Select --> <div class="form-group"> <label for="singleselect">Choose Option:</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- Textarea --> <div class="form-group"> <label for="textarea">Enter Your Comment:</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- Submit Button --> <button type="submit" class="btn btn-success btn-spl btn-md">Submit</button> </form> </div> </div>

পরিশেষে আসুন তরল জাম্বোট্রন ব্যবহার করে একটি পূর্ণ প্রস্থের পাদলেখ যোগ করি।

<!-- Footer --> <div class="jumbotron-fluid"> <div class="container"> <h2 style="padding-bottom: 30px">This is a footer section of your page.</h2> <p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p> </div> </div>

নিচের সিএসএসের সাথে পাদলেখের কিছুটা কাস্টমাইজেশনের প্রয়োজন:

/* Footer Jumbotron */ .jumbotron-fluid { background: lightgrey; padding: 50px; text-align: center; }

এখন আপনার বুটস্ট্র্যাপ 4 টেমপ্লেট প্রস্তুত, আসুন কিছু কাস্টম CSS দিয়ে মশলা তৈরি করি।

9 কাস্টম CSS যোগ করা

আপনি আপনার নিজস্ব CSS যোগ করে যেকোনো উপাদান কাস্টমাইজ করতে পারেন। আমাদের উদাহরণে, আমাদের নিম্নলিখিত কাস্টমাইজেশন যোগ করা যাক:

  • একটি অতিরিক্ত CSS ক্লাস “.btn-spl” সহ বোতাম, পতন এবং কার্ডগুলিতে ছায়া প্রভাব যোগ করুন।
  • মেনু আইটেমগুলিতে কিছু মার্জিন যোগ করতে "। Outframe" ক্লাস ব্যবহার করুন।
  • ".Title" এবং ".title span" ক্লাস ব্যবহার করে শিরোনামে ডিভাইডার যোগ করুন।
  • ছোট ডিভাইসে ভাল সারিবদ্ধতার জন্য শরীরের ওভারফ্লো এবং কার্ডের মার্জিন সামঞ্জস্য করুন।

10 চূড়ান্ত থিম টেমপ্লেট

সমস্ত কাস্টম CSS এবং উপাদানগুলিকে একত্রিত করে চূড়ান্ত একক পৃষ্ঠার বুটস্ট্র্যাপ 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"> <link rel="shortcut icon" type="image/png" href="Your Favicon Image Link" /> <meta name="description" content="Meta Description for your Page."> <title>Enter Title for Your Page</title> <!-- 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> /* Hide Overflow */ body { overflow-x: hidden; } /* Card Alignment */ .card { margin: 30px; text-align: center; } /* Header Jumbotron */ .jumbotron{ color: #990000; background-color: #fafafa; margin-bottom: -20px; background: #fff; text-align: center; border-radius: 0; } /* Footer Jumbotron */ .jumbotron-fluid { background: lightgrey; padding: 50px; text-align: center; } /* Margin for Menu */ .outframe { padding: 0 20px; } /* Shadow Effect for Button, Collapse & Cards */ .btn-spl { box-shadow: 0 1px 4px rgba(100, 20, 100, .6); border-radius: 0px; } /* Heading with Divider */ .title { line-height: 2.5; text-align: center; } .title span { display: inline-block; position: relative; } .title span:before, .title span:after { content: ""; position: absolute; height: 5px; border-bottom: 1px solid lightgray; border-top: 1px solid lightgray; top: 0; width: 75%; margin-top:35px; } .title span:before { right: 100%; margin-right: 15px; } .title span:after { left: 100%; margin-left: 15px; } </style> </head> <body> <!-- Navbar --> <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse bg-primary"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#"> <img src="assets/images/logo.png" width="30" height="30" class="d-inline-block align-top" alt="logo"> Bootstrap 4 Theme</a> <div class="collapse navbar-collapse" id="navbar"> <ul class="navbar-nav mr-auto ml-auto"> <li class="nav-item outframe"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item outframe"> <a class="nav-link" href="#">Menu</a> </li> <li class="nav-item dropdown outframe"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="#">Dropdown 1</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 2</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Dropdown 3</a> </div> </li> </ul> <form class="form-inline my-2 my-lg-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search"> <button class="btn btn-outline-success btn-spl my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> <br><br> <!-- Carousel --> <div id="slidercaption" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#slidercaption" data-slide-to="0" class="active"></li> <li data-target="#slidercaption" data-slide-to="1"></li> <li data-target="#slidercaption" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="carousel-item active"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide1.jpg" alt="Slide1" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 1</h3> <p>Here is short description for slide 1</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide2.jpg" alt="Slide2" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 2</h3> <p>Here is short description for slide 2</p> </div> </div> <div class="carousel-item"> <img class="d-block img-fluid" src="https://img.webnots.com/2017/05/BS_Slide3.jpg" alt="Slide3" width="100%"> <div class="carousel-caption d-none d-md-block"> <h3>Here is a caption for slide 3</h3> <p>Here is short description for slide 3</p> </div> </div> </div> <a class="carousel-control-prev" href="#slidercaption" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="#slidercaption" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- Hero Header Jumbotron --> <div class="jumbotron"> <h1 class="display-3">Bootstrap 4 Template</h1> <p class="lead">This is a demo theme created with Bootstrap 4. Add some attractive heading for your page here.</p> <hr class="my-4"> <p>Add your subtitle here to explain more about this page in detail.</p> <a class="btn btn-primary btn-lg btn-spl" href="#" role="button">View Facebook Page</a> </div> <h3 class="title"><span>Order Products</span></h3> <!-- Card Deck --> <div class="card-deck"> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 1</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-primary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 2</h4> <p class="card-text">Here is a shorter description of the card.</p> <button class="btn btn-danger btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> <div class="card btn-spl"> <img class="card-img-top" src="https://img.webnots.com/2017/04/Bootstrap-Card-Image.png" alt="Card image cap"> <div class="card-block"> <h4 class="card-title">Product 3</h4> <p class="card-text">Here is a longer description of the card and the height will be auto aligned with flex box.</p> <button class="btn btn-secondary btn-spl" href="#" role="button">Buy Now</button> </div> <div class="card-footer"> <small class="text-muted">Here is a footer</small> </div> </div> </div> <hr class="my-5"> <div class="row"> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Read FAQ</span></h3> <!-- Collapse --> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header btn-spl" role="tab" id="firstheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1"> Heading 1 </a> </h5> </div> <div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="firstheading"> <div class="card-block"> Here is the content for the first section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="secondheading"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2" aria-expanded="false" aria-controls="collapse2"> Heading 2 </a> </h5> </div> <div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="secondheading"> <div class="card-block"> Here is the content for the second section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3" aria-expanded="false" aria-controls="collapse3"> Heading 3 </a> </h5> </div> <div id="collapse3" class="collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> <div class="card"> <div class="card-header btn-spl" role="tab" id="headingFour"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4" aria-expanded="false" aria-controls="collapse3"> Heading 4 </a> </h5> </div> <div id="collapse4" class="collapse" role="tabpanel" aria-labelledby="headingFour"> <div class="card-block"> Here is the content for the third section. </div> </div> </div> </div> </div> </div> <!-- Form --> <div class="col-md-6" style="padding:30px 50px;"> <div class="container" style="padding:30px;border:1px solid gray;"> <h3 class="title"><span>Contact Us</span></h3> <form> <!-- Text Input --> <div class="form-group"> <label for="username">Enter Username:</label> <input type="text" class="form-control" id="username" aria-describedby="Username" placeholder="Enter Username"> </div> <!-- Single Select --> <div class="form-group"> <label for="singleselect">Choose Option:</label> <select class="form-control" id="singleselect"> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> <option>Option 4</option> <option>Option 5</option> </select> </div> <!-- Textarea --> <div class="form-group"> <label for="textarea">Enter Your Comment:</label> <textarea class="form-control" id="textarea" rows="5"></textarea> </div> <!-- Submit Button --> <button type="submit" class="btn btn-success btn-spl btn-md">Submit</button> </form> </div> </div> </div> <!-- Footer --> <div class="jumbotron-fluid"> <div class="container"> <h2 style="padding-bottom: 30px">This is a footer section of your page.</h2> <p class="lead">© All Rights Reserved <a href="https://www.webnots.com/">WebNots</a></p> </div> </div> <!-- 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>

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

কিভাবে স্ক্র্যাচ থেকে বুটস্ট্র্যাপ থিম তৈরি করবেন?

বুটস্ট্র্যাপ 4 থিম ফাইলের গঠন

আপনার সমস্ত কাস্টম CSS কোডগুলি "style.css" ফাইলের অধীনে সংরক্ষণ করুন এবং আপনার সমস্ত পৃষ্ঠায় ফাইলটি লিঙ্ক করুন। মূলত আপনি নীচের মত আপেক্ষিক লিঙ্ক দিয়ে আপনার হোস্ট করা ইউআরএল দিয়ে স্টার্টার টেমপ্লেট পরিবর্তন করতে পারেন (আমরা আলাদা সাইটে ছবি হোস্ট করি, আপনি এইচটিএমএলে আপেক্ষিক ইমেজ ইউআরএল অন্তর্ভুক্ত করতে পারেন):

<!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="assets/css/bootstrap.min.css"> <!-- Custom CSS --> <link rel="stylesheet" href="assets/css/style.css"> </head> <body> Add Your Content Here <!-- Bootstrap 4 Scripts --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.bundle.min.js"></script> </body> </html>

আপনি অনেকগুলি পৃষ্ঠা যোগ করা চালিয়ে যেতে পারেন এবং নাভবার কম্পোনেন্টের লিঙ্কগুলি সংশোধন করতে পারেন। একবার সমস্ত পৃষ্ঠা প্রস্তুত হয়ে গেলে, সেগুলি আপনার হোস্টিং সার্ভারে পছন্দসই ফোল্ডারে আপলোড করুন। মনে রাখবেন, যখন আপনি আপনার সার্ভারে প্রি -কম্পাইল ফাইল হোস্ট করেন, তখন "bootstrap.bundle.min.js" ব্যবহার করুন। এই বান্ডেল সংস্করণে পপার স্ক্রিপ্ট অন্তর্ভুক্ত রয়েছে, তাই আপনাকে টেমপ্লেটে "popper.js" অন্তর্ভুক্ত করার দরকার নেই। সম্ভাবনাগুলি অসীম এবং আপনার নিজের থিম বা সাইট তৈরি করতে আপনাকে কেবল কয়েক দিন সময় ব্যয় করতে হবে।

উপসংহার

বুটস্ট্র্যাপ 4 ফ্রেমওয়ার্ক আগের ভার্সন 3 এর চেয়ে বেশি শক্তিশালী। এমনকি কাস্টমাইজেশনের জন্য আপনাকে খুব বেশি সময় ব্যয় করতে হবে না। আপনার থিমের জন্য পেশাদার চেহারা যোগ করার জন্য উপাদানগুলির কাস্টমাইজেশনের জন্য ব্যবহার করার জন্য নেটে শত শত বিনামূল্যে UI কিট পাওয়া যায়।

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

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