টুইটার বুটস্ট্র্যাপে নববার রঙ পরিবর্তন করুন

উত্তর:

1392

tl; dr - TWBSColor - আপনার নিজস্ব বুটস্ট্র্যাপ নববার তৈরি করুন

সংস্করণ নোট: - অনলাইন সরঞ্জাম: বুটস্ট্র্যাপ 3.3.2+ / 4.0.0+ - এই উত্তর: বুটস্ট্র্যাপ 3.0.x

উপলব্ধ নববার

আপনি দুটি বেসিক নাবার পেয়েছেন:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

ডিফল্ট রঙ ব্যবহার

এখানে প্রধান রঙ এবং তাদের ব্যবহার:

  • #F8F8F8: নাবার পটভূমি
  • #E7E7E7: নাবার বারার
  • #777: ডিফল্ট রঙ
  • #333: হোভার রঙ ( #5E5E5Eজন্য .nav-brand)
  • #555সক্রিয় রঙ
  • #D5D5D5: সক্রিয় পটভূমি

ডিফল্ট শৈলী

আপনি যদি কিছু কাস্টম স্টাইল রাখতে চান তবে আপনার সিএসএস পরিবর্তন করতে হবে:

/* navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
          color: #333;
    }
}

কাস্টম রঙিন নাবারের উদাহরণ

এখানে একটি কাস্টম রঙিন নববারের চারটি উদাহরণ দেওয়া হয়েছে:

এখানে চিত্র বিবরণ লিখুন

এবং এসসিএসএস কোড:

$bgDefault   : #e74c3c;
$bgHighlight : #c0392b;
$colDefault  : #ecf0f1;
$colHighlight: #ffbbbc;
.navbar-default {
  background-color: $bgDefault;
  border-color: $bgHighlight;
  .navbar-brand {
    color: $colDefault;
    &:hover, &:focus {
      color: $colHighlight; }}
  .navbar-text {
    color: $colDefault; }
  .navbar-nav {
    > li {
      > a {
        color: $colDefault;
        &:hover,  &:focus {
          color: $colHighlight; }}}
    > .active {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}
    > .open {
      > a, > a:hover, > a:focus {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-toggle {
    border-color: $bgHighlight;
    &:hover, &:focus {
      background-color: $bgHighlight; }
    .icon-bar {
      background-color: $colDefault; }}
  .navbar-collapse,
  .navbar-form {
    border-color: $colDefault; }
  .navbar-link {
    color: $colDefault;
    &:hover {
      color: $colHighlight; }}}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu {
    > li > a {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    > .active {
      > a, > a:hover, > a:focus, {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
}

এবং অবশেষে, একটি সামান্য উপহার

আমি সবেমাত্র একটি স্ক্রিপ্ট তৈরি করেছি যা আপনাকে আপনার থিম তৈরি করতে দেয়: TWBSColor - আপনার নিজের বুটস্ট্র্যাপ নববার তৈরি করুন

[আপডেট]: টিডব্লিউবিএস কালার এখন এসসিএসএস / এসএএসএস / কম / সিএসএস কোড উত্পন্ন করে।
[আপডেট]: এখন থেকে, আপনি টিডব্লিউবিএস কালার সরবরাহিত ডিফল্ট ভাষা হিসাবে কম ব্যবহার করতে পারেন
[আপডেট]: টিডব্লিউবিএস কালার এখন ড্রপ ডাউন মেনু রঙিনকরণ সমর্থন করে
[আপডেট]: টিডব্লিউবিএস কালার এখন আপনার সংস্করণ চয়ন করতে দেয় (বুটস্ট্র্যাপ 4 সমর্থন যুক্ত হয়েছে)

— zessx
সূত্র
5
আমি যখন আউটপুটযুক্ত রঙের স্কিমটি ব্যবহার করার চেষ্টা করেছি তখন রঙগুলি প্রদর্শিত হয়নি। !importantপ্রতিটি আউটপুটযুক্ত সিএসএস স্টেটমেন্টের শেষে যুক্ত করা সমস্যার সমাধান করেছে বলে মনে হচ্ছে। উদাহরণ: color: #ffffff;হয়ে যায় color: #ffffff !important;।
— অ্যাড্রিয়ান
2
@ অ্যাড্রিয়ান: বুটস্ট্র্যাপের নিজস্ব সিএসএস অন্তর্ভুক্ত করার পরে আপনার এই কাস্টমাইজেশনের সাথে সিএসএস ফাইল অন্তর্ভুক্ত করা উচিত। অন্য কারণ কাজ করছে না হতে পারেন যদি আপনি বুটস্ট্র্যাপ-theme.css দিতে আপনার সাইটের Boostrap গ্রেডিয়েন্ট চেহারা এবং মনে 2.x ব্যবহার
— Csaba টথ
2
ব্যাকগ্রাউন্ডের পরিবর্তে ব্যাকগ্রাউন্ডটি আমার জন্য কাজ করে
— সাগর শাহ
2
আমি এনএভি সাইট উত্পন্ন উত্সাহিত। আমি আশা করি আপনারা আরও আইটেম তৈরি করতে পেরেছিলেন যেহেতু আমি এই
— হাহাতে
2
বুটস্ট্র্যাপ 4 টি সমর্থন টিডাব্লুবিএস কালার যুক্ত করা হয়েছে, উপভোগ করুন!
— জেসেক্স
209

আপডেট 2020

বুটস্ট্র্যাপ 4-তে নাভবার রঙ পরিবর্তন করা আলাদা (এবং কিছুটা সহজ) । আপনি একটি কাস্টম নাবারবার ক্লাস তৈরি করতে পারেন এবং তারপরে অন্যান্য বুটস্ট্র্যাপ নাভকে প্রভাবিত না করেই নাবারটি পরিবর্তন করতে এটি উল্লেখ করতে পারেন ..

<nav class="navbar navbar-custom">...</nav>

বুটস্ট্র্যাপ 4.3+ +

নববার পরিবর্তন করার জন্য প্রয়োজনীয় সিএসএস বুটস্ট্র্যাপ 4 এ অনেক কম ...

.navbar-custom {
    background-color: #ff5500;
}
/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: rgba(255,255,255,.8);
}
/* change the link color */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
}
/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
}

বুটস্ট্র্যাপ 4 কাস্টম নাভবার ডেমোএখানে চিত্র বর্ণনা লিখুন

সক্রিয় / হোভার লিঙ্কের পটভূমির রঙ পরিবর্তন করা একই সিএসএসের সাথেও কাজ করে তবে আপনি যদি বিজি রঙটি লিঙ্কের পুরো উচ্চতা পূরণ করতে চান তবে আপনাকে অবশ্যই প্যাডিং সামঞ্জস্য করতে হবে ...

py-0 পুরো নভবার থেকে উল্লম্ব প্যাডিং অপসারণ করতে ...

<nav class="navbar navbar-expand-sm navbar-custom py-0">..</nav>

/* change the link color and padding  */
.navbar-custom .navbar-nav .nav-link {
    color: rgba(255,255,255,.5);
    padding: .75rem 1rem;
}

/* change the color and background color of active links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link {
    color: #ffffff;
    background-color: #333;
}

বুটস্ট্র্যাপ 4 লিঙ্ক এবং পটভূমির রঙ ডেমো পরিবর্তন করুন

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

বুটস্ট্র্যাপ 3

<nav class="navbar navbar-custom">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...
    </button>
    <a class="navbar-brand" href="#">Title</a>
  </div>
   ...
</nav>


.navbar-custom {
    background-color:#229922;
    color:#ffffff;
    border-radius:0;
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a {
    color: #ffffff;
    background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover,
.navbar-custom .navbar-nav > li > a:focus,
.navbar-custom .navbar-nav > .active > a:hover,
.navbar-custom .navbar-nav > .active > a:focus,
.navbar-custom .navbar-nav > .open >a {
    text-decoration: none;
    background-color: #33aa33;
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}
.navbar-custom .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-custom .icon-bar {
    background-color:#33aa33;
}

বুটপ্লেতে কাস্টম নাবারবার ডেমো

যদি নববারের ড্রপডাউন থাকে তবে ড্রপডাউন রঙ (গুলি) পরিবর্তন করতে নিম্নলিখিতগুলি যুক্ত করুন:

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu  { 
  background-color: #33aa33;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a  { 
  color: #fff;
}
.navbar-custom .navbar-nav .dropdown-menu>li>a:hover,.navbar-custom .navbar-nav .dropdown-menu>li>a:focus  { 
  color: #33aa33;
}

ড্রপডাউন সহ ডেমো

— জিম্বাবুয়ে
সূত্র
1
আমি কীভাবে নভবার লি পরিবর্তন করতে পারি: আপনার উদাহরণে ব্যাকগ্রাউন্ড-রঙটি রাখুন
— একন
6
এই পদ্ধতিটি ব্যবহার করে নাভবার বোতামটি ছোট পর্দায় প্রদর্শিত হবে না।
— henrikstroem
3
এটি সর্বোত্তম সমাধান কারণ এটি কোনও সিএসএস ওভাররাইট করা এবং গুরুত্বপূর্ণ ব্যবহার সম্পর্কে উদ্বিগ্ন হওয়া এড়ায়!
— ট্রুথঅফ 42
2
আমি আমার উত্তরটি পুরোপুরি সংশোধন করেছি। এটি 3.x এবং বুটস্ট্র্যাপ 4 এর জন্য উভয়ের জন্য কাজের সমাধান সরবরাহ করা উচিত ।
— জিম
বুটস্প্র্যাপ 4 - কোডপ্লে ডেমো এখনও কাজ করছে?
— মার্কোজেন
50

এটি আমাকে কিছুটা সময় নিয়েছিল, কিন্তু আমি আবিষ্কার করেছি যে নিম্নলিখিতগুলি অন্তর্ভুক্ত করেই নববারের রঙ পরিবর্তন করা সম্ভব হয়েছিল:

.navbar{ 
    background-image: none;
}
— fstopzero
সূত্র
1
এই সমস্যাটি কেন স্থির করে সে সম্পর্কে আমার কোনও ধারণা নেই তবে আপনাকে ধন্যবাদ।
— সাইমন মরগান
6
এর কারণ বুটস্ট্র্যাপ এই / * ব্যাকগ্রাউন্ড-চিত্রটি যুক্ত করে: রৈখিক-গ্রেডিয়েন্ট (নীচে, # ff 0%, # f8f8f8 100%); * / গ্রেডিয়েন্ট যুক্ত করতে। তারা কেন এটি এবং পটভূমির রঙটি অন্তর্ভুক্ত করেছে তা সম্পর্কে নিশ্চিত নই
— ড্যানিয়েল কোবে
@ ড্যানিয়েলকোবে @ সুমিত আমি সবেমাত্র বুটস্ট্র্যাপ কোডটি পরীক্ষা করে দেখেছি এবং এর সাথে আর কোনও background-imageযোগ হয়নি, যা টিডব্লিউবিএস কালারকে কাজ করতে বাধা দিতে পারে। আমি কি আপনার বুটস্ট্র্যাপের সংস্করণ এবং আপনার পরিবেশটি জানতে পারি? (অতিরিক্ত থিম, সিএসএস লাইব্রেরি ...)
— জেসেক্স
@ জেসেক্স দেখে মনে হচ্ছে এটি থিমগুলি এর কারণ ঘটছে। আমি বুটস্ট্র্যাপ 3.2.0 (সিডিএন) এর জন্য সহজ থিমটি ব্যবহার করছিলাম। এটি সরানো পুরো বিষয়টি সমাধান করেছে।
— JackWhiteIII
ব্যাকগ্রাউন্ড-ইমেজটিকে 'কিছুই নয়' হিসাবে সেট করা সমাধান বলে মনে হয়, কমপক্ষে সর্বশেষতম সংস্করণগুলির জন্য, যেখানে ব্যাকগ্রাউন্ড-ইমেজের একটি নির্দিষ্ট গ্রেডিয়েন্ট থাকে যা জলীয় নীল রঙ ধরে রাখে, এমনকি আপনি যখন কোনও ব্যাকগ্রাউন্ড-রঙ নির্দিষ্ট করেন তখনও। সম্ভবত এই প্রশ্নের উত্তর গৃহীত উত্তর সময়ের সাথে সাথে বাসি হয়ে গেছে। আমি বুটস্ট্র্যাপ ৩.৩ ব্যবহার করছি।
— যোদ্ধা পোষ্টম্যান
49

কম ব্যবহার

আপনি নিজের সংস্করণটি সংকলন করতেও বিবেচনা করতে পারেন। ব্যবহার করে দেখুন http://getbootstrap.com/customize/ (যা Navbars সেটিংসের জন্য একটি পৃথক্ অধ্যায় (ডিফল্ট NavBar এবং ইনভার্টেড নেভিগেশনদণ্ড) আছে) অথবা থেকে আপনার নিজের কপি ডাউনলোড https://github.com/twbs/bootstrap ।

আপনি নাভবার সেটিংসটি এতে খুঁজে পাবেন variables.less। navbar.lessনববার সংকলন করতে ব্যবহৃত হয় (উপর নির্ভর করে variables.lessএবং mixins.less)।

'নভবার-ডিফল্ট বিভাগ' অনুলিপি করুন এবং আপনার নিজস্ব রঙ সেটিংস পূরণ করুন। ভেরিয়েবলগুলিতে পরিবর্তন variables.lessকরা সহজতম উপায় হবে (ডিফল্ট বা বিপরীত নভবার পরিবর্তন করা কোনও সমস্যা হবেনা কারণ আপনার প্রতি পৃষ্ঠায় কেবল একটি নভবার রয়েছে)।

আপনি বেশিরভাগ ক্ষেত্রে সমস্ত সেটিংস পরিবর্তন করবেন না:

// Navbar
// -------------------------

// Basics of a navbar
@navbar-height:                    50px;
@navbar-margin-bottom:             @line-height-computed;
@navbar-default-color:             #777;
@navbar-default-bg:                #f8f8f8;
@navbar-default-border:            darken(@navbar-default-bg, 6.5%);
@navbar-border-radius:             @border-radius-base;
@navbar-padding-horizontal:        floor(@grid-gutter-width / 2);
@navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);

// Navbar links
@navbar-default-link-color:                #777;
@navbar-default-link-hover-color:          #333;
@navbar-default-link-hover-bg:             transparent;
@navbar-default-link-active-color:         #555;
@navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);
@navbar-default-link-disabled-color:       #ccc;
@navbar-default-link-disabled-bg:          transparent;

// Navbar brand label
@navbar-default-brand-color:               @navbar-default-link-color;
@navbar-default-brand-hover-color:         darken(@navbar-default-link-color, 10%);
@navbar-default-brand-hover-bg:            transparent;

// Navbar toggle
@navbar-default-toggle-hover-bg:           #ddd;
@navbar-default-toggle-icon-bar-bg:        #ccc;
@navbar-default-toggle-border-color:       #ddd;

আপনি http://twitterbootstrap3navbars.w3masters.nl/ ব্যবহার করে দেখতেও পারেন । এই সরঞ্জামটি আপনার কাস্টম নভবারের জন্য সিএসএস কোড উত্পন্ন করে। Allyচ্ছিকভাবে, আপনি নাবারটিতে গ্রেডিয়েন্ট রঙ এবং সীমানা যুক্ত করতে পারেন।

— বাস জোবসেন
সূত্র
10

এইচটিএমএল নভবারে কেবল একটি আইডি যুক্ত করুন, যেমন:

<nav id="navbar-yellow" class="navbar navbar-default navbar-fixed-top" role="navigation">

এই আইডিটি দিয়ে আপনি নাভবার রঙ স্টাইল করতে পারবেন তবে লিঙ্ক এবং ড্রপডাউনও

বিভিন্ন ধরণের নাবারের জন্য উদাহরণ প্রয়োগ করা হয়েছে

কালো

হলুদ

গাঢ় নীল

লাল (চেরি)

গাঢ় সবুজ

এখানে সিএসএস রয়েছে

/*
 * Black navbar style
 */
#navbar-black.navbar-default { /* #3C3C3C - #222222 */
    font-size: 14px;
    background-color: rgba(34, 34, 34, 1);
    background: -webkit-linear-gradient(top, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    background: linear-gradient(to bottom, rgba(60, 60, 60, 1) 0%, rgba(34, 34, 34, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-black.navbar-default .navbar-nav>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>a:focus,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-black.navbar-default .navbar-nav>.active>a,
#navbar-black.navbar-default .navbar-nav>.active>a:hover,
#navbar-black.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(0, 0, 0, 1);
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
}
#sidebar-black, #column-black {
      background-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle {
    border-color: #222222;
}
#navbar-black.navbar-default .navbar-toggle:hover,
#navbar-black.navbar-default .navbar-toggle:focus {
    background-color: #3C3C3C;
}
#navbar-black.navbar-default .navbar-nav>li>a,
#navbar-black.navbar-default .navbar-nav>li>ul>li>a,
#navbar-black.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-black.navbar-default .navbar-toggle .icon-bar,
#navbar-black.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-black.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Red navbar style
 */
#navbar-red.navbar-default { /* #990033 - #cc0033 */
    font-size: 14px;
    background-color: rgba(153, 0, 51, 1);
    background: -webkit-linear-gradient(top, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 0, 51, 1) 0%, rgba(153, 0, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-red.navbar-default .navbar-nav>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>a:focus,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-red.navbar-default .navbar-nav>.active>a,
#navbar-red.navbar-default .navbar-nav>.active>a:hover,
#navbar-red.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-red, #column-red {
      background-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle {
    border-color: #990033;
}
#navbar-red.navbar-default .navbar-toggle:hover,
#navbar-red.navbar-default .navbar-toggle:focus {
    background-color: #cc0033;
}
#navbar-red.navbar-default .navbar-nav>li>a,
#navbar-red.navbar-default .navbar-nav>li>ul>li>a,
#navbar-red.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-red.navbar-default .navbar-toggle .icon-bar,
#navbar-red.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-red.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkblue navbar style
 */
#navbar-darkblue.navbar-default { /* #003399 - #0033cc */
    font-size: 14px;
    background-color: rgba(51, 51, 153, 1);
    background: -webkit-linear-gradient(top, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    background: linear-gradient(to bottom, rgba(51, 51, 204, 1) 0%, rgba(51, 51, 153, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkblue.navbar-default .navbar-nav>.active>a,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkblue.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkblue, #column-darkblue {
    background-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle {
    border-color: #333399;
}
#navbar-darkblue.navbar-default .navbar-toggle:hover,
#navbar-darkblue.navbar-default .navbar-toggle:focus {
    background-color: #3333cc;
}
#navbar-darkblue.navbar-default .navbar-nav>li>a,
#navbar-darkblue.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkblue.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkblue.navbar-default .navbar-toggle .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkblue.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Darkgreen navbar style
 */
#navbar-darkgreen.navbar-default { /* #006633 - #009933 */
    font-size: 14px;
    background-color: rgba(0, 102, 51, 1);
    background: -webkit-linear-gradient(top, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    background: linear-gradient(to bottom, rgba(0, 153, 51, 1) 0%, rgba(0, 102, 51, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:hover,
#navbar-darkgreen.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-darkgreen, #column-darkgreen {
    background-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle {
    border-color: #006633;
}
#navbar-darkgreen.navbar-default .navbar-toggle:hover,
#navbar-darkgreen.navbar-default .navbar-toggle:focus {
    background-color: #009933;
}
#navbar-darkgreen.navbar-default .navbar-nav>li>a,
#navbar-darkgreen.navbar-default .navbar-nav>li>ul>li>a,
#navbar-darkgreen.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-darkgreen.navbar-default .navbar-toggle .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-darkgreen.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}

/*
 * Yellow navbar style
 */
#navbar-yellow.navbar-default { /* #99ff00 - #ccff00 */
    font-size: 14px;
    background-color: rgba(153, 255, 0, 1);
    background: -webkit-linear-gradient(top, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    background: linear-gradient(to bottom, rgba(204, 255, 0, 1) 0%, rgba(153, 255, 0, 1) 100%);
    border: 0px;
    border-radius: 0;
}
#navbar-yellow.navbar-default .navbar-nav>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:hover,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a:focus,
#navbar-yellow.navbar-default .navbar-nav>.active>a,
#navbar-yellow.navbar-default .navbar-nav>.active>a:hover,
#navbar-yellow.navbar-default .navbar-nav>.active>a:focus {
    color: rgba(51, 51, 51, 1);
    background-color: rgba(255, 255, 255, 1);
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
#sidebar-yellow, #column-yellow {
    background-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle {
    border-color: #99ff00;
}
#navbar-yellow.navbar-default .navbar-toggle:hover,
#navbar-yellow.navbar-default .navbar-toggle:focus {
    background-color: #ccff00;
}
#navbar-yellow.navbar-default .navbar-nav>li>a,
#navbar-yellow.navbar-default .navbar-nav>li>ul>li>a,
#navbar-yellow.navbar-default .navbar-brand {
    color: #999999;
}
#navbar-yellow.navbar-default .navbar-toggle .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:hover .icon-bar,
#navbar-yellow.navbar-default .navbar-toggle:focus .icon-bar {
    background-color: #ffffff;
}
— FabianW
সূত্র
উপরের বুটস্ট্র্যাপ 3 বা 4 এর জন্য?
— মার্কোজেইন
7

আপনার কি সরাসরি সিএসএস পরিবর্তন করতে হবে? কি সম্পর্কে...

<nav class="navbar navbar-inverse" style="background-color: #333399;">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>                        
  </button>
  <a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
  </ul>
</div>

— eaglei22
সূত্র
6

এটিও চেষ্টা করে দেখুন। এটি আমার পক্ষে কাজ করেছে।

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}
— সৌরভ কুমার
সূত্র
4

যদি এটি কেবল নাবারের রঙ পরিবর্তন করে তবে আমার পরামর্শটি ব্যবহার করা হবে: বুটস্ট্র্যাপ যাদু । আপনি নাবারের বিভিন্ন বৈশিষ্ট্যের জন্য মানগুলি পরিবর্তন করতে পারেন এবং একটি প্রাকদর্শন দেখতে পারেন।

কাস্টম সিএসএস স্টাইল শীট বা কম ভেরিয়েবল ফাইল হিসাবে ফলাফলটি ডাউনলোড করুন। আপনি ইনপুট ক্ষেত্র এবং রঙ পিকারের সাহায্যে মান পরিবর্তন করতে পারেন।

— থিও
সূত্র
3

এই নাবার সিএসএসে, নিজের রঙের জন্য সেট করুন:

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret, 
.navbar-default .navbar-nav > .open > a:hover .caret, 
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
স্নিপেট প্রসারিত করুন

— আশু ডিজাইনার
সূত্র
"নিজের রঙ সেট করুন" বলতে কী বোঝ?
— পিটার মর্টেনসেন
1

উদাহরণ

কেবল এটির মতো চেষ্টা করুন:

<!-- A light one -->
<nav class="navbar navbar-default" role="navigation"></nav>
<!-- A dark one -->
<nav class="navbar navbar-inverse" role="navigation"></nav>

ফাইল navabr.css

/* Navbar */
.navbar-default {
    background-color: #F8F8F8;
    border-color: #E7E7E7;
}
/* Title */
.navbar-default .navbar-brand {
    color: #777;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
    color: #5E5E5E;
}
/* Link */
.navbar-default .navbar-nav > li > a {
    color: #777;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #555;
    background-color: #E7E7E7;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
    color: #555;
    background-color: #D5D5D5;
}
/* Caret */
.navbar-default .navbar-nav > .dropdown > a .caret {
    border-top-color: #777;
    border-bottom-color: #777;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
    border-top-color: #333;
    border-bottom-color: #333;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
    border-top-color: #555;
    border-bottom-color: #555;
}
/* Mobile version */
.navbar-default .navbar-toggle {
    border-color: #DDD;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #DDD;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #CCC;
}
@media (max-width: 767px) {
    .navbar-default .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
}

ডিফল্ট প্রধান রঙের ব্যবহার নীচে রয়েছে:

  • নাভবার পটভূমি: # F8F8F8
  • নাভবার সীমানা: # E7E7E7
  • ডিফল্ট রঙ: # 777
  • ন্যাভ-ব্র্যান্ডের হোভার রঙ: # 5E5E5E
  • হোভার রঙ: # 333
  • সক্রিয় পটভূমি: # D5D5D5
  • সক্রিয় রঙ: # 555

আপনি টুইটার বুটস্ট্র্যাপ 3 এ নাবার বার পরিবর্তন করতে আরও শিখতে পারেন ।

— core114
সূত্র
0

টুইটার বুটস্ট্র্যাপে বিপরীত এবং ডিফল্ট শ্রেণীর নাম উল্লেখ তাদের কালো এবং সাদা বর্ণের কারণ করে।

আরও ভাল, আপনার এটিকে ওভাররাইড করা উচিত নয় এবং তার কাছে একটি ক্লাস যুক্ত করা উচিত এবং এর জন্য আপনাকে নির্দিষ্ট স্টাইলটি লিখতে হবে না:

my_style{
    background-color: green;
}
স্নিপেট প্রসারিত করুন

— নাম্বি এন রাজন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.