টুইটার বুটস্ট্র্যাপ নেভিগেশন বারে "আইকন-বার"

Question

নিম্নলিখিত কোডের শর্তাবলীর অর্থ কী তা আমি বুঝতে পারি না icon-bar:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

কিসের icon-barজন্য? কেন এটির মতো তিনটি উদাহরণ রয়েছে?

এই কোডটি নেভিগেশন বার বিভাগে রয়েছে:

<div class="navbar-header">
  ...
</div>

Comments

এটি তিনটি অনুভূমিক রেখা যুক্ত একটি বোতাম তৈরি করা। এই বোতামটি প্রদর্শিত হবে যখন স্ক্রিনের প্রস্থ ছোট হবে এবং এনএভি-বার ধসে পড়বে। আপনি যখন এটিতে ক্লিক করেন, ন্যাভ-বারটি প্রসারিত হয়।

— অর্পিত অগ্রওয়াল

@ অর্পিতআগ্রাওয়াল, আপনি সঠিক, তবে একটি মন্তব্যের পরিবর্তে এটিকে উত্তর হিসাবে বিবেচনা করুন!

— মেমার্ক

Answer 1

icon-barসংকীর্ণ ব্রাউজার স্ক্রিনে like দেখতে দেখতে এমন একটি বোতাম তৈরি করতে প্রতিক্রিয়াশীল লেআউটগুলির জন্য ব্যবহৃত হয়। আপনি কীভাবে এই বোতামটি দিয়ে নভবারটি প্রতিস্থাপন করা হয়েছে তা দেখতে আপনার ব্রাউজার উইন্ডোটিকে (এটি সংকীর্ণ করে) আকার পরিবর্তন করতে পারেন।

তিনটি spanট্যাগ তিনটি অনুভূমিক রেখা তৈরি করে যা দেখতে বোতামের মতো লাগে, সাধারণত "বার্গার" আইকন হিসাবে পরিচিত।

কটাক্ষপাত icon-barমধ্যে bootstrap.css:

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

এটি একটি ব্লক কাঠামো, সুতরাং এটি রেখার দ্বারা লাইন প্রান্তিক করা হয়। background-colorনির্ধারিত হবে gray80 । আসলে, আপনি তার পরিবর্তন করতে পারেন width, height, background-color, ইত্যাদি আপনি চান হিসাবে।

Comments

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

— বুলেট

@ ব্লাচ, আপনি সম্ভবত বুঝতে পেরেছেন, তার অর্থ "উইন্ডোটি ছোট করুন" এর মতো "মিনিমাইজড", সাধারণ "সিস্টেম ট্রেতে মিনিমাইজ" নয়।

— মেমার্ক

আপনি কি জানেন যে এটি সম্পর্কে কি আজব ... এটাই .navbar-toggle .icon-bar। এটিকে একটি স্বতন্ত্র শ্রেণি হিসাবে না রেখে, তারা এটিকে নভবার টগল করার একটি সাবক্লাস বানিয়েছে। এটা আমার কাছে কোন মানে নেই। আমি এটি একটি নভবারের বাইরের সাথে নিজের বোতাম এবং ড্রপ-ডাউনগুলি সাজাতে সক্ষম হতে চাই। আপনি কেবল পুরো সিএসএস ব্লকটি অনুলিপি করতে পারেন এবং এটি সম্পাদন করতে এটি একটি স্বতন্ত্র শ্রেণিতে তৈরি করতে পারেন, তবে এটি পুনরাবৃত্তি কোড। যদিও এর থেকে ভাল সমাধান আমি জানি না।

— ক্রিস সাইরেফাইস

আমি বিশ্বাস করতে পারি না হ্যামবার্গার আইকন শব্দটি এই পৃষ্ঠায় প্রদর্শিত হবে না।

— জেরেমি অ্যান্ডারসন

@ জেরেমি অ্যান্ডারসন এখন এটি করে, তাই না? : ডি

— প্রিয়া রঞ্জন সিং

Answer 2

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

আমি এটি নাবার (একই ধারণা) এর পরিবর্তে ড্রপডাউন টগল বোতামে ব্যবহার করেছি। আমি যে কোডটি ব্যবহার করেছি তা এখানে:

এইচটিএমএল:

          <div class="dropdown">
            <a class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
              Menu
              <span class="icon-bars-button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </span>
            </a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
              <li role="presentation"><a role="menuitem" tabindex="-1" href="reservations">Reservations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="amenities">Amenities</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="accommodations">Accommodations</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="location">Location</a></li>
              <li role="presentation"><a role="menuitem" tabindex="-1" href="packages">Packages</a></li>
            </ul>
          </div>

সিএসএস:

.dropdown-toggle .icon-bars-button{
  display: inline-block;
  vertical-align:middle;
}
.dropdown-toggle .icon-bar {
  margin-bottom:2px;
  display: block;
  width: 22px;
  height: 2px;
  background-color: #cccccc;
  border-radius: 1px;
}

Answer 3

class="navbar-toggle"শৈলী পেতে ব্যবহার করা হয়।

data-toggle="collapse" বৈশিষ্ট্যটি শো এবং লুকানোর জন্য ব্যবহৃত হয়।

data-target = "#id"অ্যাট্রিবিউট কলাপসিবল DIV আছে বোতাম তার সঙ্গে আরো সংযোগ করতে ব্যবহৃত হয়

icon-barতিনটি অনুভূমিক রেখা যুক্ত একটি বোতাম তৈরি করতে ব্যবহৃত হয়। স্ক্রিনের প্রস্থ ছোট হলে এই বোতামটি প্রদর্শিত হয়