bootstrap-fluent-design_tem.../free/components/button-group.html

385 lines
14 KiB
HTML
Raw Normal View History

2021-04-15 13:11:19 +01:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Material Design for Bootstrap</title>
<!-- MDB icon -->
<link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
<!-- Font Awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
<!-- Google Fonts Roboto -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<!-- MDB -->
<link rel="stylesheet" href="../../css/mdb.min.css" />
<!-- PRISM -->
<link rel="stylesheet" href="../../dev/css/new-prism.css" />
<!-- Custom styles -->
<style></style>
</head>
<body>
<div class="container mb-5" style="margin-top: 25vh">
<!-- Section: Buttons -->
<section>
<div>
<!-- <h2 class="mb-4">Basic example</h2> -->
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<br />
<br />
<br />
<button type="button" class="btn btn-link">Link</button>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link btn-sm">Left</button>
<button type="button" class="btn btn-link btn-sm">Middle</button>
<button type="button" class="btn btn-link btn-sm">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link">Left</button>
<button type="button" class="btn btn-link">Middle</button>
<button type="button" class="btn btn-link">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group shadow-0" role="group" aria-label="Basic example">
<button type="button" class="btn btn-link btn-lg">Left</button>
<button type="button" class="btn btn-link btn-lg">Middle</button>
<button type="button" class="btn btn-link btn-lg">Right</button>
</div>
<br />
<br />
<br />
<!--
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">Left</button>
<button type="button" class="btn btn-light">Middle</button>
<button type="button" class="btn btn-light">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-dark">Left</button>
<button type="button" class="btn btn-dark">Middle</button>
<button type="button" class="btn btn-dark">Right</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-no-shadow" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light">
Left <i class="fas fa-align-left ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Center <i class="fas fa-align-center ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Right <i class="fas fa-align-right ms-1"></i>
</button>
<button type="button" class="btn btn-light">
Justify <i class="fas fa-align-justify ms-1"></i>
</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-border" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light"><i class="fas fa-align-left"></i></button>
<button type="button" class="btn btn-light active">
<i class="fas fa-align-center"></i>
</button>
<button type="button" class="btn btn-light"><i class="fas fa-align-right"></i></button>
<button type="button" class="btn btn-light">
<i class="fas fa-align-justify"></i>
</button>
</div>
<br />
<br />
<br />
<div class="btn-group btn-group-rounded" role="group" aria-label="Basic example">
<button type="button" class="btn btn-light"><i class="fas fa-align-left"></i></button>
<button type="button" class="btn btn-light active">
<i class="fas fa-align-center"></i>
</button>
<button type="button" class="btn btn-light"><i class="fas fa-align-right"></i></button>
<button type="button" class="btn btn-light">
<i class="fas fa-align-justify"></i>
</button>
</div>
<br />
<br />
<br /> -->
<h2 class="mb-4">Button standard</h2>
<div class="row mb-5">
<div class="col-md-6">
<p>Button standard i standard rounded</p>
<button type="button" class="btn btn-primary me-3">Primary</button>
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
</div>
<div class="col-md-6">
<p>
Button z borderem i z borderem rounded (dałam btn-light zeby lepiej było defaultowy
bootstrapowy border widac)
</p>
<button type="button" class="btn btn-light shadow-0 border me-3">Light</button>
<button type="button" class="btn btn-light btn-rounded shadow-0 border">Light</button>
</div>
</div>
<h2 class="mb-4">Button toolbar</h2>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group me-2" role="group" aria-label="First group">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<button type="button" class="btn btn-primary">3</button>
<button type="button" class="btn btn-primary">4</button>
</div>
<div class="btn-group me-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-primary">5</button>
<button type="button" class="btn btn-primary">6</button>
<button type="button" class="btn btn-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-primary">8</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group btn-group-lg" role="group" aria-label="Large button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<div class="btn-group" role="group" aria-label="Default button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
<br />
<br />
<div class="btn-group btn-group-sm" role="group" aria-label="Small button group">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
</div>
<br />
<br />
<br />
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<button type="button" class="btn btn-primary">1</button>
<button type="button" class="btn btn-primary">2</button>
<div class="btn-group" role="group">
<button
id="btnGroupDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop1"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<button type="button" class="btn btn-primary">Button</button>
<button type="button" class="btn btn-primary">Button</button>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop2"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop3"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
<button
id="btnGroupVerticalDrop4"
type="button"
class="btn btn-primary dropdown-toggle"
data-mdb-toggle="dropdown"
aria-expanded="false"
>
Dropdown
</button>
<ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
<li><a class="dropdown-item" href="#">Dropdown link</a></li>
</ul>
</div>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 col-6 mx-auto">
<button class="btn btn-primary" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
<br />
<br />
<br />
<div class="bd-example">
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button class="btn btn-primary mr-md-2" type="button">Button</button>
<button class="btn btn-primary" type="button">Button</button>
</div>
</div>
</div>
</section>
<!-- Section: Buttons -->
<br />
</div>
</body>
<!-- MDB -->
<script type="text/javascript" src="../../js/mdb.min.js"></script>
<!-- PRISM -->
<script type="text/javascript" src="../../dev/js/new-prism.js"></script>
<!-- MDB SNIPPET -->
<script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
<!-- Custom scripts -->
<script type="text/javascript"></script>
</html>