বুটস্ট্র্যাপ ক সিএসএস কাঠামো এটি পুরো নেটওয়ার্ক জুড়ে খুব জনপ্রিয় হয়েছে। তাদের শৈলী প্রতিক্রিয়াশীল সামাজিক নেটওয়ার্কে দেখা হয় Tuenti y Twitter। ওয়েব অ্যাপ্লিকেশন ডেভলপ করার সময় এর ব্যবহার আমাদের অনেক সময় সাশ্রয় করে যেহেতু এটি সমস্ত ডিভাইসের জন্য উপযুক্ত একটি পরিষ্কার পৃষ্ঠা শৈলী তৈরিতে জড়িত সমস্ত কাজ এবং প্রচেষ্টা আমাদের রক্ষা করে। এই কাঠামোটিতে ব্যবহৃত শৈলীর সাথে পরামর্শ করে আমরা বুঝতে পারি যে তারা আমাদের সাথে পরিচিত, আজ থেকে অনেকগুলি ওয়েবসাইট এটি কার্যকর করেছে।
গঠন
বুটস্ট্র্যাপ তরল স্ট্রাকচার
মোবাইল এবং ট্যাবলেটগুলি থেকে আমাদের ওয়েবসাইট অ্যাক্সেসযোগ্য হওয়ার জন্য আমাদের বুটস্ট্র্যাপ আমাদের সরবরাহ করে এমন তরল কাঠামোটি ব্যবহার করতে হবে। এই কাঠামোর ব্যবহার খুব সহজ, সবকিছু উপাদানের উপর ভিত্তি করে বিঘত এটা আমাদের সাহায্য করবে লেআউট আমাদের ওয়েব ডিজাইন। পরে, যখন আমরা এ থেকে এই নকশাটি অ্যাক্সেস করি স্মার্টফোন o ট্যাবলেট, এটি নেভিগেশনের মান উন্নত করার জন্য স্বয়ংক্রিয়ভাবে ডিভাইসটিকে মানিয়ে নেবে। আমরা ব্যবহার করব বিঘত তরল কাঠামোর মধ্যে যৌক্তিক বিভাগে ক্লাস সহ, যেমন:
<div class="row-fluid"> <div class="span2">Contenido</div> </div>
যেখানে সংখ্যা 2 স্প্যানের আকারকে উপস্থাপন করে। প্রতিটি সারিতে 12 মাপের 1 স্প্যানের বা 2 মাপের 6 টির জন্য পর্যাপ্ত জায়গা রয়েছে, এটি আপনার পছন্দ মতো বিতরণ করা যেতে পারে। একবার একটি সারির স্থান অতিক্রম করা হলে, এটি স্বয়ংক্রিয়ভাবে পরবর্তীটিতে চলে যাবে, আমাদের একটি ব্যবহারের অনুমতি দেয় বিঘত আকার 12 একটি লাইন বিরতি তৈরি করতে। আমরা কিছু বাদ দিতে চাইলে বিঘত একটি তৈরি করার সময়, 4 থেকে শুরু করুন বিঘত, এবং 3 টি আকার প্রয়োগ করুন, আমরা এই কোডটি ব্যবহার করব:
<div class="span2 offset4">Contenido</div>
এর ফলে বিভাগটি চারটি লাফিয়ে উঠতে পারে ঘটনাকাল সামগ্রী প্রদর্শন করার আগে। আমরা আমাদের স্বাধীন ইচ্ছায় এটি ব্যবহার করতে পারি, আমাদের কোড সহ যা চাই তা এড়িয়ে চলে।
অফসেট ক্লাসের সাথে স্প্যানগুলি এড়িয়ে চলেছে
প্রতিটি ডিভাইসের জন্য বিভিন্ন নকশা
প্রতিটি ডিভাইসকে আলাদা করতে CSS ক্লাস classes
প্রতিটি ধরণের ডিভাইসের জন্য একটি পৃথক নকশা প্রয়োগ করতে, আমরা নিম্নলিখিত ক্লাসগুলি ব্যবহার করে কোন ডিভাইসটি কেন্দ্রিক এটি প্রতিটি যৌক্তিক বিভাগকে বলব:
এইভাবে, আমরা একই ইউআরএল সহ প্রতিটি ডিভাইসের জন্য সম্পূর্ণ ভিন্ন ডিজাইনটি দেখাতে পারি।
বোতাম
বুটস্ট্র্যাপ দ্বারা প্রদত্ত বোতামগুলির তালিকা
বুটস্ট্র্যাপ আমাদের রঙিন বোতামগুলির একটি পরিষ্কার ভাণ্ডার সরবরাহ করে, এর ব্যবহার খুব সহজ:
<a class="btn btn-success" href="URL"> Nombre del Botón </a>
যেখানে btn btn-success বোতামের রঙ বোঝায়, এটি পরিবর্তন করতে, আমরা কেবল এটি পূর্ববর্তী চিত্রটিতে প্রদর্শিত ক্লাসগুলির সাথে প্রতিস্থাপন করতে হবে।
বুটস্ট্র্যাপ ইনস্টল করা হচ্ছে
এই সিএসএস ফ্রেমওয়ার্কটি ইনস্টল করার জন্য, আমরা পোস্টের শেষে যে লিঙ্কটি ছেড়ে যাব তা থেকে জিপটি ডাউনলোড করব এবং আমরা নীচের কোডটি লিখব আমাদের এইচটিএমএল ফাইলের মাথাতে.
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link href="./css/bootstrap.css" rel="stylesheet" type="text/css" /> <link href="./css/bootstrap-responsive.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="./js/bootstrap.js"></script> <script type="text/javascript" src="./js/bootstrap.min.js"></script>
একবার আমরা নিশ্চিত করে নিলাম যে CSS এবং জেএস ফাইলগুলি আমাদের এইচটিএমএল ফাইলের মতো একই ফোল্ডারে রয়েছে, আমরা আমাদের প্রতিক্রিয়াশীল ওয়েবসাইট ডিজাইন করা শুরু করতে পারি।
অধিক তথ্য - ফর্ম বৈধকরণ
ডাউনলোড - বুটস্ট্র্যাপ: সিএসএস ফ্রেমওয়ার্ক
আপনার এই কাঠামোটিতে আরও টিউটোরিয়াল নেই ???