css - tutorial - bootstrap w3school




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

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

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

উপলব্ধ Navbars

আপনি দুটি মৌলিক navbars পেয়েছেন:

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

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

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

  • #F8F8F8 : Navbar পটভূমি
  • #E7E7E7 : #E7E7E7 সীমানা
  • #777 : ডিফল্ট রঙ
  • #333 : হোভার রঙ ( .nav-brand জন্য #5E5E5E )
  • #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;
    }
}

কাস্টম রঙ্গিন navbar উদাহরণ

এখানে একটি কাস্টম রঙিন navbar চারটি উদাহরণ:

JSFiddle লিঙ্ক

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

$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 - আপনার নিজস্ব বুটস্ট্র্যাপ নেভিবার তৈরি করুন

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

আমি কিভাবে টুইটার বুটস্ট্র্যাপে navbar এর রঙ পরিবর্তন করতে সিএসএস পরিবর্তন করব?


কম ব্যবহার করে

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

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

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

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

// 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/ চেষ্টা করতে পারেন। এই টুলটি আপনার কাস্টম নেভিবার জন্য সিএসএস কোড তৈরি করে। বিকল্পভাবে, আপনি navbar এ গ্রেডিয়েন্ট রঙ এবং সীমানা যুক্ত করতে পারেন।


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

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


উদাহরণ, শুধু এই মত চেষ্টা করুন

<!-- 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;
    }
}

ডিফল্ট প্রধান রঙ ব্যবহার নিম্নরূপ:

  • Navbar পটভূমি: # F8F8F8
  • Navbar বর্ডার: # E7E7E7
  • ডিফল্ট রঙ: # 777
  • নতুন ব্র্যান্ড হভার রঙ: # 5E5E5E
  • হভার রঙ: # 333
  • সক্রিয় ব্যাকগ্রাউন্ড: # D5D5D5
  • সক্রিয় রঙ: # 555

আপনি আরও জানতে পারেন http://fellowtuts.com/twitter-bootstrap/to-change-navbar-color-in-twitter-bootstrap-3/


এই খুব চেষ্টা করুন। এটা আমার জন্য কাজ করেছে।

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  background-color: #00a950;
  color: #000000;
}

এটি শৈলী = "" ব্যবহার করে সরাসরি করা যেতে পারে যেকোনো HTML ট্যাগ যা আপনি এটির জন্য ওভাররাইড করতে চান।

<nav class="navbar navbar-default" style="font-weight: bold; background-color: #569AAB;">

এটি বুটস্ট্র্যাপ এর ডিফল্ট CSS overrides।

স্টাইলিং বা সিএসএস সম্পূর্ণ সেট সংজ্ঞায়িত করার কোন প্রয়োজন নেই।


এটি শুধুমাত্র Navbar এর রঙ পরিবর্তন সম্পর্কে আমার পরামর্শ ব্যবহার করা হবে: বুটস্ট্র্যাপ ম্যাজিক । আপনি Navbar বিভিন্ন বৈশিষ্ট্য জন্য মান পরিবর্তন করতে পারেন এবং একটি প্রাকদর্শন দেখতে পারেন। একটি কাস্টম সিএসএস স্টাইল শীট হিসাবে বা একটি কম ভেরিয়েবল ফাইল হিসাবে ফলাফল ডাউনলোড করুন। আপনি ইনপুট ক্ষেত্র এবং রঙ pickers সঙ্গে মান পরিবর্তন করতে পারেন। ওয়াই


বিপরীত এবং defult ক্লাস নাম Twittter বুটস্ট্র্যাপ উল্লেখ তাদের কালো এবং সাদা রঙ। ভাল আপনি ওভাররাইড করা উচিত নয় এবং কাছাকাছি একটি ক্লাস যোগ করা এবং যে জন্য আপনি নির্দিষ্ট শৈলী লিখতে হবে

my_style{
background-color:green;
}

তাই ভালো. ধন্যবাদ.


বুটস্ট্র্যাপ 4 এর জন্য 2018 আপডেট করা হয়েছে

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

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

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

বুটস্ট্র্যাপ 4 এ CSS কমপিউটার পরিবর্তন করতে অনেক কম ...

.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 কাস্টম Navbar ডেমো

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

পুরো navbar থেকে উল্লম্ব প্যাডিং অপসারণ 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 হ্যামবার্গার Toggler রঙ পরিবর্তন করুন

বুটস্ট্র্যাপ 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;
}

Bootply উপর কাস্টম Navbar ডেমো

Navbar ড্রপডাউন আছে, ড্রপডাউন রঙ পরিবর্তন করতে নিম্নলিখিত যোগ করুন:

/* 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;
}

ড্রপডাউন সঙ্গে ডেমো







navbar