বুটস্ট্র্যাপ টেবিল স্ট্রিপড: আমি স্ট্রাইপ ব্যাকগ্রাউন্ডের রঙটি কীভাবে পরিবর্তন করব?

Question

বুটস্ট্র্যাপ ক্লাসের সাথে table-striped, আমার টেবিলের প্রতিটি অন্যান্য সারিতে ব্যাকগ্রাউন্ডের রঙ সমান #F9F9F9। আমি এই রঙটি কীভাবে পরিবর্তন করতে পারি?

Answer 1

.table-striped > tbody > tr:nth-child(2n+1) > td, .table-striped > tbody > tr:nth-child(2n+1) > th {
   background-color: red;
}

এই লাইনটি বুটস্ট্র্যাপ.এসএসে পরিবর্তন করুন অথবা আপনি (2n + 1) এর পরিবর্তে (বিজোড়) বা (এমনকি) ব্যবহার করতে পারেন

Comments

এটি করবেন না। পরের বার আপনি বুটস্ট্র্যাপ আপগ্রেড করবেন আপনি নিজের কাস্টম ওভাররাইড হারাবেন। আলাদা আলাদা ফাইলে কাস্টম সিএসএস রাখা আরও ভাল যা আপনি বুটস্ট্র্যাপ সিএসএসের পরে সরাসরি মাথায় রেখেছেন।

— বেন থারলি

পুরো সারিটি এখানে ঘোরাফেরা করার জন্য আপনি কীভাবে পটভূমির রঙ পরিবর্তন করবেন?

— ব্যারি মাইকেল ডয়েল

এই পৃষ্ঠাটি কীভাবে এটি ঘোরাফেরা করার

— Yvon Huynh

এটি আমার প্রয়োজনীয় উত্তর ছিল, তবে আমি এটি আলাদা সিএসএস ফাইলে যুক্ত করেছি, আসল বুটস্ট্র্যাপ সিএসএস নয়। এটি ক্যাসকেড করছে তাই যদি আমি এটি বুটস্ট্র্যাপের পরে যুক্ত করি এবং এটি পুরোপুরি কাজ করে এবং এটিকে মূল বুটস্ট্র্যাপের বাইরে রাখে। তদ্ব্যতীত আমাকে নিজের পরিবর্তিত বুটস্ট্র্যাপ বহন করতে হবে না পরিবর্তে আমি কেবল প্রতিটি প্রকল্পে এটির প্রয়োজন হ'ল আমার সিএসএস যুক্ত করব।

— রাদেবাস

সরাসরি কোনও তৃতীয় পক্ষের লাইব্রেরি পরিবর্তন করবেন না। কখনই নয়! আপনার নিজের সিএসএস ফাইলে কেবল স্টাইলটি ওভাররাইড করুন।

— মেহরদাদ

Answer 2

বুটস্ট্র্যাপ লোড করার পরে নিম্নলিখিত সিএসএস স্টাইল যুক্ত করুন:

.table-striped>tbody>tr:nth-child(odd)>td, 
.table-striped>tbody>tr:nth-child(odd)>th {
   background-color: red; // Choose your own color here
 }

Comments

ডিফল্ট বুটস্ট্র্যাপ টেবিলের রঙ ওভাররাইটিংয়ে ভাল কাজ করে। ধন্যবাদ.

— ইউকাস

এটি এমনকি সারিগুলিতে "টেবিল-হোভার" শ্রেণিটি অক্ষম করে ... এখানে কোনও সমাধান আছে?

— প্রাক্তনস্নান

Answer 3

আপনি যদি বুটস্ট্র্যাপ 3 ব্যবহার করেন তবে আপনি ফ্লোরিনের পদ্ধতিটি ব্যবহার করতে পারেন বা একটি কাস্টম সিএসএস ফাইল ব্যবহার করতে পারেন।

আপনি যদি প্রক্রিয়াজাত CSS ফাইলের পরিবর্তে বুটস্ট্র্যাপ কম উত্স ব্যবহার করেন তবে আপনি সরাসরি এটিকে পরিবর্তন করতে পারেন change bootstrap/less/variables.less ।

এর মতো কিছু সন্ধান করুন:

//** Background color used for `.table-striped`.
@table-bg-accent:               #f9f9f9;

Answer 4

আপনার কাছে দুটি বিকল্প রয়েছে, হয় আপনি কাস্টম স্টাইলশিট দিয়ে শৈলীগুলিকে ওভাররাইড করুন অথবা আপনি প্রধান বুটস্ট্র্যাপ সিএসএস ফাইল সম্পাদনা করুন। আমি আগের পছন্দ।

আপনার কাস্টম শৈলীগুলি বুটস্ট্র্যাপের পরে সংযুক্ত করা উচিত।

<link rel="stylesheet" src="bootstrap.css">
<link rel="stylesheet" src="custom.css">

ভিতরে custom.css

.table-striped>tr:nth-child(odd){
   background-color:red;
}

Comments

আমার পক্ষে কাজ করেনি। কায়ারিকোসের উত্তর সত্যই ভাল কাজ করে।

— ওয়ারাগরওয়াল

এই উদাহরণটি টবি ট্যাগটি হারিয়েছে

— কেনেকসওয়েল

>> এর অর্থ তাত্ক্ষণিক শিশু, সুতরাং যদি টেবিল এবং টিআর এর মধ্যে কোনও টডি ট্যাগ থাকে তবে এটি কার্যকর হবে না। তবে কেবল> সরিয়ে দিন, এবং তা তাত্ক্ষণিক শিশু বা না তা নির্ধারিত টেবিলের অধীনে সমস্ত ট্রির জন্য বৈধ হবে।

— jumps4fun

Answer 5

বুটস্ট্র্যাপ সিএসএস ফাইল সরাসরি সম্পাদনা করে আপনার বুটস্ট্র্যাপ সিএসএসকে কাস্টমাইজ করবেন না ns স্থিরভাবে, আমি পেস্ট বুটস্ট্র্যাপ সিএসএস অনুলিপি করার জন্য এবং সেগুলি একটি ভিন্ন সিএসএস ফোল্ডারে সংরক্ষণ করার পরামর্শ দিচ্ছি এবং সেখানে আপনি নিজের প্রয়োজন অনুসারে স্টাইলিংগুলি কাস্টমাইজ বা সম্পাদনা করতে পারবেন।

Answer 6

.table-striped>tbody>tr:nth-child(odd)>td,
.table-striped>tbody>tr:nth-child(odd)>th {
  background-color: #e08283;
  color: white;
}
.table-striped>tbody>tr:nth-child(even)>td,
.table-striped>tbody>tr:nth-child(even)>th {
  background-color: #ECEFF1;
  color: white;
}

এমনকি সারিগুলির রঙ পরিবর্তনের জন্য 'এমনকি' ব্যবহার করুন এবং বিজোড় সারিগুলির রঙ পরিবর্তনের জন্য 'বিজোড়' ব্যবহার করুন।

Comments

এটি বুটস্ট্র্যাপের টেবিল-হোভার শ্রেণিকে অক্ষম করে, উভয় ব্যবহারের উপায় আছে?

— প্রাক্তনস্নান

Answer 7

টেবিল-স্ট্রিপ মোছা এটি সারি রঙ পরিবর্তন করার আপনার প্রচেষ্টাকে ওভাররাইড করে।

তারপরে CSS এ এটি করুন

   tr:nth-child(odd) {
    background-color: lightskyblue;
    }

   tr:nth-child(even) {
    background-color: lightpink;
    }

    th {
       background-color: lightseagreen;
    }

Answer 8

আমি এই চেকারবোর্ড প্যাটার্নটিকে (জেব্রা স্ট্রিপের একটি উপসেট হিসাবে) দুটি দ্বি-কলামের সারণি প্রদর্শন করার জন্য একটি সুন্দর উপায় হিসাবে পেয়েছি। এটি কম সিএসএস ব্যবহার করে লেখা হয়েছে এবং সমস্ত বর্ণকে বেস রঙ থেকে সরিয়ে দেয়।

@base-color: #0000ff;
@row-color: lighten(@base-color, 40%);    
@other-row: darken(@row-color, 10%);

tbody {
    td:nth-child(odd) { width: 45%; }
    tr:nth-child(odd) > td:nth-child(odd) {
        background: darken(@row-color, 0%); }
    tr:nth-child(odd) > td:nth-child(even) {
        background: darken(@row-color, 7%); }
    tr:nth-child(even) > td:nth-child(odd) {
        background: darken(@other-row, 0%); }
    tr:nth-child(even) > td:nth-child(even) {
        background: darken(@other-row, 7%); }
}

দ্রষ্টব্য আমি বাদ দিয়েছি .table-striped, তবে কিছু মনে হচ্ছে না।

দেখতে:

Answer 9

বুটস্ট্র্যাপ 4 সঙ্গে, দায়ী CSS কনফিগারেশন bootstrap.cssজন্য .table-stripedহল:

.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

খুব সহজ সমাধানের জন্য, আমি এটি কেবল আমার custom.cssফাইলে অনুলিপি করেছি এবং এর মানগুলি পরিবর্তন করেছি background-color, যাতে এখন আমার ফ্যানসিয়ার হালকা নীল শেড রয়েছে:

.table-striped tbody tr:nth-of-type(odd) {
  background-color:  rgba(72, 113, 248, 0.068);
}

Answer 10

যদি আপনি প্রকৃতপক্ষে রঙগুলি বিপরীত করতে চান তবে আপনার এমন একটি বিধি যুক্ত করা উচিত যা "বিজোড়" সারিগুলিকে সাদা করার পাশাপাশি আপনার পছন্দ মতো রঙ "এমনকি" সারি তৈরি করে।

Answer 11

ডোরাকাটা ক্রম পরিবর্তন করার সহজ উপায়:

আপনার টেবিল টিআর ট্যাগের আগে খালি যুক্ত করুন tr।