Feb 12

বুটস্ট্র্যাপ ইমেজেস (Bootstrap Images)

বুটস্ট্র্যাপ ইমেজ আকৃতি

Bootstrap এর সাহায্যে সহজেই Image কে তিন প্রকার Shape এ দেখানো যায়, যথা:

  1. গোলাকৃতির কোণ
  2. বৃত্ত
  3. থাম্বনেল

 

গোলাকৃতির কোণ

Image এর চারপাশে Rounded Corner তৈরি করার জন্য .img-rounded class টিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Corner সাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-rounded" alt="Cinque Terre" width="304" 
height="236">

 

বৃত্ত

Image কে বৃত্তাকার বা Circle Shape এ দেখানোর জন্য .img-circle classটিকে যোগ করা হয়, তবে ইন্টারনেট এক্সপ্লোরার-৮ Rounded Cornerসাপোর্ট করে না।

উদাহরণ:

 <img src="cinqueterre.jpg" class="img-circle" alt="Cinque Terre" width="304" 
 height="236">

 

থাম্বনেল

Thumbnail Shape এ দেখানোর জন্য .img-thumbnail classটিকে যোগ করা হয়।
উদাহরণ:

 <img src="cinqueterre.jpg" class="img-thumbnail" alt="Cinque Terre" width="304" 
 height="236">

 

প্রতিক্রিয়াশীল ইমেজ

সাধারণত Image এবং screen এর size ভিন্ন ভিন্ন হতে পারে। আবার, রেসপন্সিভ ইমেজ (Responsive Images) screen এর size অনুযায়ী image কে resize করে parent element এর সাথে সামঞ্জস্য রেখে screen এ ডিসপ্লে করে। রেসপন্সিভ ইমেজ তৈরি করার জন্য .img-responsive class টিতে <img> ট্যাগে যোগ করা হয়। উল্লেখ্য যে, .img-responsive class এর ক্ষেত্রে max-width: 100%; এবং height: auto; প্রযোজ্য হয়।

উদাহরণ:

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

ফলাফল : প্রতিক্রিয়াশীল ইমেজ

 

Image Gallery বা গ্যালারী তৈরি

Bootstrap’s grid system এ .thumbnail class যোগ করেও ইমেজ গ্যালারী তৈরি করা যায়।
উদাহরণ:

 <div class="row">
  <div class="col-md-4">
    <a href="pulpitrock.jpg" class="thumbnail">
      <p>Pulpit Rock: A famous tourist attraction in Forsand, Ryfylke, Norway.</p>
      <img src="pulpitrock.jpg" alt="Pulpit Rock" style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="moustiers-sainte-marie.jpg" class="thumbnail">
      <p>Moustiers-Sainte-Marie: Considered as one of the "most beautiful villages of 
      France".</p>
      <img src="moustiers-sainte-marie.jpg" alt="Moustiers Sainte Marie" 
      style="width:150px;height:150px">
    </a>
  </div>
  <div class="col-md-4">
    <a href="cinqueterre.jpg" class="thumbnail">
      <p>The Cinque Terre: A rugged portion of coast in the Liguria region of Italy.
      </p>
      <img src="cinqueterre.jpg" alt="Cinque Terre" style="width:150px;height:150px">
    </a>
  </div>
</div>

ফলাফল : ইমেজ গ্যালারী

 

প্রতিক্রিয়াশীল Embed

যে কোনো রকম videos বা slideshows রেসপন্সিভ হিসাবে যোগ করা যেতে পারে। এক্ষেত্রে সরাসরি <iframe>, <embed>, <video>, এবং <object> এলিমেন্ট এ class যোগ করা যায়।

নিম্নোক্ত উদাহরণে <iframe> ট্যাগে .embed-responsive-item class টি যোগ করে video টিকে রেসপন্সিভ আকারে উপস্থাপন করা হয়েছে। এক্ষেত্রে ভিডিওটির containing <div> টি হলো ভিডিওটির parent element, কাজেরই <div> এর মাধ্যমে video টির ratio নির্ধারিত হবে।

উদাহরণ :

 <div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

ফলাফল : প্রতিক্রিয়াশীল Embed

 

aspect ratio বলতে কি বোঝায়?

কোনো image এর width ও height এর মধ্যকার আনুপাতিক হার বা সম্পর্কই হচ্ছে aspect ratio. সাধারণত দুই প্রকারের video aspect ratios ব্যবহৃত হয় যথা: ৪:৩ (বিংশ শতাব্দীর universal ভিডিও ফরমেট) এবং ১৬:৯ (HD televisio n ও European digital television এর universal ভিডিও ফরমেট)। সম্পূর্ণ Bootstrap Image রেফারেন্স: image এর সকল class এর পরিপূর্ণ রেফারেন্স পেতে Bootstrap Image Reference অধ্যায়টি দেখুন।

 

Feb 12

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

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) প্রতিক্রিয়া দেখাতে ব্যবহৃত হয়।

 

Feb 12

পিএইচপি ৫ ফর্ম হ্যান্ডলিং (PHP 5 Form Handling)

আক্তারুজ্জামান

Department of CSE, University of Chittagong

 

ইউজার এর কাছ থেকে বিভিন্ন ধরনের তথ্য সংগ্রহ করতে ফর্ম (form) ব্যাবহার করা হয়। এই তথ্যগুলো পিএইচপি প্রোগ্রামের মাধ্যমে ডাটাবেজে স্টোর করা হয়। পিএইচপি তে দুটি সুপার গ্লুবাল ভেরিয়েবল আছে যা ফর্ম থেকে বিভিন্ন উপাত্ত বা ইউজার এর ইনপুট তুলে আনতে ব্যাবহৃত হয়। এই দুইটি ভেরিয়েবল হল $_GET এবং $_POST।

নিচের উদাহরণে একটি সিম্পল এইচটিএমএল ফর্ম দেওয়া হয়েছে যেখানে ২ টি ইনপুট ফিল্ড এবং একটি সাবমিট বাটন রয়েছে।

<html>
 <body>
 
 <form action="welcome.php" method="post">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

যখন ইউজার এই ফর্মের ডাটা ফিল্ড গুলো পূর্ণ করে সাবমিট বাটনে ক্লিক করবে তখন উক্ত ডাটা গূলো “welcome.php” ফাইলে চলে যাবে। এখানে যেহেতু মেথড “post” ব্যাবহার করা হয়েছে তাই ডাটা গুলো HTTP POST মেথডের মাধ্যমে সেন্ড হবে।
সাবমিট করা ডাটা গুলো খুব সহজে নিচের মত করে “welcome.php” ফাইলে প্রদর্শন করা যাবে।

 <html>
 <body>
 
 Welcome <?php echo $_POST["name"]; ?><br>
 Your email address is: <?php echo $_POST["email"]; ?>
 
 </body>
 </html>

 

এই কোডটির আউটপূট হবে নিচের মতঃ

Welcome John
Your email address is john.doe@example.com

 

একই ভাবে HTTP GET মেথডে ব্যাবহার করেও কাজটি করা যাবে।
উদাহরনঃ

 <html>
 <body>
 
 <form action="welcome_get.php" method="get">
 Name: <input type="text" name="name"><br>
 E-mail: <input type="text" name="email"><br>
 <input type="submit">
 </form>
 
 </body>
 </html>

 

এখেত্রে “welcome_get.php” ফাইলটি নিচের মত হবেঃ

<html>
 <body>
 
 Welcome <?php echo $_GET["name"]; ?><br>
 Your email address is: <?php echo $_GET["email"]; ?>
 
 </body>
 </html>

 

গেট বনাম পোষ্ট (GET vs. POST)

  • GET এবং POST উভয়েইএকটি অ্যারে নির্মাণ করে (যেমনঃ array( key => value, key2 => value2, key3 => value3, …))। এখানে key,key1,key2 হল ফর্ম কন্ট্রোল গুলোর নামে এবং value,value1,value2 হল ইউজারের ইনপুট ডাটা।
  • GET এবং POST উভয়েই $ _GET এবং $ _POST হিসাবে গণ্য হয়। এইগুলো হল সুপার গ্লুবালস অর্থাৎ এইগুলো সবসময় সব ফাংশন এবং সব ক্লাস থেকে এক্সেস করা যাবে।
  • ফর্মের ডাটা GET মেথড ব্যাবহার করে সেন্ড করলে সকল ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয়। অন্য দিকে ফর্মের ডাটা POST মেথড ব্যাবহার করে সেন্ড করলে ডাটা ব্রাউজার এড্রেসবারে URL এ প্রদর্শিত হয় না।

 

কখন GET ব্যবহার করতে হবে? (When to use GET?)

GET এর মাধ্যমে পাঠানো ডাটা সবাই দেখতে পায়। GET এর মাধ্যমে খুব বেশি ডাটা পাঠানো যায় না ,সর্বোচ্চ 2000 characters পাঠানো যায়। সেনসিটিভ ডাটা যেমন passwords সেন্ড করার জন্য কখনো GET ব্যাবহার করা উচিত নয়।

 

কখন POST ব্যবহার করতে হবে? (When to use POST?)

POST এর মাধ্যমে পাঠানো ডাটা অন্যরা দেখতে পায় না এবং এইখানে যত ইচ্ছা তথ্য পাঠানো যায়। এছাড়াও POST এর মাধ্যমে সার্ভারে ফাইল আপলোড করা যায় যেটা GET এর মাধ্যমে করা সম্ভব না।

 

Feb 12

বুটস্ট্র্যাপ ট্যাক্সট / টাইপোগ্রাফি (Bootstrap Text/Typography)

Bootstrap এর প্রাথমিক (default ) ফন্ট সাইজ হল ১৪ পিক্সেল, যার প্রতি লাইনের উচ্চতা (height) ১.৪২৮ ।

এটা <body> এবং সমস্ত প্যরাগ্রাফে ব্যবহার করা হয় ।

উপরন্তু, সকল <p> elements এর একটি bottom margin থাকে যেটা তাদের নির্ণিত line-height এর সমান অথবা অর্ধেক (ডিফল্ট হিসেবে 10px)

বুটস্ট্র্যাপ বনাম ব্রাউজার ডিফল্ট 

এই অনুশীলনীতে আমারা দেখব বুটস্ট্র্যাপ এবং এর পরে ব্রাউজার এর সাহায্যে HTML এলিমেন্টকে কিছুটা ভিন্নতরভাবে স্টাইল করা।

<h1> – <h6>

Default হিসাবে, বুটস্ট্র্যাপ HTML হেডিংকে (<h1> to <h6>) নিম্নোক্তভাবে স্টাইল করে :

কোড :

<div class="container">
  <h1>h1 Bootstrap heading (36px)</h1>
  <h2>h2 Bootstrap heading (30px)</h2>
  <h3>h3 Bootstrap heading (24px)</h3>
  <h4>h4 Bootstrap heading (18px)</h4>
  <h5>h5 Bootstrap heading (14px)</h5>
  <h6>h6 Bootstrap heading (12px)</h6>
</div>

 

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

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

 

 

<small>

Bootstrap এ HTML <small> এলিমেন্টকে কিছুটা আলোকিত এবং দ্বীতিয় পর্যায়ের টেক্স তৈরি করার জন্য ব্যবহার করা হয়।

কোড :

<div class="container">
  <h1>Lighter, Secondary Text</h1>
  <p>The small element is used to create a lighter, secondary text in any heading:</p>       
  <h1>h1 heading <small>secondary text</small></h1>
  <h2>h2 heading <small>secondary text</small></h2>
  <h3>h3 heading <small>secondary text</small></h3>
  <h4>h4 heading <small>secondary text</small></h4>
  <h5>h5 heading <small>secondary text</small></h5>
  <h6>h6 heading <small>secondary text</small></h6>
</div>

 

<mark>

Bootstrap, HTML <mark> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :

<div class="container">
  <p>Use the mark element to <mark>highlight</mark> text.</p>
</div>

 

<abbr>

Bootstrap, HTML <abbr> এলিমেন্টকে নিম্নোক্তভাবে স্টাইল করে।

কোড :

<div class="container">
  <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
</div>

 

<blockquote>

HTML <blockquote> এলিমেন্ট Bootstrap এ নিচের মত স্টাইল হয় :

কোড :

<div class="container">
  <h1>Blockquotes</h1>
  <p>The blockquote element is used to present content from another source:</p>
  <blockquote>
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

 

.blockquote-reverse class টি ব্যবহার করা হয় ডান পাশে quote দেখানোর জন্য

কোড :

<div class="container">
  <h1>Blockquotes</h1>
  <p>To show the quote on the right use the class .blockquote-reverse:</p>
  <blockquote class="blockquote-reverse">
    <p>For 50 years, WWF has been protecting the future of nature. The world's leading 
conservation organization, WWF works in 100 countries and is supported by 1.2 million members 
in the United States and close to 5 million globally.</p>
    <footer>From WWF's website</footer>
  </blockquote>
</div>

 

<dl>

HTML <dl> এর সাহায্যে Bootstrap এ নিচের style টি তৈরি হয়

কোড :

<div class="container">
  <dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>     
</div>

 

<code>

Bootstrap এ HTML <code> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড :

<div class="container">
  <p>The following HTML elements: <code>span</code>, <code>section</code>, and <code>div</code> 
defines a section in a document.</p>
</div>

 

<kbd>

Bootstrap এ HTML <kbd> এলিমেন্ট নিচের মত স্টাইল হয় :

কোড:

<div class="container">
  <p>Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
</div>

 

<pre>

HTML <pre>এর সাহায্যে Bootstrap এ নিচের style তৈরি হয়

কোড:

<div class="container">
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks.
</pre>
</div>

 

প্রাসঙ্গিক রং এবং ব্যাকগ্রাউন্ড

Bootstrap এ কিছু প্রাসঙ্গিক class আছে, যার মাধ্যমে অর্থবহ রং তৈরি করা যায়।

টেক্সট এর জন্য class গুলো হচ্ছে :.text-muted, .text-primary, .text-success, .text-info, .text-warning, এবং .text-danger:

কোড :

<div class="container">
  <p class="text-muted">This text is muted.</p>
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>
  <p class="text-info">This text represents some information.</p>
  <p class="text-warning">This text represents a warning.</p>
  <p class="text-danger">This text represents danger.</p>
</div>

 

ব্যাকগ্রাউন্ট এর জন্য class গুলো হচ্ছে : .bg-primary, .bg-success, bg-info, bg-warning, এবং .bg-danger:

কোড:

<div class="container">
  <p class="bg-primary">This text is important.</p>
  <p class="bg-success">This text indicates success.</p>
  <p class="bg-info">This text represents some information.</p>
  <p class="bg-warning">This text represents a warning.</p>
  <p class="bg-danger">This text represents danger.</p>
</div>

 

অন্যান্য টাইপোগ্রাফি Class

  • .lead
  • .small
  • .text-left
  • .text-center
  • .text-right
  • .text-justify
  • .text-nowrap
  • .text-lowercase
  • .text-uppercase
  • .text-capitalize
  • .initialism
  • .list-unstyled
  • .list-inline
  • .dl-horizontal
  • .pre-scrollable

এগুলো ব্যবহারের ফলাফল দেখার জন্য  <p class=”lead”>এখানে আপনার টেক্সট লিখুন</p> লাইনের class=’উপরের যেকোন একটি ক্লাস’ লিখে চেষ্টা করুন।

 

Feb 12

বুটস্ট্র্যাপ গ্রিডস (Bootstrap Grids)

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

 

বুটস্ট্র্যাপ গ্রিড সিস্টেম

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

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 (বড় ডেস্কটপের জন্য)

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

 

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

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

<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 class="row">)। তারপর ইচ্ছেমতো কলামের নাম্বারগুলো (tags with appropriate .col-*-* classes) যোগ করুন। লক্ষ্য রাখবেন, .col-*-* এর নাম্বারগুলো প্রত্যক রো এর জন্য ১২ পর্যন্ত হতে হবে।

 

নিচে কিছু বেসিক বুটস্ট্র্যাপ গ্রিড লেআউটের উদাহরণ দেয়া হলো।

তিনটি সমমাপের কলাম

.col-sm-4 .col-sm-4 .col-sm-4
নিচের উদাহরণে কিভাবে তিনটি সমমাপের কলাম পাওয়া যায় যেগুলোর ব্যবহার টেবলেট দিয়ে শুরু হয় এবং ডেস্কটপে বড় হয়ে যায় তা দেয়া হলো। মোবাইল ফোনে কলামগুলো স্তুপাকারে বিন্যস্ত হয়ে যাবেঃ
 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

ফলাফল : তিনটি-সমমাপের-কলাম

 

দুইটি অসম কলাম

.col-sm-4 .col-sm-8

নিচের উদাহরণে কিভাবে দুইটি অসম মাপের কলাম পাওয়া যায় যেগুলোর ব্যবহার টেবলেট দিয়ে শুরু হয় এবং ডেস্কটপে বড় হয়ে যায় তা দেয়া হলোঃ

 <div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-8">.col-sm-8</div>
</div>

ফলাফল : দুইটি-অসম-কলাম

 

টিপঃ এই টিউটোরিয়ালের পরবর্তী অধ্যায়গুলোতে বুটস্ট্র্যাপ গ্রিড সম্পর্কে আরও বিস্তারিতভাবে জানতে পারবেন।

 

Feb 12

বুটস্ট্র্যাপ শেখা শুরু করা যাক (Bootstrap Get Started)

Bootstrap কি ????

  • Bootstrap হল ফ্রি front-end framework, সহজ এবং দ্রুত গতির web development এর জন্য
  • Bootstrap হল HTML এবং CSS নির্ভর মুদ্রণবিদ্যা, ফর্ম, বাটন, টেবিল, নেভিগেটর, মডালস, ইমেজ carousels এবং আরও অনেক কিছু, জাভা স্ক্রিপ্ট প্লাগিন সহ ডিজাইন templates তরির মাধ্যম
  • Bootstrap এর সাহায্যে তুমি যে কোন Responsive ডিজাইন ও করতে পারবে

 

Responsive Web Design কি?

Responsive Web Design হল ওয়েব সাইট তৈরি, যা সংক্রিয় ভাবে যে কোন ডিভাইসের জন্য নিজেদের সেরাটা উপস্থাপন করে, সেটা মোবাইল থেকে শুরু করে যে কোন বড় কম্পিউটারই হোক না কেন ।

 

Bootstrap ইতিহাস

Bootstrap প্রতিষ্ঠা লাভ করে Mark Otto and Jacob Thornton এর Twitter এর হাত ধরে এবং এটা সর্ব সাধারনের জন্য উন্মুক্ত করে দেয়া হয় August 2011 on GitHub ।

২০১৪ সালে এটা GitHub এর ১ নাম্বার প্রজেক্ট হিসাবে খ্যাতি লাভ করে ।

 

কেন Bootstrap ব্যবহার করবেন ?

Bootstrap এর উপকারিতাঃ

  • সহজলভ্যতাঃ HTML এবং CSS এর ব্যসিক ধারনা থাকলে যে কেউ Bootstrap ব্যবহার করা শুরু করতে পারেন
  • উল্লেখযোগ্য বৈশিস্টঃ Bootstrap’s responsive CSS মোবাইল, ট্যাব্লেট এবং ডেস্কটপের সাথে মানিয়ে নিতে পারে
  • Mobile-first approach: Bootstrap ৩ তে ব্যবহার করা হয়েছে core framework
  • ব্রাউজার উপযুক্ততা: Bootstrap বর্তমানে সকল ব্রাজারে কাজ করতে পারে

 

কোথায় Bootstrap পাওয়া যাবে ??

দুইটা উপায়ে Bootstrap ব্যবহার শুরু করা যায়

  • getbootstrap.com থেকে Bootstrap ডাউনলোড করে
  • CDN থেকেও Bootstrap করা যায়

 

ডাউনলোড Bootstrap

আপনি যদি Bootstrap ডাউনলোড করতে চান তাহলে ভিসিট করুন getbootstrap.com এবং নিয়মাবলি অনুসরণ করুন।

 

Bootstrap CDN

আপনি যদি Bootstrap ডাউনলোড করতে না চান তাহলে আপনি CDN ( Content Delivery Network ) এর সাথে যুক্ত হতে পারেন।

Bootstrap’s CSS and JavaScript এর জন্য CDN কে সহযোগিতা দেয় MaxCDN.

MaxCDN:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.
min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 

Bootstrap CDN ব্যবহারের একটি উপকারিতা

অন্যান্য সাইটে ভিজিট করার সময় অকেক ভিজিটর ইতিমধ্যেই MaxCDN থেকে Bootstrap ডাউনলোড করে ফেলেছে। এর ফলে তারা যখন আপনার সাইটে ভিজিট করে তখন cache থেকেই এটা লোড হয় যা আপনার সাইট দ্রুত লোড হওয়ার সহায়ক। অনেক CDN’s নিশ্চিত করেছে যে, যখন তারা একটা ফাইলের জন্য আবেদন করে তখন এটা সবচেয়ে কাছের সার্ভার থেকে লোড হয়, এটাও আপনার সাইট দ্রুত কাজ করার সহায়ক।

 

Bootstrap দিয়ে আপনার প্রথম ওয়েব সাইট তৈরি করুন

1. doctype হিসেবে HTML5 যোগ করুন

Bootstrap; HTML এলিমেন্ট এবং CSS প্রোপার্টি ব্যবহার করে, ফলে এর জন্য দরকার হয় HTML5 doctype

সবসময় পেজের শুরুতে lang attribute এবং সঠিক character set সাথে HTML5 doctype ব্যবহার করুন।

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  </head>
</html>

 

2. Bootstrap 3 প্রথমত মোবাইল এর জন্য।

Bootstrap 3 ডিজাইন করা হয়েছে Responsive Mobile Devices এর জন্য । Mobile-first স্টাইল কোর ফ্রেমওয়ার্ক এর অংশ।

সঠিক পরিবেশনা এবং টাচ জুমিং নিশ্চিত করার জন্য <head> এলিমেন্টের ভিতরে নিম্নোক্ত <meta> যুক্ত করুন:

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

 

width=device-width অংশ ডিভাইস এর স্ক্রিন এর প্রসস্থতাকে অনুসরণ করে পেজ এর প্রসস্থতা নির্ধারণ করে (যা ডিভাইসের উপর নির্ভর করে পরিবর্তিত হয়)।

3. Containers বা ধারক

সাইটের উপাদানগুলো মোড়ানোর জন্য Bootstrap এর জন্য একটি ধারক এলিমেন্ট এর প্রয়োজন হয়।

এর জন্য দুই ধরনের ধারক রেয়েছে:

  1. .container class টি fixed width container প্রদান করে
  2. .container-fluid class টি full width container প্রদান করে। ভিউ পয়েন্টকে সাপেক্ষে প্রদত্ত প্রসস্থতাকে চক্রাকারে ঘুরানোর জন্য।

বি.দ্রঃ Containers প্রতিস্থাপন যোগ্য নহে ।

 

দুইটি সাধারণ Bootstrap পেজ

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি fixed width ধারক পরিবেশনা):

 <!DOCTYPE html>
<html lang="en">
<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>
<body>

<div class="container">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি fixed width ধারক পরিবেশনা

 

নিচের উদাহরনটি একটি সাধারণ Bootstrap page প্রদর্শন করে (একটি পূর্ণ প্রস্থ ধারক এর সাথে):

 <!DOCTYPE html>
<html lang="en">
<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>
<body>

<div class="container-fluid">
  <h1>My First Bootstrap Page</h1>
  <p>This is some text.</p>
</div>

</body>
</html>

ফলাফল : একটি পূর্ণ প্রস্থ ধারক এর সাথে

 

Feb 12

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

প্রতাপ চন্দ্র

 

বুটস্ট্র্যাপ হচ্ছে রেসপনসিভ ও মোবাইল-বান্ধব ওয়েবসাইট তৈরীর জন্য এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টের সবচেয় জনপ্রিয় ফ্রেমওয়ার্ক। এটি সম্পূর্ণ বিনামূল্যে ডাউনলোড করে ব্যবহার করা যায়। বুটস্ট্র্যাপ ব্যবহার করে খুব সহজে দৃষ্টিনন্দন ও রেসপনসিভ ওয়েবসাইট তৈরী করা যায়।

বুটস্ট্র্যাপ শেখার জন্য আমরা ধারাবাহিক টিউটরিয়াল প্রকাশ করব যার মাধ্যমে ধাপে ধাপে আপনারা এই প্রযুক্তির মাধ্যমে ওয়েব ডিজাইন শিখতে পারবেন। তবে এই ফ্রেমওয়ার্ক ব্যবহার করতে গেলে বেসিক এইচটিএমএল এবং সিএসএস সম্পর্কে আপনার ধারণা থাকতে হবে।

নিচে বুটস্ট্র্যাপের মাধ্যমে ওয়েবসাইট তৈরীর একটি উদাহরণ দেয়া হলো:

 <div class="container">
  <div class="jumbotron">
    <h1>My First Bootstrap Page</h1>
    <p>Resize this responsive page to see the effect!</p>
  </div>
  <div class="row">
    <div class="col-sm-4">
      <h3>Column 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
    <div class="col-sm-4">
      <h3>Column 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>
  </div>
</div>

 

ফলাফল : বুটস্ট্র্যাপ ৩ টিউটোরিয়াল

উপরের উদাহরণে ” Lorem ipsum dolor sit amet, consectetur adipisicing elit…” হচ্ছে বহুল পরিচিত ডামি টেক্সট। তিনটি আলাদা প্যারাগ্রাফ তৈরী করতে এই টেক্সটগুলো ব্যবহার করা হয়েছে। বুটস্ট্র্যাপের মাধ্যমে তৈরী করা এই পেজটির আকার পরিবর্তন করলে দেখতে পাবেন কোনো স্ক্রলবার আসছে না এবং স্বয়ংক্রিয়ভাবে নিজের আদল বদলে ফেলছে।

Feb 12

ওয়ার্ডপ্রেস সাইটকে দুই কলাম লেআউট থেকে তিন কলাম লেআউট-এ পরিবর্তন করুন । Change two columns layout to three columns layout for WordPress sites

Feb 11

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

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

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

মেইলঃ me@firoz.me

 

আজ আমরা জেকয়েরি মোবাইল ব্যবহার করে রেস্পন্সিভ টেবিল বানানো শিখবো যা সকল সাইজের স্ক্রীনে ভালভাবে সাপোর্ট করবে ।

 

রেস্পন্সিভ টেবিল(Responsive Tables):

আপনি যখন আপনার সাইটের সকল পেজের সব কন্টেন্টকে সকল প্রকার ডিভাইসে দেখাতে চান তখন রেস্পন্সিভ ডিজাইন খুব কার্যকরী হবে ।

শুধু একটা সাধারন ক্লাসের নাম জেকোয়েরি মোবাইলকে সকল সাইজের স্ক্রীনের ডিভাইসকে তার কনটেন্টগুলোকে সমানভাবে দেখাতে সাহায্য করবে ।

রেস্পন্সিভ টেবিল অনেক বড় সাইজের টেবুলার ডাটা গুলোকে মোবাইল এবং কম্পিউটার ডিভাইস উভয়তে অনেক আকর্ষণীয়ভাবে দেখাতে অনুমতি দেয় ।

 

দুই ধরণের রেস্পন্সিভ টেবিল আছে । reflow এবং column toggle.

 

১। Reflow Table:

এটা ডাটাকে যতদূর পারে সারি আকারে দেখায় । যদি এর জায়গাতে সবগুলো না ধরে তখন এটি লম্বালম্বিভাবে দেখায় ।

 

একটি টেবিল তৈরি করে <table>  এলিমেন্টের সাথে data-role=”table” এবং “ui-responsive” ক্লাস যোগ করা হয় ।

<table data-role=”table” class=”ui-responsive”>

 

রেস্পন্সিভ টেবিলকে ভালভাবে কাজ করাতে হলে আপনাকে অবশ্যই এবং এলিমেন্ট যোগ করতে হবে । rowspan অথবা colspan এট্রিবিউট যোগ করা যাবে না । কারণ তারা রেস্পন্সিভ টেবিলে সাপোর্ট করে না ।

 

২। Column Toggle Table:

এটা ডাটাকে সব সময় সারি আকারে দেখায় । যদি এটার জায়গাতে সবগুলো না ধরে তাহলে এতে reflow এর মত নিচে চলে যায় না । যখন একটা দেখতে দেখতে যাওয়া হয় তখন আরেকপাশ থেকে ঢেকে যেতে থাকে ।

 

column toggle table তৈরি করতে হলে নিচের মত করে <table> এলিমেন্ট এর সাথে যোগ করতে হবে ।

<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>

 

ডিফল্টভাবে জেকোয়েরি মোবাইল ডান দিকের টেবিলগুলো ঢেকে রাখে । আপনি চাইলে কখন কোন কলাম(column) বা ফিল্ড(field) দেখা যাবে বা কোনটা কখন ঢেকে যাবে তা নির্দেশ করে দিতে পারেন । টেবিলের হেডারের সাথে data-priority এট্রিবিউট যোগ করতে হবে এবং ১ থেকে ৬ এর ভিতর একটা নাম্বার নির্দেশ করে দিতে হবে ।

<th>I will never be hidden</th>

<th data-priority=”1″>I am very important – I will probably not be hidden</th>

<th data-priority=”3″>I am less important – I could be hidden</th>

<th data-priority=”5″>I am not that important – there is a good chance that I will be hidden</th>

 

আপনি যদি কলাম নাম্বার উল্লেখ করে না দেন তাহলে ঐ কলামটি আর ঢাকবে না ।

 

নিচের কোডগুলোকে একসাথে রেখে আপনি একটা column toggle table তৈরি করতে পারেন । এই ফ্রেমওয়ার্ক টেবিলের আগে ডানপাশে একটা বাটন তৈরি করবে যার মাধ্যমে ব্যবহারকারীরা তাদের পছন্দমত টেবিল ঢেকে রাখতে পারবে ।

<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” id=”myTable”>

<thead>

<tr>

<th data-priority=”6″>CustomerID</th>

<th>CustomerName</th>

<th data-priority=”1″>ContactName</th>

<th data-priority=”2″>Address</th>

<th data-priority=”3″>City</th>

<th data-priority=”4″>PostalCode</th>

<th data-priority=”5″>Country</th>

</tr>

</thead>

<tbody>

<tr>

<td>1</td>

Alfreds Futterkiste

<td>Maria Anders</td>

Obere Str. 57

<td>Berlin</td>

<td>12209</td>

<td>Germany</td>

</tr>

</tbody>

</table>

 

toggle table বাটনের লেখাকে পরিবর্তন করতে হলে data-column-btn-text এট্রিবিউট যোগ করতে হবে ।

<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive” data-column-btn-text=”Click me to hide or show columns!” id=”myTable”>

 

 

টেবিলকে স্টাইলিশ করা(Styling Tables):

 

শ্যাডো যোগ করা(Add shadow):

টেবিলকে শ্যাডো দিতে “ui-shadow” ক্লাস ব্যবহার করতে হবে ।

<table data-role=”table” data-mode=”columntoggle” class=”ui-responsive ui-shadow” id=”myTable”>

 

সকল টেবিলের সারির নিচে রেখার সাহায্যে সীমা যোগ করা(Add a bottom border to all table rows):

<style>

tr {

border-bottom: 1px solid #d6d6d6;

}

</style>

 

 

 

সকল এলিমেন্ট এবং ব্যাকগ্রাউন্ডের রেখার সীমা যোগ করা(Add a bottom border to all elements and a background color to all even table rows):

 

<style>

th {

border-bottom: 1px solid #d6d6d6;

}

 

tr:nth-child(even) {

background: #e9e9e9;

}

</style>

 

 

এভাবে খুব সহজে আপনি টেবিলকে নিজের মত করে সাজাতে এবং ডিজাইন করতে পারবেন । এজন্য জেকোয়েরি মোবাইলের ব্যবহার সবচাইতে বেশি ।

 

 

 

 

http://www.w3schools.com/jquerymobile/jquerymobile_tables.asp

Feb 11

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery – Get and Set CSS Classes) ।

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery – Get and Set CSS Classes) ।

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

মেইলঃ me@firoz.me

 

কেমন আছেন সবাই? আজ আমরা জেকোয়েরি দিয়ে ওয়েব পেজ এর উপাদান (HTML Elements) গুলোর CSS property (such as display, font-height) পরিবর্তন করা শিখবো । সাথে সাথে উপাদান গুলোর CSS class পরিবর্তন করবো যেমন নতুন css class যোগ করা।

জেকোয়েরি দিয়ে খুব সহজে সিএসএস ক্লাস গুলোকে পরিচালনা করা যায় ।

 

জেকোয়েরি দিয়ে সিএসএস পরিচালনা(jQuery Manipulating CSS):

সিএসএস পরিচালনা করার জন্য জেকোয়েরি এর কয়েকটি পদ্ধতি আছে । আমরা এর ভিতর নিচের পদ্ধতি গুলো অনুসরণ করবো ।

 

১। addClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস যোগ করা যায় ।

 

২। removeClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাস দূরীভূত করা যায় ।

 

৩। toggleClass() ঃ নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করা যায় ।

 

৪। css() ঃ স্টাইল এট্রিবিউটকে সেট করে থাকে ।

 

 

স্টাইলশিট এর উদাহরণঃ

নিচের উদাহরণটি আজ সবখানে ব্যবহার করবো । তাই খুব ভালভাবে খেয়াল করুন ।

 

.important

{

font-weight:bold;

font-size:xx-large;

}

 

.blue

{

color:blue;

}

 

 

১। jQuery addClass() Method:

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর সাথে কিভাবে ক্লাস এট্রিবিউটস যোগ করতে হয় । যখন ক্লাস যোগ করা হয় তখন অবশ্যই আপনি অনেকগুলো এলিমেন্টস একসাথে নির্বাচন করতে পারবেন ।

 

$(“button”).click(function(){

$(“h1,h2,p”).addClass(“blue”);

$(“div”).addClass(“important”);

});

 

 

addClass() method এর মাধ্যমে আপনি একসাথে অনেক গুলো ক্লাস কে নির্দেশনা দিতে পারবেন ।

$(“button”).click(function(){

$(“#div1”).addClass(“important blue”);

});

 

 

 

২। jQuery removeClass() Method:

নিচের উদাহরণ দেখাবে বিভিন্ন এলিমেন্টস এর থেকে কিভাবে ক্লাস এট্রিবিউটসকে দূর করতে হয় ।

 

$(“button”).click(function(){

$(“h1,h2,p”).removeClass(“blue”);

});

 

 

 

৩। jQuery toggleClass() Method:

নিচের উদাহরণের মাধ্যমে আমরা দেখতে পাবো jQuery toggleClass() Method ব্যবহার করতে হয় । এই মেথড নির্বাচিত উপাদানগুলোর সাথে এক বা একাধিক সিএসএস ক্লাসকে সংযুক্ত বা দূরীভূত করে ।

 

$(“button”).click(function(){

$(“h1,h2,p”).toggleClass(“blue”);

});

 

 

৪। jQuery css() Method:

এই মেথড স্টাইল এট্রিবিউটকে সেট করে থাকে । এটা অনেকভাবে স্টাইল করে থাকে । তাই পরে এটা নিয়ে একটি পোস্ট করবো ।

 

তাই এই গুলো আপাতত প্র্যাকটিস করতে থাকুন । দেখা হবে পরবর্তী পোস্টে jQuery css() Method নিয়ে । ততক্ষণ আমাদের সাথেই থাকুন ।

 

 

http://www.w3schools.com/jquery/jquery_css_classes.asp