টুইটার বুটস্ট্র্যাপে স্টাইলিং কীভাবে ওভাররাইট করা যায়

128

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

css twitter-bootstrap

— জন
সূত্র

আরও দেখুন: স্ট্যাকওভারফ্লো.com

— জিম

41

<div class="sidebar right"></div>সিএসএস সহ আপনার নিজস্ব ক্লাস যুক্ত করুন, যেমন:

.sidebar.right { 
    float:right
}

— motoxer4533
সূত্র

1

না ভাল অভ্যাস: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

— Damjan Pavlica

2

@ দামজান পাভলিকা সৎভাবে? আপনি এখনও আই 6 সম্পর্কে যত্নশীল? আমি উল্লেখ করি না যে বুটস্ট্র্যাপ চেইন ব্যবহার করে।

— Bżażej মিশালিক

233

এই সমস্ত টিপস কাজ করবে, তবে বুটস্ট্র্যাপ স্টাইলগুলির পরে আপনার স্টাইলশীট অন্তর্ভুক্ত করা সহজ উপায় হতে পারে ।

আপনি যদি site-specific.cssবুটস্ট্র্যাপের ( ) এর পরে আপনার সিএসএস ( ) অন্তর্ভুক্ত করেন তবে আপনি bootstrap.cssনিয়মগুলি পুনরায় সংজ্ঞায়িত করে ওভাররাইড করতে পারেন।

উদাহরণস্বরূপ, যদি আপনি নিজের সিএসএসকে এভাবে অন্তর্ভুক্ত করেন <head>

<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/site-specific.css" />

আপনি (আপনার site-specific.cssফাইলে) লিখে সাইডবারটি ডানদিকে সরাতে পারেন :

.sidebar {
    float: right;
}

এইচএএমএল এবং এসএএসএসের অভাবটি ক্ষমা করুন, আমি তাদের টিউটোরিয়াল লেখার জন্য তাদের যথেষ্ট ভাল জানি না।

— citelao
সূত্র

7

@ ক্লাডিউ কনস্ট্যান্টিন আমি না করার কারণ দেখছি না। থাম্বের নিয়ম হল দ্বিতীয় শৈলী সর্বদা প্রথমে প্রথমে ট্রাম্প করবে যদি দুটি একই স্তরের নির্দিষ্টকরণের হয়। আপনার স্টাইলটি যতক্ষণ আসার পরে তা ওভাররাইড হবে।

— সিটিওলাও

3

@ ক্রেকার এর সুনির্দিষ্টতার সাথে সম্ভবত অনেক কিছু আছে। আপনি এটি সম্পর্কে এখানে পড়তে পারেন (পুরানো নিবন্ধ), তবে মূলত এর .sidebar.rightচেয়ে বেশি নির্দিষ্ট .sidebar। এটাই সম্ভবত সমস্যা। এটি ওভাররাইড করছে কী তা নির্ধারণ করতে ওয়েব পরিদর্শক ব্যবহার করুন।

— সিটিলাও

2

@ ক্রেকার হ্যাঁ, এটাই ধারণা। সমস্যাটি !importantহ'ল আপনি ভবিষ্যতে কখনই এটিকে ওভাররাইড করতে পারবেন না।

— সিটিলাও

5

আমার Site.cssবান্ডিল হয়ে আছে এবং তালিকাভুক্ত Bundle.configএবং পরে শারীরিকভাবে রেন্ডার করা হয়েছে bootstrap.cssতবে শৈলীগুলি এখনও ওভাররাইড করা হয় না। আমাকে site.cssআধুনিকীকরণের বান্ডিলের বাইরে রেফারেন্সটি নিতে হয়েছিল এবং ম্যানুয়ালি রেখেছিলাম যে bootstrap.css(এবং ক্যাশ সাফ করার জন্য একবার Ctrl + F5 টিপুন)

— এটকনওয়ে

1

এটি কাজ করতে পারে তবে এটি উত্পাদনের জন্য সেরা অনুশীলন হবে না। যদি না করার বড় কারণ না থাকে তবে প্রতি সাইটটিতে ১ টি স্টাইলশিট লোড করুন। #sitespeed

— বেন

58

এর উত্তর হ'ল সিএসএস স্পেসিফিকেশন। আপনার সিএসএসে আপনাকে আরও "নির্দিষ্ট" হওয়া দরকার যাতে এটি বুটস্ট্র্যাপ CSS বৈশিষ্ট্যগুলিকে ওভাররাইড করতে পারে।

উদাহরণস্বরূপ, বুটস্ট্র্যাপ মেনুর জন্য আপনার এখানে একটি নমুনা কোড রয়েছে:

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div id="home-menu-container" class="collapse navbar-collapse">
        <ul id="home-menu" class="nav navbar-nav">
            <li><a class="navbar-brand" href="#"><img src="images/xd_logo.png" /></a></li>
            <li><a href="#intro">Home</a></li>
            <li><a href="#about">About Us</a></li>
            <li><a href="#services">What We Do</a></li>
            <li><a href="#process">Our Process</a><br /></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contact">Contact Us</a></li>
        </ul>
    </div><!-- /.navbar-collapse -->
</nav>

এখানে, আপনাকে নির্দিষ্টতার শ্রেণিবিন্যাস মনে রাখা দরকার। এটা এইভাবেই চলে:

100 পয়েন্ট উল্লিখিত একটি আইডি সহ একটি উপাদান দিন
10 পয়েন্ট উল্লিখিত শ্রেণীর সাথে একটি উপাদান দিন
একটি সাধারণ উপাদানকে একটি একক পয়েন্ট দিন

সুতরাং, উপরেরগুলির জন্য যদি আপনার সিএসএসের কিছু এরকম থাকে:

.navbar ul li a { color: red; } /* 10(.navbar) + 1(ul) + 1(li) + 1(a) = 13 points */
.navbar a { color: green; } /* 10(.navbar) + 1(a) = 11 points */

সুতরাং, আপনি সংজ্ঞায়িত করেছেন এমনকি যদি .navbar aপরে .navbar ul li aএটি এখনও একটি সবুজ পরিবর্তে একটি লাল রঙের সাথে ওভাররাইড যাচ্ছে, যেহেতু নির্দিষ্টতা আরো (13 পয়েন্ট) হয়।

সুতরাং, মূলত আপনাকে যা করতে হবে তা হ'ল আপনার ব্রাউজারে উপাদানটি পরিদর্শন করার মাধ্যমে আপনি যে উপাদানটির জন্য সিএসএস পরিবর্তন করতে চান তার জন্য পয়েন্টগুলি গণনা করা। এখানে, বুটস্ট্র্যাপ হিসাবে উপাদানটির জন্য সিএসএস নির্দিষ্ট করেছে

.navbar-inverse .navbar-nav>li>a { /* Total = 22 points */
    color: #999;
}

সুতরাং, আপনার সিএসএসটি বুটস্ট্র্যাপ সিএসএসের পরে লোড করা হচ্ছে যা নিম্নলিখিত লাইনটি রয়েছে:

.navbar-nav li a {
    color: red;
}

এটি এখনও # 999 হিসাবে রেন্ডার হতে চলেছে। এটি সমাধানের জন্য, বুটস্ট্র্যাপের 22 টি পয়েন্ট রয়েছে (এটি নিজেই গণনা করুন)। সুতরাং আমাদের কেবল তার চেয়ে বেশি কিছু দরকার। সুতরাং, আমি উপাদানগুলি যেমন হোম-মেনু-ধারক এবং হোম-মেনুতে কাস্টম আইডি যুক্ত করেছি। এখন নিম্নলিখিত সিএসএস কাজ করবে:

#home-menu-container #home-menu li a { color: red; } /* 100 + 100 + 1 + 1 = 202 points :) */

সম্পন্ন.

আপনি এই এমডিএন লিঙ্কটি উল্লেখ করতে পারেন ।

— kaizer1v
সূত্র

1

তারা বাঁধা থাকলে কী হবে?

— বিভ্রান্ত

2

এটি বিবেচনা করে না, উদাহরণস্বরূপ '.bc.xyz' এর অর্থ, 'abc' এবং 'xyz' শ্রেণীর সাথে একটি উপাদান রয়েছে - এটি এখনও এটি একটি শ্রেণীর সাথে একটি একক উপাদান হিসাবে গ্রহণ করবে। সুতরাং, 10 পয়েন্ট। একই আইডি জন্য যায়।

— কাইজার 1v

1

ভালভাবে লিখিত! ধন্যবাদ!

— গবস্ম্যাক

1

এটা আমার জন্য কৌশল ছিল। blockquoteবুটস্ট্র্যাপ সিএসএসে শৈলীটি ওভার রাইড করতে আমার সমস্যা হচ্ছে । আশ্চর্যের বিষয় হল, এটি সাধারণ ব্লককোটিসের জন্য ভুল ছিল তবে সঠিক এবং <ul> একটি ব্লককোটের মধ্যে looked কীটি আমার সিএসএসকে আপডেট করার ছিল blockquote pযা যথেষ্ট অগ্রাধিকার দিয়েছে। <ul> পৃষ্ঠার অন্যান্য বিভাগের জন্য এটি করছিল।

— অ্যাডাম উয়েরেল

20

আপনি কোনও সিএসএস শ্রেণিকে "আরও নির্দিষ্ট" করে ওভাররাইট করতে পারেন।

আপনি এইচটিএমএল ট্রিতে যান এবং মূল উপাদানগুলি নির্দিষ্ট করে:

div.sidebar { ... } তুলনায় আরও নির্দিষ্ট .sidebar { ... }

আপনার যদি প্রয়োজন হয় তবে আপনি BODY পর্যন্ত সমস্ত পথে যেতে পারেন:

body .sidebar { ... } কার্যত যে কোনও কিছুকে ওভাররাইড করবে।

এই সহজ গাইডটি দেখুন: http://css-tricks.com/855-specifics-on-css-specificity/

— ডায়োডিয়াস - জেমস ম্যাকফারলেন
সূত্র

এটি আসলে সেরা উত্তর

— কোডি বাগস্টিন

9

আপনি ঠিক নিশ্চিত করতে পারেন যে আপনার সিএসএস ফাইল বুস্ট্র্যাপ সিএসএসের পরে যেমন পার্স করেছে , তেমন :

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

— Gothburz
সূত্র

6

আপনি যদি বুটস্ট্র্যাপের কোনও সিএসএস ওভাররাইট করতে চান তবে গুরুত্বপূর্ণ!

আসুন বলি যে এখানে বুটস্ট্র্যাপের পৃষ্ঠা শিরোনাম শ্রেণি রয়েছে যার উপরে 40px মার্জিন রয়েছে, আমার ক্লায়েন্ট এটি পছন্দ করেন না এবং তিনি চান এটি শীর্ষে 15 এবং নীচে কেবল 10

.page-header {
    border-bottom: 1px solid #EEEEEE;
    margin: 40px 0 20px;
    padding-bottom: 9px;
}

সুতরাং আমি এইভাবে একই নামের সাথে আমার সাইট.css ফাইলটিতে ক্লাসে যুক্ত করেছি

.page-header
{
    padding-bottom: 9px;
    margin: 15px 0 10px 0px !important;
}

আমার মার্জিনের সাথে গুরুত্বপূর্ণটি নোট করুন, যা বুটস্টার্ড পৃষ্ঠা-শিরোনাম শ্রেণীর মার্জিনের ওভাররাইট করবে।

— আলী আদ্রবী
সূত্র

অসাধারণ! এটাই আমি চাই. ধন্যবাদ

— গিসওয়ে

2

নোট করুন যে ব্যবহার করা গুরুত্বপূর্ণ কিছুটা অ্যান্টি-প্যাটার্নের। এখানে আরও পড়ুন: james.padolsey.com/css/dont-use- গুরুত্বপূর্ণ

— mayatron

3

এই দেরী পেরিয়ে এসেছিল, তবে আমি মনে করি এটি অন্য উত্তর ব্যবহার করতে পারে।

আপনি যদি সাস ব্যবহার করছেন তবে বুটস্ট্র্যাপ আমদানির আগে আপনি ভেরিয়েবলগুলি বাস্তবে পরিবর্তন করতে পারেন। http://twitter.github.com/bootstrap/customize.html#variables

এর মধ্যে যে কোনও একটি পরিবর্তন করুন, যেমন:

$bodyBackground: red;
@import "bootstrap";

বিকল্প হিসাবে যদি আপনি যা পরিবর্তন করতে চান তার জন্য কোনও ভেরিয়েবল উপলভ্য না হয় তবে আপনি শৈলীগুলিকে ওভাররাইড করতে পারেন বা আপনার নিজের যুক্ত করতে পারেন।

sass:

@import "bootstrap";

/* override anything manually, like rounded buttons */
.btn {
  border-radius: 0;
}

এটিও দেখুন: কারাগারে যথাযথ এসসিএসএস সম্পদ কাঠামো

— AJcodez
সূত্র

2

আমি জানি এটি একটি পুরানো প্রশ্ন তবে তবুও, আমি একই ধরণের সমস্যার মুখোমুখি হয়েছি এবং আমি বুঝতে পেরেছিলাম যে আমার bootstrapOverload.cssফাইলে আমার "কাজ করছে না" সিএস কোড কোডটি পরে লেখা হয়েছিল media queries। আমি যখন মিডিয়া প্রশ্নের উপরে এটি সরিয়ে নিয়েছি তখন এটি কাজ করা শুরু করে।

সেক্ষেত্রে অন্য কেউ একই সমস্যার মুখোমুখি হচ্ছে

— md1hunox
সূত্র