Bootstrap 5 테두리 스타일 버튼 예제

안녕 친구, Toady 테두리 클래스를 사용하여 부트스트랩 5 테두리 스타일 버튼을 사용하는 방법을 배웁니다. 이 섹션에서는 CSS 또는 인라인 CSS 클래스를 사용하지 않을 것입니다. 부트스트랩 5 클래스만 사용하여 보기 좋은 버튼을 만들 수 있습니다. 먼저 부트스트랩 5 프로젝트를 설정해야 합니다. 아래 기사를 읽을 수 있습니다.

view

How to install & setup bootstrap 5

Bootstrap 5 테두리 스타일 버튼 사용 방법



1) 먼저 버튼 요소를 생성하고 .btn 이름을 지정해야 합니다.

2) 그런 다음 배경 및 .text-white 클래스에 .bg-dark를 적용합니다.

3) 다음으로 .border 및 테두리 크기 클래스 border-3을 사용해야 합니다.

4) 마지막으로 border-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>


좋은 웹페이지 즐겨찾기