勾配ボタンの例
こんにちは、友人、ToDieブートストラップ5グラデーションボタンを使用する方法を学びます.この節では、外部クラスまたは内部CSSクラスを使用しません.ビルドクラスでブートストラップ5を使用してグラデーションボタンを作成します.まず、ブートストラップ5プロジェクトを設定する必要があります.記事の下で読むことができます.
view
How to install & setup bootstrap 5
ブートストラップ5サポート背景グラデーションクラス.加えることによって
1 )まずボタン要素を作成して与えます.BTN
2 )その後
3 )最終的に使用する必要があります
例
view
How to install & setup bootstrap 5
ブートストラップ5グラデーションボタンを使う方法
ブートストラップ5サポート背景グラデーションクラス.加えることによって
.bg-gradient クラスのグラデーション色を作成します.1 )まずボタン要素を作成して与えます.BTN
2 )その後
.bg-primary 背景テキスト3 )最終的に使用する必要があります
.bg-gradient 勾配例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Gradient Button Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="text-white btn bg-primary bg-gradient">Primary</button>
<button type="button" class="text-white btn bg-secondary bg-gradient">Secondary</button>
<button type="button" class="text-white btn bg-success bg-gradient">Success</button>
<button type="button" class="text-white btn bg-danger bg-gradient">Danger</button>
<button type="button" class="text-white btn bg-warning bg-gradient">Warning</button>
<button type="button" class="text-white btn bg-info bg-gradient">Info</button>
<button type="button" class="text-black btn bg-light bg-gradient">Light</button>
<button type="button" class="text-white btn bg-dark bg-gradient">Dark</button>
</body>
</html>
Reference
この問題について(勾配ボタンの例), 我々は、より多くの情報をここで見つけました https://dev.to/frontendshape/bootstrap-5-gradient-button-example-36llテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol