बूटस्ट्रैप

Question

ओवरराइड करने के लिए application.css प्राप्त करना मैं अपने रेल ऐप नेविबार को कस्टमाइज़ करने की कोशिश कर रहा हूं और css को application.css में जोड़ा है। मुझे पता है कि application.css सही ढंग से संदर्भित किया जा रहा है, क्योंकि ऐप इससे अन्य स्टाइल उठा रहा है। लेकिन नेवबार सीएसएस ओवरराइड करने के लिए क्या पहले से ही bootstrap.css में है कोशिश कर रहा है, और अनुप्रयोग पहचान नहीं कर रहा ...

application.html.erb (लेआउट)

<%= stylesheet_link_tag "application", :media => "all" %> 
    <%= javascript_include_tag "application" %> 
    <%= analytics_init if Rails.env.production? %> 
    <link href="../assets/bootstrap-responsive.css" rel="stylesheet"> 

application.css

body { 
    padding-top: 20px; 
    padding-bottom: 60px; 
} 

/* Custom container */ 
.container { 
    margin: 0 auto; 
    max-width: 1000px; 
} 
.container > hr { 
    margin: 0px 0; 
} 

/* Main marketing message and sign up button */ 
.jumbotron { 
    margin: 20px 0; 
    text-align: center; 
} 
.jumbotron h1 { 
    font-size: 100px; 
    line-height: 1; 
} 
.jumbotron .lead { 
    font-size: 24px; 
    line-height: 1.25; 
} 
.jumbotron .btn { 
    font-size: 21px; 
    padding: 14px 24px; 
} 

/* Supporting marketing content */ 
.marketing { 
    margin: 60px 0; 
} 
.marketing p + h4 { 
    margin-top: 28px; 
} 


/* Customize the navbar links to be fill the entire space of the .navbar */ 
.navbar .navbar-inner { 
    padding: 0; 
} 
.navbar .nav { 
    margin: 0; 
    display: table; 
    width: 100%; 
} 
.navbar .nav li { 
    display: table-cell; 
    width: 1%; 
    float: none; 
} 
.navbar .nav li a { 
    font-weight: bold; 
    text-align: center; 
    border-left: 1px solid rgba(255,255,255,.75); 
    border-right: 1px solid rgba(0,0,0,.1); 
} 
.navbar .nav li:first-child a { 
    border-left: 0; 
    border-radius: 3px 0 0 3px; 
} 
.navbar .nav li:last-child a { 
    border-right: 0; 
    border-radius: 0 3px 3px 0; 
} 

क्या मुझे कुछ याद आ रहा है?

Answer 1

अपने आवेदन.css को केवल 'आवश्यकता' उद्देश्यों के लिए जाने का प्रयास करें, यह त्रुटियों को ट्रैक करने के साथ-साथ Rails3 संपत्ति पाइपलाइन स्टैक का लाभ उठाने का अपना मार्ग प्रशस्त करेगा।

अपने अनुप्रयोग/आस्तियों/स्टाइलशीट/application.css में:

/* 
* This is a manifest file that'll be compiled into application.css, which will include all the files 
* listed below. 
* 
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets, 
* or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path. 
* 
* You're free to add application-wide styles to this file and they'll appear at the top of the 
* compiled file, but it's generally better to create a new file per style scope. 
* 
*= require_self 
*= require bootstrap 
*= require bootstrap_responsive 
*= require my_styles 
*/ 

अपने अनुप्रयोग/आस्तियों/स्टाइलशीट में/my_styles.css आप application.css में अब है कि कस्टम सीएसएस डाल दिया।

इस तरह आपकी कस्टम शैलियों को बूटस्ट्रैप सामान के बाद लोड किया जाएगा, इसे ओवरराइड करना होगा।

ईमानदारी से कहूं तो मुझे लगता है कि यह है कि क्या आप के लिए अभी हो रहा है कि: यह bootstrap.css नहीं है कि आपके शैलियों अधिभावी है, यह bootstrap_responsive के रूप में यह अपनी शैली के बाद लोड किया जाता है है।

Answer 2

आपको bootstrap.css और bootstrap-responsive.css लोड करने और फिर अपनी शैलियों को ओवरराइड करने की आवश्यकता है। एक तरह से तो जैसे एक नया bootstrap_and_overrides.css.scss परिभाषित करने के लिए है:

@import "bootstrap"; 
@import "bootstrap-responsive"; 

.well { 
    box-shadow: 0 0 4px #888888; 
    border-radius: 0px 0px 0px 0px; 
} 
// more overrrides 

फिर इस फ़ाइल को शामिल करने से पहले आप अपने रेल लेआउट में application.css शामिल हैं।

Answer 3

जब आप अपनी शैली के साथ बूटस्ट्रैप को ओवरराइड करना चाहते हैं, तो आपके application.css को बूटस्ट्रैप परिभाषा के बाद लोड किया जाना चाहिए।