Bootstrap – ফ্রি HTML ও CSS কোর্স – ক্লাস ১২

ওয়েব ডেভলপাররা UI ডিজাইন করার জন্য শীর্ষস্থানীয় কাঠামো হিসাবে টুইটার বুটস্ট্র্যাপ বেছে নিচ্ছে। আপনারা যেমন খেয়াল করেছেন, ডিফল্ট এইচটিএমএল স্টাইলগুলি প্রতিদিন আমরা প্রায় যে ওয়েবসাইটগুলি দেখি সেগুলির মতো হয় না। বুটস্ট্র্যাপ ফ্রেমওয়ার্ক আমাদের প্লেইন এইচটিএমএল লিখতে দেয় যা ডিফল্ট এইচটিএমএল স্টাইলশিটের চেয়ে অনেক বেশি আধুনিক এবং দরকারী বলে মনে হয়।

বুটস্ট্র্যাপ লোড করার জন্য আপনাকে এটিকে কোথাও থেকে লোড করতে হবে। আমরা নিম্নলিখিত <link> ট্যাগ দিয়ে একটি সিডিএন থেকে বুটস্ট্র্যাপ লাইব্রেরি লোড করতে পারি:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

সিডিএন থেকে আইটেমগুলি লোড করা কার্যকর যেহেতু সিডিএন (কনটেন্ট ডেলিভারি নেটওয়ার্ক) ইতিমধ্যে বিশ্বজুড়ে দ্রুত ডাউনলোডের গতির জন্য অনুকূলিত হয়েছে এবং এটি অত্যন্ত উপলব্ধ এবং নির্ভরযোগ্য।

আপনি যদি এখনও বুটস্ট্র্যাপ ফাইলগুলি স্থানীয়ভাবে লোড করতে চান তবে কেবল ওয়েবসাইটটিতে (https://getbootstrap.com) যান এবং সেখান থেকে ডাউনলোড করুন। তারপরে, একই ট্যাগটি ব্যবহার করুন, কেবলমাত্র এই সময়ে href এ bootstrap.min.css স্থানীয় লিঙ্কটি দিন।

এটি আপনার HTML পেজে যুক্ত করার পরে এটি সম্ভবত এর মতো দেখাবে:

<!DOCTYPE html>
<html>
<head>
    <title>Hello, Bootstrap!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <p>Hello, Bootstrap!</p>
</body>
</html>

আপনি অবিলম্বে লক্ষ্য করবেন যে ডিফল্ট ফন্টটি ডিফল্ট serif ফন্ট থেকে একটি sans-serif ফন্টে পরিবর্তিত হয়েছে।

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

<!DOCTYPE html>
<html>
<head>
    <title>Hello, Bootstrap!</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
</body>
</html>

Leave a Comment