설명
Bootstrap Button JavaScript 플러그인을 사용하면 버튼의 기능을 향상할 수 있습니다. 버튼 상태를 제어하고 도구 모음과 같은 구성 요소에 대한 버튼 그룹을 생성할 수 있습니다.
필요한 것
jquery.js 및 bootstrap-button.js(이 두 JavaScript 파일)를 참조해야 합니다. 그것들은 모두 docs/assets/js 폴더 안에 있습니다.
사용방법
자바스크립트를 작성하지 않고 마크업만으로 플러그인을 사용할 수도 있고, 자바스크립트를 통해 버튼을 활성화할 수도 있습니다.
Bootstrap은 다음 표와 같이 버튼 스타일을 정의하는 몇 가지 옵션을 제공합니다.
| 수업 | 설명 |
|---|---|
| .btn | 버튼에 기본 스타일 추가 |
| .btn-기본 | 기본/표준 버튼 |
| .btn-primary | 원래 버튼 스타일 (조작하지 않음) |
| .btn-성공 | 성공을 나타내는 행동 |
| .btn-info | 이 스타일은 정보를 팝업하려는 버튼에 사용할 수 있습니다 |
| .btn-경고 | 조작에 주의가 필요한 버튼 |
| .btn-위험 | 위험한 행동을 나타내는 버튼 조작 |
| .btn-링크 | 버튼을 링크처럼 보이게 합니다(버튼 동작은 그대로 유지) |
| .btn-lg | 큰 버튼 만들기 |
| .btn-sm | 작은 버튼 만들기 |
| .btn-xs | 초소형 버튼 만들기 |
| .btn-블록 | 블록 수준 버튼(상위 요소 너비의 100%까지 확장됨) |
| .활성 | 버튼을 눌렀습니다 |
| .비활성화 | 버튼 비활성화 |
먼저 다양한 색상의 버튼 살펴보기:
<html lang="en">
<head>
<!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="Keywords" content="关键词一，关键词二">
<meta name="Description" content="网站描述内容">
<meta name="Author" content="Yvette Lau">
<meta name = "viewport" content = " width = device-width, initial-scale = 1 ">
<title>BootstrapDemo</title>
<!--css js 文件的引入-->
<link rel="stylesheet" type="text/css" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">
</head>
<body style="padding: 20px;">
<!-- 标准的按钮 -->
<button type="button" class="btn btn-default">默认按钮</button>
<!-- 提供额外的视觉效果，标识一组按钮中的原始动作 -->
<button type="button" class="btn btn-primary">原始按钮</button>
<!-- 表示一个成功的或积极的动作 -->
<button type="button" class="btn btn-success">成功按钮</button>
<!-- 用于要弹出信息的按钮 -->
<button type="button" class="btn btn-info">信息按钮</button>
<!-- 表示应谨慎操作的动作 -->
<button type="button" class="btn btn-warning">警告按钮</button>
<!-- 表示一个危险动作的按钮 -->
<button type="button" class="btn btn-danger">危险按钮</button>
<!-- 让按钮看起来像一个链接，但同时保持按钮的行为 -->
<button type="button" class="btn btn-link">链接按钮</button>
</body>
</html>효과:
btn-default / btn-primary /btn-success/ btn-info/ btn-warning/ btn-danger/ btn-link는 버튼에 다양한 스타일을 추가합니다.
버튼 크기
헤드 부분은 모두 동일하기 때문에 바디의 내용만 나열됩니다.
<body style="padding: 20px;width:500px;"> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-lg btn-default">大的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-sm btn-primary">小的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-xs btn-success">特别小的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button><br/><br/> <button type="button" class="btn btn-block btn-info">块级信息按钮</button> </body>
효과는 다음과 같습니다.
버튼 상태
버튼은 활성 및 비활성화의 두 가지 상태로 구분됩니다.
활성 상태: 버튼은 더 어두운 배경, 어두운 테두리 및 그림자로 눌러진 것처럼 보입니다.
비활성화 상태: 버튼 색상이 50% 더 밝아지고 그라데이션이 사라집니다
구체적인 예 보기:
<body style="padding: 20px;width:500px;"> <!-- 标准的按钮 --> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-default active">激活的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-primary active">激活的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-success active">激活的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <button type="button" class="btn btn-info active">激活的信息按钮</button> <br/><br/> <button type="button" class="btn btn-default">默认按钮</button> <button type="button" class="btn btn-default disabled">禁用的默认按钮</button> <br/><br/> <!-- 提供额外的视觉效果，标识一组按钮中的原始动作 --> <button type="button" class="btn btn-primary">原始按钮</button> <button type="button" class="btn btn-primary disabled">禁用的原始按钮</button> <br/><br/> <!-- 表示一个成功的或积极的动作 --> <button type="button" class="btn btn-success">成功按钮</button> <button type="button" class="btn btn-success disabled">禁用的成功按钮</button> <br/><br/> <!-- 用于要弹出信息的按钮 --> <button type="button" class="btn btn-info">信息按钮</button> <button type="button" class="btn btn-info disabled">禁用的信息按钮</button> </body>
버튼 라벨
a, 입력은 버튼처럼 동작할 수 있지만 브라우저 간 불일치를 방지하려면 버튼 태그를 사용하는 것이 가장 좋습니다.
<body style="padding: 20px;"> <a class="btn btn-default" href="#" role="button">超链接按钮</a> <button class="btn btn-default btn-primary" type="submit">button按钮</button> <input class="btn btn-default btn-success" type="button" value="input按钮"> <input class="btn btn-default btn-info" type="submit" value="submit按钮"> </body>
위 콘텐츠는 부트스트랩 버튼에 대한 지식을 소개합니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
