Header 1لورم ایپسوم متن ساختگی

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

پیش فرض اولیه اطلاعات موفقیت هشدار خطر خنثی

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

دکمه ها در تمام اندازه های مورد نیاز آمده است:

بزرگ پیش فرض کوچک

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

کلاسهای اضافی اضافه کردیم که می توانند به شما در تنظیم بهتر ظاهر کمک کنند. می توانید از دکمه های معمولی ، دکمه های گوشه گرد یا دکمه های ساده استفاده کنید. بیایید چند نمونه را ببینید:

پیش فرض گرد با آیکون ساده

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

برای استفاده از جعبه های انتخابی سفارشی ، نیازی به وارد کردن فایل Javascript جداگانه نیست ، فقط کد زیر را اضافه کنید:

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

برای استفاده از دکمه های رادیویی سفارشی ، نیازی به وارد کردن فایل Javascript جداگانه نیست ، فقط کد زیر را اضافه کنید:

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

ما ورودی Bootstrap را مجدداً قرار دادیم تا ظاهری صاف و کم رنگ تر به آن بخشیم. می توانید از آنها با برچسب های معمولی ، حالت ها یا گروه های ورودی استفاده کنید.

<div class="col-sm-4">
<div class="form-group">
    <input type="text" value="" placeholder="Regular" class="form-control">
</div>
</div>

<div class="col-sm-4">
<div class="form-group has-success">
    <input type="text" value="Success" class="form-control form-control-success">
</div>
</div>

<div class="col-sm-4">
<div class="form-group has-danger">
    <input type="email" value="Error Input" class="form-control form-control-danger">
</div>
</div>

<div class="col-sm-4">
<div class="input-group">
    <span class="input-group-addon">
        <i class="zmdi zmdi-account-circle"></i>
    </span>
    <input type="text" class="form-control" placeholder="Left Font Awesome Icon">
</div>
</div>

<div class="col-sm-4">
<div class="input-group">
    <input type="text" class="form-control" placeholder="Right Nucleo Icon">
    <span class="input-group-addon">
        <i class="zmdi zmdi-account"></i>
    </span>
</div>
</div>

textarea سبک جدیدی دارد ، بنابراین به نظر می رسد مانند سایر ورودی ها.

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

ما طراحی قرص های Bootstrap nav را کمی تازه تر کردیم. ما همچنین کلاسهای رنگی بیشتری را برای شخصی سازی مانند اضافه کردیم .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>

عناصر صفحه بندی بوت استرپ متناسب با موضوع کلی سفارشی شد. علاوه بر ظاهر کلاسیک ، کلاس های رنگی را نیز اضافه کردیم تا سفارشی سازی بیشتری را مانند آن ارائه دهیم .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="#">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>
</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="#" 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="#">1</a></li>
        <li class="page-item"><a class="page-link" href="#">2</a></li>
        <li class="page-item active"><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 arrow-margin-right">
            <a class="page-link" href="#" aria-label="Next">
                <span aria-hidden="true"><i class="zmdi zmdi-chevron-right" aria-hidden="true"></i></span>
            </a>
        </li>
    </ul>
</div>

میله های پیشرفت از Bootstrap کلاس ها و قابلیت های یکسانی را در خود جای داده اند. افزودن این کیت نسبت به پروژه موجود ، فقط باعث تمیز تر شدن آن می شود. خط پیش فرض خاکستری است ، هر نوار دارای یک رنگ خاص است اما می توانید با استفاده از کلاس های بعدی برخی از رنگ ها را برای خطوط پس زمینه اضافه کنید .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>

ما گزینه های پیش فرض برای برچسب ها را دوباره تنظیم کردیم و کلاس پر شده را اضافه کردیم که می تواند در هر ترکیبی مورد استفاده قرار گیرد.

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

اعلان های جدید تازه و تمیز به نظر می رسند. آنها با ناوبری عالی پیش می روند. برای این مثالهای اعلانات ما از کلاس .container-liquid استفاده کردیم ، بنابراین آنها سیال می شوند ، لطفاً از کلاس .container هنگام استفاده از آنها در خارج از .wrapper استفاده کنید ، بنابراین آنها با صفحه صفحه عمومی مطابقت دارند.

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