{% extends "layout.html" %}
{% block styleFiles %}
{% endblock %}
{% block content %}
<!-- page content -->
<div class="right_col" role="main">
    <div class="">
        <div class="page-title">
            <div class="title_left">
                <h3>فرم کلید‌ها</h3>
            </div>

            <div class="title_right">
                <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="جست و جو برای...">
                        <span class="input-group-btn">
                      <button class="btn btn-default" type="button">برو!</button>
                    </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="row">
            <div class="col-md-6">
                <div class="x_panel">
                    <div class="x_title">
                        <h2>پیش‌فرض کلید‌ها </h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <button type="button" class="btn btn-default">پیش‌فرض</button>

                        <button type="button" class="btn btn-primary">ابتدایی</button>

                        <button type="button" class="btn btn-success">موفق</button>

                        <button type="button" class="btn btn-info">اطلاع</button>

                        <button type="button" class="btn btn-warning">اخطار</button>

                        <button type="button" class="btn btn-danger">خطر</button>

                        <button type="button" class="btn btn-dark">تیره</button>

                        <button type="button" class="btn btn-link">لینک</button>
                    </div>
                </div>


                <div class="x_panel">
                    <div class="x_title">
                        <h2>دکمه گرد شده</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <button type="button" class="btn btn-round btn-default">پیش‌فرض</button>
                        <button type="button" class="btn btn-round btn-primary">ابتدایی</button>
                        <button type="button" class="btn btn-round btn-success">موفق</button>
                        <button type="button" class="btn btn-round btn-info">اطلاع</button>
                        <button type="button" class="btn btn-round btn-warning">اخطار</button>
                        <button type="button" class="btn btn-round btn-danger">خطر</button>
                    </div>
                </div>

                <div class="x_panel">
                    <div class="x_title">
                        <h2>دکمه کشویی</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">

                        <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button"
                                aria-expanded="false">پیش‌فرض <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="#">عمل</a>
                            </li>
                            <li><a href="#">عمل دیگر</a>
                            </li>
                            <li><a href="#">چیز دیگر در اینجا</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">جداسازی لینک</a>
                            </li>
                        </ul>

                        <button data-toggle="dropdown" class="btn btn-primary dropdown-toggle btn-sm" type="button"
                                aria-expanded="false">ابتدایی <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="#">عمل</a>
                            </li>
                            <li><a href="#">عمل دیگر</a>
                            </li>
                            <li><a href="#">چیز دیگر در اینجا</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">جداسازی لینک</a>
                            </li>
                        </ul>

                        <button data-toggle="dropdown" class="btn btn-success dropdown-toggle btn-xs" type="button">
                            موفق <span class="caret"></span>
                        </button>
                        <ul role="menu" class="dropdown-menu">
                            <li><a href="#">عمل</a>
                            </li>
                            <li><a href="#">عمل دیگر</a>
                            </li>
                            <li><a href="#">چیز دیگر در اینجا</a>
                            </li>
                            <li class="divider"></li>
                            <li><a href="#">جداسازی لینک</a>
                            </li>
                        </ul>


                    </div>
                </div>


                <div class="x_panel">
                    <div class="x_title">
                        <h2>تقسیم دکمه کشویی</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">

                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">عمل</button>
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">تعویض کرکره</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">عمل</a>
                                </li>
                                <li><a href="#">عمل دیگر</a>
                                </li>
                                <li><a href="#">چیز دیگر در اینجا</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">جداسازی لینک</a>
                                </li>
                            </ul>
                        </div>

                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">عمل</button>
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">تعویض کرکره</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">عمل</a>
                                </li>
                                <li><a href="#">دیگر عمل</a>
                                </li>
                                <li><a href="#">چیز دیگر در اینجا</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">جداسازی لینک</a>
                                </li>
                            </ul>
                        </div>

                        <!-- Split button -->
                        <div class="btn-group">
                            <button type="button" class="btn btn-danger">عمل</button>
                            <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown"
                                    aria-expanded="false">
                                <span class="caret"></span>
                                <span class="sr-only">تعویض کرکره</span>
                            </button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">عمل</a>
                                </li>
                                <li><a href="#">دیگر عمل</a>
                                </li>
                                <li><a href="#">چیز دیگر در اینجا</a>
                                </li>
                                <li class="divider"></li>
                                <li><a href="#">جداسازی لینک</a>
                                </li>
                            </ul>
                        </div>


                    </div>
                </div>


                <div class="x_panel">
                    <div class="x_title">
                        <h2>دکمه طراحی برنامه</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <p>افزودن کلاس <code>.btn .btn-app</code> به تگ</p>
                        <a class="btn btn-app">
                            <i class="fa fa-edit"></i> ویرایش
                        </a>
                        <a class="btn btn-app">
                            <i class="fa fa-play"></i> اجرا
                        </a>
                        <a class="btn btn-app">
                            <i class="fa fa-pause"></i> توقف
                        </a>
                        <a class="btn btn-app">
                            <i class="fa fa-save"></i> ذخیره
                        </a>
                        <a class="btn btn-app">
                            <span class="badge bg-red">6</span>
                            <i class="fa fa-bullhorn"></i> اعلان
                        </a>
                        <a class="btn btn-app">
                            <i class="fa fa-repeat"></i> تکرار
                        </a>
                        <a class="btn btn-app">
                            <span class="badge bg-green">211</span>
                            <i class="fa fa-users"></i> کاربر
                        </a>
                        <a class="btn btn-app">
                            <span class="badge bg-orange">32</span>
                            <i class="fa fa-inbox"></i> سفارش
                        </a>
                        <a class="btn btn-app">
                            <span class="badge bg-orange">12</span>
                            <i class="fa fa-envelope"></i> صندوق ورودی
                        </a>
                        <a class="btn btn-app">
                            <span class="badge bg-blue">102</span>
                            <i class="fa fa-heart-o"></i> لینک
                        </a>
                    </div>
                </div>

            </div>

            <div class="col-md-6">

                <div class="x_panel">
                    <div class="x_title">
                        <h2>اندازه دکمه</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="buttons">
                            <!-- Standard button -->
                            <button type="button" class="btn btn-default btn-lg">دکمه بزرگ</button>
                            <button type="button" class="btn btn-default btn-sm">دکمه متوسط</button>
                            <button type="button" class="btn btn-default btn-xs">دکمه کوچک</button>
                            <br>

                            <button type="button" class="btn btn-success btn-lg">دکمه بزرگ</button>
                            <button type="button" class="btn btn-success btn-sm">دکمه متوسط</button>
                            <button type="button" class="btn btn-success btn-xs">دکمه کوچک</button>
                            <br>

                            <button type="button" class="btn btn-info btn-lg">دکمه بزرگ</button>
                            <button type="button" class="btn btn-info btn-sm">دکمه متوسط</button>
                            <button type="button" class="btn btn-info btn-xs">دکمه کوچک</button>
                            <br>
                        </div>
                    </div>

                </div>


                <div class="x_panel">
                    <div class="x_title">
                        <h2>دکمه گروهی</h2>
                        <ul class="nav navbar-right panel_toolbox">
                            <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                            </li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                   aria-expanded="false"><i class="fa fa-wrench"></i></a>
                                <ul class="dropdown-menu" role="menu">
                                    <li><a href="#">تنظیمات 1</a>
                                    </li>
                                    <li><a href="#">تنظیمات 2</a>
                                    </li>
                                </ul>
                            </li>
                            <li><a class="close-link"><i class="fa fa-close"></i></a>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <div class="x_content">
                        <div class="row">
                            <div class="btn-group">
                                <button class="btn btn-default" type="button">راست</button>
                                <button class="btn btn-default" type="button">وسط</button>
                                <button class="btn btn-default" type="button">چپ</button>
                            </div>
                            <div class="btn-group  btn-group-sm">
                                <button class="btn btn-default" type="button">راست</button>
                                <button class="btn btn-default" type="button">وسط</button>
                                <button class="btn btn-default" type="button">چپ</button>
                            </div>
                        </div>
                        <p class="text-muted">گروه های دکمه عمودی</p>
                        <div class="row">
                            <div class="btn-group-vertical">
                                <button class="btn btn-default" type="button">بالا</button>
                                <button class="btn btn-default" type="button">وسط</button>
                                <button class="btn btn-default" type="button">پایین</button>
                            </div>
                        </div>
                        <p class="text-muted">گروه های دکمه ای درهم</p>
                        <div class="row">
                            <div class="btn-group">
                                <button class="btn btn-default" type="button">1</button>
                                <button class="btn btn-danger" type="button">2</button>
                                <button class="btn btn-default" type="button">3</button>
                                <div class="btn-group">
                                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle"
                                            type="button"> کرکره‌ای <span class="caret"></span></button>
                                    <ul class="dropdown-menu">
                                        <li><a href="#">لینک کشویی 1</a>
                                        </li>
                                        <li><a href="#">لینک کشویی 2</a>
                                        </li>
                                        <li><a href="#">لینک کشویی 3</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        <p class="text-muted">گروه های چندگانه</p>
                        <div class="row">
                            <div class="btn-toolbar">
                                <div class="btn-group">
                                    <button class="btn btn-info" type="button">1</button>
                                    <button class="btn btn-info active" type="button">2</button>
                                    <button class="btn btn-info" type="button">3</button>
                                    <button class="btn btn-info" type="button">4</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn btn-success" type="button">5</button>
                                    <button class="btn btn-success" type="button">6</button>
                                    <button class="btn btn-success" type="button">7</button>
                                </div>
                                <div class="btn-group">
                                    <button class="btn btn-warning" type="button">8</button>
                                </div>
                            </div>
                        </div>

                        <p class="text-muted">رادیو گروه</p>
                        <div class="row">
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-default">
                                    <input type="radio" name="options" id="option1"> گزینه 1
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" name="options" id="option2"> گزینه 2
                                </label>
                                <label class="btn btn-default">
                                    <input type="radio" name="options" id="option3"> گزینه 3
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /page content -->
{% endblock %}

{% block scriptsFiles %}
{% endblock %}
{% block scripts %}
{% endblock %}