Я использую Bootstrap 4.5.2 для своего приложения angular. В моем DashboardComponent весь шрифт выделен жирным шрифтом.
Bootstrap 4.5.2
DashboardComponent
Это мой код DashboardComponent
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Dashboard</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> --> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.css" /> --> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --> <!-- <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> --> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <style> html { position: relative; min-height: 100%; } } </style> <main class="content-wrapper"> <div class="container-fluid"> <div style="border: none;margin-left: 10px; margin-top: 25px;"> <ul class="list-group .list-group-flush borderless"> <li style="border: none; height: 47px; background-color: #f5f5f5;" class="list-group-item d-flex justify-content-between align-items-center"> Relay Server <span class="badge badge-primary badge-pill">14</span> </li> <li style="border: none; height: 47px; background-color: #f5f5f5;" class="list-group-item borderless">St</li> </ul> </div> --> </div> </div> <div class="row"> <!-- 15--> <div style="margin-left: 15px; margin-top: 20px;" class="col-md-4 card card-body bg-light align-items-center"> <div> <p class="lead text-left">Build Status</p> <canvas id="chBar" width="350" height="240"></canvas> </div> </div> </div> </div> </body> </html>
Этот индекс. html
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Stackedbar</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> --> <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.css" /> --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.2/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.css" /> <!-- <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">--> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> </head> <body> <app-root>Loading...</app-root> </body> </html> <!DOCTYPE html>
Вот как текст ищет
введите описание изображения здесь
Удаление этих ссылок из index.html файла
index.html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">