Как отключить Bootstrap html, переопределение атрибута тела?

Question

Импорт

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
      <link rel="stylesheet" type="text/css" href="resources/css/style.css">
      <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.css">
      <link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,300italic" rel="stylesheet">

Я определил основные свойства для своих css классов как родительский класс, как показано ниже. Особенно для облегчения медиазапросов.

html,body{
    background-color: #ffffff;
    color: #555;
    font-family:'Lato' ,'Arial',sans-serif;
    font-weight:300; 
    font-size:20px;
    text-rendering: optimizeLegibility;
}

Но bootstrap переопределяет все эти свойства. Например, у меня есть код ниже, но он не содержит 300 шрифтов. Вместо этого поставляется с 500 шрифтами.

  <div class="container">
            <div class="row">
                <h1>Goodbye junk food.<br>Hello super healthy meals.</h1>
              </div>
          </div>

Я хочу указать font-weight через родительский класс, который имеет 300 в моем примере, как показано ниже

h1{
    color:#fff;
    font-weight: 90%;
}

Но это не работает bootstrap переопределяет все

Answer 1

В вашем индексе. html file:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="style.css">

Поставьте ваши стили ниже bootstrap. css import. Последние переопределяют стили выше.

Редактировать

Вы должны переопределить определенные c типы снова. Если бы это было то, что вы думали; Ваш

color: #555;

должен переопределить все цветовые классы в bootstrap.

html,body {
    background-color: #ffffff;
    color: #555;
    font-size:20px;
    font-family:'Lato' ,'Arial',sans-serif;
    text-rendering: optimizeLegibility;
}

.container, 
h1 {
    font-weight:300; 
}

ИЛИ

Вы можете настроить и загрузить bootstrap . css

• bootstrap .build
• bootstrapcustomizer