วิธีเขียนทับสไตล์ใน Twitter Bootstrap

128

ฉันจะเขียนทับ stylings ใน Twitter Bootstrap ได้อย่างไร ตัวอย่างเช่นขณะนี้ฉันใช้คลาส. sidebar ที่มีกฎ CSS 'float: left;' ฉันจะเปลี่ยนสิ่งนี้เพื่อให้ไปทางขวาแทนได้อย่างไร ฉันใช้ HAML และ SASS แต่ค่อนข้างใหม่สำหรับการพัฒนาเว็บ

css twitter-bootstrap

— จอห์น
แหล่งที่มา

ดูเพิ่มเติมได้ที่: stackoverflow.com/questions/8596794/…

— Zim

41

เพิ่มคลาสของคุณเองเช่น: <div class="sidebar right"></div>ด้วย CSS เป็น

.sidebar.right { 
    float:right
}

— motoxer4533
แหล่งที่มา

1

ไม่ใช่วิธีปฏิบัติที่ดี: github.com/CSSLint/csslint/wiki/Disallow-adjoining-classes

— Damjan Pavlica

2

@DamjanPavlica สุจริตหรือไม่ คุณยังสนใจ IE 6 อยู่หรือเปล่า? ไม่ต้องพูดถึงว่าฉันคิดว่า bootstrap ใช้การผูกมัด

— Błażej Michalik

233

เคล็ดลับเหล่านี้ทั้งหมดจะได้ผล แต่วิธีที่ง่ายกว่าอาจรวมสไตล์ชีทของคุณหลังจากสไตล์Bootstrap

หากคุณรวม css ( site-specific.css) หลังจาก Bootstrap's ( bootstrap.css) คุณสามารถลบล้างกฎได้โดยกำหนดใหม่

ตัวอย่างเช่นถ้านี่เป็นวิธีที่คุณรวม CSS ไว้ใน <head>

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

คุณสามารถย้ายแถบด้านข้างไปทางขวาโดยเขียน (ในsite-specific.cssไฟล์ของคุณ):

.sidebar {
    float: right;
}

ยกโทษให้การขาด HAML และ SASS ฉันไม่รู้จักพวกเขาดีพอที่จะเขียนบทเรียนในพวกเขา

— citelao
แหล่งที่มา

7

@ ClaudiuConstantin ฉันเห็นเหตุผลว่าทำไมไม่ กฎของหัวแม่มือเป็นสไตล์ที่สองจะทรัมป์เป็นคนแรกเสมอหากสองคนมีระดับความจำเพาะที่เท่ากัน ตราบใดที่สไตล์ของคุณจะมาแทนที่มัน

— citelao

3

@ เครเกอร์ซึ่งอาจมีส่วนเกี่ยวข้องกับความเฉพาะเจาะจงเป็นอย่างมาก คุณสามารถอ่านข้อมูลเกี่ยวกับเรื่องนี้ที่นี่ (บทความเก่า) แต่โดยทั่วไปจะระบุเฉพาะเจาะจงมากกว่า.sidebar.right .sidebarนั่นอาจเป็นปัญหา ใช้เครื่องมือตรวจสอบเว็บเพื่อหาว่ามีอะไรสำคัญกว่านั้น

— citelao

2

@Kreker yup นั่นคือความคิด ปัญหา!importantคือคุณไม่สามารถแทนที่ได้อีกในอนาคต

— citelao

5

My Site.cssbundle up และแสดงไว้ในBundle.configและแสดงผลทางกายภาพหลังจาก bootstrap.cssแต่สไตล์ยังคงไม่ถูกแทนที่ ฉันต้องนำการsite.cssอ้างอิงออกจากชุดเครื่องมือ modernizer และวางเองหลังจากนั้นbootstrap.css(และกด Ctrl + F5 เมื่อทำการดีบั๊กเพื่อล้างแคช)

— atconway

1

สิ่งนี้อาจใช้งานได้ แต่จะไม่เป็นวิธีปฏิบัติที่ดีที่สุดสำหรับการผลิต โหลด 1 สไตล์ชีทต่อไซต์เว้นแต่มีเหตุผลใหญ่ที่จะไม่ทำ #sitespeed

— Ben Racicot

58

คำตอบสำหรับเรื่องนี้คือ CSS Specificity คุณต้องมี "เฉพาะ" เพิ่มเติมใน CSS ของคุณเพื่อให้สามารถแทนที่คุณสมบัติ bootstrap css

ตัวอย่างเช่นคุณมีรหัสตัวอย่างสำหรับเมนู bootstrap ที่นี่:

<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 คะแนน
ให้องค์ประกอบง่ายๆเพียงจุดเดียว

ดังนั้นสำหรับข้างต้นถ้า css ของคุณมีดังนี้:

.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 คะแนน)

ดังนั้นโดยทั่วไปสิ่งที่คุณต้องทำคือการคำนวณคะแนนสำหรับองค์ประกอบที่คุณต้องการเปลี่ยน CSS สำหรับผ่านการตรวจสอบองค์ประกอบในเบราว์เซอร์ของคุณ ที่นี่ bootstrap ได้ระบุ css ของมันสำหรับองค์ประกอบเป็น

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

ดังนั้นแม้ว่า css ของคุณกำลังโหลดจะถูกโหลดหลังจาก bootstrap.css ซึ่งมีบรรทัดต่อไปนี้:

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

มันจะยังคงแสดงผลเป็น # 999 เพื่อแก้ปัญหานี้ bootstrap มี 22 คะแนน (คำนวณด้วยตัวเอง) ดังนั้นสิ่งที่เราต้องการคืออะไรมากกว่านั้น ดังนั้นฉันได้เพิ่ม ID ที่กำหนดเองให้กับองค์ประกอบเช่น home-menu-container และ home-menu ตอนนี้ css ต่อไปนี้จะใช้งานได้:

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

เสร็จสิ้น

คุณสามารถอ้างถึงลิงค์ MDNนี้

— kaizer1v
แหล่งที่มา

1

เกิดอะไรขึ้นถ้าพวกเขาถูกผูกไว้?

— สับสน

2

มันไม่สำคัญตัวอย่างเช่น '.abc.xyz' หมายถึงมีองค์ประกอบที่มีคลาส 'abc' และ 'xyz' - มันจะยังคงใช้เป็นองค์ประกอบเดียวที่มีคลาส ดังนั้น 10 คะแนน กันไปสำหรับ ID

— kaizer1v

1

เขียนได้ดี! ขอบคุณ!

— GobSmack

1

นี่คือเคล็ดลับสำหรับฉัน ฉันมีปัญหาในการขี่blockquoteสไตล์ใน Bootstrap CSS น่าแปลกที่มันผิดปกติสำหรับบล็อกโควตทั่วไป แต่มองหาและ <ul> ภายในบล็อกโควต กุญแจสำคัญคือการอัปเดต CSS ของฉันให้มีblockquote pซึ่งให้ความสำคัญเพียงพอ <ul> กำลังทำสิ่งนี้กับส่วนอื่น ๆ ของหน้า

— Adam Wuerl

20

คุณสามารถเขียนทับคลาส CSS ได้โดยทำให้เป็น "ที่เฉพาะเจาะจงมากขึ้น"

คุณขึ้นไปบนต้นไม้ HTML และระบุองค์ประกอบหลัก:

div.sidebar { ... } มีความเฉพาะเจาะจงกว่า .sidebar { ... }

คุณสามารถไปจนถึง BODY ได้ทุกเมื่อหากต้องการ:

body .sidebar { ... } จะแทนที่สิ่งใด

ดูคู่มือที่มีประโยชน์นี้: http://css-tricks.com/855-specifics-on-css-specificity/

— Diodeus - James MacFarlane
แหล่งที่มา

นี่เป็นคำตอบที่ดีที่สุด

— CodyBugstein

9

คุณสามารถตรวจสอบให้แน่ใจว่าไฟล์ css แยกวิเคราะห์หลังจาก boostrap.css ดังนี้:

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

— Gothburz
แหล่งที่มา

6

หากคุณต้องการเขียนทับ css ใด ๆ ใน bootstrap ให้ใช้!

สมมติว่านี่คือคลาสส่วนหัวของหน้าใน bootstrap ซึ่งมีระยะขอบ 40px อยู่ด้านบนลูกค้าของฉันไม่ชอบและเขาต้องการให้มันอยู่ด้านบน 15 และ 10 ที่ด้านล่างเท่านั้น

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

ดังนั้นฉันจึงเพิ่มคลาสในไฟล์ site.css ของฉันด้วยชื่อเดียวกันนี้

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

หมายเหตุ! สำคัญกับ margin ของฉันซึ่งจะเขียนทับ margin ของ bootstarp page-header margin

— Ali Adravi
แหล่งที่มา

! น่ากลัว นี่คือสิ่งที่ฉันต้องการ ขอบคุณ

— Gisway

2

โปรดทราบว่าการใช้! important สำคัญกับรูปแบบการต่อต้าน อ่านเพิ่มเติมได้ที่นี่: james.padolsey.com/css/dont-use-important

— mayatron

3

มาสายนี้ แต่ฉันคิดว่ามันสามารถใช้คำตอบอื่น

หากคุณใช้ sass คุณสามารถเปลี่ยนตัวแปรได้ก่อนที่จะนำเข้า bootstrap 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;
}

ดูเพิ่มเติมที่: โครงสร้างสินทรัพย์ SCSS ที่เหมาะสมใน Rails

— AJcodez
แหล่งที่มา

2

ฉันรู้ว่านี้เป็นคำถามที่เก่า แต่ยังคงฉันมาข้ามปัญหาที่คล้ายกันและฉันตระหนักว่า "ไม่ทำงาน" โค้ด CSS ของฉันของฉันในไฟล์ถูกเขียนขึ้นหลังจากที่bootstrapOverload.css media queriesเมื่อฉันย้ายไปด้านบนแบบสอบถามสื่อมันเริ่มทำงาน

ในกรณีที่คนอื่นประสบปัญหาเดียวกัน

— md1hunox
แหล่งที่มา