css - tutorial - বার্গার বান



বুটস্ট্র্যাপ 4 হ্যামবার্গার টগলারের রঙ পরিবর্তন করুন (6)

আপনি কেবল খুব সহজ উপায়ে সিএসএস দিয়ে টগলারের বোতামটি তৈরি করতে পারেন, এসভিজি বা ... ফোরামটিতে কোনও ফন্ট ব্যবহার করার দরকার নেই।

আপনার বোতাম:

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

আপনার বাটন স্টাইল:

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

আপনার অনুভূমিক রেখার স্টাইল:

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

ডেমো

.navbar-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>

আমার একটি বুটস্ট্র্যাপ ওয়েবসাইট রয়েছে যেখানে স্ক্রিনটি 992px এর চেয়ে কম হলে Hamburger যুক্ত হয়। হ্যামবার্গার কোডটি এর মতো

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

হ্যামবার্গার বোতামটির রঙ পরিবর্তন করার কোনও সম্ভাবনা আছে কি?


Answer #1

আপনি যদি _variables.scss বুটস্ট্র্যাপের সাস ভার্সন নিয়ে কাজ করেন তবে আপনি _variables.scss $navbar-inverse-toggler-bg বা $navbar-light-toggler-bg যেখানে আপনি নিজের টগল বোতামের রঙ এবং স্টাইল পরিবর্তন করতে পারবেন।

এইচটিএমএলে আপনাকে কোন সংস্করণটি ব্যবহার করতে চান তার উপর নির্ভর করে আপনাকে navbar-inverse বা navbar-light ব্যবহার করতে হবে।


Answer #2

কাস্টম হ্যামবার্গার নাভির জন্য সেরা সমাধানটি পরীক্ষা করে দেখুন।

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>

ডেমো ইমেজ


Answer #3

ডিফল্ট আইকন স্প্যানটিতে কেবল "আই" ট্যাগে একটি ফন্ট-দুর্দান্ত ব্যবহার করুন তারপরে CSS সহ যুক্ত আইকনের রঙ পরিবর্তন করুন।

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon"></i>
</span>
.fa.fa-navicon {
  color:white;
}

Answer #4

বুটস্ট্র্যাপ 4 navbar-toggler-icon (হ্যামবার্গার) একটি এসভিজি background-image ব্যবহার করে। টগলারের আইকন চিত্রটির 2 টি "সংস্করণ" রয়েছে। একটি হালকা নাবারের জন্য, এবং একটি অন্ধকার নববারের জন্য ...

  • গাer় ব্যাকগ্রাউন্ডে হালকা / সাদা টগলারের জন্য নাভবার navbar-dark ব্যবহার করুন
  • হালকা ব্যাকগ্রাউন্ডে গা dark় / ধূসর টগলারের জন্য নাবার navbar-light ব্যবহার করুন
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;..");
}

অতএব, আপনি যদি টগলারের চিত্রটির রঙ অন্য কোনওটিতে পরিবর্তন করতে চান তবে আপনি আইকনটি কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আমি এখানে আরজিবি মানটি গোলাপী (255,102,203) এ সেট করেছি। এসভিজি ডেটাতে stroke='rgba(255,102,203, 0.5)' মানটি লক্ষ্য করুন:

.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
} 

ডেমো http://www.codeply.com/go/4FdZGlPMNV

ওএফসি, অন্য একটি লাইব্রেরি থেকে আইকনটি ব্যবহার করার জন্য অন্য একটি বিকল্প যেমন: হরফ ফন্ট ইত্যাদি ..

বুটস্ট্র্যাপ 4.0.0 আপডেট করুন:

বুটস্ট্র্যাপ 4 বিটা হিসাবে, হালকা লিঙ্ক এবং টগলারের রঙ উত্পাদন করতে গাer় পটভূমির রঙগুলির সাথে নববারগুলিতে নেবার navbar-inverse এখন নভবার navbar-dark গা navbar-dark ়।

বুটস্ট্র্যাপ 4 নববারের রঙ কীভাবে পরিবর্তন করবেন


Answer #5

সম্পাদনা: আমার খারাপ! আমার উত্তর সহ, আইকনটি টগলারের মতো আচরণ করবে না আসলে এটি ভেঙে পড়ার পরেও প্রদর্শিত হবে ... তবুও অনুসন্ধান করা হচ্ছে ...

এটি কাজ করবে:

<button class="btn btn-primary" type="button" data-toggle="collapse" 
    data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
    aria-expanded="false" aria-label="Toggle navigation">
    <span>
        <i class="fas fa-bars"></i>
    </span>
</button>

আমার উত্তরের প্রস্তাবিত কৌশলটি হ'ল navbar-toggler ক্লাসিকাল বোতাম শ্রেণীর btn দিয়ে প্রতিস্থাপন করা এবং তারপরে, পূর্বে উত্তর হিসাবে, আইকন ফন্ট ব্যবহার করুন।

দ্রষ্টব্য, আপনি যদি <button class="navbar-toggler"> তবে বোতামটির "অদ্ভুত" আকার থাকবে।

গিথুব সম্পর্কিত এই পোস্টে যেমন বলা হয়েছে, বুটস্ট্র্যাপ কিছু "সিএসএস ট্রিকারি" ব্যবহার করে, তাই ব্যবহারকারীদের ফন্টের উপর নির্ভর করতে হবে না।

সুতরাং, আপনি যদি একটি আইকন ফন্ট ব্যবহার করতে চান তবে কেবল আপনার বোতামটিতে "navbar-toggler" ব্যবহার করবেন না।

চিয়ার্স।





twitter-bootstrap-4