1.1.2 • Published 7 years ago
kyosei-bootstrap v1.1.2
Kyosei Bootstrap
Status
v1.1.0
Documentation
Install
npm install kyosei-bootstrap
Usage
- Add kyosei-bootstrap.css & font-awesome.css
<link rel="stylesheet" href="node_modules/kyosei-bootstrap/dist/css/kyosei-bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
- Add Script tags
<!-- Main Scripts -->
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Sliders ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wnumb/1.1.0/wNumb.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/10.1.0/nouislider.min.js"></script>
<!-- Select ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<!-- Date Picker ( Optional ) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.min.js"></script>
What's included
kyosei-bootstrap/dist
├── css/
│ ├── kyosei-bootstrap.css
│ └── kyosei-bootstrap.min.css
└── js/
└── bootstrap.min.js
What's new
switch
<input class="switch" name="switch1" type="checkbox">
also can be used as radio type
<input class="switch" name="switch2" type="radio">
<input class="switch" name="switch2" type="radio">
<input class="switch" name="switch2" type="radio">
btn-secondary
Dark theme button
<a href="#" class="btn btn-secondary">Secondary</a>
card
Same rule as the .card
from bootstrap 4 beta
<div class="card">
<img class="card-img-top" src="https://unsplash.it/600/400" 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>
card-inverse
Background of card with colors.
<div class="card card-inverse card-secondary">
<div class="card-body">
<h4 class="card-title">Card Secondary</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>
jumbotron-inverse
Dark background jumbotron with white text, add a class named jumbotron-inverse
to origin jumbotron
.
<div class="jumbotron jumbotron-inverse">
<h1>Jumbotron-inverse</h1>
<p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<p><a class="btn btn-primary btn-lg">Learn more</a></p>
</div>
footer
Add a class named footer
.
<footer class="footer">
<h1>Footer</h1>
</footer>
footer-inverse
Dark theme of footer, add footer-inverse
to footer.
<footer class="footer footer-inverse">
<h1>Footer</h1>
</footer>
footer-footer
The footer inside the footer, which is used to display copyright© information.
<footer class="footer">
<div class="footer-footer">
<p>
Kyosei.ai all right reserved
</p>
</div>
</footer>
tools
Tools is used to present a collection of widget inside some div.
First, you will need to put .tools
inside your html file.
<div class="tools">
</div>
Add tool inside the tools
<div class="tools">
<a class="tool">
<span class="tool-icon"><i class="fa fa-heart" aria-hidden="true"></i></span>
<span class="tool-name">Like</span>
</a>
<a class="tool">
<span class="tool-icon"><i class="fa fa-share" aria-hidden="true"></i></span>
<span class="tool-name">Share</span>
</a>
</div>
tools-right
You can add tools-right class to the tools, which set text-align: center
.
<div class="tools tools-right">
</div>