سرتیتر 1زندگی کن عناصر رابط کاربری

ما بیش از کلاس های اصلی بوت استرپ کار می کردیم، با انتخاب یک پالت رنگ متفاوت و کمی شدید:

<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-neutral">Neutral</button>

Buttons come in all needed sizes:

<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Normal</button>
<button class="btn btn-primary btn-sm">Small</button>

We added extra classes that can help you better customise the look. You can use regular buttons, rounded corners buttons or plain simple buttons. Let's see some examples:

<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-round">Round</button>
<button class="btn btn-primary btn-round"> <i class="zmdi zmdi-favorite-outline6"></i> With Icon </button>
<button class="btn btn-primary btn-icon btn-icon-mini btn-round"> <i class="zmdi zmdi-favorite-outline"></i> </button>
<button class="btn btn-primary btn-simple">Simple</button>

To use the custom checkboxes, you don't need to import any separate Javascript file, just add the below code:

<div class="checkbox">
    <input id="checkbox1" type="checkbox">
    <label for="checkbox1">Unchecked</label>
</div>

<div class="checkbox">
    <input id="checkbox2" type="checkbox" checked="">
    <label for="checkbox2">Checked</label>
</div>

<div class="checkbox">
    <input id="checkbox3" type="checkbox" disabled="">
    <label for="checkbox3">Disabled unchecked</label>
</div>

<div class="checkbox">
    <input id="checkbox4" type="checkbox" checked="" disabled="">
    <label for="checkbox4">Disabled checked</label>
</div>

To use the custom radio buttons, you don't need to import any separate Javascript file, just add the below code:

<div class="radio">
    <input type="radio" name="radio1" id="radio1" value="option1">
    <label for="radio1">Radio is off</label>
</div>

<div class="radio">
    <input type="radio" name="radio1" id="radio2" value="option2" checked="">
    <label for="radio2">Radio is on</label>
</div>

<div class="radio">
    <input type="radio" name="radio3" id="radio3" value="option3" disabled="">
    <label for="radio3">Disabled radio is off</label>
</div>

<div class="radio">
    <input type="radio" name="radio4" id="radio4" value="option4" checked="" disabled="">
    <label for="radio4">Disabled radio is on</label>
</div>

We restyled the Bootstrap input to give it a more flat, minimal look. You can use them with regular labels, states or input groups.

<input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
<input class="form-control" type="text" placeholder="Default input">
<input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">

The textarea has a new style, so it looks similar to all other inputs.

    <textarea class="form-control" placeholder="Here can be your nice text" rows="5"></textarea>

We changed the design for the Bootstrap nav pills into something a bit more fresh. We also added more color classes for customisation like .nav-pills-primary, .nav-pills-info, .nav-pills-success, .nav-pills-warning, .nav-pills-danger

<ul class="nav nav-pills nav-pills-primary" role="tablist">
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#active" role="tablist">
            <i class="zmdi zmdi-favorite"></i>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#link" role="tablist">
            <i class="zmdi zmdi-library"></i>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#link" role="tablist">
            <i class="zmdi zmdi-lamp"></i>
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" data-toggle="tab" href="#disabled" role="tablist">
            <i class="zmdi zmdi-lock"></i>
        </a>
    </li>
</ul>

The Bootstrap pagination elements were customised to fit the overall theme. Besides the classic look, we also added the color classes to offer more customisation like .pagination-info, .pagination-success, .pagination-warning, .pagination-danger, .pagination-primary.

//Pagination simple
<ul class="pagination pagination-primary">
    <li class="page-item active"><a class="page-link" href="javascript:void(0);">1</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">3</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li>
    <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li>
</ul>


//Pagination full-width
<div class="justify-content-center">
    <ul class="pagination pagination-primary">
        <li class="page-item arrow-margin-left">
            <a class="page-link" href="javascript:void(0);" aria-label="Previous">
                <span aria-hidden="true"><i class="zmdi zmdi-chevron-left" aria-hidden="true"></i></span>
            </a>
        </li>


        <li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
        <li class="page-item active"><a class="page-link" href="javascript:void(0);">3</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">4</a></li>
        <li class="page-item"><a class="page-link" href="javascript:void(0);">5</a></li>



        <li class="page-item arrow-margin-right">
            <a class="page-link" href="javascript:void(0);" aria-label="Next">
                <span aria-hidden="true"><i class="zmdi zmdi-chevron-right" aria-hidden="true"></i></span>
            </a>
        </li>
    </ul>
</div>

The progress bars from Bootstrap hold the same classes and functionality. Adding this kit over your existing project will only make it look more clean. The default line is gray, each bar has a specific color but you can add some colors for the background lines using the next classes .progress-primary, .progress-info, .progress-success, .progress-warning, .progress-danger,

<div class="progress-container">
    <span class="progress-badge">Default</span>
    <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 25%;">
            <span class="progress-value">25%</span>
        </div>
    </div>
</div>

<div class="progress-container progress-primary">
    <span class="progress-badge">Primary</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>

<div class="progress-container progress-info">
    <span class="progress-badge">Info</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>

<div class="progress-container progress-success">
    <span class="progress-badge">Success</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>

<div class="progress-container progress-danger">
    <span class="progress-badge">Danger</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>

<div class="progress-container progress-warning">
    <span class="progress-badge">Warning</span>
    <div class="progress">
        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
            <span class="progress-value">60%</span>
        </div>
    </div>
</div>

We restyled the default options for labels and we added the filled class, that can be used in any combination.

<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>

The new notifications are looking fresh and clean. They go great with the navbar. For these notifications examples we used the .container-fluid class, so they will be fluid, please use the class .container when you use them outside of the .wrapper so they will be alignd with the general page container

<div class="alert alert-success" role="alert">
    <div class="container">
        <div class="alert-icon">
            <i class="zmdi zmdi-thumb-up"></i>
        </div>
        <strong>Well done!</strong> You successfully read this important alert message.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                <i class="zmdi zmdi-close"></i>
            </span>
        </button>
    </div>
</div>

<div class="alert alert-info" role="alert">
    <div class="container">
        <div class="alert-icon">
            <i class="zmdi zmdi-alert-circle-o"></i>
        </div>
        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">
                <i class="zmdi zmdi-close"></i>
            </span>
        </button>
    </div>
</div>

<div class="alert alert-warning" role="alert">
    <div class="container">
        <div class="alert-icon">
            <i class="zmdi zmdi-notifications"></i>
        </div>
        <strong>Warning!</strong> Better check yourself, you're not looking too good.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">
                <i class="zmdi zmdi-close"></i>
            </span>
        </button>
    </div>
</div>

<div class="alert alert-danger" role="alert">
    <div class="container">
        <div class="alert-icon">
            <i class="zmdi zmdi-block"></i>
        </div>
        <strong>Oh snap!</strong> Change a few things up and try submitting again.
        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
            <span aria-hidden="true">
                <i class="zmdi zmdi-close"></i>
            </span>
        </button>
    </div>
</div>