Kyosei Bootstrap

Status

v1.1.0

Documentation

check here

Install

npm install kyosei-bootstrap

Usage

1. 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">

2. 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>

Reference

Bootstrap 3.3 NoUiSlider DateRangePicker BootstrapSelect