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

Question

আমি কীভাবে টুইটার বুটস্ট্র্যাপ ২.০.২ এর নবারের পটভূমির রঙ পরিবর্তন করতে পারি? আমি কীভাবে পটভূমির রঙ প্রতিফলিত করতে নভবারের সমস্ত উপাদানগুলির রঙ পরিবর্তন করতে পারি?

Comments

সমাধান। বুটস্ট্রেপ.কম-এ পরিবর্তন করা হয়েছে nav ব্যাকগ্রাউন্ড-রঙ বদলেছে, সমস্ত কিছু মন্তব্য করেছে। ধন্যবাদ।

— 7:53 এ গেটো

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

— আন্দ্রেস ইলিচ

ধন্যবাদ আন্দ্রেস, বুটস্ট্র্যাপের আচরণ পরিবর্তন করার অন্যান্য উপায়গুলি কী? নাভিবার বেশিরভাগ সাইটের জন্য বেদনাদায়ক কারণ তারা লোকেরা বিশ্বাস করতে পারছে না যে ওয়েবটি নান্দনিকতার জন্য ততটাই কার্যকর কারণ এটি কার্যকারিতার জন্য।

— 26

আপনি আসলে নিজের স্টাইলশীটের অভ্যন্তরে বেশিরভাগ বুটস্ট্র্যাপ বিধিগুলি ওভাররাইট করতে পারেন, আপনার মোটেই বুটস্ট্র্যাপ সিএসএস স্টাইলশিটটি স্পর্শ করার দরকার নেই। বুটস্ট্র্যাপ আপডেট হওয়ার পরে আপনি ঠিক এখনই এটি আপডেট করতে পারবেন এবং আপনার সমস্ত পরিবর্তনগুলি থেকে যাবে এবং এই পদ্ধতিতে আপনি আপনার সাইটের প্রয়োজনীয়তাগুলি (এটি হরফ বা রঙ থাকুন) ফিট করার জন্য বুস্ট্র্যাপ শৈলীগুলি ওভাররাইট করতে পারেন।

— Andres Ilich

খুব সহজ উত্তর: stackoverflow.com/questions/18529274/…

— ক্রিস জনসন

Answer 1

.navbar-innerক্লাস সহ বুটস্ট্র্যাপের রংগুলি আপনার নিজের স্টাইলশীটে টার্গেট করে বুটস্ট্র্যাপ সিএসএস স্টাইলশীট পরিবর্তনের বিরোধিতা করে ওভাররাইট করতে পারেন:

.navbar-inner {
  background-color: #2c2c2c; /* fallback color, place your own */

  /* Gradients for modern browsers, replace as you see fit */
  background-image: -moz-linear-gradient(top, #333333, #222222);
  background-image: -ms-linear-gradient(top, #333333, #222222);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
  background-image: -webkit-linear-gradient(top, #333333, #222222);
  background-image: -o-linear-gradient(top, #333333, #222222);
  background-image: linear-gradient(top, #333333, #222222);
  background-repeat: repeat-x;

  /* IE8-9 gradient filter */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
}

আপনাকে কেবল সেই সমস্ত শৈলীগুলি আপনার নিজের সাথে সংশোধন করতে হবে এবং সেগুলি গ্রহণ করা হবে, উদাহরণস্বরূপ, যেখানে আমি সমস্ত গ্রেডিয়েন্ট প্রভাবগুলি মুছে ফেলি এবং কেবল একটি শক্ত কালো ব্যাকগ্রাউন্ড-রঙ সেট করি:

.navbar-inner {
  background-color: #000; /* background color will be black for all browsers */
  background-image: none;
  background-repeat: no-repeat;
  filter: none;
}

আপনি রঙিনজিলা গ্রেডিয়েন্ট সম্পাদক হিসাবে এই জাতীয় সরঞ্জামগুলির সুবিধা নিতে এবং সমস্ত ব্রাউজারের জন্য আপনার নিজস্ব গ্রেডিয়েন্ট রঙ তৈরি করতে এবং নিজের রঙের সাথে মূল রঙগুলি প্রতিস্থাপন করতে পারেন।

এবং আমি মন্তব্যে উল্লিখিত হিসাবে, আমি আপনাকে বুটস্ট্র্যাপ সিএসএস স্টাইলশিটটি সরাসরি পরিবর্তন করার প্রস্তাব ^{দিচ্ছি} না কারণ স্টাইলশিটটি আপডেট হয়ে যাওয়ার সাথে সাথে আপনার সমস্ত পরিবর্তনগুলি নষ্ট হয়ে যাবে (বর্তমান সংস্করণটি ^v2.0.2 ) সুতরাং আপনার ^{পছন্দগুলি সমস্তই} অন্তর্ভুক্ত করা উচিত আপনার নিজের স্টাইলশীটের অভ্যন্তরে বুটস্ট্র্যাপ সিএসএস স্টাইলশিটের সাথে আপনার পরিবর্তনগুলি। তবে মনে রাখবেন যে ব্রাউজারগুলিতে সুসংগততা রাখতে সমস্ত উপযুক্ত বৈশিষ্ট্যই ওভাররাইট করা।

Comments

background-image: none;ছয় বার?

— এখনকার

@ দামিয়াননওক ওয়াহ, সবেমাত্র লক্ষ্য করেছেন যে, টিপটির জন্য ধন্যবাদ: ডি চূড়ান্ত মস্তিষ্ক

— আন্দ্রেস ইলিচ

ধন্যবাদ. এটি আমাকে পাগল করে তুলেছিল যে আমি কোনও কিছুতে পটভূমির রঙ সেট করতে পারি না এবং এটি পুরো নাবারটিতে প্রয়োগ করতে পারি।

— অটোমেটিকো

Answer 2

থিম বুটস্ট্র্যাপ কীভাবে করবেন তা দেখার জন্য একটি দুর্দান্ত উত্স হ'ল: বুটসওয়াচ ডটকম । এটিতে চমৎকার উদাহরণ এবং শো কোড রয়েছে। সংক্ষেপে, তারা আপনার নতুন রঙ-থিম.কমের বুটস্ট্র্যাপ সিএসএস পুনরায় সংযোগ করতে লেটসি ব্যবহার করে। তাদের পদ্ধতির দুর্দান্ত জিনিসটি হ'ল বুটস্ট্র্যাপের শীর্ষে নির্মিত, সুতরাং বুটস্ট্র্যাপ আপডেট হওয়ার পরে আপনি কেবল পুনরায় কম্পাইল করবেন।

লেটক এবং বুটস্ট্র্যাপ ব্যবহার সম্পর্কে লিঙ্কগুলি:

• কম সহ বুটস্ট্র্যাপ ব্যবহার করা
• Lessc.org

Comments

আশ্চর্য সম্পদ আলেকজান্ডার। অনেক ধন্যবাদ.

— 31:38

বুটসওয়াচের লিঙ্কটির জন্য ধন্যবাদ :)

— অক্ষর জীবন শর্মা

Answer 3

আপনি যদি "কম" শেখার বা এটি সঠিকভাবে করার জন্য সময় না পেয়ে থাকেন তবে এখানে একটি নোংরা হ্যাক ...

আপনি বুটস্ট্র্যাপ ন্যাভ বারের এইচটিএমএল রেন্ডার করেন সেখানে উপরে এটি যুক্ত করুন - প্রয়োজনীয় রঙগুলি আপডেট করুন ..

<style type="text/css">   

.navbar-inner {
    background-color: red;
    background-image: linear-gradient(to bottom, blue, green);
    background-repeat: repeat-x;
    border: 1px solid yellow;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    min-height: 40px;
    padding-left: 20px;
    padding-right: 20px;
}

.dropdown-menu {
    background-clip: padding-box;
    background-color: red;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    display: none;
    float: left;
    left: 0;
    list-style: none outside none;
    margin: 2px 0 0;
    min-width: 160px;
    padding: 5px 0;
    position: absolute;
    top: 100%;
    z-index: 1000;
}

.btn-group.open .btn.dropdown-toggle {
  background-color: red;
}

.btn-group.open .btn.dropdown-toggle {
  background-color:lime;
}

.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
  color:white;
  background-color:Teal;
}

.navbar .nav > li > a {
    color: white;
    float: none;
    padding: 10px 15px;
    text-decoration: none;
    text-shadow: 0 0px 0 #ffffff;
}

.navbar .brand {
  display: block;
  float: left;
  padding: 10px 20px 10px;
  margin-left: -20px;
  font-size: 20px;
  font-weight: 200;
  color: white;
  text-shadow: 0 0px 0 #ffffff;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
  color: white;
  text-decoration: none;
  background-color: transparent;
}

.navbar-text {
  margin-bottom: 0;
  line-height: 40px;
  color: white;
}

.dropdown-menu li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 20px;
  color: white;
  white-space: nowrap;
}

.navbar-link {
  color: white;
}

.navbar-link:hover {
  color: white;
}

</style>

Answer 4

আপনি বুটস্ট্র্যাপের একটি কাস্টম সংস্করণ ডাউনলোড করতে পারেন এবং @navbarBackground আপনার পছন্দ মতো রঙে সেট করতে পারেন।

http://twitter.github.com/bootstrap/customize.html

Answer 5

আমি বুটস্ট্র্যাপের সংস্করণটি ৩.২.০ ব্যবহার করছি এবং দেখে মনে হচ্ছে .নাবার-অভ্যন্তরটির আর কোনও অস্তিত্ব নেই।

এখানে সমাধানগুলি ওভাররাইড করার পরামর্শ দেয় nav। নবার-ভিতরটি আমার পক্ষে কাজ করে না - রঙটি একই ছিল।

রঙটি কেবল তখনই পরিবর্তন হয়েছিল যখন আমি নীচে প্রদর্শিত হিসাবে। নবারকে ওভাররড করব:

.navbar {
    background-color: #A4C8EC;
    background-image: none;
}

Answer 6

বর্তমানে এটি করার সর্বোত্তম উপায় হ'ল কম কমান্ড লাইন সংকলকটি ব্যবহার করে ইনস্টল করা

$ npm install -g less jshint recess uglify-js

একবার আপনি এটি সম্পন্ন করার পরে ডিরেক্টরিতে কম ফোল্ডারে যান এবং তারপরে ফাইল ভেরিয়েবলগুলি সম্পাদনা করুন less

@navbarCollapseWidth:             979px;

@navbarHeight:                    40px;
@navbarBackgroundHighlight:       #ffffff;
@navbarBackground:                darken(@navbarBackgroundHighlight, 5%);
@navbarBorder:                    darken(@navbarBackground, 12%);

@navbarText:                      #777;
@navbarLinkColor:                 #777;
@navbarLinkColorHover:            @grayDark;
@navbarLinkColorActive:           @gray;
@navbarLinkBackgroundHover:       transparent;
@navbarLinkBackgroundActive:      darken(@navbarBackground, 5%);

এটি করা হয়ে গেলে আপনার বুটস্ট্র্যাপ ডিরেক্টরিতে যান এবং কমান্ড মেকটি চালান।

Answer 7

আপনি যদি কম ব্যবহার করেন তবে আপনি কম কোডের জন্য মিক্সিন ব্যবহার করতে পারেন। এখানে আমি গ্রেডিয়েন্ট, সীমানা এবং সীমানা ব্যাসার্ধ যুক্ত করব:

.navbar-inner {
  #gradient > .vertical(#ffffff, #ECECEC);
  border: #E2E2E2;
  .border-radius(6px);
}

* আপনি যদি রেল রত্ন, টুইটার-বুটস্ট্র্যাপ-রেল ব্যবহার করে থাকেন তবে আমি এটি সরাসরি বুটস্ট্র্যাপ_আন্দ_ওভারাইডস সিএস.বিহীন ফাইলটিতে করি do

Answer 8

এটাই আমি করি

.navbar-inverse .navbar-inner {
  background-color: #E27403; /* it's flat*/
 background-image: none;
}

.navbar-inverse .navbar-inner {
  background-image: -ms-linear-gradient(top, #E27403, #E49037);
  background-image: -webkit-linear-gradient(top, #E27403, #E49037);
  background-image: linear-gradient(to bottom, #E27403, #E49037);
}

এটি সমস্ত নেভিগেটরের পক্ষে ভাল কাজ করে আপনি উপরে ডেমো দেখতে পারেন http://caverne.fr শীর্ষে

Answer 9

বুটস্ট্র্যাপ.এসএস লাইনে 4784 আমরা দেখতে পাই:

.navbar-inverse .navbar-inner {
  background-color: #FFFFFFF;
  background-image: -moz-linear-gradient(top, #222222, #111111);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111));
  background-image: -webkit-linear-gradient(top, #222222, #111111);
  background-image: -o-linear-gradient(top, #222222, #111111);
  background-image: linear-gradient(to bottom, #222222, #111111);
  background-repeat: repeat-x;
  border-color: #252525;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0);
}

পছন্দসই প্রভাব পেতে আপনাকে সমস্ত 'পটভূমি-চিত্র' সম্পত্তি ঘোষণা সরিয়ে ফেলতে হবে।

Answer 10

আপনার আরও জটিল কিছু প্রয়োজন না হওয়া পর্যন্ত ইভেন্টের রেজারটি কেবল এটি করতে বলবে না? এটি কিছুটা হ্যাক, তবে দ্রুত সমাধান চাইলে এমন কারওর প্রয়োজন অনুসারে এটি হতে পারে।

.navbar-default .container-fluid{
    background-color:#62ADD7; // Change the color
    margin: -1px -1px 10px -1px; // Get rid of the border
}

Answer 11

আপনি যদি বুটস্ট্র্যাপের কম বা SASS সংস্করণ ব্যবহার করেন। সবচেয়ে কার্যকর উপায় হল ভেরিয়েবলের নামটি কম বা SASS ফাইলে পরিবর্তন করা।

$navbar-default-color:              #FFFFFF !default;
$navbar-default-bg:                 #36669d !default;
$navbar-default-border:             $navbar-default-bg !default;

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

Answer 12

আপনি বুটস্ট্র্যাপের অফিসিয়াল ওয়েবসাইটে নিজের সংস্করণটি কাস্টমাইজ করতে পারেন ।

Answer 13

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

.navbar-nav li a{
    color: #fff;
    font-size: 15px;
    margin-top: 9px;
}
.navbar-nav li a:hover{

    background-color: #18678E;
    height: 61px;
}

আমি বৈধতা ত্রুটির পছন্দগুলিও একইভাবে পরিবর্তন করেছি।