আমি কীভাবে বুটস্ট্র্যাপ সিএসএস শৈলীগুলিকে ওভাররাইড করতে পারি?

234

bootstrap.cssআমার ওয়েবসাইটটি ফিট করার জন্য আমাকে পরিবর্তন করতে হবে। আমি মনে করি সরাসরি custom.cssসংশোধন না করে একটি পৃথক ফাইল তৈরি করা ভাল , এটির bootstrap.cssকারণটি bootstrap.cssএকটি আপডেট হওয়া উচিত , আমি আমার সমস্ত পরিবর্তনগুলি পুনরায় অন্তর্ভুক্ত করার চেষ্টা সহ্য করব। আমি এই শৈলীর জন্য কিছু লোড সময় ত্যাগ করব, তবে আমি যে কয়েকটি স্টাইলকে ওভার্রাইড করছি তার জন্য এটি नगणিক।

bootstrap.cssআমি কীভাবে ওভাররাইড করব যাতে আমি নোঙ্গর / শ্রেণীর স্টাইলটি সরিয়ে ফেলি ? উদাহরণস্বরূপ, যদি আমি এর জন্য সমস্ত স্টাইলিং বিধিগুলি সরাতে চাই legend:

legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

আমি কেবল এগুলি সব মুছতে পারি bootstrap.css, তবে সিএসএস ওভাররাইডিং সম্পর্কে সেরা অনুশীলনগুলি সম্পর্কে আমার বোঝা যদি সঠিক হয় তবে এর পরিবর্তে আমার কী করা উচিত?

পরিষ্কার হওয়ার জন্য, আমি কিংবদন্তীর সমস্ত স্টাইল মুছে ফেলতে এবং পিতামাতার সিএসএস মান ব্যবহার করতে চাই। তাই প্রণবের উত্তরটির সংমিশ্রণ, আমি কি নিম্নলিখিতটি করবো?

legend {
  display: inherit !important;
  width: inherit !important;
  padding: inherit !important;
  margin-bottom: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  border: inherit !important;
  border-bottom: inherit !important;
}

(আমি আশা করছিলাম যে নীচের মতো কিছু করার উপায় আছে :)

legend {
  clear: all;
}

html css twitter-bootstrap

— অ্যালেক্স
সূত্র

491

ব্যবহার !importantকরা ভাল বিকল্প নয়, কারণ আপনি সম্ভবত ভবিষ্যতে আপনার নিজের স্টাইলকে ওভাররাইড করতে চাইবেন। এটি আমাদের সিএসএসের অগ্রাধিকারগুলির সাথে ছেড়ে দেয়।

মূলত, প্রতিটি নির্বাচকের নিজস্ব সংখ্যাযুক্ত 'ওজন' থাকে:

আইডি জন্য 100 পয়েন্ট
ক্লাস এবং সিউডো-ক্লাসের জন্য 10 পয়েন্ট
ট্যাগ নির্বাচক এবং ছদ্ম-উপাদানগুলির জন্য 1 পয়েন্ট
দ্রষ্টব্য: যদি উপাদানটিতে ইনলাইন স্টাইলিং থাকে যা স্বয়ংক্রিয়ভাবে জয়ী হয় (1000 পয়েন্ট)

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

আপনার বিকল্পটি হ'ল বুটস্ট্র্যাপ উত্সগুলি পরিদর্শন করা, নির্দিষ্ট কিছু স্টাইল কীভাবে সংজ্ঞায়িত করা হয়েছে তা নির্ধারণ করুন এবং সেই নির্বাচকের অনুলিপি করুন যাতে আপনার উপাদানটির সমান অগ্রাধিকার থাকে। তবে আমরা প্রক্রিয়াটিতে সমস্ত বুটস্ট্র্যাপের মিষ্টি .িলা করি।

এটিকে কাটিয়ে ওঠার সহজতম উপায় হ'ল আপনার পৃষ্ঠার মূল উপাদানগুলির মধ্যে একটিতে অতিরিক্ত স্বেচ্ছাসেবক আইডি নির্ধারণ করা: <body id="bootstrap-overrides">

এইভাবে, আপনি কেবলমাত্র নিজের আইডি দিয়ে যে কোনও সিএসএস নির্বাচককে উপসর্গ করতে পারেন, তাত্ক্ষণিকভাবে উপাদানটিতে 100 পয়েন্ট ওজন যুক্ত করতে এবং বুটস্ট্র্যাপ সংজ্ঞা ওভাররাইড করে:

/* Example selector defined in Bootstrap */
.jumbotron h1 { /* 10+1=11 priority scores */
  line-height: 1;
  color: inherit;
}

/* Your initial take at styling */
h1 { /* 1 priority score, not enough to override Bootstrap jumbotron definition */
  line-height: 1;
  color: inherit;
}

/* New way of prioritization */
#bootstrap-overrides h1 { /* 100+1=101 priority score, yay! */
  line-height: 1;
  color: inherit;
}

— smugglerFlynn
সূত্র

যেহেতু আইডি কেবল একবার ব্যবহার করা যায়, তাই কেন #bootstrap-overridesএকটি ক্লাস তৈরি করা হয় না ?

— ছারভে

2

@ ছারভে: কারণ আপনি আরও ভাল গণনা করা শেষ হবে। যদি এই উদাহরণে এটি একটি শ্রেণি হয় তবে এটি প্রিও 11 হবে এবং যদি CSS সংজ্ঞাটি বুটস্ট্র্যাপ সিএসএসের পরে হয় তবে আমরা যেতে ভাল। তবে এটি বেশ ঘনিষ্ঠ হবে এবং এটি একটি আইডি হিসাবে সেট করবে যা প্রিওর বড় সময়কে উত্সাহ দেয়, আমাদের প্রিও গণনা করা এবং আমাদের সর্বদা এটি সঠিক কিনা তা পরীক্ষা করার বিষয়ে আমাদের চিন্তা করতে হবে না। কোনও আইডি দিয়ে সহজ আপনি যদি ডিফল্টকে অবশ্যই নির্ধারণ করতে চান।

— হোগান

শুধু আমার দিন তৈরি। আমি এটি জানি এবং এখনও আমার শৈলীর ব্যাখ্যা কেন হয় না তা বোঝার চেষ্টা করে আটকে যাই।

— হোগান

3

আপনি যে পয়েন্টগুলি উল্লেখ করেছেন (আইডির জন্য 100, ক্লাস / সিউডো ক্লাসের জন্য 10, ট্যাগ নির্বাচনকারী / সিউডো উপাদানগুলির জন্য 1) আক্ষরিক, নাকি আপনি এই মানগুলি কেবল উদাহরণ হিসাবে তৈরি করেছেন?

— কাইল ভ্যাসেলা 19

2

আপনার ব্যাখ্যাটি ভাল, এটি সিএসএসে নতুন কাউকে ব্যাখ্যা করার উপায় হিসাবে এটি বোধগম্য, তবে বিভ্রান্তিকর। আপনি specificityযা উল্লেখ করেছেন তার সঠিক নাম সিএসএস যা প্রতিটি সিএসএস নির্বাচকের "ওজন" নির্ধারণ করে। এটি সম্পর্কে আরও কিছু বিশদ এখানে: css-tricks.com/specifics-on-css-specificity/…

— অ্যাড্রিয়ানো

85

আপনার এইচটিএমএলের প্রধান অংশে আপনার কাস্টম.এসএসকে বুটস্ট্র্যাপ সিএসএসের নীচে রাখুন।

<link href="bootstrap.min.css" rel="stylesheet">
<link href="custom.css" rel="stylesheet">

তারপরে কাস্টম.সিএসএসে আপনাকে যে উপাদানটি ওভাররাইড করতে চান তার জন্য সঠিক একই নির্বাচকটি ব্যবহার করতে হবে। legendএটির ক্ষেত্রে কেবল legendআপনার কাস্টম সিএসএসে থাকে কারণ বুটস্ট্র্যাপ কোনও নির্বাচককে আরও নির্দিষ্ট করে না।

legend {
  display: inline;
  width: auto;
  padding: 0;
  margin: 0;
  font-size: medium;
  line-height: normal;
  color: #000000;
  border: 0;
  border-bottom: none;
}

তবে h1উদাহরণস্বরূপ আপনাকে আরও নির্দিষ্ট বাছাইকারীদের .jumbotron h1কারণ হিসাবে যত্ন নিতে হবে

h1 {
  line-height: 2;
  color: #f00;
}

ওভাররাইড করা হবে না

.jumbotron h1,
.jumbotron .h1 {
  line-height: 1;
  color: inherit;
}

এখানে সিএসএস নির্বাচকদের নির্দিষ্টতার একটি সহায়ক ব্যাখ্যা রয়েছে যা আপনাকে কোনও উপাদানের ক্ষেত্রে কোন স্টাইলের বিধি প্রযোজ্য তা ঠিক বুঝতে হবে। http://css-tricks.com/specifics-on-css-specificity/

অন্য সমস্ত কিছুই কেবল অনুলিপি / পেস্ট এবং স্টাইল সম্পাদনা করার বিষয়।

— মার্কাস কোটলান্ডার
সূত্র

28

আপনি বেস স্টাইলশীটের অংশগুলি ওভাররাইড করে যাচ্ছেন তাই এটি লোডের সময়কে বেশি প্রভাবিত করা উচিত নয়।

এখানে আমি ব্যক্তিগতভাবে অনুসরণ করি এমন কয়েকটি সেরা অনুশীলন রয়েছে:

বেস সিএসএস ফাইলের পরে সর্বদা কাস্টম সিএসএস লোড করুন (প্রতিক্রিয়াশীল নয়)।
!importantসম্ভব হলে ব্যবহার এড়িয়ে চলুন । এটি বেস সিএসএস ফাইলগুলি থেকে কিছু গুরুত্বপূর্ণ স্টাইলকে ওভাররাইড করতে পারে।
আপনি যদি মিডিয়া প্রশ্নগুলি হারাতে না চান তবে সর্বদা কাস্টমসিএসএসের পরে বুটস্ট্র্যাপ-প্রতিক্রিয়াশীল CSS উপস্থাপন করুন। - অবশ্যই অনুসরণ করবে
প্রয়োজনীয় বৈশিষ্ট্য (সমস্ত নয়) সংশোধন করা পছন্দ করুন।

— রাহুল পাতিল
সূত্র

10

যেহেতু bootstrap-responsive.cssআর অস্তিত্ব নেই, এখনও কি এটি সত্য হয়ে যায়, বা এটি আর প্রাসঙ্গিক নয়?

— শন উইলসন

20

আপনার কাস্টম.এসএস ফাইলটিকে বুটস্ট্র্যাপ সিএসএসের নীচে শেষ এন্ট্রি হিসাবে লিঙ্ক করুন। কাস্টম.সিএসএস শৈলীর সংজ্ঞাগুলি বুটস্ট্র্যাপ সিএসএসকে ওভাররাইড করবে

এইচটিএমএল

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

কাস্টম.কম-এ লেজেন্ডের সমস্ত স্টাইল সংজ্ঞা অনুলিপি করুন এবং এতে পরিবর্তন করুন (মার্জিন-নীচে: 5px; - এটি মার্জিন-নীচে: 20px; ওভাররাইড করবে)

— Paramasivan
সূত্র

হ্যাঁ, আমি এটি ইতিমধ্যে করেছি। দুঃখিত আমার প্রশ্ন পরিষ্কার ছিল না। আমার প্রশ্নটি বুটস্ট্র্যাপ.মিন.সিএসএস থেকে শৈলীগুলিকে ওভাররাইড করতে কাস্টম.সিএসএস-এ কী করতে হবে তা জিজ্ঞাসা করছিল।

— অ্যালেক্স

আমি যদি বুটস্ট্র্যাপ-থিম.মিন.এসএসএস ব্যবহার করছি?

— কাসাউসর

এমনকি কমপক্ষে CSS সহ আমার জন্য কাজ করেছেন

— মিমি

5

legendবুটস্ট্র্যাপে সংজ্ঞায়িত শৈলীগুলি পুনরায় সেট করতে আপনার সিএসএস ফাইলে নিম্নলিখিতগুলি করতে পারেন:

legend {
  all: unset;
}

রেফ: https://css-tricks.com/almanac/properties/a/all/

সিএসএসের সমস্ত সম্পত্তি দিকনির্দেশনা এবং ইউনিকোড-বিড়ির বৈশিষ্ট্যগুলি ছাড়াই নির্বাচিত উপাদানটির সমস্ত বৈশিষ্ট্য পুনরায় সেট করে যা পাঠ্য নির্দেশকে নিয়ন্ত্রণ করে।

সম্ভাব্য মান হল: initial, inheritও unset।

পার্শ্ব দ্রষ্টব্য: clearসম্পত্তির সাথে সম্পর্কিত ব্যবহার করা হয় float( https://css-tricks.com/almanac/properties/c/clear/ )

— বিবেক আটলাই
সূত্র

3

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

বিল্ড গাইডের জন্য দয়া করে গিটহাবের বুটস্ট্র্যাপ দেখুন ।

— ভিক্টর হ্যাগকভিস্ট
সূত্র

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

— ডেভিড কির্কল্যান্ড

@ আলেক্স বোম্প উত্স এবং পুনর্নির্মাণ?

— ভিক্টর হ্যাগকভিভিস্ট

3

Https://bootstrap.themes.guide/how-to-customize-bootstrap.html দেখুন

সাধারণ সিএসএস ওভাররাইডগুলির জন্য, আপনি বুটস্ট্র্যাপ সিএসএসের নীচে একটি কাস্টমসিএসএস যুক্ত করতে পারেন
```
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
```
আরও বিস্তৃত পরিবর্তনের জন্য, SASS হল প্রস্তাবিত পদ্ধতি।
- আপনার নিজস্ব কাস্টম.এসএসএস তৈরি করুন
- কাস্টম.এসএসএস-র পরিবর্তনের পরে বুটস্ট্র্যাপ আমদানি করুন
- উদাহরণস্বরূপ, আসুন শরীরের পটভূমির রঙ হালকা-ধূসর # আইআইইতে পরিবর্তন করুন এবং বুটস্ট্র্যাপের $ বেগুনি ভেরিয়েবলে নীল প্রাথমিক প্রাসঙ্গিক রঙ পরিবর্তন করুন ...
```
/* custom.scss */    

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";

/* -------begin customization-------- */   

/* simply assign the value */ 
$body-bg: #eeeeee;

/* or, use an existing variable */
$theme-colors: (
  primary: $purple
);
/* -------end customization-------- */  

/* finally, import Bootstrap to set the changes! */
@import "bootstrap";
```

— konyak
সূত্র

2

কিছুটা দেরি হলেও আমি যা করেছি তা হ'ল আমি রুটে একটি ক্লাস যুক্ত করেছি divতারপরে আমার কাস্টম স্টাইলশীটের প্রতিটি বুটস্ট্র্যাপ উপাদানগুলি প্রসারিত করে:

.overrides .list-group-item {
    border-radius: 0px;
}
.overrides .some-elements-from-bootstrap { 
    /* styles here */
}

<div class="container-fluid overrides">
    <div class="row">
        <div class="col-sm-4" style="background-color: red">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">Hey</a></li>
                <li class="list-group-item"><a href="#">I was doing</a></li>
                <li class="list-group-item"><a href="#">Just fine</a></li>
                <li class="list-group-item"><a href="#">Until I met you</a></li>
                <li class="list-group-item"><a href="#">I drink too much</a></li>
                <li class="list-group-item"><a href="#">And that's an issue</a></li>
                <li class="list-group-item"><a href="#">But I'm okay</a></li>
            </ul>
        </div>
        <div class="col-sm-8" style="background-color: blue">
            right
        </div>
    </div>
</div>

— mr5
সূত্র

-1

কনসোলের লক্ষ্য বোতামটি পরীক্ষা করুন।
উপাদান ট্যাবে যান তারপরে কোডটি ধরে রাখুন এবং বুটস্ট্র্যাপ দ্বারা ব্যবহৃত ডিফল্ট আইডি বা ক্লাসটি সন্ধান করতে ভুলবেন না।
ফাংশনটি কল করে স্টাইল / পাঠ্যকে ওভাররাইট করতে jQuery / জাভাস্ক্রিপ্ট ব্যবহার করুন।

এই উদাহরণটি দেখুন:

  $(document).ready(function(){
      $(".dropdown-toggle").css({ 
        "color": "#212529",
        "background-color": "#ffc107",
        "border-color": "#ffc107"
       });
      $(".multiselect-selected-text").text('Select Tags');
  });

— আনন্দ চৌধুরী
সূত্র

-1

আমি খুঁজে পেয়েছি যে (বুটস্ট্র্যাপ 4) আপনার নিজের সিএসএস পিছনে রাখছে bootstrap.css এবং .js রাখাই সেরা সমাধান।

আপনি যে আইটেমটি পরিবর্তন করতে চান তা আবিষ্কার করুন (উপাদানটি পরীক্ষা করুন) এবং ঠিক একই ঘোষণাটি ব্যবহার করুন তবে তা ওভাররাইড হবে।

এটি বের করতে আমার কিছুটা সময় লেগেছে।

— হেনরি
সূত্র

-3

কিংবদন্তিকে আইডি দিন এবং CSS প্রয়োগ করুন। কিংবদন্তিতে আইডি হ্যালো যুক্ত করার মতো () সিএসএসটি হ'ল ফলল:

#legend  legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: 20px;
  font-size: 21px;
  line-height: inherit;
  color: #333333;
  border: 0;
  border-bottom: 1px solid #e5e5e5;
}

— আমার গৌর
সূত্র

-9

CSS এর পরিবর্তে jquery CSS ব্যবহার করুন। । । বুটস্ট্র্যাপ সিএসএসের চেয়ে jquery এর অগ্রাধিকার আছে ...

যেমন

$(document).ready(function(){
        $(".mnu").css({"color" : "#CCFF00" , "font-size": "16px" , "text-decoration" : "overline"});    


);

 instead of

.mnu
{

font-family:myfnt;
font-size:20px;
color:#006699;

}

— অজিত শঙ্খওয়াল
সূত্র

6

এইচটিএমএল কাঠামো সরবরাহ করতে ব্যবহার করা উচিত, স্টাইল সরবরাহের জন্য সিএসএস ব্যবহার করা উচিত এবং জাভাস্ক্রিপ্ট (jQuery সহ) কেবল ইন্টারেক্টিভিটি সরবরাহ করতে ব্যবহার করা উচিত। স্টাইলগুলিকে ওভাররাইড করতে jQuery ব্যবহার করা ভাল আর্কিটেকচারের নীতিগুলির বিরোধী, এবং এখন থেকে 6 মাসের মধ্যে কোডটিতে কাজ করার চেষ্টা করা যে কোনও ব্যক্তির পক্ষে অত্যন্ত বিভ্রান্তিকর হবে।

— স্টিফেন আর স্মিথ 21