Skip to main content

বুটস্ট্রাপ পেজ কম্পোনেন্ট

 পেজ কম্পোনেন্ট (PAGE COMPONENTS)

বুটস্ট্রাপ প্যানেল:

বুটস্ট্রাপ প্যানেল হচ্ছে একটি বর্ডার বক্স, যেখানে কনটেন্ট-এর চারপাশে কিছু প্যাডিং থাকে। প্যানেল তৈরি ব্যবহার করা হয় এবং প্যানেলের কন্টেন্ট. panel-body ক্লাস-এর মধ্যে রাখা করা হয়।

 উদাহরণ :

<!DOCTYPE html>

<html>

<head> 

<title>Bootstrap Panel Example</title>

<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1">

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>

</head>

<body>

<div class="container">

<h2> বেসিক প্যানেলের উদাহরণ </h2> 

<div class="panel panel-default">

<div class="panel-body"> এটি একটি ব্যাসিক প্যানেল <div>

</div>

</div>

</body>

</html> 

প্যানেল হেডিং ঃ

প্যানেলের মধ্যে হেডিং তৈরি করার জন্য  .panel-heading ক্লাস ব্যবহার করা হয়—

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Panel Example</title> <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script

</head>
<body>
<div class="container">

<h2> প্যানেল হেডার </h2>

<div class="panel panel-default"> 

<div class="panel-heading">panel heading </div>

<div class="panel-body"> panel content  </div>

</div>

</div>

</body>

</html>

প্যানেল ফুটার:

প্যানেলের মধ্যে ফুটার তৈরি করার জন্য  .panel-footer ক্লাস ব্যবহার করা হয়। 

উদাহরণ :
<!DOCTYPE html>

<html> 

<head>

<title>Bootstrap Panel Example</title> <meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/boc.strap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<div class="container">

<h2> panel footer </h2>

<div class="panel panel-default">

<div class="panel-heading"> panel heading </div>

<div class="panel-body"> panel content </div> 

<div class="panel-footer"> panel footer </div>

</div>

</div>

</body>

</html>

প্যানেল গ্রুপঃ

অনেকগুলো প্যানেল নিয়ে একটি প্যানেল গ্রুপ তৈরি করার জন্য প্যানেলগুলোকে  .panel-group ক্লাসযুক্ত একটি <div> এলিমেন্টের মধ্যে রাখতে হবে।

.panel-group ক্লাস প্রত্যেকটি প্যানেলের নিচে মার্জিন দূর করে

উদাহরণ :

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Panel Example</title>

<meta charset="utf-8"> 

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script


src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script

</head>

<body>

পেজ কম্পোনেন্ট

<p>panel-group ক্লাস নিচের <div class="panel-group"> মার্জিন রিমুভ করে দেয়। কি পরিবর্তন হয় তা দেখার জন্য ক্লাসটি রিমুভ করে রান করাতে হবে। </p>

<div class="container"> <h2>36²92³1 </h2>

<div class="panel panel-default"> <div class="panel-heading"> </div>

<div class="panel-body"> </div>

</div> <div class="panel panel-default">

<div class="panel-body"> </div>

<div class="panel-heading"> </div>

</div> </div>

</div> </body>

</html>

১৯.২ লিস্ট গ্রুপ-এর ব্যবহার (Use of list group) অধিকাংশ ক্ষেত্রেই বেসিক লিস্ট গ্রুপ তৈরি করার জন্য আনওর্ডার লিস্টের সাথে লিস্ট আইটেম ব্যবহার করা হয়। একটি বেসিক লিস্ট গ্রুপ তৈরি করার জন্য >UI> এলিমেন্ট list-group ক্লাস এবং <li> এলিমেন্টে list-group-item ক্লাস ব্যবহার করতে হয়।

<IDOCTYPE html>

<html>

<head>

<title>Bootstrap List Group Example</title>

<meta charset="utf-8">

উদাহরণ :

<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet"

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container"> <h2>বেসিক লিস্ট গ্রুপ </h2>

<ul class="list-group"> <li class="list-group-item-list-group-item</li>

<li class="list-group-item">list-group-item</li> <li class="list-group-item">list-group-item</li>

</ul> </div>

</body> </html>

330 number page 


লিস্ট গ্রুপের মধ্যে ব্যাঙ্গের ব্যবহার ও

লিস্ট ক্রাশ ব্যাঙ্গ সংযুক্ত করে ব্যবহার করা যায়। ব্যাজ স্বয়ংক্রিয়ভাবে তার অবস্থান ডানে নিয়ে নিবে।

শিষ্ট আইটেমের সাথে একত্রে ব্যাজ ব্যবহার করার জন্য (<li class="list-group-itern") এর মধ্যে badge ক্লাসযুক্ত একটি <span> এলিমেন্ট যুক্ত করতে হবে-

DOCTYPE html>

<html> <head>

<title>Bootstrap List Group Example</title>

<meta charset="utf-8"> <meta name="viewport"

<link rel="stylesheet"

content="width=device-width, initial-scale=1">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <head>

<body>

<div class="container">

<h2>লিস্টের মধ্যে ব্যাজের ব্যবহার <ul class="list-group">

</h2>

<i class="list-group-item-list-group-item<span class="badge">badge</span></li> <li class="list-group-item">list-group-item<span class="badge">badge</span></li>

<li class="list-group-item">list-group-item<span class="badge">badge</span></li> <ul>

</div>

<body> </html>

লিংকযুক্ত লিস্ট গ্রুপ

লিস্ট গ্রুপ আইটেমগুলো হাইপারলিংকযুক্ত হতে পারে। এর ফলে হোভারে করলে ব্যাকগ্রাউন্ড কালার ধূসর দেখাবে। লিংকযুক্ত তৈরি করার জন্য <U> পরিবর্তে <div> এলিমেন্ট এবং <di> এর পরিবর্তে <a> এলিমেন্ট ব্যবহার করতে হবে

<DOCTYPE html> <html>

<head>

<title>Bootstrap List Group Example</title>

<meta charset="utf-8"> <meta name="viewport"

dink rel="stylesheet"

content="width=device-width, initial-scale=1">

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<div class="container">



৩০১

<h2> স্টি আইটেমকে লিংক হিসেবে ব্যবহার </h2>

kul class="list-groups <a href="#" class="list-group-item">list-group-item</a>

পেঞ্জ কম্পোনেন্ট

<a href="#" class="list-group-item">list-group-itern</a>

১৯.৩ লেবেল-এর ব্যবহার (Use of lebels) : এলিমেন্টের মধ্যে Jabel ক্লাস এবং কনটেক্যুয়াল ক্লাসগুলোর যে-কোনো একটি ব্যবহার করতে হবে।

</ul> </div>

</body> </html>

তেল তৈরি করার জন্য

কন্যটকচুয়াল ক্লাসগুলো হলো—label-default, label-primary, label-success, label-into, label-warming অথবা label-danger.

DOCTYPE html>

<head> <title>

Bootstrap Badge and Lablel Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head> <body>

<div class="container-fluid">

<h2> লেবেলের উদাহরণ </h2> <h1> লেবেল উদাহরণ </span class="label label-default'> নতুন </span></h1>

<h2> লেবেল উদাহরণ </span class="label label-primary"> নতুন </span></h2> label-info"> নতুন </span></h3>

<h3> লেবেল উদাহরণ </span class="label <h4>লেবেল উদাহরণ </span class="label label success"> নতুন </span></h4>

<h5>লেবেল উদাহরণ </span class="label label warning"> নতুন </span></h5> <h6>লেবেল উদাহরণ </span class="label label-danger"> নতুন </span></h6>

</div>

</body>

</html>

১৯.৪ গ্লিফআইকন (Glyphicons) বুটস্ট্রাপে ২৬০টি গ্লিফআইকন রয়েছে।

গ্লিফআইকন ইচ্ছেমতো টেক্সট, বাটন, টুলবার, নিচে গ্লিফজাইকনের কিছু উদাহরণ দেওয়া হলো

সার্চ গ্লিফআইকন ৪

প্রিন্ট গ্লিফআইকন ৪

এনভেলাপ গ্লিফআইকন

ডাউনলোড ৪

নেভিগেশন, ফর্ম ইত্যাদিতে ব্যবহার করা যায়।

332


কম্পিউটার অপারেশন অ্য

নিচে গ্লিফআইকন ব্যবহারের পদ্ধতি দেখানো হয়েছে।

<title>Bootstrap Glyphicon Example</title>

<meta charset="utf-8"> <meta name="viewport"

<link rel="stylesheet"

content="width=device-width, initial-scale=1">

<script

src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script

src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<head>

<div class="container">

<a href="#"><span class="glyphicon glyphicon-envelope"> </span></a> </p>

<p><span class="glyphicon glyphicon-search"> </span></p>

<button type="button" class="btn btn-default">

<span class="glyphicon glyphicon-search"> </span>

</button>

<p> স্টাইল করা বাটনের মধ্যে একটি সার্চ আইকন ৪

<button type="button" class="btn btn-info"> <span class="glyphicon glyphicon-search"> </span>

</button>

<p> f span class="glyphicon glyphicon-print"> </span></p>

<p> স্টাইল করা লিংক বাটনের মধ্যে একটি প্রিন্ট আইকন ঃ

<a href="#" class="btn btn-success btn-lg"> <span class="glyphicon glyphicon-print"> </span> fert

</a>

</p>

</div>

</body>

</html>

</p>

</p>

<p> বাটনের মধ্যে একটি সার্চ আইকন

<h2> গ্লিফ আইনকনের উদাহরণ </h2> <p> <span class="glyphicon glyphicon-envelope"> </span> </p>

chead>

DOCTYPE html>

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<p> লিংক হিসেবে একটি এনভেলাপ আইকন ঃ

chimb











Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

The Importance of SEO Services for Your Business: A Guide by Best SEO Company Primelis

Best SEO Company Primelis Are you looking for the best SEO company to help your business grow online? Look no further than Primelis – the leading provider of SEO services for businesses of all sizes. Why Choose Primelis? At Primelis, we understand that every business has unique needs and goals when it comes to their online presence. That's why we offer customized SEO solutions tailored to your specific needs. Our team of experts has years of experience working in the SEO industry, and we stay up-to-date with the latest trends and best practices to ensure that your website is optimized for success. We also offer a range of other digital marketing services to help your business succeed online, from PPC advertising to social media marketing and more. Our SEO Services Our SEO services are designed to help your website rank higher in search engine results pages, driving more traffic and leads to your business. Some of the SEO services we offer include: Keyword Research We'll help yo...
Post a Comment
Read more

Unlocking Online Success: Why Justoctane SEO Services are the Best Choice for Businesses in Boca Raton, Florida.

Best Justoctane SEO Services Boca Raton in Florida Are you looking for the best SEO services in Boca Raton, Florida? Look no further than Justoctane SEO services. As a leading provider of SEO services, Justoctane has helped numerous businesses in the Boca Raton area achieve top rankings on search engine results pages. In this blog post, we will explore why Justoctane is the best choice for SEO services in Boca Raton. Experience and Expertise Justoctane has a team of experienced and highly skilled SEO professionals who have a deep understanding of search engine algorithms and the latest SEO techniques. Their expertise allows them to create customized SEO strategies that are tailored to the specific needs of each client. The Justoctane team has worked with businesses in various industries and niches, providing them with a wealth of knowledge and experience to draw from when creating effective SEO strategies. Comprehensive Services Justoctane offers a wide range of SEO services, incl...
2 comments
Read more

Malicious regulation of power supply and its prevention

Control of power supply damage and its prevention Computers can have various problems related to power supply. Irregular supply of electricity is one of the problems related to computer power supply. Besides, not having proper voltage, frequent power supply, power return in shortest time interval, lack of earthing, fault in power supply unit, heating of internal parts of power supply unit, not getting proper voltage and signal at output power supply unit switch Not working mode etc. are some of the harmful regulators of power supply. All these problems and solutions are described below -- (a) Voltage problem : Damage to computers and other electrical appliances due to high voltage is a regular occurrence in our country. A voltage stabilizer can be used to avoid this condition. Many times when the voltage is much lower than required, any electrical appliance used in the home cannot be operated. In this case, the computer should be turned off. (b) Sudden power outage : Load shedding is a...
Post a Comment
Read more