385 lines
14 KiB
HTML
385 lines
14 KiB
HTML
<!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>
|