স্টাইলিং টুইটার বুটস্ট্র্যাপ বোতাম

Question

টুইটার-বুটস্ট্র্যাপ বোতামগুলি দুর্দান্তভাবে সুন্দর। তাদের উপর স্ক্রোল করে এগুলি ব্যবহার করে দেখুন

তবে এগুলি রঙে সীমাবদ্ধ।

বুটস্ট্র্যাপটি এত সুন্দর এবং অনায়াসে সুন্দর হোভার-ওভার এফেক্ট রাখার সময় আমি কী বোতামের বেস কালারটি পরিবর্তন করতে পারি?

সিএসএস / জাভাস্ক্রিপ্ট দেখতে কেমন লাগে সে সম্পর্কে আমি সম্পূর্ণ অজানা tw টুইটারগুলি এই প্রভাবগুলি বজায় রাখতে ব্যবহার করে।

Comments

বোতামগুলির কম সংজ্ঞাটি সন্ধান এবং সম্পাদনা করুন। তারপরে সিএসএস পুনরায় কম্পাইল করুন lessc। সিএসএস ফাইলগুলি সরাসরি সম্পাদনা করবেন না! এটি রক্ষণাবেক্ষণযোগ্য নয়।

— এলোমেলোভাবে

Answer 1

মূলত, টুইটার বুটস্ট্র্যাপের বোতামগুলি ".btn {}" দ্বারা CSS এ নিয়ন্ত্রণ করা হয়। আপনাকে যা করতে হবে তা হ'ল সিএসএস ফাইলে যান এবং এটি যেখানে "বিটিএন" বলে সেখানে সন্ধান করুন এবং রঙ সেটিংস পরিবর্তন করুন। তবে এটি করা ঠিক ততটা সহজ নয় যেহেতু আপনি যখন বোতামটি হাইলাইট করেন তখন তার রঙ পরিবর্তন করতে হবে ইত্যাদি etc. এটি করতে আপনাকে ".btn: hover {like এর মতো সিএসএসে অন্যান্য ট্যাগগুলিও সন্ধান করতে হবে for ", ইত্যাদি।

এটি পরিবর্তনের জন্য সিএসএস পরিবর্তন করা দরকার। এখানে এই ফাইলটির একটি দ্রুত লিঙ্ক রয়েছে:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Comments

এটি কোনও বিশেষ সমাধান নয়। অন্যান্য সমাধানগুলি ব্যবহার করুন, যা কম ভিত্তিতে তৈরি। অথবা তাদের ওয়েবসাইটে ভেরিয়েবল সম্পাদকের মাধ্যমে বুটস্ট্র্যাপ কাস্টমাইজ করুন।

— জেস্পার

এটি কেবল ওভাররাইড করুন ... শেষ পর্যন্ত আপনার সিএসএস লোড করা আপনাকে সমস্যা সমাধানে সহায়তা করতে পারে .. একই ক্যালস বুটস্ট্র্যাপ ব্যবহার করে

— জাইমিন মোসলেক

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

— টিম লুডউইনস্কি

Answer 2

আমি খুঁজে পেয়েছি সহজ উপায় হ'ল এটি আপনার ওভাররাইডগুলিতে রাখা। আমার অকল্পনীয় রঙ পছন্দ জন্য দুঃখিত

বুটস্ট্র্যাপ 4-আলফা SASS

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

বুটস্ট্র্যাপ 4 আলফা SASS উদাহরণ

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

.my-btn {
  //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
  .button-variant(red; white; blue);
}

বুটস্ট্র্যাপ 3 কম উদাহরণ

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

.my-btn {
  //@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  @include button-variant(red, white, blue);
}

বুটস্ট্র্যাপ 3 এসএএসএস উদাহরণ

বুটস্ট্র্যাপ 2.3 কম

.btn-primary {
  //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
  .buttonBackground(red, white);
}

বুটস্ট্র্যাপ 2.3 কম উদাহরণ

বুটস্ট্র্যাপ 2.3 এসএএসএস

.btn-primary {
  //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); 
  @include buttonBackground(red, white); 
}

এটি আপনার জন্য হোভার / ক্রিয়াকলাপগুলির যত্ন নেবে

মন্তব্যগুলি থেকে, আপনি কালো ব্যবহার করার সময় অন্ধকারের পরিবর্তে বোতামটি হালকা করতে চান (বা কেবল বিপরীত করতে চান) আপনাকে আরও কিছুটা ক্লাসটি আরও বাড়ানো দরকার:

বুটস্ট্র্যাপ 3 এসএএসএস লিগথিন

.my-btn {
  // @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
  $color: #fff;
  $background: #000;
  $border: #333;
  @include button-variant($color, $background, $border);
  // override the default darkening with lightening
  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > &.dropdown-toggle {
    color: $color;
    background-color: lighten($background, 20%); //10% default
    border-color: lighten($border, 22%); // 12% default
  }
}

বুটস্ট্র্যাপ 3 এসএএসএস হালকা উদাহরণ

Comments

আপনি স্যার দুর্দান্ত।

— বাসারাত

আপনি কিভাবে এটি স্ক্যাসে অনুবাদ করবেন?

— ড্রিফুজ

তারপরে lesscসিএসএসে আপনার পরিবর্তনগুলি সংকলন করতে চালান ।

— এলোমেলোভাবে

ড্রেইফুজ আমি স্কেস ব্যবহার করি না তবে তৃতীয় পক্ষের সাস বুটস্ট্র্যাপগুলি দেখে মনে হচ্ছে আপনি যা করতে পারেন - .btn-primary {@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); }আপনার ভেরিয়েবলগুলি যথাযথভাবে পরিবর্তন করা (ভয়ানক বিন্যাসের জন্য দুঃখিত)

— ক্রিশান

আমি .buttonBackground is undefined in main.lessকি আমার কম কিছু অন্তর্ভুক্ত করা প্রয়োজন?

— হিমালয় মজুমদার 21

Answer 3

আপনি আপনার সিএসএসের রঙগুলি ওভাররাইট করতে পারেন, উদাহরণস্বরূপ ডেঞ্জার বোতামের জন্য:

.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];

.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }

Comments

আমি তোমাদের শৈলী প্রয়োজন মনে :focusএবং :active/ drags খুব, বা অন্যথায় আপনি কখনও কখনও ক্লিকের উপর অদ্ভুত রং পেতে ...

— সাইমন ইস্ট

সরল, আমি এটি পছন্দ করি

— নিনো একপা্যাক

যারা অনুসন্ধানের মাধ্যমে এটি খুঁজে পেয়েছেন এবং আপনি যখন একটি বোতাম টিপুন এবং টেনে আনেন তখন আপনি একটি ডিফল্ট রঙ পেয়ে যাচ্ছেন, .btn-primary:active:focus {সেই

— কেসটি

Answer 4

এখানে একটি ভাল সম্পদ: http://charliepark.org/bootstrap_buttons/

আপনি রঙ পরিবর্তন করতে পারেন এবং কার্য সম্পাদন করতে পারেন।

Comments

এটি একটি কনফিগারকারী। আপনি যদি গ্রাহকের জন্য প্রোটোটাইপ তৈরি করতে তাড়াহুড়া করেন তবে এটি সহজ। তবে দীর্ঘমেয়াদে রক্ষণাবেক্ষণযোগ্য নয়। কনফিগারেটর অদৃশ্য হলে কী হবে? সুতরাং আসল জিনিস জন্য, lesscএকটি ভাল সমাধান।

— এলোমেলোভাবে

এই সমাধানটিকে ভালবাসুন, যদিও আমি চাই যে সঠিক রঙগুলি পাওয়ার জন্য rgb / rgba প্রবেশ করার কোনও উপায় ছিল।

— সেড্রিক

আপনি যদি ইতিমধ্যে এই পদক্ষেপটি পেয়ে যান তবে খুব কমই দুর্দান্ত, তবে এই "কনফিগ্রেটর" সিএসএস তৈরির জন্য প্রয়োজনীয় সমস্ত কিছু করে। এটিকে ফেলে দিন। এর পরে আপনার কনফিগারারের প্রয়োজন হবে না।

— মুডবুম

Answer 5

আপনি যদি বুটস্ট্র্যাপ সিএসএস (সংস্করণ 3) লোড করার পরে ইতিমধ্যে আপনার নিজস্ব কাস্টম সিএসএস ফাইলটি লোড করে থাকেন তবে আপনি এই 2 টি সিএসএস স্টাইলকে আপনার কাস্টম সিএসএসে যুক্ত করতে পারেন এবং সেগুলি ডিফল্ট বোতাম শৈলীর জন্য বুটস্ট্র্যাপ ডিফল্টগুলিকে ওভাররাইড করবে।

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {

  background-color: #A6A8C1;
  border-color: #31347B;
 }

.btn
{
  background-color: #9F418F;
  border-color: #9F418F;
}

Answer 6

একের পর এক সিএসএসের মান পরিবর্তনের পরিবর্তে আমি কম ব্যবহার করার পরামর্শ দেব । বুথস্ট্র্যাপের গিথুবটিতে কম সংস্করণ রয়েছে: https://github.com/twbs/bootstrap

কম আপনাকে রঙ পরিবর্তন করতে ভেরিয়েবল সংজ্ঞায়িত করতে দেয় যা এটিকে আরও বেশি সুবিধাজনক করে তুলেছে। একবার রঙ নির্ধারণ করুন এবং LESS সিএসএস ফাইল সংকলন করে যা বিশ্বব্যাপী মান পরিবর্তন করে। সময় এবং প্রচেষ্টা বাঁচায়।

Answer 7

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

    .btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, 
    .btn-primary:active, .btn-primary.active, .btn-primary:visited,
    .btn-primary:active:hover, .btn-primary.active:hover{
        background-color: #F19425;
        color:#fff;
        border: none;
        outline: none;
    }

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

Comments

এই পদ্ধতি দুর্দান্ত। এটি কেবলমাত্র কম বুটস্ট্র্যাপ কাস্টমাইজেশনের পরে দ্বিতীয়

— জিয়ানলুকা ঘেটিনি

Answer 8

সাসের বুটস্ট্র্যাপের জন্য এটি ওভাররাইড হয়

.btn-default {

    @include button-variant($color, $background, $border);

}

আপনি এখানে এর উত্স দেখতে পারেন: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6

Answer 9

অথবা http://twitterbootstrapbuttons.w3masters.nl/ ব্যবহার করে দেখুন । এটি এইচটিএমএল রঙের ইনপুটের উপর ভিত্তি করে বোতামগুলির জন্য সিএসএস তৈরি করে। বুটস্ট্র্যাপ সিএসএসের পরে সিএসএস যুক্ত করুন। এটি বোতামের তিনটি শৈলীর (হালকা, গা dark় এবং স্পিন) সরবরাহ করে।

Comments

এটি একটি কনফিগারকারী (সাজানোর)। আপনি যদি গ্রাহকের জন্য প্রোটোটাইপ তৈরি করতে তাড়াহুড়ো করেন তবে এটি বেশ সহজ। তবে দীর্ঘমেয়াদে রক্ষণাবেক্ষণযোগ্য নয়। কনফিগারেটর অদৃশ্য হলে কী হবে? সুতরাং আসল জিনিস জন্য, lesscএকটি ভাল সমাধান।

— এলোমেলোভাবে

Answer 10

এখানে একটি খুব সহজ এবং সহজ উপায়: আপনি নিজের বোতামে যে রঙ প্রয়োগ করতে চান সেগুলি দিয়ে আপনার ক্লাসে আপনার সিএসএসে যুক্ত করুন:

.my-btn{
    background: #0099cc;
    color: #ffffff;
}
.my-btn:hover { 
  border-color: #C0C0C0; 
  background-color: #C0C0C0; 
}

এবং আপনার বুটস্ট্র্যাপ বোতামে বা লিঙ্কটিতে শৈলী যুক্ত করুন:

<a href="xxx" class="btn btn-info my-btn">aaa</a>

Answer 11

ইন টুইটার বুটস্ট্র্যাপ বুটস্ট্র্যাপ 3.0.0, টুইটার বাটন সমতল। আপনি এটি http://getbootstrap.com/customize থেকে কাস্টমাইজ করতে পারেন । বোতামের রঙ, সীমান্ত রেডিয়াস ইত্যাদি

এছাড়াও আপনি এইচটিএমএল কোড এবং অন্যদের কার্যকারিতা http://twitterbootstrap.org/bootstrap-css-buttons খুঁজে পেতে পারেন ।

বুটস্ট্র্যাপ ২.৩.২ বোতামটি গ্রেডিয়েন্ট তবে 3.0.0 (নতুন প্রকাশ) সমতল এবং আরও দুর্দান্ত দেখাচ্ছে cool

এবং আপনি পুরো বুটস্ট্র্যাপ চেহারা এবং শৈলীটি এই সংস্থানগুলি তৈরি করতে অনুকূলিত করতে পারেন: http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/

Answer 12

আমি জানি এটি একটি পুরানো থ্রেড, তবে কেবল অন্য দৃষ্টিভঙ্গি যুক্ত করতে। আমি দৃ as়ভাবে বলছি যে ওভাররাইডগুলি ব্যবহার করা আসলেই কিছুটা কোডের গন্ধ এবং খুব দ্রুত বড় প্রকল্পগুলিতে হাতছাড়া হয়ে যায়। আজ আপনি বাটনগুলি, কালকে মডেলগুলি, পরের দিন এটি ড্রপডাউনস, ইত্যাদিতে ওভাররাইড করছেন etc.

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

https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17

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

Answer 13

বুটস্ট্র্যাপ (কমপক্ষে সংস্করণ 3.1.1 এর জন্য) এবং কমের জন্য, আপনি এটি ব্যবহার করতে পারেন:

.btn-my-custom {
    .button-variant(@color; @background; @border)
}

এটি মধ্যে সংজ্ঞায়িত করা হয় bootstrap/less/buttons.less।

Answer 14

আপনি ব্যাকগ্রাউন্ড-রঙ পরিবর্তন এবং ব্যবহার করতে পারেন! গুরুত্বপূর্ণ;

.btn-primary {
  background-color: #003c79 !important;
  border-color: #15548b !important;
  color: #fff;
}

.btn-primary:hover {
  background-color: #4289c6 !important;
  border-color: #3877ae !important;
  color: #fff;
}

.btn-primary.focus, .btn-primary:focus {
   background-color: #4289c6 !important;
   border-color: #3877ae !important;
   color: #fff;
}