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:

Comments

Post a Comment

Popular posts from this blog

What are the things to consider when buying a WiFi or broadband router for home, office, park and restaurant ?

Today we talk about What are the things to consider when buying a WiFi or broadband router for home, office, park and restaurant .I never like huge introduction about any topic . I always like very shortly introduce any-things to my viewers without any-type boring .So let's began the leanrning :- 1. Decide in advance how many devices you will use. 2. Decide how much space you need coverage. 3. Understand the structure of your home. WiFi signals become weak to penetrate the walls. That is why good coverage is not available. If you have a lot of walls in your house and you want to get coverage in the whole house, then you need a router with high power and wall penetration feature. 4. Decide what features you need in addition to the internet connection. Such as: - 4.1 3G 4G Modem Support- There are many routers that can use the modem. Those routers have a USB port and a one port so that broadband lines can be used. But remember that the modem must have the ability to auto-connect. Not...
Post a Comment
Read more

What is transmission media? Introduction to different types of data transmission cables

Transmission media: When a PC communicates or wants to communicate with another PC, it has to take the help of some transmission media. The most commonly used media in the network are twisted pair cable, coaxial cable, fiber optic cable. Nowadays, the use of optical fiber is increasing greatly. Radio wave, microwave and infrared technologies are prominent among wireless media. Among these mediums, optical fiber has the highest data transfer speed. The type of medium used in a network depends on the type and location of that network. The connection system for exchanging information between the sender and the remote receiving end is called a channel. The means or methods used to implement the channel are called media. such as-- (i) Cable or wire. (ii) Common telephone lines. (ii) Radio waves. (iv) Microwave. (v) Geo-satellite systems etc. Cable or Wire: Cable is an important medium in data communication. Cables are generally used for data transfer over short range networking such as LAN...
Post a Comment
Read more

What should the processor look at?

The things that we all should keep an eye on are the processor or not; 1. Clock speed 2. Number of course 3. cache memory 4. FBS 1. Clock Speed: It is also called GH2. All processors are written on. Clock speed means how fast your computer can work. That's what this signal means. The speed of the processor is known through this clock speed, how fast the calculation can be done. 2. Number of Cores: The more cores the processor has, the faster the processor can work. If I give an example to explain the matter, I hope you can understand it very easily. Suppose if a person had many hands, then he could do many things at the same time. That is, if we go to the market and buy a smartphone, then we will see what the configurations of the phone are. If we look closely at the configuration of the smartphone, we will see that Dual Core Processor, Quad Core Processor, Octa core processor, Hexa core processor, Deca core processor. This means that the dual core processor has two arms or cores, ...
Post a Comment
Read more