webapp @ ウィキ

ボタンのサンプル

最終更新：2021年03月31日 13:57

webapp

- view

管理者のみ編集可

<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" %>

   <!-- jqueryライブラリ -->
   <script src="/web_lib/jquery/jquery-3.5.1.min.js"></script>
   <!-- bootstrapライブラリ -->
   <link href="/web_lib/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="/web_lib/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script>

</head>

<body>
<div class="container">
<h1>BootStrap　ボタンのサンプル</h1>
<form>
<h2>塗りつぶしボタン</h2>
<a class="btn btn-primary btn-lg" >大ぼたん青 btn-lg</a>
<a class="btn btn-success" >中(デフォルト)ぼたん緑 none</a>
<a class="btn btn-danger btn-sm" >小ぼたん赤 btn-sm</a>
<br><br>
<h2>枠組みボタン</h2>
<a class="btn btn-outline-secondary btn-lg" >大ぼたん灰</a>
<a class="btn btn-outline-warning btn-sm" >小ぼたん黄</a>
<a class="btn btn-outline-info" >ぼたん青緑</a>
<a class="btn btn-outline-info" >ぼたん青緑</a>
<br><br>
<h2>画面いっぱいボタン</h2>
<a class="btn btn-outline-secondary btn-lg btn-block" >大ぼたん灰</a>
<a class="btn btn-outline-light btn-block" >中(デフォルト)ぼたん白</a>
<a class="btn btn-outline-dark btn-sm btn-block" >小ぼたん黒</a>
<br><br>
<h2>横連結ボタン</h2>
<div class="btn-group">
<a class="btn btn-outline-danger " >左ぼたん赤</a>
<a class="btn btn-outline-warning " >中央(デフォルト)ぼたん黄</a>
<a class="btn btn-outline-primary " >右ぼたん青</a>
</div>
<br><br>
<h2>縦連結ボタン</h2>
<div class="btn-group-vertical">
<a class="btn btn-outline-danger " >上ぼたん赤</a>
<a class="btn btn-outline-warning " >中央(デフォルト)ぼたん黄</a>
<a class="btn btn-outline-primary " >下ぼたん青</a>
</div>
<br><br>
</form>
</div>
</body>
</html>

「ボタンのサンプル」をウィキ内検索