ブートストラップ5ボーダースタイルのボタンの例

4271 ワード
webdev bootstrap tutorial css テキストリンク
こんにちはFriend,Toadyさんはボーダークラスを使用したブートストラップ5ボーダースタイルボタンの使い方を学びます.このセクションでは、CSSやインラインCSSクラスを使用しません.ブートストラップのクラスを使用するだけで良いボタンを作ることができます.まず、ブートストラップ5プロジェクトを設定する必要があります.記事の下で読むことができます.
view
How to install & setup bootstrap 5

ブートストラップ5ボーダースタイルボタンを使用する方法


1 )まずボタン要素を作成して与えます.btn名.
2 )次に適用する.BGダーク背景と.テキストホワイトクラス.
3 )次に、使用する必要があります.ボーダーとボーダーサイズのクラス境界3.
4 )最終的にボーダーBOTTOM - 0のような境界クラスを使用する必要があります.
例
<!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 borders style button example</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
  </head>

  <body>
    <button class="border btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-primary btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-success btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-warning btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-info btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-light btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
    <button class="border border-danger btn border-3 bg-dark text-white border-bottom-0 border-top-0 border-end-0">
      Border Button
    </button>
  </body>

</html>
PHP -カラー反転
2222