এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
ফোরাম
×

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

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

সিএসএস কম্পোনেন্ট

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

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

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

বুটস্ট্রাপ রেফারেন্স

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

বুটস্ট্রাপ টাইপোগ্রাফী ক্লাসসমূহের উদাহরণ



উদাহরণঃ .lead ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>প্যারাগ্রাফকে লক্ষণীয় করে তোলার জন্য .lead ক্লাসটি ব্যবহার করা হয়ঃ</p>
    <p class="lead">.lead ক্লাস ব্যবহৃত প্যারাগ্রাফ।</p>
    <p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .small ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>প্যারাগ্রাফকে সাধারণ আকারের চেয়ে ছোট আকারের করার জন্য .small ক্লাসটি ব্যবহার করা হয়ঃ</p>
    <p class="small">.small ক্লাস ব্যবহৃত প্যারাগ্রাফ।</p>
    <p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .text-left ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>.text-left ক্লাস টেক্সটকে বামে এ্যালাইন করেঃ</p>

    <p class="text-left">বামে এ্যালাইনকৃত টেক্সট।</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .text-center ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>.text-center ক্লাস টেক্সটকে মাঝে এ্যালাইন করেঃ</p>

    <p class="text-center">মাঝে এ্যালাইনকৃত টেক্সট।</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .text-right ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>.text-right ক্লাস টেক্সটকে ডানে এ্যালাইন করেঃ</p>

    <p class="text-right">ডানে এ্যালাইনকৃত টেক্সট।</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .text-justify এবং .text-nowrap ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <h3>.text-justify ক্লাস টেক্সটকে justify করে।</h3p>
    <h3>.text-nowrap ক্লাস টেক্সটে no-wrap যুক্ত করে।</h3>

    <p class="text-justify">Justified Text. Justified Text. Justified Text. Justified Text. Justified Text.</p>
    <p class="text-nowrap">nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. 
    nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text.
    nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text.</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ Text Transform ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>

    <p class="text-lowercase">THIS LINE WILL TRANSFORM INTO LOWERCASE LETTER.</p>
    <p class="text-uppercase">this line will transform into lowercase letter.</p>
    <p class="text-capitalize">this line will transform into capitalize letter.</p>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .list-unstyled এবং .list-inline ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <h3>.text-unstyle ক্লাসের ব্যবহার</h3>
    <ul class="list-unstyled">
      <li>চা</li>
      <li>কফ</li>
      <li>দু</li>
    </ul>
    <h3>.text-inline ক্লাসের ব্যবহার</h3>
    <ul class="list-inline">
      <li>Home</li>
      <li>Service</li>
      <li>Contract</li>
      <li>About us</li>
    </ul>
  </div>

</body>
</html>

ফলাফল






উদাহরণঃ .dl-horizontal ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
<head>
  <title>Bootstrap Typography 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>
    <p>.dl-horizontal ক্লাস ব্যবহার করলে  ইহা প্রথমে ডিফল্ট dl এর মতই দেখায়, কিন্তু যখন ব্রাউজার উইন্ডো বড় করা হয়,
        তখন ইহা পাশাপাশি দেখায়ঃ</p>
    <dl class="dl-horizontal">
      <dt>কফি </dt>
      <dd>- গরম কফি</dd>
      <dt>আম </dt>
      <dd>- পাকা আম</dd>
    </dl>
  </div>

</body>
</html>

ফলাফল