4907 lines
No EOL
256 KiB
Vue
4907 lines
No EOL
256 KiB
Vue
<template>
|
||
<BaseLayout>
|
||
<main class="content">
|
||
|
||
<div class="container-fluid example-container">
|
||
<h1>Brand color</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Theme colors</h3>
|
||
<div class="p-2 mb-2 bg-primary text-white">.bg-primary</div>
|
||
<div class="p-2 mb-2 bg-secondary text-white">.bg-secondary</div>
|
||
<div class="p-2 mb-2 bg-success text-white">.bg-success</div>
|
||
<div class="p-2 mb-2 bg-danger text-white">.bg-danger</div>
|
||
<div class="p-2 mb-2 bg-warning text-white">.bg-warning</div>
|
||
<div class="p-2 mb-2 bg-info text-white">.bg-info</div>
|
||
<div class="p-2 mb-2 bg-light text-gray-dark">.bg-light</div>
|
||
<div class="p-2 mb-2 bg-dark text-white">.bg-dark</div>
|
||
<div class="p-2 mb-2 bg-white text-gray-dark">.bg-white</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Gradient of grey</h3>
|
||
<div class="p-2 mb-2 swatch-100">.swatch-100</div>
|
||
<div class="p-2 mb-2 swatch-200">.swatch-200</div>
|
||
<div class="p-2 mb-2 swatch-300">.swatch-300</div>
|
||
<div class="p-2 mb-2 swatch-400">.swatch-400</div>
|
||
<div class="p-2 mb-2 swatch-500">.swatch-500</div>
|
||
<div class="p-2 mb-2 swatch-600">.swatch-600</div>
|
||
<div class="p-2 mb-2 swatch-700">.swatch-700</div>
|
||
<div class="p-2 mb-2 swatch-800">.swatch-800</div>
|
||
<div class="p-2 mb-2 swatch-900">.swatch-900</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Links -->
|
||
<div class="container-fluid example-container" data-category="links">
|
||
<h1>Links</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default Link</h3>
|
||
<a href="javascript:void(0);">Exemple link</a>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Link inside an alert</h3>
|
||
<div class="alert alert-primary" role="alert">
|
||
This is a primary alert with
|
||
<a href="javascript:void(0);" class="alert-link">an example link</a>. Give it a click if you
|
||
like.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Grid -->
|
||
<div class="container-fluid example-container" data-category="grid">
|
||
<h1>Grid</h1>
|
||
|
||
<div>
|
||
<div class="bs-example-row">
|
||
<!-- Bootstrap Grid -->
|
||
<div class="row">
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
<div class="col-sm-1">.col-sm-1</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-2">.col-sm-2</div>
|
||
<div class="col-sm-3">.col-sm-3</div>
|
||
<div class="col-sm-7">.col-sm-7</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-4">.col-sm-4</div>
|
||
<div class="col-sm-4">.col-sm-4</div>
|
||
<div class="col-sm-4">.col-sm-4</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-5">.col-sm-5</div>
|
||
<div class="col-sm-7">.col-sm-7</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-6">.col-sm-6</div>
|
||
<div class="col-sm-6">.col-sm-6</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-12">.col-sm-12</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Fonts -->
|
||
<div class="container-fluid example-container" data-category="fonts">
|
||
<h1>Fonts</h1>
|
||
|
||
<div>
|
||
<h1>h1 </h1>
|
||
<h2>h2 </h2>
|
||
<h3>h3 </h3>
|
||
<h4>h4 </h4>
|
||
<h5>h5 </h5>
|
||
<h6>h6 </h6>
|
||
|
||
<br>
|
||
|
||
<h1>Heading 1
|
||
<small>Sub-heading</small>
|
||
</h1>
|
||
<h2>Heading 2
|
||
<small>Sub-heading</small>
|
||
</h2>
|
||
<h3>Heading 3
|
||
<small>Sub-heading</small>
|
||
</h3>
|
||
<h4>Heading 4
|
||
<small>Sub-heading</small>
|
||
</h4>
|
||
<h5>Heading 5
|
||
<small>Sub-heading</small>
|
||
</h5>
|
||
<h6>Heading 6
|
||
<small>Sub-heading</small>
|
||
</h6>
|
||
|
||
<br>
|
||
|
||
<h1 class="display-1">Display 1</h1>
|
||
<h1 class="display-2">Display 2</h1>
|
||
<h1 class="display-3">Display 3</h1>
|
||
<h1 class="display-4">Display 4</h1>
|
||
|
||
<br>
|
||
|
||
<p class="lead">
|
||
This is the article lead — it stands out at the start of the article.
|
||
</p>
|
||
|
||
<p>
|
||
This is normal text at the normal size etc...
|
||
</p>
|
||
|
||
<p>Sample
|
||
<mark>marked text</mark>
|
||
.
|
||
</p>
|
||
|
||
<br>
|
||
<blockquote class="blockquote">
|
||
<p>The most important moment of your life is now. The most important person in your life is the
|
||
one you are with now,
|
||
and the most important activity in your life is the one you are involved with now.</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Buttons -->
|
||
<div class="container-fluid example-container" data-category="buttons">
|
||
<h1>Buttons</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default buttons</h3>
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<button type="button" class="btn btn-warning">Warning</button>
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<button type="button" class="btn btn-light">Light</button>
|
||
<button type="button" class="btn btn-dark">Dark</button>
|
||
<button type="button" class="btn btn-link">Link</button>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Buttons with outline</h3>
|
||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-outline-info">Info</button>
|
||
<button type="button" class="btn btn-outline-success">Success</button>
|
||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||
<button type="button" class="btn btn-outline-light">Light</button>
|
||
<button type="button" class="btn btn-outline-dark">Dark</button>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Buttons sizes</h3>
|
||
<button type="button" class="btn btn-success btn-sm">Small</button>
|
||
<button type="button" class="btn btn-success">Default</button>
|
||
<button type="button" class="btn btn-success btn-lg">Large</button>
|
||
|
||
<br>
|
||
|
||
<button type="button" class="btn btn-danger btn-lg btn-block">Block level button</button>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Disabled button</h3>
|
||
<p>
|
||
<a href="javascript:void(0);" class="btn btn-primary btn-lg disabled" role="button">The 'a'
|
||
Element</a>
|
||
</p>
|
||
|
||
<p>
|
||
<button type="button" class="btn btn-lg btn-primary" disabled="disabled">The 'button' Element
|
||
</button>
|
||
</p>
|
||
|
||
<p>
|
||
<input type="button" class="btn btn-lg btn-primary" disabled="disabled"
|
||
value="The 'input' Element">
|
||
</p>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Checkbox buttons</h3>
|
||
<div class="btn-group" data-toggle="buttons">
|
||
<label class="btn btn-primary active">
|
||
<input type="checkbox" checked autocomplete="off"> Boots
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox" autocomplete="off"> Shoes
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox" autocomplete="off"> Feet
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Radio buttons</h3>
|
||
<div class="btn-group" data-toggle="buttons">
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="boots" autocomplete="off" checked> Boots
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="shoes" autocomplete="off"> Shoes
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="feet" autocomplete="off"> Feet
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Forms -->
|
||
<div class="container-fluid example-container" data-category="forms">
|
||
<h1>Forms</h1>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default form group</h3>
|
||
<form action="javascript:void(0);">
|
||
<fieldset class="form-group">
|
||
<label for="first_name">First Name</label>
|
||
<input type="text" class="form-control" id="first_name" name="first_name">
|
||
</fieldset>
|
||
<fieldset class="form-group">
|
||
<label for="last_name">Last Name</label>
|
||
<input type="text" class="form-control" id="last_name" name="last_name">
|
||
</fieldset>
|
||
<button type="submit" class="btn btn-default">Submit</button>
|
||
</form>
|
||
</div>
|
||
|
||
<h3>Inline form</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<form action="javascript:void(0);" class="form-inline">
|
||
<label class="mr-sm-2 mb-0" for="first_name">First Name</label>
|
||
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="first_name" name="first_name">
|
||
<label class="mr-sm-2 mb-0" for="last_name">Last Name</label>
|
||
<input type="text" class="form-control mr-sm-2 mb-2 mb-sm-0" id="last_name" name="last_name">
|
||
<button type="submit" class="btn btn-default mt-2 mt-sm-0">Submit</button>
|
||
</form>
|
||
</div>
|
||
|
||
<h3>Aligned form</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<div class="container">
|
||
<form action="javascript:void(0);">
|
||
<div class="form-group row">
|
||
<label for="first_name" class="col-xs-3 col-form-label mr-2">First Name</label>
|
||
<div class="col-xs-9">
|
||
<input type="text" class="form-control" id="first_name" name="first_name">
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label for="last_name" class="col-xs-3 col-form-label mr-2">Last Name</label>
|
||
<div class="col-xs-9">
|
||
<input type="text" class="form-control" id="last_name" name="last_name">
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<div class="offset-xs-3 col-xs-9">
|
||
<button type="submit" class="btn btn-default">Submit</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="container">
|
||
<form action="javascript:void(0);">
|
||
<fieldset class="form-group">
|
||
<div class="row">
|
||
<legend class="col-form-legend col-3">Fruit</legend>
|
||
<div class="col-9">
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="legendRadio"
|
||
id="legendRadio1" value="1"> Apple
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="legendRadio"
|
||
id="legendRadio2" value="2" checked> Orange
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="legendRadio"
|
||
id="legendRadio3" value="3"> Watermelon
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
|
||
<div class="form-group row">
|
||
<label for="first_name" class="col-3 col-form-label">First Name</label>
|
||
<div class="col-9">
|
||
<input type="text" class="form-control" id="first_name" name="first_name">
|
||
</div>
|
||
</div>
|
||
<div class="form-group row">
|
||
<label for="last_name" class="col-3 col-form-label">Last Name</label>
|
||
<div class="col-9">
|
||
<input type="text" class="form-control" id="last_name" name="last_name">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group row">
|
||
<div class="offset-3 col-9">
|
||
<button type="submit" class="btn btn-default">Submit</button>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Form with help text </h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<label for="accountId">Account Id</label>
|
||
<input type="text" id="accountId" class="form-control" aria-describedby="helpAccountId">
|
||
<span id="helpAccountId" class="form-text text-muted">Your account ID is located at the top of your invoice.</span>
|
||
</div>
|
||
|
||
<h3>Checkbox and radio </h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="1"> 1
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="2"> 2
|
||
</label>
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="3"> 3
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1"
|
||
value="1"> 1
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2"
|
||
value="2"> 2
|
||
</label>
|
||
</div>
|
||
|
||
<div class="form-check form-check-inline">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio3"
|
||
value="3"> 3
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Dropdown -->
|
||
<div class="container-fluid example-container" data-category="dropdown">
|
||
<h1>Dropdown</h1>
|
||
|
||
<div class="row">
|
||
<div style="position: relative" class="mt-3 mb-5 col-4">
|
||
<h3>Default dropdown</h3>
|
||
<div class="dropdown">
|
||
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
|
||
data-toggle="dropdown" aria-haspopup="true"
|
||
aria-expanded="false">
|
||
Dropdown button
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||
<a class="dropdown-item" href="javascript:void(0);">Action</a>
|
||
<a class="dropdown-item" href="javascript:void(0);">Another action</a>
|
||
<a class="dropdown-item" href="javascript:void(0);">Something else here</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 mb-5 col-4">
|
||
<h3>Dropdown with menu</h3>
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
About Us
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="about-us">
|
||
<h6 class="dropdown-header">Company Information</h6>
|
||
<a class="dropdown-item" href="javascript:void(0);">Our Story</a>
|
||
<a class="dropdown-item" href="javascript:void(0);">Our Team</a>
|
||
<h6 class="dropdown-header">Contact Us</h6>
|
||
<a class="dropdown-item" href="javascript:void(0);">Call Center</a>
|
||
<a class="dropdown-item" href="javascript:void(0);">Store Locations</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3 mb-5 col-4">
|
||
<h3>Dropdown with divider</h3>
|
||
<div class="dropdown">
|
||
<button class="btn btn-primary dropdown-toggle" type="button" id="about-us"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
About Us
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="about-us">
|
||
<a class="dropdown-item" href="javascript:void(0);">Our Story</a>
|
||
<a class="dropdown-item" href="javascript:void(0);">Our Team</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="javascript:void(0);">Contact Us</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navs -->
|
||
<div class="container-fluid example-container" data-category="navs">
|
||
<h1>Navs</h1>
|
||
|
||
<h3>Default nav</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<ul class="nav">
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0);">HTML</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">CSS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">JavaScript</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Preview</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Horizontal menu</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav class="nav flex-column">
|
||
<a class="nav-link active" href="javascript:void(0);">HTML</a>
|
||
<a class="nav-link" href="javascript:void(0);">CSS</a>
|
||
<a class="nav-link" href="javascript:void(0);">JavaScript</a>
|
||
<a class="nav-link" href="javascript:void(0);">Preview</a>
|
||
</nav>
|
||
</div>
|
||
|
||
<h3>Nav with tabs</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<ul class="nav nav-tabs">
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0);">HTML</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">CSS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">JavaScript</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Preview</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Nav with pills</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<ul class="nav nav-pills">
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0);">HTML</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">CSS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">JavaScript</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Preview</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Horizontal nav with pills</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<ul class="nav nav-pills flex-column">
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="javascript:void(0);">HTML</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">CSS</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">JavaScript</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Preview</a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
|
||
<h3>Nav with tabs and dropdown</h3>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<ul id="clothing-nav" class="nav nav-tabs" role="tablist">
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#home" id="home-tab" role="tab" data-toggle="tab"
|
||
aria-controls="home" aria-expanded="true">Home</a>
|
||
</li>
|
||
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#hats" role="tab" id="hats-tab" data-toggle="tab"
|
||
aria-controls="hats">Hats</a>
|
||
</li>
|
||
|
||
<!-- Dropdown -->
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:void(0);"
|
||
role="button" aria-haspopup="true"
|
||
aria-expanded="false">
|
||
Footwear
|
||
</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab"
|
||
data-toggle="tab" aria-controls="dropdownShoes">Shoes</a>
|
||
<a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab"
|
||
data-toggle="tab" aria-controls="dropdownBoots">Boots</a>
|
||
</div>
|
||
</li>
|
||
|
||
</ul>
|
||
|
||
<!-- Content Panel -->
|
||
<div id="clothing-nav-content" class="tab-content">
|
||
|
||
<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
|
||
<p>Welcome home! Click on the tabs to see the content change.</p>
|
||
</div>
|
||
|
||
<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
|
||
<p>A hat is a head covering. It can be worn for protection against the elements, ceremonial
|
||
reasons, religious reasons,
|
||
safety, or as a fashion accessory.</p>
|
||
</div>
|
||
|
||
<div role="tabpanel" class="tab-pane fade" id="dropdown-shoes"
|
||
aria-labelledby="dropdown-shoes-tab">
|
||
<p>A shoe is an item of footwear intended to protect and comfort the human foot while doing
|
||
various activities. Shoes
|
||
are also used as an item of decoration.</p>
|
||
</div>
|
||
|
||
<div role="tabpanel" class="tab-pane fade" id="dropdown-boots"
|
||
aria-labelledby="dropdown-boots-tab">
|
||
<p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the
|
||
foot and the ankle, while
|
||
some also cover some part of the lower calf. Some boots extend up the leg, sometimes as
|
||
far as the knee or even
|
||
the hip.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navbar -->
|
||
<div class="container-fluid example-container" data-category="navbar">
|
||
<h1>Navbar</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav class="navbar navbar-expand-sm navbar-light bg-faded">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
|
||
aria-controls="nav-content"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Brand -->
|
||
<a class="navbar-brand" href="javascript:void(0);">Logo</a>
|
||
|
||
<!-- Links -->
|
||
<div class="collapse navbar-collapse" id="nav-content">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 1</a>
|
||
</li>
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="javascript:void(0);">Link 2
|
||
<span class="sr-only">(current)</span>
|
||
</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 3</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
</div>
|
||
<div class="mt-3 mb-5">
|
||
<nav class="navbar navbar-expand-sm navbar-light bg-primary">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
|
||
aria-controls="nav-content"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Brand -->
|
||
<a class="navbar-brand" href="javascript:void(0);">Logo</a>
|
||
|
||
<!-- Links -->
|
||
<div class="collapse navbar-collapse" id="nav-content">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 1</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 2</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 3</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content"
|
||
aria-controls="nav-content"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<!-- Brand -->
|
||
<a class="navbar-brand" href="javascript:void(0);">Logo</a>
|
||
|
||
<!-- Links -->
|
||
<div class="collapse navbar-collapse" id="nav-content">
|
||
<ul class="navbar-nav">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 1</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 2</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="javascript:void(0);">Link 3</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!-- Tables -->
|
||
<div class="container-fluid example-container" data-category="tables">
|
||
<h1>Tables</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default table</h3>
|
||
<div>
|
||
<table class="table">
|
||
<thead>
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table inverse</h3>
|
||
<table class="table table-inverse">
|
||
<thead>
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table striped</h3>
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table with border</h3>
|
||
<table class="table table-bordered">
|
||
<thead>
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table with hover</h3>
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table with Head with default color</h3>
|
||
<table class="table">
|
||
<thead class="thead-default">
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Table with inverse Head color</h3>
|
||
<table class="table">
|
||
<thead class="thead-inverse">
|
||
<tr>
|
||
<th>Header 1</th>
|
||
<th>Header 2</th>
|
||
<th>Header 3</th>
|
||
</tr>
|
||
</thead>
|
||
<tfoot>
|
||
<tr>
|
||
<th>Footer 1</th>
|
||
<th>Footer 2</th>
|
||
<th>Footer 3</th>
|
||
</tr>
|
||
</tfoot>
|
||
<tbody>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
<td>Cell</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="container-fluid example-container" data-category="pagination">
|
||
<h1>Pagination</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav>
|
||
<ul class="pagination">
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">6</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">7</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav>
|
||
<ul class="pagination">
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a href="javascript:void(0);" class="page-link">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">6</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">7</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav>
|
||
<ul class="pagination pagination-lg">
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">6</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">7</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav>
|
||
<ul class="pagination">
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">6</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">7</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<nav>
|
||
<ul class="pagination pagination-sm">
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Previous">
|
||
<span aria-hidden="true">«</span>
|
||
</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">6</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link">7</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a href="javascript:void(0);" class="page-link" aria-label="Next">
|
||
<span aria-hidden="true">»</span>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Jumbotron -->
|
||
<div class="container-fluid example-container" data-category="jumbotron">
|
||
<h1>Jumbotron</h1>
|
||
|
||
<div class="container">
|
||
<div class="jumbotron">
|
||
<h1>Container size jumboton</h1>
|
||
<p>Think BIG with a Bootstrap Jumbotron!</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<div class="jumbotron jumbotron-fluid">
|
||
<div class="container">
|
||
<h1>Container fluid size jumbotron</h1>
|
||
<p>Think BIG with a Bootstrap Jumbotron!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cards -->
|
||
<div class="container-fluid example-container" data-category="cards">
|
||
<h1>Cards</h1>
|
||
<div class="row mb-3">
|
||
<div class="col-3">
|
||
<div class="card card-body">
|
||
<h4 class="card-title">Boot Polish</h4>
|
||
<p class="card-text">Boot polish is a waxy paste, cream, or liquid used to polish, shine,
|
||
and waterproof leather shoes or boots to extend
|
||
the footwear's life, and restore, maintain and improve their appearance.</p>
|
||
<a href="javascript:void(0);" class="btn btn-primary">More</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-3">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Sun Gone</h4>
|
||
<p class="card-text">Here are the top resources for all things related to the Sun.</p>
|
||
<a href="javascript:void(0);" class="card-link">Sun Gone</a>
|
||
<a href="javascript:void(0);" class="card-link">Still Gone</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-3">
|
||
<div class="card text-center">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Sun Gone</h4>
|
||
<h6 class="card-subtitle text-muted">Sun disappears!</h6>
|
||
</div>
|
||
<img src="https://via.placeholder.com/300x150" alt="Photo of sunset">
|
||
|
||
<div class="card-body">
|
||
<p class="card-text">The sun disappeared behind the horizon today. Experts claim it
|
||
could be gone for good!</p>
|
||
<a href="javascript:void(0);" class="btn btn-primary">Full Report</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-3">
|
||
<div class="card">
|
||
<div class="card-header">
|
||
Sponsored Content
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Ugg Boots</h4>
|
||
<p class="card-text">Best ugg boots on the planet. Free shipping, 24/7 customer
|
||
service.</p>
|
||
</div>
|
||
<div class="card-footer">
|
||
By boots.com
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="row mb-3">
|
||
<div class="col-12">
|
||
<div class="card-group">
|
||
<div class="card">
|
||
<div class="card-header">Sun Gone</div>
|
||
<div class="card-body">
|
||
<p class="card-text">The top resources for all things related to the Sun.</p>
|
||
<a href="javascript:void(0);" class="card-link">Sun Gone</a>
|
||
<a href="javascript:void(0);" class="card-link">Still Gone</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<div class="card-header">Sun Up</div>
|
||
<div class="card-body">
|
||
<p class="card-text">Looks like the Sun has returned. Here's
|
||
<a href="javascript:void(0);" class="card-link">why</a>.</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tooltip -->
|
||
<div class="container-fluid example-container" data-category="tooltip">
|
||
<h1>Tooltip</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Inline tooltip</h3>
|
||
<p style="margin:40px;">Check out my
|
||
<a target="_blank" href="javascript:void(0);" data-toggle="tooltip" data-placement="top"
|
||
title="Build advanced layouts easily with CSS!">Grid tutorial</a>, as you never know when you
|
||
might need it!</p>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>All position tooltip</h3>
|
||
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top"
|
||
title="Top shoes" style="margin:20px;">
|
||
Shoes
|
||
</button>
|
||
<button type="button" class="btn btn-info" data-toggle="tooltip" data-placement="right"
|
||
title="Right boot" style="margin:20px;">
|
||
Boots
|
||
</button>
|
||
<button type="button" class="btn btn-warning" data-toggle="tooltip" data-placement="bottom"
|
||
title="Bottom uggs" style="margin:20px;">
|
||
Ugg
|
||
</button>
|
||
<button type="button" class="btn btn-success" data-toggle="tooltip" data-placement="left"
|
||
title="Left sock" style="margin:20px;">
|
||
Socks
|
||
</button>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Popovers -->
|
||
<div class="container-fluid example-container" data-category="popovers">
|
||
<h1>Popovers</h1>
|
||
<div class="mt-3 mb-5">
|
||
<h3>All popover position</h3>
|
||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
|
||
data-placement="top"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on top
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
|
||
data-placement="right"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on right
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
|
||
data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on bottom
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover"
|
||
data-placement="left"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on left
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Badges -->
|
||
<div class="container-fluid example-container" data-category="badges">
|
||
<h1>Badges</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Badge heading</h3>
|
||
<h1>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h1>
|
||
<h2>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h2>
|
||
<h3>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h3>
|
||
<h4>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h4>
|
||
<h5>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h5>
|
||
<h6>Example heading
|
||
<span class="badge badge-secondary">New</span>
|
||
</h6>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Button with inline badge</h3>
|
||
<button type="button" class="btn btn-primary">
|
||
Notifications
|
||
<span class="badge badge-light">4</span>
|
||
</button>
|
||
<button type="button" class="btn btn-primary">
|
||
Profile
|
||
<span class="badge badge-light">9</span>
|
||
<span class="sr-only">unread messages</span>
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default badges</h3>
|
||
<span class="badge badge-primary">Primary</span>
|
||
<span class="badge badge-secondary">Secondary</span>
|
||
<span class="badge badge-success">Success</span>
|
||
<span class="badge badge-danger">Danger</span>
|
||
<span class="badge badge-warning">Warning</span>
|
||
<span class="badge badge-info">Info</span>
|
||
<span class="badge badge-light">Light</span>
|
||
<span class="badge badge-dark">Dark</span>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Badges pill</h3>
|
||
<span class="badge badge-pill badge-primary">Primary</span>
|
||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||
<span class="badge badge-pill badge-success">Success</span>
|
||
<span class="badge badge-pill badge-danger">Danger</span>
|
||
<span class="badge badge-pill badge-warning">Warning</span>
|
||
<span class="badge badge-pill badge-info">Info</span>
|
||
<span class="badge badge-pill badge-light">Light</span>
|
||
<span class="badge badge-pill badge-dark">Dark</span>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Badges with link</h3>
|
||
<a href="javascript:void(0);" class="badge badge-primary">Primary</a>
|
||
<a href="javascript:void(0);" class="badge badge-secondary">Secondary</a>
|
||
<a href="javascript:void(0);" class="badge badge-success">Success</a>
|
||
<a href="javascript:void(0);" class="badge badge-danger">Danger</a>
|
||
<a href="javascript:void(0);" class="badge badge-warning">Warning</a>
|
||
<a href="javascript:void(0);" class="badge badge-info">Info</a>
|
||
<a href="javascript:void(0);" class="badge badge-light">Light</a>
|
||
<a href="javascript:void(0);" class="badge badge-dark">Dark</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Modals -->
|
||
<div class="container-fluid example-container" data-category="modals">
|
||
<h1>Modals</h1>
|
||
|
||
<div class="mt-3 mb-5 row">
|
||
<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
|
||
data-target="#flipFlop">
|
||
Default Modal
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
|
||
data-target="#largeShoes">
|
||
Large Modal
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-primary btn-lg col-3 mr-3 ml-3" data-toggle="modal"
|
||
data-target="#smallShoes">
|
||
Small Modal
|
||
</button>
|
||
|
||
<!-- The modal -->
|
||
<div class="modal fade" id="smallShoes" tabindex="-1" role="dialog"
|
||
aria-labelledby="modalLabelSmall" aria-hidden="true">
|
||
<div class="modal-dialog modal-sm">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabelSmall">Small Shoes</h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
Small shoes are typically worn by people with small feet.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- The modal -->
|
||
<div class="modal fade" id="largeShoes" tabindex="-1" role="dialog"
|
||
aria-labelledby="modalLabelLarge" aria-hidden="true">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabelLarge">Large Shoes</h4>
|
||
</div>
|
||
|
||
<div class="modal-body">
|
||
Large shoes are usually avoided by people with small feet.
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- The modal -->
|
||
<div class="modal fade" id="flipFlop" tabindex="-1" role="dialog" aria-labelledby="modalLabel"
|
||
aria-hidden="true">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabel">Flip-flop</h4>
|
||
</div>
|
||
<div class="modal-body">
|
||
A type of open-toed sandal.
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Alerts -->
|
||
<div class="container-fluid example-container" data-category="alerts">
|
||
<h1>Alerts</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default alert</h3>
|
||
<div class="alert alert-success" role="alert">Success alert</div>
|
||
<div class="alert alert-info" role="alert">Info alert</div>
|
||
<div class="alert alert-warning" role="alert">Warning alert</div>
|
||
<div class="alert alert-danger" role="alert">Danger alert</div>
|
||
<div class="alert alert-light" role="alert">Light alert</div>
|
||
<div class="alert alert-dark" role="alert">Dark alert</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Dismissible alert</h3>
|
||
<div class="alert alert-success alert-dismissible" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Congratulations!</strong> You successfully tied your shoelace!
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Dismissible alert with fade</h3>
|
||
<div class="alert alert-success alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Congratulations!</strong> You successfully tied your shoelace!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress bars -->
|
||
<div class="container-fluid example-container" data-category="progress-bars">
|
||
<h1>Progress bars</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default Progress bar</h3>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%" aria-valuenow="25"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%" aria-valuenow="50"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%" aria-valuenow="75"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%" aria-valuenow="100"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-light" role="progressbar" style="width: 40%" aria-valuenow="40"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-dark" role="progressbar" style="width: 80%" aria-valuenow="80"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Striped Progress bar </h3>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
|
||
aria-valuenow="10" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar" style="width: 25%"
|
||
aria-valuenow="25" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 50%"
|
||
aria-valuenow="50" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar" style="width: 75%"
|
||
aria-valuenow="75" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar" style="width: 100%"
|
||
aria-valuenow="100" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-light" role="progressbar" style="width: 40%"
|
||
aria-valuenow="40" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<br>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-dark" role="progressbar" style="width: 80%"
|
||
aria-valuenow="80" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Animated Progress bar</h3>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
|
||
aria-valuenow="75" aria-valuemin="0"
|
||
aria-valuemax="100" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- List group -->
|
||
<div class="container-fluid example-container" data-category="list-group">
|
||
<h1>List group</h1>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default list group</h3>
|
||
<ul class="list-group">
|
||
<li class="list-group-item">These Boots Are Made For Walking</li>
|
||
<li class="list-group-item">Eleanor, Put Your Boots On</li>
|
||
<li class="list-group-item">Puss 'n' Boots</li>
|
||
<li class="list-group-item">Die With Your Boots On</li>
|
||
<li class="list-group-item">Fairies Wear Boots</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>List group with pills</h3>
|
||
<ul class="list-group">
|
||
<li class="list-group-item justify-content-between">
|
||
These Boots Are Made For Walking
|
||
<span class="badge badge-secondary badge-pill">15</span>
|
||
</li>
|
||
<li class="list-group-item justify-content-between">
|
||
Eleanor, Put Your Boots On
|
||
<span class="badge badge-secondary badge-pill">38</span>
|
||
</li>
|
||
<li class="list-group-item justify-content-between">
|
||
Puss 'n' Boots
|
||
<span class="badge badge-secondary badge-pill">76</span>
|
||
</li>
|
||
<li class="list-group-item justify-content-between">
|
||
Die With Your Boots On
|
||
<span class="badge badge-secondary badge-pill">112</span>
|
||
</li>
|
||
<li class="list-group-item justify-content-between">
|
||
Fairies Wear Boots
|
||
<span class="badge badge-secondary badge-pill">181</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Link List group</h3>
|
||
<div class="list-group">
|
||
<a href="javascript:void(0);" class="list-group-item list-group-item-action">These Boots Are
|
||
Made For Walking</a>
|
||
<a href="javascript:void(0);" class="list-group-item list-group-item-action active">Eleanor, Put
|
||
Your Boots On</a>
|
||
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Puss 'n' Boots</a>
|
||
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Die With Your Boots
|
||
On</a>
|
||
<a href="javascript:void(0);" class="list-group-item list-group-item-action">Fairies Wear
|
||
Boots</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Button List group</h3>
|
||
<div class="list-group">
|
||
<button type="button" class="list-group-item list-group-item-action">These Boots Are Made For
|
||
Walking
|
||
</button>
|
||
<button type="button" class="list-group-item list-group-item-action active">Eleanor, Put Your
|
||
Boots On
|
||
</button>
|
||
<button type="button" class="list-group-item list-group-item-action">Puss 'n' Boots</button>
|
||
<button type="button" class="list-group-item list-group-item-action">Die With Your Boots On
|
||
</button>
|
||
<button type="button" class="list-group-item list-group-item-action">Fairies Wear Boots</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>List group with colors</h3>
|
||
<div class="list-group">
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-success">These Boots Are Made
|
||
For Walking</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-success active">Eleanor, Put
|
||
Your Boots On</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-info">Puss 'n' Boots</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-warning">Die With Your Boots
|
||
On</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-danger">Fairies Wear Boots</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-light">Head Over Boots</a>
|
||
<a href="javascript:void(0);"
|
||
class="list-group-item list-group-item-action list-group-item-dark">Boot Scootin' Boogie</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Image thumbnails -->
|
||
<div class="container-fluid example-container" data-category="image-thumbnails">
|
||
<h1>Image thumbnails </h1>
|
||
|
||
<div>
|
||
<img src="https://via.placeholder.com/100x100" class="rounded" alt="Sample image">
|
||
<img src="https://via.placeholder.com/100x100" class="rounded-circle" alt="Sample image">
|
||
<img src="https://via.placeholder.com/100x100" class="img-thumbnail" alt="Sample image">
|
||
<img src="https://via.placeholder.com/100x100" class="rounded-top" alt="Sample image">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Figures -->
|
||
<div class="container-fluid example-container" data-category="figures">
|
||
<h1>Figures</h1>
|
||
|
||
<div>
|
||
<figure class="figure">
|
||
<img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
|
||
alt="A generic square placeholder image with rounded corners in a figure.">
|
||
<figcaption class="figure-caption">A caption for the above image.</figcaption>
|
||
</figure>
|
||
</div>
|
||
|
||
<div>
|
||
<figure class="figure">
|
||
<img src="https://via.placeholder.com/400x300" class="figure-img img-fluid rounded"
|
||
alt="A generic square placeholder image with rounded corners in a figure.">
|
||
<figcaption class="figure-caption text-right">A caption for the above image.</figcaption>
|
||
</figure>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Breadcrumbs -->
|
||
<div class="container-fluid example-container" data-category="breadcrumbs">
|
||
<h1>Breadcrumbs</h1>
|
||
|
||
<div>
|
||
<ul class="breadcrumb">
|
||
<li class="breadcrumb-item">
|
||
<a href="javascript:void(0);">Home</a>
|
||
</li>
|
||
<li class="breadcrumb-item">
|
||
<a href="javascript:void(0);">Fruit</a>
|
||
</li>
|
||
<li class="breadcrumb-item active">Pears</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Carousel -->
|
||
<div class="container-fluid example-container" data-category="carousel">
|
||
<h1>Carousel</h1>
|
||
|
||
<div>
|
||
<div id="myCarousel" class="carousel slide bg-inverse w-50 ml-auto mr-auto" data-ride="carousel">
|
||
<ol class="carousel-indicators">
|
||
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
|
||
<li data-target="#myCarousel" data-slide-to="1"></li>
|
||
<li data-target="#myCarousel" data-slide-to="2"></li>
|
||
</ol>
|
||
<div class="carousel-inner" role="listbox">
|
||
<div class="carousel-item active">
|
||
<img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="First slide">
|
||
<div class="carousel-caption">
|
||
<h3>First slide</h3>
|
||
<p>This is the first slide.</p>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img class="d-block w-100" src="https://via.placeholder.com/1280x720"
|
||
alt="Second slide">
|
||
<div class="carousel-caption">
|
||
<h3>Second slide</h3>
|
||
<p>This is the second slide.</p>
|
||
</div>
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img class="d-block w-100" src="https://via.placeholder.com/1280x720" alt="Third slide">
|
||
<div class="carousel-caption">
|
||
<h3>Third slide</h3>
|
||
<p>This is the third slide.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span class="sr-only">Previous</span>
|
||
</a>
|
||
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
|
||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span class="sr-only">Next</span>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Close -->
|
||
<div class="container-fluid example-container" data-category="close">
|
||
<h1>Close</h1>
|
||
<button type="button" class="close" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Code -->
|
||
<div class="container-fluid example-container" data-category="code">
|
||
<h1>Code</h1>
|
||
<div class="mt-3 mb-5">
|
||
<h3>Default code</h3>
|
||
For example,
|
||
<code><section></code> should be wrapped as inline.
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Code with pre tag</h3>
|
||
<pre>
|
||
<code>
|
||
<p>Sample text here...</p>
|
||
<p>And another line of sample text here...</p>
|
||
</code>
|
||
</pre>
|
||
</div>
|
||
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Var tag</h3>
|
||
<var>y</var> =
|
||
<var>m</var>
|
||
<var>x</var> +
|
||
<var>b</var>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Kbd tag</h3>
|
||
To switch directories, type
|
||
<kbd>cd</kbd> followed by the name of the directory.
|
||
<br> To edit settings, press
|
||
<kbd>
|
||
<kbd>ctrl</kbd> +
|
||
<kbd>,</kbd>
|
||
</kbd>
|
||
</div>
|
||
|
||
<div class="mt-3 mb-5">
|
||
<h3>Samp tag</h3>
|
||
<samp>This text is meant to be treated as sample output from a computer program.</samp>
|
||
</div>
|
||
|
||
<div class="pt-5 pb-5 mb-5 mt-3"></div>
|
||
<div class="pt-5 pb-5 mb-5 mt-3"></div>
|
||
<div class="pt-5 pb-5 mb-5 mt-3"></div>
|
||
<div class="pt-5 pb-5 mb-5 mt-3"></div>
|
||
<div class="pt-5 pb-5 mb-5 mt-3"></div>
|
||
</div>
|
||
<div class="ht-tm-cat">
|
||
<a id="alerts" class="ht-anchor">Alerts</a>
|
||
<h5 class="ht-tm-cat-title">Alerts</h5>
|
||
|
||
|
||
<div class="ht-tm-codeblock ht-tm-needs-darkness">
|
||
<div class="ht-tm-element alert alert-primary" role="alert">
|
||
<strong>Well done!</strong> You successfully read this
|
||
important alert message.
|
||
</div>
|
||
|
||
<div class="ht-tm-element alert alert-primary alert-dismissible fade show" role="alert">
|
||
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
<strong>Well done!</strong> You can dismiss this message with the X button.
|
||
</div>
|
||
|
||
<div class="ht-tm-element alert alert-primary" role="alert">
|
||
<h4 class="alert-heading">Well done!</h4>
|
||
You successfully read this important alert message.
|
||
<a href="#!" class="alert-link">It contains a link and heading.</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div> <!--alerts -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="badges" class="ht-anchor">Badges</a>
|
||
<h5 class="ht-tm-cat-title">Badges</h5>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-needs-darkness">
|
||
<span class="ht-tm-element badge badge-primary">Regular Badge</span>
|
||
<span class="ht-tm-element badge badge-pill badge-primary">Pill Badge</span>
|
||
<a href="#!" class="ht-tm-element badge badge-primary">Link Badge</a>
|
||
</div>
|
||
</div> <!-- Badges -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="buttons" class="ht-anchor"></a>
|
||
<h5 class="ht-tm-cat-title">Buttons</h5>
|
||
|
||
<div class="ht-tm-needs-darkness">
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-primary">Default Button</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary"><span
|
||
class="fas fa-download mr-2"></span>With Icon</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary"><span
|
||
class="fas fa-download"></span></a>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">Outline Button</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fas fa-download mr-2"></span>
|
||
With Icon</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fas fa-download"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-twitter mr-2"></span>
|
||
Tweet</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-twitter"></span></a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-facebook mr-2"></span>
|
||
Share</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-facebook"></span></a>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-twitter mr-2"></span>
|
||
Tweet</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-twitter"></span></a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-facebook mr-2"></span>
|
||
Share</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-facebook"></span></a>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-instagram mr-2"></span>
|
||
Instagram</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-instagram"></span></a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-github mr-2"></span>
|
||
Git</a>
|
||
<a href="#!" class="ht-tm-element btn btn-primary">
|
||
<span class="fab fa-github"></span></a>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-instagram mr-2"></span>
|
||
Instagram</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-instagram"></span></a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-github mr-2"></span>
|
||
Git</a>
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary">
|
||
<span class="fab fa-github"></span></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-primary btn-block">Block level button</a>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<a href="#!" class="ht-tm-element btn btn-outline-primary btn-block">Block level
|
||
button</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h6 class="ht-tm-cat-subtitle">Dropdowns</h6>
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="ht-tm-element btn-group">
|
||
<button type="button" class="btn btn-primary dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false">
|
||
Action
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#!">Action</a>
|
||
<a class="dropdown-item" href="#!">Another action</a>
|
||
<a class="dropdown-item" href="#!">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#!">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-element btn-group">
|
||
<button type="button" class="btn btn-primary">Action</button>
|
||
<button type="button"
|
||
class="btn btn-primary dropdown-toggle dropdown-toggle-split"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#!">Action</a>
|
||
<a class="dropdown-item" href="#!">Another action</a>
|
||
<a class="dropdown-item" href="#!">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#!">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="ht-tm-element btn-group">
|
||
<button type="button" class="btn btn-outline-primary dropdown-toggle"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Action
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#!">Action</a>
|
||
<a class="dropdown-item" href="#!">Another action</a>
|
||
<a class="dropdown-item" href="#!">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#!">Separated link</a>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-element btn-group">
|
||
<button type="button" class="btn btn-outline-primary">Action</button>
|
||
<button type="button"
|
||
class="btn btn-outline-primary dropdown-toggle dropdown-toggle-split"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
<span class="sr-only">Toggle Dropdown</span>
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#!">Action</a>
|
||
<a class="dropdown-item" href="#!">Another action</a>
|
||
<a class="dropdown-item" href="#!">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#!">Separated link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<h6 class="ht-tm-cat-subtitle">Grouping them</h6>
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group">
|
||
<a href="#!" class="btn btn-primary">One</a>
|
||
<a href="#!" class="btn btn-primary">Two</a>
|
||
<a href="#!" class="btn btn-primary">Three</a>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group" role="group"
|
||
aria-label="Button group with nested dropdown">
|
||
<a href="#!" class="btn btn-primary">One</a>
|
||
<a href="#!" class="btn btn-primary">Two</a>
|
||
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop5" type="button"
|
||
class="btn btn-primary dropdown-toggle"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop5">
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group-vertical" role="group"
|
||
aria-label="Basic example">
|
||
<a href="#!" class="btn btn-primary">Seven</a>
|
||
<a href="#!" class="btn btn-primary">Eleven</a>
|
||
</div>
|
||
|
||
<div class="ht-tm-element btn-group-vertical" role="group"
|
||
aria-label="Button group with nested dropdown">
|
||
<a href="#!" class="btn btn-primary">Seven</a>
|
||
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop3" type="button"
|
||
class="btn btn-primary dropdown-toggle"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group">
|
||
<a href="#!" class="btn btn-outline-primary">One</a>
|
||
<a href="#!" class="btn btn-outline-primary">Two</a>
|
||
<a href="#!" class="btn btn-outline-primary">Three</a>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group" role="group"
|
||
aria-label="Button group with nested dropdown">
|
||
<a href="#!" class="btn btn-outline-primary">One</a>
|
||
<a href="#!" class="btn btn-outline-primary">Two</a>
|
||
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop1" type="button"
|
||
class="btn btn-outline-primary dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element btn-group-vertical" role="group"
|
||
aria-label="Basic example">
|
||
<a href="#!" class="btn btn-outline-primary">Seven</a>
|
||
<a href="#!" class="btn btn-outline-primary">Eleven</a>
|
||
</div>
|
||
|
||
<div class="ht-tm-element btn-group-vertical" role="group"
|
||
aria-label="Button group with nested dropdown">
|
||
<a href="#!" class="btn btn-outline-primary">Seven</a>
|
||
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop2" type="button"
|
||
class="btn btn-outline-primary dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
<a class="dropdown-item" href="#!">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h6 class="ht-tm-cat-subtitle">Checkboxes and Radios</h6>
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-primary active">
|
||
<input type="checkbox" checked="" autocomplete="off"> Checkbox 1
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||
</label>
|
||
</div>
|
||
<div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-primary active">
|
||
<input type="radio" name="options" id="option-1" autocomplete="off"
|
||
checked="">
|
||
Radio 1
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="option-2" autocomplete="off"> Radio 2
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-outline-primary active">
|
||
<input type="checkbox" checked="" autocomplete="off"> Checkbox 1
|
||
</label>
|
||
<label class="btn btn-outline-primary">
|
||
<input type="checkbox" autocomplete="off"> Checkbox 2
|
||
</label>
|
||
</div>
|
||
<div class="ht-tm-element btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-outline-primary active">
|
||
<input type="radio" name="options" id="radio-option-1" autocomplete="off"
|
||
checked=""> Radio 1
|
||
</label>
|
||
<label class="btn btn-outline-primary">
|
||
<input type="radio" name="options" id="radio-option-2" autocomplete="off">
|
||
Radio
|
||
2
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div> <!-- buttons -->
|
||
|
||
<div class="ht-tm-cat ht-tm-btn-replaceable">
|
||
<a id="cards" class="ht-anchor">Cards</a>
|
||
|
||
<h5 class="ht-tm-cat-title">Cards</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element card bg-primary text-white mb-3 text-center">
|
||
<div class="card-body">
|
||
<blockquote class="card-blockquote">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
|
||
erat
|
||
a ante. Integer posuere erat a ante.</p>
|
||
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element card">
|
||
<img class="card-img-top" src=""
|
||
alt="Card image cap">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the card's content.</p>
|
||
<a href="#!" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="card ht-tm-element">
|
||
<div class="card-header">
|
||
Quote
|
||
</div>
|
||
<div class="card-body">
|
||
<blockquote class="card-blockquote">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
|
||
erat
|
||
a ante.</p>
|
||
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-lg-6">
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element card border-primary mb-3 text-center">
|
||
<div class="card-body">
|
||
<blockquote class="card-blockquote">
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
|
||
erat
|
||
a ante.</p>
|
||
<footer>Someone famous in <cite title="Source Title">Source Title</cite>
|
||
</footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn">
|
||
<div class="ht-tm-element card text-center">
|
||
<div class="card-header">
|
||
Featured
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Special title treatment</h4>
|
||
<p class="card-text">With supporting text below as a natural lead-in to
|
||
additional
|
||
content.</p>
|
||
<a href="#!" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
<div class="card-footer text-muted">
|
||
2 days ago
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="card ht-tm-element">
|
||
<img class="card-img-top" src=""
|
||
alt="Card image cap">
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item list-group-item-action">Cras justo odio</li>
|
||
<li class="list-group-item list-group-item-action">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item list-group-item-action">Vestibulum at eros</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
|
||
<div class="card text-center ht-tm-element">
|
||
<div class="card-header">
|
||
<ul class="nav nav-tabs card-header-tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#!">Active</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#!">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Special title treatment</h4>
|
||
<p class="card-text">With supporting text below as a natural lead-in to additional
|
||
content.</p>
|
||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div> <!-- cards -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="carousel" class="ht-anchor">Carousel</a>
|
||
<h5 class="ht-tm-cat-title">Carousel</h5>
|
||
<div id="carouselExampleControls" class="ht-tm-element carousel slide" data-ride="carousel">
|
||
<div class="carousel-inner" role="listbox">
|
||
<div class="carousel-item active">
|
||
<img class="d-block img-fluid" src=""
|
||
alt="First slide">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img class="d-block img-fluid" src=""
|
||
alt="Second slide">
|
||
</div>
|
||
<div class="carousel-item">
|
||
<img class="d-block img-fluid" src=""
|
||
alt="Third slide">
|
||
</div>
|
||
</div>
|
||
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
|
||
data-slide="prev">
|
||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||
<span class="sr-only">Previous</span>
|
||
</a>
|
||
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
|
||
data-slide="next">
|
||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||
<span class="sr-only">Next</span>
|
||
</a>
|
||
</div>
|
||
</div> <!-- carousel -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="forms" class="ht-anchor">Forms</a>
|
||
<h5 class="ht-tm-cat-title">Forms</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h6 class="card-title">Start with a small group form</h6>
|
||
|
||
<div
|
||
class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-element ht-tm-element-inner">
|
||
<form>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1"
|
||
aria-describedby="emailHelp" placeholder="Enter email">
|
||
<small id="emailHelp" class="form-text text-muted">We'll never share
|
||
your
|
||
email</small>
|
||
</div>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="card">
|
||
<div class="card-body ht-tm-superspecialcardcheat">
|
||
|
||
<h6 class="card-title">Or with an inline form</h6>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable">
|
||
<form class="form-inline ht-tm-element">
|
||
<label class="sr-only" for="inlineFormInputGroup">Username</label>
|
||
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
|
||
<input type="text" class="form-control" id="inlineFormInputGroup"
|
||
placeholder="Username">
|
||
</div>
|
||
|
||
<button type="submit" class="btn btn-primary">Go</button>
|
||
</form>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<form autocomplete="off">
|
||
|
||
<h6 class="card-title">Add some extras too..</h6>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="text" value="Text input"
|
||
id="example-text-input">
|
||
</div>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="email" value="email@example.com"
|
||
id="example-email-input">
|
||
</div>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="url" value="https://getbootstrap.com"
|
||
id="example-url-input">
|
||
</div>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="date" value="2011-08-19"
|
||
id="example-date-input">
|
||
</div>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="password" value="hunter2"
|
||
id="example-password-input">
|
||
</div>
|
||
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<input class="form-control" type="number" value="42"
|
||
id="example-number-input">
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-xl-6">
|
||
|
||
<div class="card">
|
||
<div class="card-body">
|
||
|
||
<h6 class="card-title">Even more form controls</h6>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" id="customCheck1">
|
||
<label class="custom-control-label" for="customCheck1">Check this custom
|
||
checkbox</label>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element custom-control custom-radio">
|
||
<input type="radio" id="customRadio1" name="customRadio"
|
||
class="custom-control-input">
|
||
<label class="custom-control-label" for="customRadio1">Toggle this
|
||
custom
|
||
radio</label>
|
||
</div>
|
||
<div class="ht-tm-element custom-control custom-radio">
|
||
<input type="radio" id="customRadio2" name="customRadio"
|
||
class="custom-control-input">
|
||
<label class="custom-control-label" for="customRadio2">Or toggle this
|
||
other
|
||
custom radio</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element ht-tm-element-inner d-inline-block">
|
||
<select class="custom-select">
|
||
<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>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element custom-file">
|
||
<input type="file" class="custom-file-input" id="customFile">
|
||
<label class="custom-file-label" for="customFile">Choose file</label>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row ht-tm-btn-replaceable ht-tm-needs-darkness">
|
||
<div class="col-xl-6">
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group mb-3">
|
||
<input type="text" class="form-control" placeholder="Recipient's username"
|
||
aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-primary" type="button">Go!</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-primary" type="button">Go!</button>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="" aria-label=""
|
||
aria-describedby="basic-addon1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-primary" type="button">Love it</button>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="" aria-label=""
|
||
aria-describedby="basic-addon1">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-primary" type="button">Hate it</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-primary dropdown-toggle" type="button"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false">Dropdown
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control"
|
||
aria-label="Text input with dropdown button">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xl-6">
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group mb-3">
|
||
<input type="text" class="form-control" placeholder="Recipient's username"
|
||
aria-label="Recipient's username" aria-describedby="basic-addon2">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-outline-primary" type="button">Go!</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-outline-primary" type="button">Go!</button>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="" aria-label=""
|
||
aria-describedby="basic-addon1">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-outline-primary" type="button">Love it</button>
|
||
</div>
|
||
<input type="text" class="form-control" placeholder="" aria-label=""
|
||
aria-describedby="basic-addon1">
|
||
<div class="input-group-append">
|
||
<button class="btn btn-outline-primary" type="button">Hate it</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element input-group">
|
||
<div class="input-group-prepend">
|
||
<button class="btn btn-outline-primary dropdown-toggle" type="button"
|
||
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
||
Dropdown
|
||
</button>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
</div>
|
||
</div>
|
||
<input type="text" class="form-control"
|
||
aria-label="Text input with dropdown button">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div> <!-- forms -->
|
||
|
||
<div class="ht-tm-cat ht-tm-btn-replaceable">
|
||
<a id="jumbotron" class="ht-anchor">Jumbotron</a>
|
||
<h5 class="ht-tm-cat-title">Jumbotron</h5>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element jumbotron">
|
||
<h1 class="display-3">Hello, world!</h1>
|
||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling
|
||
extra
|
||
attention to featured content or information.</p>
|
||
<hr class="my-4">
|
||
<p>It uses utility classes for typography and spacing to space content out within the larger
|
||
container.</p>
|
||
<p class="lead">
|
||
<a class="btn btn-primary" href="#!" role="button">Learn more</a>
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div> <!-- jumbotron -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="lists" class="ht-anchor">Lists</a>
|
||
<h5 class="ht-tm-cat-title">
|
||
Lists
|
||
</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock">
|
||
<ul class="list-group ht-tm-element">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item">Porta ac consectetur ac</li>
|
||
<li class="list-group-item justify-content-between">
|
||
Cras justo odio
|
||
<span class="badge badge-default badge-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
<li class="list-group-item list-group-item-primary">Dapibus ac facilisis in</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock">
|
||
<div class="list-group ht-tm-element">
|
||
<a href="#!" class="list-group-item active">
|
||
Cras justo odio
|
||
</a>
|
||
<a href="#!" class="list-group-item list-group-item-action">Dapibus ac facilisis
|
||
in</a>
|
||
<a href="#!" class="list-group-item list-group-item-action">Morbi leo risus</a>
|
||
<a href="#!" class="list-group-item list-group-item-action justify-content-between">
|
||
Cras justo odio
|
||
<span class="badge badge-default badge-pill">14</span>
|
||
</a>
|
||
<a href="#!" class="list-group-item list-group-item-action">Porta ac consectetur
|
||
ac</a>
|
||
<a href="#!" class="list-group-item list-group-item-action list-group-item-primary">Vestibulum
|
||
at eros</a>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- lists -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="navigation" class="ht-anchor">Navigation</a>
|
||
<h5 class="ht-tm-cat-title">Navigation</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-lg-6">
|
||
<div class="ht-tm-codeblock">
|
||
<ul class="nav nav-tabs ht-tm-element">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#!">Active</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#!">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-lg-6">
|
||
<div class="ht-tm-codeblock">
|
||
<ul class="nav nav-pills ht-tm-element">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#!">Active</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#!">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary ht-tm-element">
|
||
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
|
||
data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03"
|
||
aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<a class="navbar-brand" href="#!">Navbar</a>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
|
||
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#!">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#!">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#!">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline my-2 my-lg-0">
|
||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||
</form>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
</div> <!-- navigation -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="pagination" class="ht-anchor">Pagination</a>
|
||
<h5 class="ht-tm-cat-title">Pagination</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
|
||
<nav aria-label="Page navigation example">
|
||
<ul class="pagination">
|
||
<li class="page-item"><a class="page-link" href="#!">Previous</a></li>
|
||
<li class="page-item"><a class="page-link" href="#!">1</a></li>
|
||
<li class="page-item"><a class="page-link" href="#!">2</a></li>
|
||
<li class="page-item"><a class="page-link" href="#!">3</a></li>
|
||
<li class="page-item"><a class="page-link" href="#!">Next</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock ht-tm-element ht-tm-element-inner">
|
||
<nav aria-label="...">
|
||
<ul class="pagination">
|
||
<li class="page-item disabled">
|
||
<span class="page-link">Previous</span>
|
||
</li>
|
||
<li class="page-item"><a class="page-link" href="#!">1</a></li>
|
||
<li class="page-item active">
|
||
<span class="page-link">
|
||
2
|
||
<span class="sr-only">(current)</span>
|
||
</span>
|
||
</li>
|
||
<li class="page-item"><a class="page-link" href="#!">3</a></li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#!">Next</a>
|
||
</li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div> <!-- pagination -->
|
||
|
||
<div class="ht-tm-btn-replaceable">
|
||
<a id="popovers" class="ht-anchor">Popovers</a>
|
||
<h5 class="ht-tm-cat-title">Popovers</h5>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-needs-darkness">
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-container="body"
|
||
data-toggle="popover" data-placement="top"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on top
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-container="body"
|
||
data-toggle="popover" data-placement="right"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on right
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-container="body"
|
||
data-toggle="popover" data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on bottom
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-container="body"
|
||
data-toggle="popover" data-placement="left"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
|
||
Popover on left
|
||
</button>
|
||
</div>
|
||
|
||
</div> <!-- popovers -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="progress" class="ht-anchor">Progress</a>
|
||
<h5 class="ht-tm-cat-title">Progress</h5>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar bg-primary" role="progressbar" aria-valuenow="0" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%"
|
||
aria-valuenow="25"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar bg-primary" role="progressbar" style="width: 50%"
|
||
aria-valuenow="50"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar bg-primary" role="progressbar" style="width: 75%"
|
||
aria-valuenow="75"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar bg-primary" role="progressbar" style="width: 100%"
|
||
aria-valuenow="100"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="ht-tm-codeblock mt-5">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
|
||
aria-valuenow="0"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
|
||
style="width: 25%"
|
||
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
|
||
style="width: 50%"
|
||
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
|
||
style="width: 75%"
|
||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped bg-primary" role="progressbar"
|
||
style="width: 100%"
|
||
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock mt-5">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated bg-primary"
|
||
role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"
|
||
style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="my-5">
|
||
<div class="progress ht-tm-element">
|
||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%"
|
||
aria-valuenow="30"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%" aria-valuenow="20"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
</div> <!-- progress -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="tables" class="ht-anchor">Tables</a>
|
||
<h5 class="ht-tm-cat-title">Tables</h5>
|
||
|
||
<div class="ht-tm-codeblock">
|
||
<table class="table table-hover table-striped ht-tm-element">
|
||
<thead class="thead-dark">
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</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 class="table-primary">
|
||
<th scope="row">3</th>
|
||
<td>Contextual</td>
|
||
<td>Row</td>
|
||
<td>@hackerthemes</td>
|
||
</tr>
|
||
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<div class="ht-tm-codeblock mt-4">
|
||
<table class="table table-hover table-primary ht-tm-element">
|
||
<thead>
|
||
<tr>
|
||
<th>#</th>
|
||
<th>First Name</th>
|
||
<th>Last Name</th>
|
||
<th>Username</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 class="bg-primary">
|
||
<th scope="row">3</th>
|
||
<td colspan="2">Contextual Row</td>
|
||
<td>@hackerthemes</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div> <!-- tables -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="tooltips" class="ht-anchor">Tooltips</a>
|
||
<h5 class="ht-tm-cat-title">Tooltips</h5>
|
||
|
||
<div class="ht-tm-codeblock ht-tm-btn-replaceable ht-tm-needs-darkness">
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
|
||
data-placement="top" title="Tooltip on top">
|
||
Tooltip on top
|
||
</button>
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
|
||
data-placement="right" title="Tooltip on right">
|
||
Tooltip on right
|
||
</button>
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
|
||
data-placement="bottom" title="Tooltip on bottom">
|
||
Tooltip on bottom
|
||
</button>
|
||
<button type="button" class="btn btn-primary ht-tm-element" data-toggle="tooltip"
|
||
data-placement="left" title="Tooltip on left">
|
||
Tooltip on left
|
||
</button>
|
||
</div>
|
||
</div> <!-- tooltips -->
|
||
|
||
<div class="ht-tm-cat">
|
||
<a id="typography" class="ht-anchor">Typography</a>
|
||
<h5 class="ht-tm-cat-title">Typography</h5>
|
||
|
||
<div class="row">
|
||
<div class="col-xl-12">
|
||
<div class="ht-tm-codeblock">
|
||
<h1 class="display-1 ht-tm-element">Display 1</h1>
|
||
<h1 class="display-2 ht-tm-element">Display 2</h1>
|
||
<h1 class="display-3 ht-tm-element">Display 3</h1>
|
||
<h1 class="display-4 ht-tm-element">Display 4</h1>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h1>h1. Bootstrap heading</h1>
|
||
</div>
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h2>h2. Bootstrap heading</h2>
|
||
</div>
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h3>h3. Bootstrap heading</h3>
|
||
</div>
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h4>h4. Bootstrap heading</h4>
|
||
</div>
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h5>h5. Bootstrap heading</h5>
|
||
</div>
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h6>h6. Bootstrap heading</h6>
|
||
</div>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<p class="lead ht-tm-element">
|
||
Lead Text - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
|
||
Duis
|
||
mollis, est non commodo luctus.
|
||
</p>
|
||
</div>
|
||
<div class="ht-tm-codeblock">
|
||
<div class="ht-tm-element ht-tm-element-inner">
|
||
<h6>Body text </h6>
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, cumque delectus
|
||
deleniti dolor esse ex fugiat, id in ipsum modi molestiae mollitia, nulla
|
||
numquam
|
||
provident quasi soluta sunt tempora vel. Lorem ipsum dolor sit amet, consectetur
|
||
adipisicing elit. Accusamus, aspernatur consequuntur cumque dolor ducimus earum
|
||
eos,
|
||
expedita, fuga harum incidunt maxime modi mollitia numquam praesentium sapiente
|
||
suscipit temporibus ut vero. Lorem ipsum dolor sit amet, consectetur adipisicing
|
||
elit. Amet nam nostrum pariatur praesentium tempore. Ad architecto at aut dicta
|
||
enim, eveniet expedita libero magnam minus, nihil, non sequi sunt
|
||
voluptates!</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-xl-6">
|
||
<div class="ht-tm-codeblock">
|
||
<blockquote class="blockquote ht-tm-element">
|
||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
|
||
posuere
|
||
erat a ante.</p>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<div class="col-xl-6">
|
||
<blockquote class="blockquote blockquote-reverse ht-tm-element">
|
||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
|
||
erat a ante.</p>
|
||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
|
||
Title</cite></footer>
|
||
</blockquote>
|
||
</div>
|
||
|
||
<!--<div class="col-xl-12">-->
|
||
<!--<div class="ht-tm-codeblock">-->
|
||
<!--<p class="text-primary ht-tm-element">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>-->
|
||
<!--<div class="bg-primary ht-tm-element">Background color. Nullam id dolor id nibh ultricies vehicula ut id elit.</div>-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
</div>
|
||
</div> <!-- typography -->
|
||
|
||
<!--<div class="ht-tm-cat">-->
|
||
<!--<h5 class="ht-tm-cat-title">Cat</h5>-->
|
||
|
||
<!--</div> <!– something –>-->
|
||
|
||
|
||
<!--<div class="ht-tm-cat">-->
|
||
<!--<a id="lists" class="ht-anchor">Lists</a>-->
|
||
<!--<h5 class="ht-tm-cat-title">-->
|
||
<!--Lists-->
|
||
<!--</h5>-->
|
||
|
||
<!--<div class="row">-->
|
||
<!--<div class="col-xl-6">-->
|
||
<!--<div class="ht-tm-codeblock">-->
|
||
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
<!--<div class="col-xl-6">-->
|
||
<!--<div class="ht-tm-codeblock">-->
|
||
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
<!--</div>-->
|
||
<!--</div> <!– cat title –>-->
|
||
|
||
|
||
<!--<div class="ht-tm-cat">-->
|
||
<!--<h5 class="ht-tm-cat-title">Cat</h5>-->
|
||
|
||
<!--</div> <!– something –>-->
|
||
|
||
|
||
<div class="container-fluid p-0">
|
||
<div class="page-header">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<h2 id="buttons">Buttons</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-8">
|
||
|
||
<p class="bs-component">
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<button type="button" class="btn btn-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<button type="button" class="btn btn-warning">Warning</button>
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<button type="button" class="btn btn-link">Link</button>
|
||
</p>
|
||
|
||
<p class="bs-component">
|
||
<button type="button" class="btn btn-primary disabled">Primary</button>
|
||
<button type="button" class="btn btn-secondary disabled">Secondary</button>
|
||
<button type="button" class="btn btn-success disabled">Success</button>
|
||
<button type="button" class="btn btn-info disabled">Info</button>
|
||
<button type="button" class="btn btn-warning disabled">Warning</button>
|
||
<button type="button" class="btn btn-danger disabled">Danger</button>
|
||
<button type="button" class="btn btn-link disabled">Link</button>
|
||
</p>
|
||
|
||
<p class="bs-component">
|
||
<button type="button" class="btn btn-outline-primary">Primary</button>
|
||
<button type="button" class="btn btn-outline-secondary">Secondary</button>
|
||
<button type="button" class="btn btn-outline-success">Success</button>
|
||
<button type="button" class="btn btn-outline-info">Info</button>
|
||
<button type="button" class="btn btn-outline-warning">Warning</button>
|
||
<button type="button" class="btn btn-outline-danger">Danger</button>
|
||
</p>
|
||
|
||
<div class="bs-component">
|
||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||
<button type="button" class="btn btn-primary">Primary</button>
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop1" type="button" class="btn btn-primary dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false"></button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||
<button type="button" class="btn btn-success">Success</button>
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop2" type="button" class="btn btn-success dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false"></button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop2">
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||
<button type="button" class="btn btn-info">Info</button>
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop3" type="button" class="btn btn-info dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false"></button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop3">
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
|
||
<button type="button" class="btn btn-danger">Danger</button>
|
||
<div class="btn-group" role="group">
|
||
<button id="btnGroupDrop4" type="button" class="btn btn-danger dropdown-toggle"
|
||
data-toggle="dropdown"
|
||
aria-haspopup="true" aria-expanded="false"></button>
|
||
<div class="dropdown-menu" aria-labelledby="btnGroupDrop4">
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
<a class="dropdown-item" href="#">Dropdown link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-component">
|
||
<button type="button" class="btn btn-primary btn-lg">Large button</button>
|
||
<button type="button" class="btn btn-primary">Default button</button>
|
||
<button type="button" class="btn btn-primary btn-sm">Small button</button>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-sm-4">
|
||
|
||
<div class="bs-component" style="margin-bottom: 15px;">
|
||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-primary active">
|
||
<input type="checkbox" checked autocomplete="off"> Active
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox" autocomplete="off"> Check
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="checkbox" autocomplete="off"> Check
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-component" style="margin-bottom: 15px;">
|
||
<div class="btn-group btn-group-toggle" data-toggle="buttons">
|
||
<label class="btn btn-primary active">
|
||
<input type="radio" name="options" id="option1" autocomplete="off" checked>
|
||
Active
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="option2" autocomplete="off"> Radio
|
||
</label>
|
||
<label class="btn btn-primary">
|
||
<input type="radio" name="options" id="option3" autocomplete="off"> Radio
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-component" style="margin-bottom: 15px;">
|
||
<div class="btn-group" role="group" aria-label="Basic example">
|
||
<button type="button" class="btn btn-secondary">Left</button>
|
||
<button type="button" class="btn btn-secondary">Middle</button>
|
||
<button type="button" class="btn btn-secondary">Right</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bs-component" style="margin-bottom: 15px;">
|
||
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
|
||
<div class="btn-group mr-2" role="group" aria-label="First group">
|
||
<button type="button" class="btn btn-secondary">1</button>
|
||
<button type="button" class="btn btn-secondary">2</button>
|
||
<button type="button" class="btn btn-secondary">3</button>
|
||
<button type="button" class="btn btn-secondary">4</button>
|
||
</div>
|
||
<div class="btn-group mr-2" role="group" aria-label="Second group">
|
||
<button type="button" class="btn btn-secondary">5</button>
|
||
<button type="button" class="btn btn-secondary">6</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navbar
|
||
================================================== -->
|
||
<div class="bs-docs-section clearfix">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="navbars">Navbars</h2>
|
||
</div>
|
||
|
||
<div class="bs-component">
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||
data-target="#navbarColor01"
|
||
aria-controls="navbarColor01" aria-expanded="false"
|
||
aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor01">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline my-2 my-lg-0">
|
||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
||
</form>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="bs-component">
|
||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||
data-target="#navbarColor02"
|
||
aria-controls="navbarColor02" aria-expanded="false"
|
||
aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor02">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline my-2 my-lg-0">
|
||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
||
</form>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
<div class="bs-component">
|
||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||
<a class="navbar-brand" href="#">Navbar</a>
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse"
|
||
data-target="#navbarColor03"
|
||
aria-controls="navbarColor03" aria-expanded="false"
|
||
aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navbarColor03">
|
||
<ul class="navbar-nav mr-auto">
|
||
<li class="nav-item active">
|
||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Features</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">About</a>
|
||
</li>
|
||
</ul>
|
||
<form class="form-inline my-2 my-lg-0">
|
||
<input class="form-control mr-sm-2" type="text" placeholder="Search">
|
||
<button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
|
||
</form>
|
||
</div>
|
||
</nav>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Typography
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="typography">Typography</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Headings -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<h1>Heading 1</h1>
|
||
<h2>Heading 2</h2>
|
||
<h3>Heading 3</h3>
|
||
<h4>Heading 4</h4>
|
||
<h5>Heading 5</h5>
|
||
<h6>Heading 6</h6>
|
||
<h3>
|
||
Heading
|
||
<small class="text-muted">with muted text</small>
|
||
</h3>
|
||
<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
|
||
auctor.</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<h2>Example body text</h2>
|
||
<p>Nullam quis risus eget <a href="#">urna mollis ornare</a> vel eu leo. Cum sociis
|
||
natoque
|
||
penatibus et
|
||
magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
|
||
ultricies
|
||
vehicula.</p>
|
||
<p><small>This line of text is meant to be treated as fine print.</small></p>
|
||
<p>The following is <strong>rendered as bold text</strong>.</p>
|
||
<p>The following is <em>rendered as italicized text</em>.</p>
|
||
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<h2>Emphasis classes</h2>
|
||
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
|
||
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
|
||
<p class="text-secondary">Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
|
||
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
|
||
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
|
||
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor
|
||
ligula.</p>
|
||
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Blockquotes -->
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<h2 id="type-blockquotes">Blockquotes</h2>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<blockquote class="blockquote">
|
||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
|
||
posuere
|
||
erat a ante.</p>
|
||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
|
||
Title</cite></footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<blockquote class="blockquote text-center">
|
||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
|
||
posuere
|
||
erat a ante.</p>
|
||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
|
||
Title</cite></footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<blockquote class="blockquote text-right">
|
||
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
|
||
posuere
|
||
erat a ante.</p>
|
||
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source
|
||
Title</cite></footer>
|
||
</blockquote>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Tables
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="tables">Tables</h2>
|
||
</div>
|
||
|
||
<div class="bs-component">
|
||
<table class="table table-hover">
|
||
<thead>
|
||
<tr>
|
||
<th scope="col">Type</th>
|
||
<th scope="col">Column heading</th>
|
||
<th scope="col">Column heading</th>
|
||
<th scope="col">Column heading</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr class="table-active">
|
||
<th scope="row">Active</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr>
|
||
<th scope="row">Default</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-primary">
|
||
<th scope="row">Primary</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-secondary">
|
||
<th scope="row">Secondary</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-success">
|
||
<th scope="row">Success</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-danger">
|
||
<th scope="row">Danger</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-warning">
|
||
<th scope="row">Warning</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-info">
|
||
<th scope="row">Info</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-light">
|
||
<th scope="row">Light</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
<tr class="table-dark">
|
||
<th scope="row">Dark</th>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
<td>Column content</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div><!-- /example -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Forms
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="forms">Forms</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<div class="bs-component">
|
||
<form>
|
||
<fieldset>
|
||
<legend>Legend</legend>
|
||
<div class="form-group row">
|
||
<label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
|
||
<div class="col-sm-10">
|
||
<input type="text" readonly class="form-control-plaintext"
|
||
id="staticEmail"
|
||
value="email@example.com">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputEmail1">Email address</label>
|
||
<input type="email" class="form-control" id="exampleInputEmail1"
|
||
aria-describedby="emailHelp"
|
||
placeholder="Enter email">
|
||
<small id="emailHelp" class="form-text text-muted">We'll never share your
|
||
email
|
||
with anyone else.</small>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputPassword1">Password</label>
|
||
<input type="password" class="form-control" id="exampleInputPassword1"
|
||
placeholder="Password">
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleSelect1">Example select</label>
|
||
<select class="form-control" id="exampleSelect1">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleSelect2">Example multiple select</label>
|
||
<select multiple class="form-control" id="exampleSelect2">
|
||
<option>1</option>
|
||
<option>2</option>
|
||
<option>3</option>
|
||
<option>4</option>
|
||
<option>5</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleTextarea">Example textarea</label>
|
||
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="exampleInputFile">File input</label>
|
||
<input type="file" class="form-control-file" id="exampleInputFile"
|
||
aria-describedby="fileHelp">
|
||
<small id="fileHelp" class="form-text text-muted">This is some placeholder
|
||
block-level help text for
|
||
the above input. It's a bit lighter and easily wraps to a new
|
||
line.</small>
|
||
</div>
|
||
<fieldset class="form-group">
|
||
<legend>Radio buttons</legend>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios"
|
||
id="optionsRadios1" value="option1"
|
||
checked>
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios"
|
||
id="optionsRadios2" value="option2">
|
||
Option two can be something else and selecting it will deselect
|
||
option
|
||
one
|
||
</label>
|
||
</div>
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input type="radio" class="form-check-input" name="optionsRadios"
|
||
id="optionsRadios3" value="option3"
|
||
disabled>
|
||
Option three is disabled
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
<fieldset class="form-group">
|
||
<legend>Checkboxes</legend>
|
||
<div class="form-check">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" checked>
|
||
Option one is this and that—be sure to include why it's great
|
||
</label>
|
||
</div>
|
||
<div class="form-check disabled">
|
||
<label class="form-check-label">
|
||
<input class="form-check-input" type="checkbox" value="" disabled>
|
||
Option two is disabled
|
||
</label>
|
||
</div>
|
||
</fieldset>
|
||
<button type="submit" class="btn btn-primary">Submit</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4 offset-lg-1">
|
||
|
||
<form class="bs-component">
|
||
<div class="form-group">
|
||
<fieldset disabled>
|
||
<label class="control-label" for="disabledInput">Disabled input</label>
|
||
<input class="form-control" id="disabledInput" type="text"
|
||
placeholder="Disabled input here..." disabled="">
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<fieldset>
|
||
<label class="control-label" for="readOnlyInput">Readonly input</label>
|
||
<input class="form-control" id="readOnlyInput" type="text"
|
||
placeholder="Readonly input here…" readonly>
|
||
</fieldset>
|
||
</div>
|
||
|
||
<div class="form-group has-success">
|
||
<label class="form-control-label" for="inputSuccess1">Valid input</label>
|
||
<input type="text" value="correct value" class="form-control is-valid"
|
||
id="inputValid">
|
||
<div class="valid-feedback">Success! You've done it.</div>
|
||
</div>
|
||
|
||
<div class="form-group has-danger">
|
||
<label class="form-control-label" for="inputDanger1">Invalid input</label>
|
||
<input type="text" value="wrong value" class="form-control is-invalid"
|
||
id="inputInvalid">
|
||
<div class="invalid-feedback">Sorry, that username's taken. Try another?</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-form-label col-form-label-lg" for="inputLarge">Large input</label>
|
||
<input class="form-control form-control-lg" type="text"
|
||
placeholder=".form-control-lg"
|
||
id="inputLarge">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-form-label" for="inputDefault">Default input</label>
|
||
<input type="text" class="form-control" placeholder="Default input"
|
||
id="inputDefault">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="col-form-label col-form-label-sm" for="inputSmall">Small input</label>
|
||
<input class="form-control form-control-sm" type="text"
|
||
placeholder=".form-control-sm"
|
||
id="inputSmall">
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="control-label">Input addons</label>
|
||
<div class="form-group">
|
||
<div class="input-group mb-3">
|
||
<div class="input-group-prepend">
|
||
<span class="input-group-text">$</span>
|
||
</div>
|
||
<input type="text" class="form-control"
|
||
aria-label="Amount (to the nearest dollar)">
|
||
<div class="input-group-append">
|
||
<span class="input-group-text">.00</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="bs-component">
|
||
<fieldset>
|
||
<legend>Custom forms</legend>
|
||
<div class="form-group">
|
||
<div class="custom-control custom-radio">
|
||
<input type="radio" id="customRadio1" name="customRadio"
|
||
class="custom-control-input" checked>
|
||
<label class="custom-control-label" for="customRadio1">Toggle this custom
|
||
radio</label>
|
||
</div>
|
||
<div class="custom-control custom-radio">
|
||
<input type="radio" id="customRadio2" name="customRadio"
|
||
class="custom-control-input">
|
||
<label class="custom-control-label" for="customRadio2">Or toggle this other
|
||
custom radio</label>
|
||
</div>
|
||
<div class="custom-control custom-radio">
|
||
<input type="radio" id="customRadio3" name="customRadio"
|
||
class="custom-control-input" disabled>
|
||
<label class="custom-control-label" for="customRadio3">Disabled custom
|
||
radio</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" id="customCheck1"
|
||
checked>
|
||
<label class="custom-control-label" for="customCheck1">Check this custom
|
||
checkbox</label>
|
||
</div>
|
||
<div class="custom-control custom-checkbox">
|
||
<input type="checkbox" class="custom-control-input" id="customCheck2"
|
||
disabled>
|
||
<label class="custom-control-label" for="customCheck2">Disabled custom
|
||
checkbox</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<div class="custom-control custom-switch">
|
||
<input type="checkbox" class="custom-control-input" id="customSwitch1"
|
||
checked>
|
||
<label class="custom-control-label" for="customSwitch1">Toggle this switch
|
||
element</label>
|
||
</div>
|
||
<div class="custom-control custom-switch">
|
||
<input type="checkbox" class="custom-control-input" disabled
|
||
id="customSwitch2">
|
||
<label class="custom-control-label" for="customSwitch2">Disabled switch
|
||
element</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<select class="custom-select">
|
||
<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="form-group">
|
||
<div class="input-group mb-3">
|
||
<div class="custom-file">
|
||
<input type="file" class="custom-file-input" id="inputGroupFile02">
|
||
<label class="custom-file-label" for="inputGroupFile02">Choose
|
||
file</label>
|
||
</div>
|
||
<div class="input-group-append">
|
||
<span class="input-group-text" id="">Upload</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</fieldset>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Navs
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="navs">Navs</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row" style="margin-bottom: 2rem;">
|
||
<div class="col-sm-6">
|
||
<h2 id="nav-tabs">Tabs</h2>
|
||
<div class="bs-component">
|
||
<ul class="nav nav-tabs">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
|
||
role="button"
|
||
aria-haspopup="true"
|
||
aria-expanded="false">Dropdown</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</li>
|
||
</ul>
|
||
<div id="myTabContent" class="tab-content">
|
||
<div class="tab-pane fade show active" id="home">
|
||
<p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt
|
||
tofu
|
||
stumptown aliqua, retro
|
||
synth master cleanse. Mustache cliche tempor, williamsburg carles vegan
|
||
helvetica. Reprehenderit
|
||
butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui
|
||
irure
|
||
terry richardson ex
|
||
squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan
|
||
american apparel, butcher
|
||
voluptate nisi qui.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="profile">
|
||
<p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin
|
||
coffee
|
||
squid. Exercitation
|
||
+1 labore velit, blog sartorial PBR leggings next level wes anderson artisan
|
||
four loko farm-to-table
|
||
craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk
|
||
aliquip jean shorts
|
||
ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore
|
||
aesthetic
|
||
magna delectus mollit.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown1">
|
||
<p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out
|
||
mcsweeney's organic lomo retro
|
||
fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork
|
||
tattooed craft beer, iphone
|
||
skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth
|
||
PBR
|
||
banksy irony. Leggings
|
||
gentrify squid 8-bit cred pitchfork.</p>
|
||
</div>
|
||
<div class="tab-pane fade" id="dropdown2">
|
||
<p>Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party
|
||
before
|
||
they sold out master
|
||
cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack
|
||
portland
|
||
seitan DIY, art party
|
||
locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY
|
||
salvia
|
||
PBR, banh mi before
|
||
they sold out farm-to-table VHS viral locavore cosby sweater.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-6">
|
||
<h2 id="nav-pills">Pills</h2>
|
||
<div class="bs-component">
|
||
<ul class="nav nav-pills">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
|
||
role="button"
|
||
aria-haspopup="true"
|
||
aria-expanded="false">Dropdown</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<br>
|
||
<div class="bs-component">
|
||
<ul class="nav nav-pills flex-column">
|
||
<li class="nav-item">
|
||
<a class="nav-link active" href="#">Active</a>
|
||
</li>
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#"
|
||
role="button"
|
||
aria-haspopup="true"
|
||
aria-expanded="false">Dropdown</a>
|
||
<div class="dropdown-menu">
|
||
<a class="dropdown-item" href="#">Action</a>
|
||
<a class="dropdown-item" href="#">Another action</a>
|
||
<a class="dropdown-item" href="#">Something else here</a>
|
||
<div class="dropdown-divider"></div>
|
||
<a class="dropdown-item" href="#">Separated link</a>
|
||
</div>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#">Link</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link disabled" href="#">Disabled</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<h2 id="nav-breadcrumbs">Breadcrumbs</h2>
|
||
<div class="bs-component">
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item active">Home</li>
|
||
</ol>
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||
<li class="breadcrumb-item active">Library</li>
|
||
</ol>
|
||
<ol class="breadcrumb">
|
||
<li class="breadcrumb-item"><a href="#">Home</a></li>
|
||
<li class="breadcrumb-item"><a href="#">Library</a></li>
|
||
<li class="breadcrumb-item active">Data</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-6">
|
||
<h2 id="pagination">Pagination</h2>
|
||
<div class="bs-component">
|
||
<div>
|
||
<ul class="pagination">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#">«</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a class="page-link" href="#">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">»</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<ul class="pagination pagination-lg">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#">«</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a class="page-link" href="#">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">»</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<ul class="pagination pagination-sm">
|
||
<li class="page-item disabled">
|
||
<a class="page-link" href="#">«</a>
|
||
</li>
|
||
<li class="page-item active">
|
||
<a class="page-link" href="#">1</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">2</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">3</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">4</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">5</a>
|
||
</li>
|
||
<li class="page-item">
|
||
<a class="page-link" href="#">»</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Indicators
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="indicators">Indicators</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<h2>Alerts</h2>
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-warning">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<h4 class="alert-heading">Warning!</h4>
|
||
<p class="mb-0">Best check yo self, you're not looking too good. Nulla vitae elit
|
||
libero, a pharetra augue.
|
||
Praesent commodo cursus magna, <a href="#" class="alert-link">vel scelerisque
|
||
nisl
|
||
consectetur et</a>.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-danger">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
|
||
and
|
||
try submitting
|
||
again.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-success">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
|
||
important alert
|
||
message</a>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-info">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
|
||
attention</a>, but it's not
|
||
super important.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-primary">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a>
|
||
and
|
||
try submitting
|
||
again.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-secondary">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this
|
||
important alert
|
||
message</a>.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="alert alert-dismissible alert-light">
|
||
<button type="button" class="close" data-dismiss="alert">×</button>
|
||
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your
|
||
attention</a>, but it's not
|
||
super important.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<h2>Badges</h2>
|
||
<div class="bs-component" style="margin-bottom: 40px;">
|
||
<span class="badge badge-primary">Primary</span>
|
||
<span class="badge badge-secondary">Secondary</span>
|
||
<span class="badge badge-success">Success</span>
|
||
<span class="badge badge-danger">Danger</span>
|
||
<span class="badge badge-warning">Warning</span>
|
||
<span class="badge badge-info">Info</span>
|
||
<span class="badge badge-light">Light</span>
|
||
<span class="badge badge-dark">Dark</span>
|
||
</div>
|
||
<div class="bs-component">
|
||
<span class="badge badge-pill badge-primary">Primary</span>
|
||
<span class="badge badge-pill badge-secondary">Secondary</span>
|
||
<span class="badge badge-pill badge-success">Success</span>
|
||
<span class="badge badge-pill badge-danger">Danger</span>
|
||
<span class="badge badge-pill badge-warning">Warning</span>
|
||
<span class="badge badge-pill badge-info">Info</span>
|
||
<span class="badge badge-pill badge-light">Light</span>
|
||
<span class="badge badge-pill badge-dark">Dark</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Progress
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="progress">Progress</h2>
|
||
</div>
|
||
|
||
<h3 id="progress-basic">Basic</h3>
|
||
<div class="bs-component">
|
||
<div class="progress">
|
||
<div class="progress-bar" role="progressbar" style="width: 25%;" aria-valuenow="25"
|
||
aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="progress-alternatives">Contextual alternatives</h3>
|
||
<div class="bs-component">
|
||
<div class="progress">
|
||
<div class="progress-bar bg-success" role="progressbar" style="width: 25%"
|
||
aria-valuenow="25" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-info" role="progressbar" style="width: 50%"
|
||
aria-valuenow="50" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-warning" role="progressbar" style="width: 75%"
|
||
aria-valuenow="75" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar bg-danger" role="progressbar" style="width: 100%"
|
||
aria-valuenow="100"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="progress-multiple">Multiple bars</h3>
|
||
<div class="bs-component">
|
||
<div class="progress">
|
||
<div class="progress-bar" role="progressbar" style="width: 15%" aria-valuenow="15"
|
||
aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-success" role="progressbar" style="width: 30%"
|
||
aria-valuenow="30" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
<div class="progress-bar bg-info" role="progressbar" style="width: 20%"
|
||
aria-valuenow="20" aria-valuemin="0"
|
||
aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="progress-striped">Striped</h3>
|
||
<div class="bs-component">
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 10%"
|
||
aria-valuenow="10"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-success" role="progressbar"
|
||
style="width: 25%"
|
||
aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-info" role="progressbar"
|
||
style="width: 50%" aria-valuenow="50"
|
||
aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-warning" role="progressbar"
|
||
style="width: 75%"
|
||
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped bg-danger" role="progressbar"
|
||
style="width: 100%"
|
||
aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3 id="progress-animated">Animated</h3>
|
||
<div class="bs-component">
|
||
<div class="progress">
|
||
<div class="progress-bar progress-bar-striped progress-bar-animated"
|
||
role="progressbar"
|
||
aria-valuenow="75"
|
||
aria-valuemin="0" aria-valuemax="100" style="width: 75%"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Containers
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="containers">Containers</h2>
|
||
</div>
|
||
<div class="bs-component">
|
||
<div class="jumbotron">
|
||
<h1 class="display-3">Hello, world!</h1>
|
||
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for
|
||
calling extra attention
|
||
to featured content or information.</p>
|
||
<hr class="my-4">
|
||
<p>It uses utility classes for typography and spacing to space content out within
|
||
the
|
||
larger container.</p>
|
||
<p class="lead">
|
||
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<h2>List groups</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<ul class="list-group">
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
Cras justo odio
|
||
<span class="badge badge-primary badge-pill">14</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
Dapibus ac facilisis in
|
||
<span class="badge badge-primary badge-pill">2</span>
|
||
</li>
|
||
<li class="list-group-item d-flex justify-content-between align-items-center">
|
||
Morbi leo risus
|
||
<span class="badge badge-primary badge-pill">1</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="list-group">
|
||
<a href="#" class="list-group-item list-group-item-action active">
|
||
Cras justo odio
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in
|
||
</a>
|
||
<a href="#" class="list-group-item list-group-item-action disabled">Morbi leo risus
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="list-group">
|
||
<a href="#"
|
||
class="list-group-item list-group-item-action flex-column align-items-start active">
|
||
<div class="d-flex w-100 justify-content-between">
|
||
<h5 class="mb-1">List group item heading</h5>
|
||
<small>3 days ago</small>
|
||
</div>
|
||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
|
||
diam
|
||
eget risus varius
|
||
blandit.</p>
|
||
<small>Donec id elit non mi porta.</small>
|
||
</a>
|
||
<a href="#"
|
||
class="list-group-item list-group-item-action flex-column align-items-start">
|
||
<div class="d-flex w-100 justify-content-between">
|
||
<h5 class="mb-1">List group item heading</h5>
|
||
<small class="text-muted">3 days ago</small>
|
||
</div>
|
||
<p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed
|
||
diam
|
||
eget risus varius
|
||
blandit.</p>
|
||
<small class="text-muted">Donec id elit non mi porta.</small>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<h2>Cards</h2>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row">
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="card text-white bg-primary mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Primary card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Secondary card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-success mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Success card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-danger mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Danger card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-warning mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Warning card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-info mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Info card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card bg-light mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Light card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card text-white bg-dark mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dark card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="card border-primary mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Primary card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-secondary mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Secondary card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-success mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Success card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-danger mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Danger card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-warning mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Warning card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-info mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Info card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-light mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Light card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
<div class="card border-dark mb-3" style="max-width: 20rem;">
|
||
<div class="card-header">Header</div>
|
||
<div class="card-body">
|
||
<h4 class="card-title">Dark card title</h4>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="col-sm-4">
|
||
<div class="bs-component">
|
||
<div class="card mb-3">
|
||
<h3 class="card-header">Card header</h3>
|
||
<div class="card-body">
|
||
<h5 class="card-title">Special title treatment</h5>
|
||
<h6 class="card-subtitle text-muted">Support card subtitle</h6>
|
||
</div>
|
||
<img style="height: 200px; width: 100%; display: block;"
|
||
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22318%22%20height%3D%22180%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20318%20180%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_158bd1d28ef%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A16pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_158bd1d28ef%22%3E%3Crect%20width%3D%22318%22%20height%3D%22180%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22129.359375%22%20y%3D%2297.35%22%3EImage%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
|
||
alt="Card image">
|
||
<div class="card-body">
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
</div>
|
||
<ul class="list-group list-group-flush">
|
||
<li class="list-group-item">Cras justo odio</li>
|
||
<li class="list-group-item">Dapibus ac facilisis in</li>
|
||
<li class="list-group-item">Vestibulum at eros</li>
|
||
</ul>
|
||
<div class="card-body">
|
||
<a href="#" class="card-link">Card link</a>
|
||
<a href="#" class="card-link">Another link</a>
|
||
</div>
|
||
<div class="card-footer text-muted">
|
||
2 days ago
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="card-body">
|
||
<h4 class="card-title">Card title</h4>
|
||
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
|
||
<p class="card-text">Some quick example text to build on the card title and make
|
||
up
|
||
the bulk of the
|
||
card's content.</p>
|
||
<a href="#" class="card-link">Card link</a>
|
||
<a href="#" class="card-link">Another link</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- Dialogs
|
||
================================================== -->
|
||
<div class="bs-docs-section">
|
||
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2 id="dialogs">Dialogs</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<h2>Modals</h2>
|
||
<div class="bs-component">
|
||
<div class="modal">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h5 class="modal-title">Modal title</h5>
|
||
<button type="button" class="close" data-dismiss="modal"
|
||
aria-label="Close">
|
||
<span aria-hidden="true">×</span>
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<p>Modal body text goes here.</p>
|
||
</div>
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-primary">Save changes</button>
|
||
<button type="button" class="btn btn-secondary" data-dismiss="modal">
|
||
Close
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<h2>Popovers</h2>
|
||
<div class="bs-component" style="margin-bottom: 3em;">
|
||
<button type="button" class="btn btn-secondary" title="Popover Title"
|
||
data-container="body"
|
||
data-toggle="popover"
|
||
data-placement="left"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Left
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" title="Popover Title"
|
||
data-container="body"
|
||
data-toggle="popover"
|
||
data-placement="top"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Top
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" title="Popover Title"
|
||
data-container="body"
|
||
data-toggle="popover"
|
||
data-placement="bottom" data-content="Vivamus
|
||
sagittis lacus vel augue laoreet rutrum faucibus.">Bottom
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" title="Popover Title"
|
||
data-container="body"
|
||
data-toggle="popover"
|
||
data-placement="right"
|
||
data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">Right
|
||
</button>
|
||
</div>
|
||
<h2>Tooltips</h2>
|
||
<div class="bs-component">
|
||
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
|
||
data-placement="left"
|
||
title="Tooltip on left">Left
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
|
||
data-placement="top"
|
||
title="Tooltip on top">Top
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
|
||
data-placement="bottom" title="Tooltip on bottom">Bottom
|
||
</button>
|
||
|
||
<button type="button" class="btn btn-secondary" data-toggle="tooltip"
|
||
data-placement="right"
|
||
title="Tooltip on right">Right
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="source-modal" class="modal fade">
|
||
<div class="modal-dialog modal-lg">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<h4 class="modal-title">Source Code</h4>
|
||
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×
|
||
</button>
|
||
</div>
|
||
<div class="modal-body">
|
||
<pre contenteditable></pre>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</BaseLayout>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapActions, mapState} from "vuex";
|
||
import * as BIcons from "bootstrap-icons-vue";
|
||
import BaseLayout from "@/components/BaseLayout.vue";
|
||
|
||
export default {
|
||
name: "Swatch",
|
||
components: {
|
||
BaseLayout,
|
||
...BIcons
|
||
},
|
||
computed: {
|
||
...mapState(["tags", "properties", "categories", "availability_policies", "domains", "storage_locations"])
|
||
},
|
||
methods: {
|
||
...mapActions(["fetchInfo", "fetchStorageLocations"])
|
||
},
|
||
async mounted() {
|
||
await this.fetchInfo();
|
||
await this.fetchStorageLocations();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
|
||
</style> |