392 lines
17 KiB
PHTML
392 lines
17 KiB
PHTML
<?php require('template/header.phtml') ?>
|
|
|
|
<h2>Welcome to Page1</h2>
|
|
|
|
Samples from the<a class="d-flex align-items-center" href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/"> cheat sheet</a>
|
|
|
|
<article class="my-3" id="tables">
|
|
<div class="bd-heading align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Tables</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td colspan="2">Larry the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<table class="table table-dark table-borderless">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td colspan="2">Larry the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Class</th>
|
|
<th scope="col">Heading</th>
|
|
<th scope="col">Heading</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">Default</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
|
|
<tr class="table-primary">
|
|
<th scope="row">Primary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-secondary">
|
|
<th scope="row">Secondary</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-success">
|
|
<th scope="row">Success</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-danger">
|
|
<th scope="row">Danger</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-warning">
|
|
<th scope="row">Warning</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-info">
|
|
<th scope="row">Info</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-light">
|
|
<th scope="row">Light</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
<tr class="table-dark">
|
|
<th scope="row">Dark</th>
|
|
<td>Cell</td>
|
|
<td>Cell</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<table class="table table-sm table-bordered">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">#</th>
|
|
<th scope="col">First</th>
|
|
<th scope="col">Last</th>
|
|
<th scope="col">Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th scope="row">1</th>
|
|
<td>Mark</td>
|
|
<td>Otto</td>
|
|
<td>@mdo</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">2</th>
|
|
<td>Jacob</td>
|
|
<td>Thornton</td>
|
|
<td>@fat</td>
|
|
</tr>
|
|
<tr>
|
|
<th scope="row">3</th>
|
|
<td colspan="2">Larry the Bird</td>
|
|
<td>@twitter</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="figures">
|
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Figures</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<figure class="figure">
|
|
<svg class="bd-placeholder-img figure-img img-fluid rounded" width="400" height="300" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: 400x300" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"/><text x="50%" y="50%" fill="#dee2e6" dy=".3em">400x300</text></svg>
|
|
|
|
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
|
|
<section id="forms">
|
|
<h2 class="fw-bold pt-3 pt-xl-5 pb-2 pb-xl-3">Forms</h2>
|
|
|
|
<article class="my-3" id="overview">
|
|
<div class="bd-heading align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Overview</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<form>
|
|
<div class="mb-3">
|
|
<label for="exampleInputEmail1" class="form-label">Email address</label>
|
|
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
|
|
<div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="exampleInputPassword1" class="form-label">Password</label>
|
|
<input type="password" class="form-control" id="exampleInputPassword1">
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="exampleCheck1">
|
|
<label class="form-check-label" for="exampleCheck1">Check me out</label>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<legend>Radios buttons</legend>
|
|
<div class="form-check">
|
|
<input type="radio" name="radios" class="form-check-input" id="exampleRadio1">
|
|
<label class="form-check-label" for="exampleRadio1">Default radio</label>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="radio" name="radios" class="form-check-input" id="exampleRadio2">
|
|
<label class="form-check-label" for="exampleRadio2">Another radio</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="customFile">Upload</label>
|
|
<input type="file" class="form-control" id="customFile">
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
|
|
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="customRange3" class="form-label">Example range</label>
|
|
<input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="disabled-forms">
|
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Disabled forms</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<form>
|
|
<fieldset disabled aria-label="Disabled fieldset example">
|
|
<div class="mb-3">
|
|
<label for="disabledTextInput" class="form-label">Disabled input</label>
|
|
<input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="disabledSelect" class="form-label">Disabled select menu</label>
|
|
<select id="disabledSelect" class="form-select">
|
|
<option>Disabled select</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="form-check">
|
|
<input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
|
|
<label class="form-check-label" for="disabledFieldsetCheck">
|
|
Can't check this
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<fieldset class="mb-3">
|
|
<legend>Disabled radios buttons</legend>
|
|
<div class="form-check">
|
|
<input type="radio" name="radios" class="form-check-input" id="disabledRadio1" disabled>
|
|
<label class="form-check-label" for="disabledRadio1">Disabled radio</label>
|
|
</div>
|
|
<div class="mb-3 form-check">
|
|
<input type="radio" name="radios" class="form-check-input" id="disabledRadio2" disabled>
|
|
<label class="form-check-label" for="disabledRadio2">Another radio</label>
|
|
</div>
|
|
</fieldset>
|
|
<div class="mb-3">
|
|
<label class="form-label" for="disabledCustomFile">Upload</label>
|
|
<input type="file" class="form-control" id="disabledCustomFile" disabled>
|
|
</div>
|
|
<div class="mb-3 form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" id="disabledSwitchCheckChecked" checked disabled>
|
|
<label class="form-check-label" for="disabledSwitchCheckChecked">Disabled checked switch checkbox input</label>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label for="disabledRange" class="form-label">Disabled range</label>
|
|
<input type="range" class="form-range" min="0" max="5" step="0.5" id="disabledRange">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="sizing">
|
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Sizing</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<div class="mb-3">
|
|
<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg" aria-label=".form-control-lg example">
|
|
</div>
|
|
<div class="mb-3">
|
|
<select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control form-control-lg" aria-label="Large file input example">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bd-example">
|
|
<div class="mb-3">
|
|
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm" aria-label=".form-control-sm example">
|
|
</div>
|
|
<div class="mb-3">
|
|
<select class="form-select form-select-sm" aria-label=".form-select-sm example">
|
|
<option selected>Open this select menu</option>
|
|
<option value="1">One</option>
|
|
<option value="2">Two</option>
|
|
<option value="3">Three</option>
|
|
</select>
|
|
</div>
|
|
<div class="mb-3">
|
|
<input type="file" class="form-control form-control-sm" aria-label="Small file input example">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="input-group">
|
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Input group</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon1">@</span>
|
|
<input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
|
|
<span class="input-group-text" id="basic-addon2">@example.com</span>
|
|
</div>
|
|
<label for="basic-url" class="form-label">Your vanity URL</label>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
|
|
<input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3">
|
|
</div>
|
|
<div class="input-group mb-3">
|
|
<span class="input-group-text">$</span>
|
|
<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
|
|
<span class="input-group-text">.00</span>
|
|
</div>
|
|
<div class="input-group">
|
|
<span class="input-group-text">With textarea</span>
|
|
<textarea class="form-control" aria-label="With textarea"></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="my-3" id="floating-labels">
|
|
<div class="bd-heading sticky-xl-top align-self-start mt-5 mb-3 mt-xl-0 mb-xl-2">
|
|
<h3>Floating labels</h3>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="bd-example">
|
|
<form>
|
|
<div class="form-floating mb-3">
|
|
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
|
|
<label for="floatingInput">Email address</label>
|
|
</div>
|
|
<div class="form-floating">
|
|
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
|
|
<label for="floatingPassword">Password</label>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
|
|
|
|
<?php require('template/footer.phtml') ?>
|