AngularJS bootstrap ui - css stillerini nasıl değiştiririm?

AngularJS yönergeleriyle önyükleme UI kullanıyorum ve öntanımlı stiller, öğeleri için geçerli önyükleme biçimlerini değiştirmek istiyorum.AngularJS bootstrap ui - css stillerini nasıl değiştiririm?

HTML içeriğini şablondan mı hedeflemeliyim?

Belgede verilen örneklere dayanarak accordion numaralı telefonu kullanmak istiyorum. Ben HTML olarak tanımlayan

, aşağıdaki yapıya sahiptir:

<accordion close-others="oneAtATime"><div class="panel-group" ng-transclude=""> 
    <div class="panel panel-default ng-isolate-scope" heading="my heading"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
       <a class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading"> 
        <span ng-class="{'text-muted': isDisabled}" class="ng-binding">content here</span> 
       </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;"> 
     <div class="panel-body" ng-transclude=""><span class="ng-scope">some content here</span></div> 
    </div>

Gördüğünüz gibi:

<accordion> 
    <accordion-group heading="my heading"> 
     content here 
    </accordion-group>

Ama direktif aşağıdaki HTML haline döner şablon işlerken , oldukça önemli ölçüde değiştirir. Panel başlığının nasıl görüntüleneceğini değiştirmek istediğimde, bunu css dosyamda yazmalı mıyım?

div.panel {}

ve bu şablonun gelecekte değişmeyeceğini umarız?

Yönergenin şablonları tarafından oluşturulan HTML öğeleri için stilleri değiştirmenin en iyi yolu nedir?

kaynak

2014-07-16 AngularInDepth.com

Uygun, düşünülmüş bir yanıt vermek için zamanım yok. Ama işte herkesin yararlı bulduğu bir Plunker: http://plnkr.co/edit/Bs9hCqCDkSmO4OtR716A?p=preview – stellarchariot

Bootstrap'in (bootstrap.css) ardından css'nizi (site specific.css) eklerseniz, kuralları yeniden tanımlayarak kuralları geçersiz kılabilirsiniz. Örneğin

, bu CSS dahil nasıl ise senin <head>

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

Sadece (sitenizin-specific.css dosyasında) paneli geçersiz kılabilirsiniz:

.panel { 
    //your code here 
}

Ve do gelecekte şablon değişikliği rahatsız etmeyin. Belirli bir sürümü kullandığınızda, güncellemeler sizi etkilemeyecektir. Yeni bir sürüm adıyla yeni bir şablon oluşturuyorlar.

kaynak

2014-07-16 06:07:59

UI-Bootstrap sürüm 2.1.3 kullanıyorum. İhtiyacım gereği stilini yapmak istiyorum. CSS sınıflarını "

AngularJS bootstrap ui - css stillerini nasıl değiştiririm?

cevap

İlgili konular