পেজ কম্পোনেন্ট (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
Comments
Post a Comment