EclipseでのBootstrap使用のためのリンク文のエラーについて

前提・実現したいこと

プログラミング初心者です。
Eclipseを用いてHTMLとCSSの勉強をしています。
現在、Bootstrapを使用するために、HTMLのheadにリンクをコピペして記述したのですが、integrityとcrossoriginの箇所が、
「属性名 (integrity) が未定義です。」と表示され、Bootstrapのclassが適用されない状態になっています。

また、「class = "btn-primary"」を使用することでボタンのビジュアルが変わるイメージでいたのですが、反映されていない状態です。

これを解決する方法をお教えください。
宜しくお願いします。

発生している問題・エラーメッセージ

<head>

	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
	crossorigin="anonymous">


</head>

<head>

	<meta charset="UTF-8">
	<title>Insert title here</title>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" 
	integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
	crossorigin="anonymous">


</head>
<body>

	 <input type= "text" style= "width:200px;">
	 <input type = "button" class = "btn-primary" value = "ボタン">

</body>

該当のソースコード

HTML
1integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" 
2	crossorigin="anonymous">

試したこと

補足情報（FW/ツールのバージョンなど）

m.ts10806

2021/09/24 21:33

その警告は問題ないはずですが。「反映されない」とは何を見ていっていますか？提示されたコードはBootstrapの機能を利用されている場所がないです。あとeclipseです。

nunonion

2021/09/25 09:44 編集

ご回答いただきありがとうございます。失礼しました、Bootstrapの機能を利用した場所を追記しました。追記した「class = "btn-primary"」を使用することでボタンのビジュアルが変わるイメージでいたのですが、反映されていない状態です。

m.ts10806

2021/09/25 11:18

質問本文に追記しておいてください。

m.ts10806

2021/09/25 11:20

可能なら eclipsも直しておいてください。質問タグにつけられている通り Eclipseです（せめて最後のeは抜かないで）

nunonion

2021/09/27 01:30

追記・修正しました。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンのビジュアルが変わるイメージでいたのですが

.btn-primaryが持っている機能は基本的にボタンの色だけです。

css
1.btn-primary {
2  color: #fff;
3  background-color: #007bff;
4  border-color: #007bff;
5}

ボタンの形についての役割を持っているのは.btn

css
1.btn {
2  display: inline-block;
3  font-weight: 400;
4  color: #212529;
5  text-align: center;
6  vertical-align: middle;
7  -webkit-user-select: none;
8  -moz-user-select: none;
9  -ms-user-select: none;
10  user-select: none;
11  background-color: transparent;
12  border: 1px solid transparent;
13  padding: 0.375rem 0.75rem;
14  font-size: 1rem;
15  line-height: 1.5;
16  border-radius: 0.25rem;
17  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
18}
19

ドキュメントも確認してください。

Button tags

The .btn classes are designed to be used with the <button> element. However, you can also use these classes on <a> or <input> elements (though some browsers may apply a slightly different rendering).

現状でも.btn-primaryが持つ色は反映されているので「classが適用されない状態」にはなっていません。

投稿2021/09/25 11:18

編集2021/09/25 11:21

m.ts10806

総合スコア80861