Twitter bootstrap cerulean цветные панели

Я использую шаблон Twitter Bootstrap Cerulean.Twitter bootstrap cerulean цветные панели

В этой теме я использую различные панели: панель-первичная, панель-панель-успех, панель-информация и предупреждение панели.

В то время как панель-первичность хорошо видна, я обнаружил, что другие типы панелей очень яркие и едва заметные.

Поэтому я хотел бы изменить их, сохранив тот же цвет (например, зеленый для успеха панели), но сделав их видимыми как первичные панели.

Я попытался, например, скопировать/закрыть css-успех css из темы Paper Bootstrap в Cerulean, но без каких-либо успехов.

Есть ли что-то для чейнджера выше, чем .panel, чтобы получить изменения?

Спасибо.

EDIT 1

Я просто заметил, что моя проблема яркости исходил из того, что я добавлял таблицы стилей в неправильном порядке. Цвет хорошо с этим заказом:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css">

Но чтобы остаться на оригинальный вопрос, который был: «Как изменить цвет панели» здесь является CSS и HTML кода. Я безуспешно пытался изменить его с помощью .panel-success {} в красном, например, но я, по-видимому, неправильно написал это. Кроме того, wgat будет css, чтобы изменить цвет заголовка панели?

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://bootswatch.com/cerulean/bootstrap.css"> 

    </head> 

    <style> 
    .panel-success{ 

     background-color: red !important ; 
    } 
    </style> 

    <body><br><br> 

    <div class="container"> 
     <div class="panel panel-success"> 
      <div class="panel-heading"> 
       <h2 class="panel-title">Title</h2> 
      </div> 

      <div class="panel-body"> 
       <p>Paragraph</p> 
      </div> 
     </div> 
    </div> 


    </body>

источник

2015-08-24 michltm

Пожалуйста, создайте демо текущей задачи. –

Это более подробная версия ответа @John Louie.

.panel-success .panel-heading { 
 
    background-color: blue !important; 
 
} 
 
.panel-success .panel-title { 
 
    color: white; 
 
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<!-- Panel using default primary class --> 
 
<div class="container"> 
 
    <div class="panel panel-primary"> 
 
    <div class="panel-heading"> 
 
     <h2 class="panel-title">Title</h2> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Paragraph</p> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!-- Panel using overridden success class --> 
 
<div class="container"> 
 
    <div class="panel panel-success"> 
 
    <div class="panel-heading"> 
 
     <h2 class="panel-title">Title</h2> 
 
    </div> 
 
    <div class="panel-body"> 
 
     <p>Paragraph</p> 
 
    </div> 
 
    </div> 
 
</div>

источник

2015-08-24 11:15:03 niyasc

Спасибо за детали! Идеально. И благодаря @ Джон Луи за его первый ответ. – michltm

.panel-success{ 
    // css you copied from paper theme and add !important 
    background-color: green !important; 
}

Или просто вставить этот код в пользовательском CSS, и он будет переопределить CSS код .panel-успеха в небесно теме.

источник

2015-08-24 09:03:04

ответ

Смежные вопросы