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

Question

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

<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>

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

Comments

কোডটি বুটপ্লাইয়ের মতো চলবে না

— জর্দান

সত্যই কোনও উত্তর নয়, তবে আপনি অ্যাডভারটেনটেক্র্যাচটি.এনএল / টোগলারআইকন এইচটিএমএল-এ নভবার -টগলারের আইকনটি নিয়ে খেলতে পারেন বুটস্ট্র্যাপ স্টাইল শিটের পরিবর্তে বুটস্ট্র্যাপ টগলারের আইকনটি বাহ্যিক স্টাইল উপাদান হিসাবে ব্যবহৃত হয়। কীভাবে এটি পরিচালনা করতে হয় তাও ব্যাখ্যা করা হয়েছে।

— বেন থিজসেন

Answer 1

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

• navbar-darkগাer় ব্যাকগ্রাউন্ডে হালকা / সাদা টগলারের জন্য ব্যবহার করুন
• navbar-lightহালকা ব্যাকগ্রাউন্ডে গা dark় / ধূসর টগলারের জন্য ব্যবহার করুন

---

// 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

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

---

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

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

---

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

Comments

বুটস্ট্র্যাপ 4 বিটা 1 তে কোনও .navbar-inverseশ্রেণি নেই। আপনি দুটি ক্লাস থেকে চয়ন করতে পারেন: .navbar-lightবা .navbar-dark।

— Qrzysio

Answer 2

আপনার নভবারের ডিফল্ট আইকন হিসাবে একটি ফন্ট-দারুণ আইকন ব্যবহার করুন ।

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

বা পুরানো হরফ-দুর্দান্ত সংস্করণগুলিতে এটি ব্যবহার করে দেখুন:

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>

Comments

ফন্টউইজ 5 টি ব্যবহারের বারের জন্য। fontawesome.com/icons/bars?style=solid

— মুর্তজা

এটি খুব ভাল ধারণা।

— শিব মনহার

Answer 3

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

আপনার বোতাম:

<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>

Answer 4

কেবল ক্লাসে প্রবেশ করুন navbar-darkবা navbar-lightএনএভি উপাদান:

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 5

সবচেয়ে সহজ উপায় এই ডিফল্ট বুটস্ট্র্যাপ কোডটি প্রতিস্থাপন করা হয়:

<button class="navbar-toggler" 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>

এটা দ্বারা :

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>

এবং আপনার ফাইলটিতে এই কোডটি যুক্ত করতে ভুলবেন না:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 

আশা করি এটা সাহায্য করবে!!

Answer 6

আপনি যদি বুটস্ট্র্যাপ ডাউনলোড করেন তবে বুটস্ট্র্যাপ -৪.৪.১-ডিস্ট / সিএসএস / বুটস্ট্র্যাপ.মিনে যান

আমি। এটি .navbar-light .navbar-toggler-iconবা .navbar-dark .navbar-toggler-iconনির্বাচক

আ। পটভূমি-চিত্রের বৈশিষ্ট্য এবং এর মান নির্বাচন করুন। স্নিপেটটি দেখতে এমন দেখাচ্ছে:

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

III। স্নিপেটটি অনুলিপি করুন এবং এটি আপনার কাস্টম সিএসএসে আটকান

ঈ। stroke=’rgba(0,0,0,0.5)’আপনার পছন্দসই rgba মানটিতে মান পরিবর্তন করুন

Answer 7

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

এটি কাজ করবে:

<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"আপনি যদি একটি আইকন ফন্ট ব্যবহার করতে চান তবে কেবল আপনার বোতামের ক্লাসটি ব্যবহার করবেন না ।

চিয়ার্স।

Comments

এটি কেবল "কাজ করে" যদি আপনি ফন্ট দুর্দান্ত ব্যবহার করেন যা বুটস্ট্র্যাপের অংশ নয়

— জিম

আমি অনুমান করি যে তালিকাটি আমিররেজা মোহাম্মদীর দেওয়া উত্তরের উপর আপনার মন্তব্যটি সরিয়ে ফেলতে হবে। ধন্যবাদ।

— NoChance

Answer 8

আমি সবেমাত্র যথেষ্ট সহজ সমাধান বিকাশ করেছি। (হ্যাঁ, আমি জানি এটি একটি পুরানো প্রশ্ন তবে এই একই সমস্যা নিয়ে গবেষণা করা যে কেউ এটি দরকারী বলে মনে করতে পারেন))

আমি হ্যামবার্গার.এসভিজি নামে একটি এসভিজি ব্যবহার করছিলাম। আমি এটি একটি পাঠ্য সম্পাদকের সাথে দেখেছিলাম এবং তিনটি লাইনের জন্য কোনও রঙ নির্ধারণকারী কিছুই খুঁজে পেলাম না - আমি এটি কালো রঙের ডিফল্ট অনুমান করছি কারণ এটি অবশ্যই আমার আচরণ - তাই আমি কেবল "স্ট্রোক" পরামিতি যুক্ত করেছি এসভিজির সংজ্ঞা। এটি কাজ করে নি - তিনটি লাইনের সীমানা আমার নির্বাচিত রঙ (সাদা) ছিল তবে বাকী রেখাটি এখনও কালো ছিল তাই আমি পাশাপাশি "ফিল" পরামিতি যুক্ত করেছি। আর সেটাই কৌতুক!

মূল সম্পূর্ণ হ্যামবার্গার.সভিগির কোড এখানে:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z"/></svg>

নতুন এসভিজির কোডটি এখানে সম্পাদনা করার পরে এবং এটি হ্যামবার্গার_হাইট.এসভিজি হিসাবে সংরক্ষণ করার পরে রয়েছে:

<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2  s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2  S29.104,22,28,22z" stroke="white" fill="white"/></svg>

আপনি দেখতে পাচ্ছেন যে আপনি ডানদিকে স্ক্রোল করেছেন কিনা, আমি যা কিছু করেছি তা যুক্ত করা হয়েছিল:

stroke="white" fill="white"

পথের একেবারে শেষ প্রান্তে। আমার অন্য যে জিনিসটি করতে হয়েছিল তা হ'ল এইচটিএমএলে হ্যামবার্গারের ফাইলের নামটি পরিবর্তন করা। সিএসএসের সাথে কোনও ঝামেলা নেই এবং অন্য আইকনটি সন্ধান করার প্রয়োজন নেই।

ইজি peasey! আপনার হ্যামবার্গার আপনার পছন্দ মতো কোনও রঙ করতে আপনি এটি অনুকরণ করতে পারেন।

Answer 9

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

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

Comments

— নববার

Answer 10

বিকল্প হিসাবে আপনি সর্বদা একটি সহজ আইনের সাহায্যে চেষ্টা করতে পারেন, অন্য আইকন ব্যবহার করে, উদাহরণস্বরূপ:

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

রেফ: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

রেফ: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

সুতরাং আপনি তাদের রঙ এবং আকারের উপর সম্পূর্ণ নিয়ন্ত্রণ অর্জন করতে পারেন:

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

( প্রয়োগ করা বাটনের স্টাইলটি কেবলমাত্র দ্রুত পরীক্ষার জন্য ):

Answer 11

ডিফল্ট বুটস্ট্র্যাপ নাভবার আইকন

<span class="navbar-toggler-icon"></span>

ফন্ট আশ্চর্য আইকন যোগ করুন এবং সরান class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

Answer 12

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

@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>

ডেমো ইমেজ