Как переопределить стили в bootstrap?

Пользователь

от carlo.cummerata , в категории: HTML/CSS , 2 года назад

Как переопределить стили в bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от gage , 2 года назад

@carlo.cummerata 

Стили Bootstrap можно переопределять следующим образом:

  1. Поместите свои стили после подключения Bootstrap CSS файла в HTML.
  2. Используйте селекторы классов Bootstrap в своих стилях.
  3. Укажите приоритет своих стилей, задав более высокий specificity (например, с помощью классов вложенных в HTML элементы).


Например:

1
2
3
4
5
6
7
8
9
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <style>
    .btn-primary {
      background-color: red;
      border-color: red;
    }
  </style>
</head>


Пользователь

от keyon.brown , 2 года назад

@carlo.cummerata 

Вы можете переопределять стили Bootstrap, добавляя свои собственные CSS-стили после подключения Bootstrap CSS-файла. Эти стили будут иметь более высокий приоритет, поэтому они переопределят стили Bootstrap. Например:

1
2
3
4
5
6
7
8
9
<!-- Подключение Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Добавление собственных CSS-стилей -->
<style>
  .navbar-custom {
    background-color: #3E8CE7;
  }
</style>


В этом примере мы переопределяем цвет фона для элемента navbar-custom.