Tag Archives: ক্লাস

Code . Programming Samples . প্রোগ্রাম উদাহরন, Java/J2EE/J2ME

Example illustrating inheritance and abstract classes

Leave a comment

Huge Sell on Popular Electronics

Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--

illustrating inheritance এবং abstract classes এর উদাহরণ

  • Shape.java সব, বদ্ধ খোলা, বাঁকা, এবং সোজা পার্শ্বে ধারবিশিষ্ট আকার এর জন্য প্যারেন্ট ক্লাস (সারাংশ)।
  • Curve.java একটি (সারাংশ) বাঁকা আকার (খোলা বা বন্ধ)।
  • StraightEdgedShape.java সরাসরি ধার সম্বলিত একটি আকৃতি (খোলা বা বন্ধ)।
  • Measurable.java পরিমাপযোগ্য এলাকায় ইন্টারফেস ডিফাইনিং ক্লাস।
  • Circle.java একটি বৃত্ত যা আকার প্রসারিত করে এবং পরিমাপ প্রয়োগ করে।
  • MeasureUtil.java পরিমাপযোগ্য স্থানের উপর কাজ করে।
  • Polygon.java সরাসরি ধার সম্বলিত একটি বদ্ধ আকৃতি; StraightEdgedShape প্রসারিত করে এবং পরিমাপ প্রয়োগ করে।
  • Rectangle.java একটি আয়তক্ষেত্র যা পরিমাপযোগ্য ইন্টারফেস ধারণ করে; বহুভুজে প্রসারিত করে।
  • MeasureTest.java উদাহরণ এর জন্য ড্রাইভার।

Shape.java

/** The parent class for all closed, open, curved, and 
 *  straight-edged shapes.
 *

public abstract class Shape {
  protected int x, y;

  public int getX() {
    return(x);
  }

  public void setX(int x) {
    this.x = x;
  }

  public int getY() {
    return(y);
  }

  public void setY(int y) {
    this.y = y;
  }
}


 


Curve.java 


একটি (সারাংশ) বাঁকা আকার (খোলা বা বন্ধ) । Curve.java An (abstract) curved Shape (open or closed)




/** A curved shape (open or closed). Subclasses will include
 *  arcs and circles.
 *


public abstract class Curve extends Shape {}




 


StraightEdgedShape.java 


সরাসরি ধার সম্বলিত একটি আকৃতি (খোলা বা বন্ধ) । A Shape with straight edges (open or closed).




/** A Shape with straight edges (open or closed). Subclasses
 *  will include Line, LineSegment, LinkedLineSegments,
 *  and Polygon.
 *

public abstract class StraightEdgedShape extends Shape {}




 


Measurable.java


পরিমাপযোগ্য এলাকায় ইন্টারফেস ডিফাইনিং ক্লাস। Interface defining classes with measurable areas




/** Used in classes with measurable areas. 
 *
 **************

public interface Measurable {
  double getArea();
}




 


 


Circle.java


একটি বৃত্ত যা আকার প্রসারিত করে এবং পরিমাপ প্রয়োগ করে  ।  A circle that extends Shape and implements Measurable.




/** A circle. Since you can calculate the area of
 *  circles, class implements the Measurable interface.
 *

public class Circle extends Curve implements Measurable {
  private double radius;

  public Circle(int x, int y, double radius) {
    setX(x);
    setY(y);
    setRadius(radius);
  }

  public double getRadius() {
    return(radius);
  }

  public void setRadius(double radius) {
    this.radius = radius;
  }

  /** Required for Measurable interface. */

  public double getArea() {
    return(Math.PI * radius * radius);
  }
}




 


MeasureUtil.java


পরিমাপযোগ্য স্থানের উপর কাজ করে  ।  Operates on Measurable instances




/** Some operations on Measurable instances. 
 *

public class MeasureUtil {
  public static double maxArea(Measurable m1,
                               Measurable m2) {
    return(Math.max(m1.getArea(), m2.getArea()));
  }

  public static double totalArea(Measurable[] mArray) {
    double total = 0;
    for(int i=0; i




 


	

	
	




	
	

				

			jQuery Mobile । জেকুএরি মোবাইল
		

			
জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  




















জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার ।


লেখকঃ মোস্তাফিজুর ফিরোজ ।

মেইলঃ me@firoz.me

ওয়েবসাইটঃ www.firoz.me


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


jQuery CSS Classes

জেকোয়েরি মোবাইল তার উপাদান সমূহকে বিভিন্ন ভাবে ডিজাইন করার জন্য সিএসএস ক্লাস ব্যবহার করে থাকে । আজ আমরা তাই সিএসএস ক্লাসের কিছু সাধারণ ব্যবহার দেখাবো ।


Global Classes

এই Global Classes গুলো জেকোয়েরি মোবাইল উইজেটস যেমন বাটন, টুলবার, প্যানেল, টেবিল, লিস্ট প্রভৃতি যোগ করার কাজে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-corner-all

ক্লাসের বর্ণনাঃ উপাদানের গোলাকার কোণা তৈরিতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-shadow

ক্লাসের বর্ণনাঃ উপাদান সমূহের শ্যাডো মানে ছায়া তৈরিতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-overlay-shadow

ক্লাসের বর্ণনাঃ মাত্রাতিরিক্ত ছায়া তৈরিতে এটা ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-mini

ক্লাসের বর্ণনাঃ উপাদাঙ্গুলোকে ছোট করতে এটা ব্যবহার করা হয় ।


Button Classes

<a> অথবা <button> উপাদানগুলোকে Global Classes এর সাথে যোগ করতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn

ক্লাসের বর্ণনাঃ বাটনগুলোকে বিভিন্ন স্টাইলে সাজাতে এই <a> উপাদানসমূহকে যোগ করতে ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn-inline

ক্লাসের বর্ণনাঃ বাটন গুলোকে একই সারিতে দেখাতে এটি ব্যবহার করা হয় ।


ক্লাসের নামঃ ui-btn-icon-top

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার উপরে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-right

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার ডান দিকে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-bottom

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার নিচে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-left

ক্লাসের বর্ণনাঃ আইকনকে বাটনের লেখার বাম দিকে নিয়ে যায় ।


ক্লাসের নামঃ ui-btn-icon-notext

ক্লাসের বর্ণনাঃ শুমুমাত্র আইকন দেখাবে ।


ক্লাসের নামঃ ui-btn-a|b

ক্লাসের বর্ণনাঃ a এবং b দুইটি ব্যাকগ্রাউণ্ডের কালার দেখাবে । a এর কালার ডিফল্ট থাকে যা হল ধূসর ব্যাকগ্রাউণ্ডের সাথে কালো লেখা । শুধুমাত্র b কালো ব্যাকগ্রাউণ্ডের সাথে সাদা লেখার পরিবর্তন করবে ।


Icon Classes

সকল <a> এবং <button> উপাদানের ক্লাসসমূহ দেয়া হল ।


ক্লাসের নামঃ ui-icon-action

ক্লাসের বর্ণনাঃ অ্যাকশন বাটন ।


ক্লাসের নামঃ ui-icon-alert

ক্লাসের বর্ণনাঃ একটা ত্রিভূজের ভিতর বিস্ময় চিহ্ন ।


ক্লাসের নামঃ ui-icon-audio

ক্লাসের বর্ণনাঃ স্পিকারের চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d-l

ক্লাসের বর্ণনাঃ নিচের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d-r

ক্লাসের বর্ণনাঃ নিচের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u-l

ক্লাসের বর্ণনাঃ উপরের দিকে বাম দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u-r

ক্লাসের বর্ণনাঃ উপরের দিকে ডান দিকে মুখ করা তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-l

ক্লাসের বর্ণনাঃ বাম দিকের তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-r

ক্লাসের বর্ণনাঃ ডান দিকের তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-u

ক্লাসের বর্ণনাঃ উর্দ্ধমূখী তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-arrow-d

ক্লাসের বর্ণনাঃ নিম্নগামী তীর চিহ্ন ।


ক্লাসের নামঃ ui-icon-back

ক্লাসের বর্ণনাঃ ব্যাক বাটন ।


ক্লাসের নামঃ ui-icon-bars

ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল দাগের বাটন ।


ক্লাসের নামঃ ui-icon-bullets

ক্লাসের বর্ণনাঃ তিনটি সমান্তরাল ফোটার বাটন ।


ক্লাসের নামঃ ui-icon-calendar

ক্লাসের বর্ণনাঃ ক্যালেন্ডার বাটন ।


ক্লাসের নামঃ ui-icon-camera

ক্লাসের বর্ণনাঃ ক্যামেরা বাটন ।


ক্লাসের নামঃ ui-icon-carat-d

ক্লাসের বর্ণনাঃ নিম্নগামী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-l

ক্লাসের বর্ণনাঃ বামমুখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-r

ক্লাসের বর্ণনাঃ ডানমুখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-carat-u

ক্লাসের বর্ণনাঃ উর্দ্ধমূখী ক্যারাট ।


ক্লাসের নামঃ ui-icon-check

ক্লাসের বর্ণনাঃ চেক মার্ক ।


ক্লাসের নামঃ ui-icon-clock

ক্লাসের বর্ণনাঃ ঘড়ির আইকন ।


ক্লাসের নামঃ ui-icon-cloud

ক্লাসের বর্ণনাঃ মেঘের আইকন ।


ক্লাসের নামঃ ui-icon-comment

ক্লাসের বর্ণনাঃ কমেন্ট বা ম্যাসেজ বাটন ।


ক্লাসের নামঃ ui-icon-delete

ক্লাসের বর্ণনাঃ ডিলিট বাটন ।


ক্লাসের নামঃ ui-icon-edit

ক্লাসের বর্ণনাঃ এডিট অথবা পেন্সিল আইকন ।


ক্লাসের নামঃ ui-icon-eye

ক্লাসের বর্ণনাঃ চোখের আইকন ।


ক্লাসের নামঃ ui-icon-forbidden

ক্লাসের বর্ণনাঃ নিষিদ্ধ আইকন ।


ক্লাসের নামঃ ui-icon-forward

ক্লাসের বর্ণনাঃ ফরওয়ার্ড আইকন ।


ক্লাসের নামঃ ui-icon-gear

ক্লাসের বর্ণনাঃ সেটিংস বাটন ।


ক্লাসের নামঃ ui-icon-grid

ক্লাসের বর্ণনাঃ গ্রিড চিহ্ন ।


ক্লাসের নামঃ ui-icon-heart

ক্লাসের বর্ণনাঃ হার্ট অথবা লাভ চিহ্ন ।


ক্লাসের নামঃ ui-icon-home

ক্লাসের বর্ণনাঃ হোম বাটন ।


ক্লাসের নামঃ ui-icon-info

ক্লাসের বর্ণনাঃ ইনফরমেশন বাটন ।


ক্লাসের নামঃ ui-icon-location

ক্লাসের বর্ণনাঃ লোকেশন বাটন ।


ক্লাসের নামঃ ui-icon-lock

ক্লাসের বর্ণনাঃ তালার আইকন ।


ক্লাসের নামঃ ui-icon-mail

ক্লাসের বর্ণনাঃ মেইল আইকন ।


ক্লাসের নামঃ ui-icon-minus

ক্লাসের বর্ণনাঃ বিয়োগ আইকন ।


ক্লাসের নামঃ ui-icon-navigation

ক্লাসের বর্ণনাঃ নেভিগেশন আইকন ।


ক্লাসের নামঃ ui-icon-phone

ক্লাসের বর্ণনাঃ টেলিফোন আইকন ।


ক্লাসের নামঃ ui-icon-power

ক্লাসের বর্ণনাঃ পাওয়ার বাটন । বা অন অফ বাটন ।


ক্লাসের নামঃ ui-icon-plus

ক্লাসের বর্ণনাঃ যোগ বাটন ।


ক্লাসের নামঃ ui-icon-recycle

ক্লাসের বর্ণনাঃ রিসাইকেল চিহ্ন ।


ক্লাসের নামঃ ui-icon-refresh

ক্লাসের বর্ণনাঃ রিফ্রেশ বাটন ।


ক্লাসের নামঃ ui-icon-search

ক্লাসের বর্ণনাঃ সার্চ বাটন ।


ক্লাসের নামঃ ui-icon-shop

ক্লাসের বর্ণনাঃ দোকান অথবা ব্যাগের আইকন ।


ক্লাসের নামঃ ui-icon-star

ক্লাসের বর্ণনাঃ তারার চিহ্ন ।


ক্লাসের নামঃ ui-icon-tag

ক্লাসের বর্ণনাঃ ট্যাগ বাটন ।


ক্লাসের নামঃ ui-icon-user

ক্লাসের বর্ণনাঃ ব্যবহারকারী বাটন ।


ক্লাসের নামঃ ui-icon-video

ক্লাসের বর্ণনাঃ ভিডিও বা ক্যামেরা আইকন ।


Theme Classes

জেকোয়েরি মোবাইল সাধারণত ধূসর এবং কালো এই দুই ধরনের থিম সরবরাহ করে থাকে । কিন্তু আপনি আপনার ইচ্ছামত এটা পরিবর্তন করে নিতে পারেন । আপনি (a-z) মত আপনার থিমটি কাস্টোমাইজ করতে পারবেন ।


ক্লাসের নামঃ ui-bar-(a-z)

ক্লাসের বর্ণনাঃ হেডার, ফুটার এবং অন্যান্য বারের কালার নির্দেশ করে থাকে ।


ক্লাসের নামঃ ui-body-(a-z)

ক্লাসের বর্ণনাঃ কনটেন্ট ব্লক যেমন page content panes , listview items, popups, collapsibles, loader, sliders, এবং panels এর কালার নির্দেশ করে ।


ক্লাসের নামঃ ui-btn-(a-z)

ক্লাসের বর্ণনাঃ বাটন এবং আইকনের কালার নির্দেশ করে থাকে ।


ক্লাসের নামঃ ui-group-theme-(a-z)

ক্লাসের বর্ণনাঃ গুরুপ ভিত্তিক রঙ নির্দেশ করে দেয় ।


ক্লাসের নামঃ ui-overlay-(a-z)

ক্লাসের বর্ণনাঃ ডায়ালগ, পপ-আপ এবং পেজের উপাদানসমূহের রঙ ঠিক করে দেয় ।


ক্লাসের নামঃ ui-page-theme-(a-z)

ক্লাসের বর্ণনাঃ প্রত্যেক পেজের রঙ নির্দেশ করে ।


Grid Classes

গ্রিডের কলাম গুলো বিন্নভাবে থাকতে পারে। সাধারণত ৫ ধরণের গ্রিড ব্যবহার করা হয়ে থাকে ।


গ্রিড ক্লাসঃ ui-grid-solo

কলামঃ 1

কলামের ব্যাপ্তিঃ 100%

সুসঙ্গত হয়ঃ ui-block-a


গ্রিড ক্লাসঃ ui-grid-a

কলামঃ 2

কলামের ব্যাপ্তিঃ 50% / 50%

সুসঙ্গত হয়ঃ ui-block-a|b


গ্রিড ক্লাসঃ ui-grid-b

কলামঃ 3

কলামের ব্যাপ্তিঃ 33% / 33% / 33%

সুসঙ্গত হয়ঃ ui-block-a|b|c


গ্রিড ক্লাসঃ ui-grid-c

কলামঃ 4

কলামের ব্যাপ্তিঃ 25% / 25% / 25% / 25%

সুসঙ্গত হয়ঃ ui-block-a|b|c|d


গ্রিড ক্লাসঃ ui-grid-d

কলামঃ 5

কলামের ব্যাপ্তিঃ 20% / 20% / 20% / 20% / 20%

সুসঙ্গত হয়ঃ ui-block-a|b|c|d|e


আর এর ভিতরেই কিন্তু আমরা জেকোয়েরি মোবাইল সিএসএস ক্লাসের ব্যবহার শিখে গেলাম । কোথাও না বুঝতে পারলে কমেন্ট করতে কিন্তু ভুলবেন না ।


	

	
	




	
	

				

			এইচটিএমএল HTML
		

			
এইচটিএমএল ক্লাসেস (HTML Classes)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  




















শরিফুল ইসলাম

Php Coder


 


HTML Classes


সিএসএস এর মাধ্যমে বিভিন্ন ক্লাস এর এর স্টাইল সেট করে দেওয়া যায়।


উদাহরণ




<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
</head>
<body>

<div class="cities">
 <h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
 </div> 

</body>
</html>




 


Classing ব্লক elements


এইচটিএমএল <div> একটি ব্লক লেভেল উপাদান। অন্যান্য এইচটিএমএল এর উপাদানের ক্ষেত্রে এটি container হিসেবে কাজ করতে পারে। সবগুলো এইচটিএমএল উপাদানের div এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।


উদাহরণ




<!DOCTYPE html>
<html>
<head>
<style>
.cities {
    background-color:black;
    color:white;
    margin:20px;
    padding:20px;
} 
</style>
 </head>
<body>

<div class="cities">
 <h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
 </div>

<div class="cities">
 <h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
 <h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>






 


Classing inline elements


এইচটিএমএল এর <span> উপাদান একটি ইনলাইন উপাদান যা container এর টেক্সট এর জন্য ব্যবহার হয়ে থাকে। সবগুলো এইচটিএমএল উপাদানের span এর ক্লাস এর নাম এক রাখলে সিএসএস স্টাইল থেকে সবগুলোর ক্ষেত্রে সমান এফেক্ট ফেলান সম্বভ।


উদাহরণ






<!DOCTYPE html>
<html>
<head>
<style>
span.red {color:red;}
 </style>
</head>
<body>

<h1>My <span class="red">Important</span> Heading</h1>

</body>
</html>






 


	

	
	




	
	

				

			বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)
		

			
বুটস্ট্র্যাপ গ্রিড সিস্টেম (Bootstrap Grid System)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  




















শেখ মাহফুজুর রহমান


 


বুটস্ট্র্যাপের গ্রিড সিস্টেম একটি পেজে ১২টি পর্যন্ত কলাম যোগ করতে দেয়। আপনি যদি আলাদাভাবে সবগুলো (১২টি) কলাম ব্যবহার করতে না চান তাহলে কিছু কলামকে গ্রুপ বা গুচ্ছাকৃত করে প্রশস্তততর কলাম তৈরি করতে পারবেনঃ








span 1




span 1




span 1




span 1




span 1




span 1




span 1




span 1




span 1




span 1




span 1




span 1








span 4




span 4




span 4








span 4




span 8








span 6




span 6








span 12








বুটস্ট্র্যাপ গ্রিড সিস্টেম রেস্পন্সিভ হয়ে থাকে এবং স্ক্রিনের আকার অনুযায়ী কলামগুলো পুনরায় সজ্জিত হয়ঃ বড় স্ক্রিনে তিনটি কলামের মধ্যে কন্টেন্টগুলো সাজালে দেখতে ভালো লাগে কিন্তু ছোট স্ক্রিনে কন্টেন্টগুলো একটি আরেকটির উপর স্তুপাকারে সজ্জিত হলে দেখতে ভালো লাগবে।


টিপসঃ মনে রখবেন একটি রো বা সারির জন্য ১২টি পর্যন্ত গ্রিড কলাম যোগ করতে হবে। এর চেয়ে বেশি কলাম যোগ করা হলে, স্ক্রিন যত বড়ই হোক না কেন, সেগুলো স্তুপাকার হয়ে যাবে।


 


গ্রিড ক্লাস


বুটস্ট্র্যাপ গ্রিড সিস্টেমের চারটি ক্লাস রয়েছেঃ


    

  • xs (ফোনের জন্য)
    • 

  • sm (টেবলেটের জন্য)
    • 

  • md (ডেস্কটপের জন্য)
    • 

  • lg (বড় ডেস্কটপের জন্য)
    • 



 


উপরের ক্লাসগুলো একসাথে করে আরও ডাইনামিক এবং ফ্ল্যাক্সিবল লেআউট তৈরি করা সম্ভব।


টিপসঃ প্রত্যেকটি ক্লাস মাপ অনুযায়ী হয়ে থাকে, তাই আপনি যদি xs এবং sm এর জন্য একই উইডথ (প্রস্থ্য) ঠিক করতে চান তাহলে আপনাকে শুধু xs কে নির্দিষ্ট করে দিলেই হবে।


 


গ্রিড সিস্টেমের নিয়ম


কিছু বুটস্ট্র্যাপ গ্রিড সিস্টেমের নিয়ম:


সঠিক অ্যালাইনম্যান্ট ও প্যাডিং এর জন্য রো'গুলোকে অবশ্যই .container (এর প্রস্থ্য পরিবর্তিত হয়না) অথবা .container-fluid (প্রস্থ্য পুরো স্ক্রিনে প্রসারিত হতে পারে) এর ভিতরে রাখতে হবে।


    

  • কতগুলো কলাম নিয়ে একটি হরাইজন্টাল গ্রুপ তৈরি করতে রো ব্যবহার করুন।
    • 

  • কন্টেন্টকে অবশ্যই কলামের ভিতরে রাখতে হবে এবং কলামগুলোই শুধুমাত্র রো এর ইমিডিয়েট চাইল্ড হতে পারে।
    • 

  • .row এবং .col-sm-4 এর মতো পুর্ব-সংজ্ঞায়িত ক্লাসগুলো তাৎক্ষণিকভাবে তৈরি গ্রিড লেআউটের জন্য ব্যবহার করা যায়।
    • 

  • কলাম এর কন্টেন্টগুলোর মধ্যে প্যাডিং এর মাধ্যমে ফাঁক তৈরি করে। এই প্যাডিং .rows এর উপর নেগেটিভ মার্জিনের মাধ্যমে প্রথম ও শেষ কলামের এর জন্য রো'তে অফসেট থাকে।
    • 

  • আপনি কতটি কলামে প্রসারিত করবেন তা ১২টি কলামের নাম্বার নির্দিষ্ট করে দেয়ার মাধ্যমে গ্রিড কলাম তৈরি করতে পারবেন। উদাহরণস্বরূপ, তিনটি সমান কলাম তিনটি .col-sm-4 ব্যবহার করবেন।
    • 



 


একটি বুটস্ট্র্যাপ গ্রিডের বেসিক স্ট্রাকচার


নিচে একটি বুটস্ট্যাপ গ্রিডের বেসিক স্ট্রাকচার দেয়া হলোঃ




<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">
    ...
  </div>
</div>




 


আপনার ইচ্ছে মতো লেআউট তৈরি করতে চাইলে প্রথমে একটি কন্টেইনার তৈরি করুন (<div class="container">)। তারপর একটি রো তৈরি করুন (<div class="row">)। এরপরে, ইচ্ছেমতো কলাম সংখ্যা যোগ করুন ( সঠিক .col-*-* ক্লাসসহ ট্যাগ)। খেয়াল রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যেক রো এর জন্য ১২ পর্যন্ত হতে হবে।


 


গ্রিড অপশান


বিভিন্ন ডিভাইসে বুটস্ট্র্যাপ গ্রিড সিস্টেম কিভাবে কাজ করে তা নিচের ছকে ব্যাখ্যা করা হলোঃ









অতি ছোট ডিভাইস


ফোন


(<768px)




ছোট ডিভাইস


ট্যাবলেট (>=768px)




মাঝারি ডিভাইস


ডেস্কটপ


(>=992px)




বড় ডিভাইস


ডেস্কটপ


(>=1200px)






গ্রিড এর আচরন


সব সময়ে অনুভূমিক




শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক




শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক




শুরুতে ধসে যায়, ব্রেকপয়েন্ট এর উপরে অনুভূমিক






ধারক এর প্রস্থ


নাই (স্বয়ংক্রিয়)




750px




970px




1170px






ক্লাস প্রিফিক্স


.col-xs-




.col-sm-




.col-md-




.col-lg-






কলাম সংখ্যা


12




12




12




12






কলামের প্রসস্থতা


স্বয়ংক্রিয়




~62px




~81px




~97px






গুটার প্রস্থ


30px (কলামের প্রতিটি পার্শ্বে 15px)




30px (কলামের প্রতিটি পার্শ্বে 15px)




30px (কলামের প্রতিটি পার্শ্বে 15px)




30px (কলামের প্রতিটি পার্শ্বে 15px)






Nestable


হ্যাঁ




হ্যাঁ




হ্যাঁ




হ্যাঁ






অফসেটস


হ্যাঁ




হ্যাঁ




হ্যাঁ




হ্যাঁ






কলাম ক্রম


হ্যাঁ




হ্যাঁ




হ্যাঁ




হ্যাঁ








	

	
	




	
	

				

			বুটস্ট্র্যাপ ৩ টিউটোরিয়াল (Bootstrap 3 Tutorial)
		

			
বুটস্ট্র্যাপ টেবিল (Bootstrap Tables)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  




















Bootstrap বেসিক টেবিল


সাধারণত Bootstrap বেসিক টেবিলে light padding বা সামান্য প্যাডিং ও horizontal বা আনুভূমিক divider থাকে। এক্ষেত্রে divider বলতে Row এর bottom-border কে বোঝানো হয়েছে।

.table class ব্যবহার করে টেবিলের basic styling করা হয়। যেমন:




কোড :




<div class="container">
  <h2>Basic Table</h2>
  <p>The .table class adds basic styling (light padding and only horizontal 
dividers) to a table:</p>            
  <table class="table">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


উল্লেখ্য : এই অনুচ্ছেদের সকল উদাহরণের ক্ষেত্রে বা সকল বুটস্ট্র্যাপ কোড নিয়ে কাজ করার সময় অবশ্যই হেড সেকশনে নিম্নোক্ত কোড টাইপ করতে হবে :




<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/
bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
  </script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
  </script>
</head>




 


Striped Rows


.table-striped class ব্যবহার করে টেবিলে zebra-stripes যোগ করা হয়। যেমন:




কোড:




<div class="container">     
  <table class="table table-striped">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


Bordered Table


.table-bordered class ব্যবহার করে টেবিলের ও সেলের চারদিকে বর্ডার যোগ করা হয়। যেমন:




কোড : 




<div class="container">     
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


Hover Rows


টেবিলের row বা সারিতে hover ইফেক্ট দেবার জন্য .table-hover class টি যোগ করা হয়। যেমন:




কোড :




<div class="container">         
  <table class="table table-hover">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


Condensed Table


.table-condensed class টি ব্যবহার করলে টেবিলের সেল সাধারণ প্যাডিং অর্ধেক পরিমাণে কমে যায়। যেমন:




কোড :




<div class="container">         
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


Contextual Classes


সাধারণত কোনো টেবিলের rows (<tr>) কিংবা cells (<td>) এ color দেবার জন্য Contextual Classes ব্যবহার করা হয়। যেমন:




কোড :




<div class="container">        
  <table class="table table-condensed">
    <thead>
      <tr>
        <th>Firstname</th>
        <th>Lastname</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Doe</td>
        <td>john@example.com</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Moe</td>
        <td>mary@example.com</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Dooley</td>
        <td>july@example.com</td>
      </tr>
    </tbody>
  </table>
</div>




 


Contextual Class গুলো সাধারণত নির্দিষ্ট কিছু color কে নির্দেশ করে। যেসকল Contextual Class ব্যবহৃত হয় সেগুলো হলো:


 






.active
কোনো টেবিলের row বা টেবিলের cell এর জন্য hover color এর জন্য ব্যবহৃত হয়।




.success
সফল (successful ) বা ইতিবাচক (positive) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।




.info
নিরপেক্ষ বা তথ্যপূর্ণ (neutral informative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।




.warning
মনোযোগ আকর্ষণ করার জন্য বা সতর্কতামূলক (warning) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।




.danger
বিপদজনক বা নেতিবাচক (dangerous or potentially negative) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।






 


	

	
	




	
	

				

			সি এস এস টিউটোরিয়াল (css tutorial)
		

			
সি এস এস সিলেক্টর (CSS Selectors)

		

			 		

	


		

		




Huge Sell on Popular Electronics














  

   Subscribe to Our Youtube Channel --|--Our Online Shop:ShopForSoul--|Get Trained in AI, Big-Data, Data Science--
  

  
  




















এইচটিএমএল এর সব element গুলোকে manipulate করার জন্য সিএসএস এর বিভিন্ন selector ব্যবহার করা হয়।


id , class, type, attribute ইত্যাদির উপর ভিত্তি করে এইচটিএমএল এলিমেন্টগুলো খোঁজা বা নির্বাচন করার জন্য সিএসএস সিলেক্টর ব্যবহার করা হয়।


এলিমেন্ট সিলেক্টর


এলিমেন্ট সিলেক্টর এলিমেন্টের নামের উপর ভিত্তি করে উপাদান নির্বাচন করে।


আমরা সকল <p> এলিমেন্টগুলোকে সিলেক্ট করতে পারি এইভাবে




P {
   text-align: center;
   color: red;
 }




ID Selector


কোন ইউনিক element এর জন্য আমরা id ব্যবহার করে থাকি। একটি পেজ এর মধ্যে ID ইউনিক হওয়া উচিত। কোন element এর নির্দিষ্ট কোন ID কে কল করতে গেলে আমাদের হেস operator ব্যবহার করতে হয়।


যেসকল এইচটিএমএল এর এলিমেন্ট id="para1" তাদের সিলেন্ট করতে হয় এভোবে




#para1 {
    text-align: center;
    color: red;
}




নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।


ক্লাস সিলেক্টর


class selector নির্দিষ্ট ক্লাস এট্রিবিউ এর এলিমেন্টগুলি সিলেক্ট করে।


নির্দিষ্ট ক্লাস এর এট্রিবিউটগুলো নির্বাচন করতে class selector কে ডট চিহ্ন দিয়ে সুরু করতে হয়, পরে ক্লাসের নাম উল্লেখ করতে হয়।


নিচের উদারণটি সকল এইচটিএমএল  এলিমেন্ট যেগুলোতে class="center" আছে সেগুলো সিলেক্ট করবে।




.center {
    text-align: center;
    color: red;
}




 


ক্লাস দ্বারা আপনি শুধুমাত্র নির্দিষ্ট এইচটিএমএল এলিমেন্ট প্রভাবিত হবে এভাবেও নির্দিষ্ট করে দিতে পারেন।


নিচের উদারণটি সকল এইচটিএমএল <p> এলিমেন্ট যেগুলোতে class="center" আছে সেগুলো সিলেক্ট করবে।




p.center {
    text-align: center;
    color: red;
}




নোটঃ আইডি এর নাম সংখ্যা দিয়ে শুরু করবেন না।


Grouping selector


অনেক সময় দেখা যায় অনেকগুলো element এর স্টাইল প্রায় এক রকম থাকে। যেমন
 h1 {
    text-align: center;
    color: red;
}

h2 {
    text-align: center;
    color: red;
}

p {
    text-align: center;
    color: red;
}

কোড ছোট রাখতে আপনি সিলেক্টরগুলোর গ্রুপ তৈরি করতে পারেন। 
গ্রুপ তৈরি করতে প্রতিটি সিলেক্টরকে কমা (,) দ্বারা পৃথক করতে হয়।
উদাহরণঃ




h1, h2, p {
    text-align: center;
    color: red;
}




 


 


নিজে নিজে চেষ্টা করো


 


অনুশীলন ০১ঃ


সকল <p> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর




<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>




 


অনুশীলন ০২ঃ


যে এলিমেন্টগুলোর id="para1" সেগুলোর রঙ লাল এ পরিবর্তন কর




<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p id="para1">This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>




 


অনুশীলন ০৩ঃ


যেসকল এলিমেন্ট এর ক্লাস "colortext" সেগুলোর রঙ লাল এ পরিবর্তন কর




<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p class="colortext">This is another paragraph.</p>
<p class="colortext">This is also a paragraph.</p>

</body>
</html>




 


অনুশীলন ০৪ঃ


সকল <p> এবং <h1> এলিমেন্ট এর রঙ লাল এ পরিবর্তন কর। কোড ছোট রাখতে এলিমেন্টগুলোর গ্রুপ তৈরি কর।




<!DOCTYPE html>
<html>
<head>
<style>

</style>
</head>
<body>

<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>