سلام, محسن م

##### اینپوت گروپ

اقدامات

### نمونه های پایه

استفاده از از ایکون و نماد در اینپوت گروپ فرم Flaticon, Fontawesome 5, Duotone, Fontawesome یا Socicons آیکون ها.
افزوده شده در راست
@
در اینجا می توانید توضیحات بنویسید
افزوده شده در چپ
@example.com
افزوده دوتایی
دلار 0.00
افزوده شده در چپ
#
px

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										نمونه های پایه
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													استفاده از از ایکون و نماد در اینپوت گروپ فرم <a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/flaticon' ) ?>">Flaticon</a>,
    													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/fontawesome5' ) ?>">Fontawesome 5</a>,
    													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/duo-tone' ) ?>">Duotone</a>,
    													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/lineawesome' ) ?>">Fontawesome</a> or
    													<a  class="font-weight-bold" href="<?php echo Util::getUrl( 'components/icons/socicons' ) ?>">Socicons</a> icons.
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend"><span class="input-group-text">@</span></div>
    												<input type="text" class="form-control" placeholder="پست الکترونیک" />
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در چپ</label>
    											<div class="input-group">
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text">@example.com</span></div>
    											</div>
    										</div>
    										<div class="separator separator-dashed my-8"></div>
    										<div class="form-group">
    											<label>افزوده دوتایی</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">دلار</span>
    													<span class="input-group-text">0.00</span>
    												</div>
    												<input type="text" class="form-control" aria-label="Amount (to the nearest dollar)"/>
    											</div>
    										</div>
    										<div class="form-group mb-2">
    											<label>راست & افزوده شده در چپs</label>
    											<div class="input-group">
    												<div class="input-group-prepend"><span class="input-group-text">#</span></div>
    												<input type="text" class="form-control" placeholder="واحد" />
    												<div class="input-group-append"><span class="input-group-text">px</span></div>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### همراه با آیکون

با افزودن متن ، دکمه ها ، آیکون ها ، یا گروه های دکمه در هر طرف ورودی ، به راحتی کنترل فرم ها را گسترش دهید.
افزوده شده در راست
در اینجا می توانید توضیحات بنویسید
افزوده شده در چپ
افزوده دوتایی
دلار
افزوده دو طرفه
دووتون
آیکون کین تم

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										همراه با آیکون
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/ابزارها/Compass.svg", "svg-icon-primary svg-icon-xl");?></div>
    												<div class="alert-text">
    													با افزودن متن ، دکمه ها ، آیکون ها ، یا گروه های دکمه در هر طرف ورودی ، به راحتی کنترل فرم ها را گسترش دهید.
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
    												<input type="text" class="form-control" placeholder="پست الکترونیک" />
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در چپ</label>
    											<div class="input-group">
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
    											</div>
    										</div>

    										<div class="separator separator-dashed my-8"></div>

    										<div class="form-group">
    											<label>افزوده دوتایی</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">دلار</span>
    												</div>
    												<input type="text" class="form-control" placeholder="0.00" aria-label="Amount (to the nearest dollar)"/>
    												<div class="input-group-append">
    													<span class="input-group-text"><i class="la la-registered"></i></span>
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده دو طرفه</label>
    											<div class="input-group">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="flaticon-refresh"></i></span></div>
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text"><i class="flaticon-user"></i></span></div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>دووتون</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text line-height-0 py-0">
    														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/عمومی/جستجو.svg");?>
    													</span>
    												</div>
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append">
    													<span class="input-group-text line-height-0 py-0">
    														<?php echo Page::getSVG(Page::getMediaPath() . "svg/icons/کد/Compiling.svg");?>
    													</span>
    												</div>
    											</div>
    										</div>
    										<div class="form-group mb-2">
    											<label>آیکون کین تم</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text line-height-0 py-0">
    														<i class="ki ki-arrow-back icon-sm"></i>
    													</span>
    												</div>
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append">
    													<span class="input-group-text line-height-0 py-0">
    														<i class="ki ki-arrow-next icon-sm"></i>
    													</span>
    												</div>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### اندازه های مختلف

کلاس های نسبی اندازه به کلاس اضافه کنید `.input-group` خود و محتویات درون به طور خودکار تغییر اندازه خواهد کرد
اینپوت بزرگ گروه
در اینجا می توانید توضیحات بنویسید
اینپوت بزرگ گروه
0.00
اینپوت کوچک گروه
اینپوت کوچک گروه
اینپوت کوچک گروه

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										اندازه های مختلف
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													کلاس های نسبی اندازه به کلاس اضافه کنید <code>.input-group</code> خود و محتویات درون
    													به طور خودکار تغییر اندازه خواهد کرد
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>اینپوت بزرگ گروه</label>
    											<div class="input-group input-group-lg">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle "></i></span></div>
    												<input type="text" class="form-control" placeholder="اندازه بزرگ" />
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>اینپوت بزرگ گروه</label>
    											<div class="input-group input-group-lg">
    												<div class="input-group-prepend">
    													<span class="input-group-text"><i class="flaticon-refresh"></i></span>
    													<span class="input-group-text">0.00</span>
    												</div>
    												<input type="text" class="form-control" aria-label="اندازه بزرگ"/>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>اینپوت کوچک گروه</label>
    											<div class="input-group input-group-sm">
    												<input type="text" class="form-control" placeholder="اندازه کوچک" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>اینپوت کوچک گروه</label>
    											<div class="input-group input-group-sm">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
    												<input type="text" class="form-control" placeholder="اندازه کوچک" aria-describedby="basic-addon2"/>
    											</div>
    										</div>
    										<div class="form-group mb-2">
    											<label>اینپوت کوچک گروه</label>
    											<div class="input-group input-group-sm">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="fa fa-paper-plane" aria-hidden="true"></i></span></div>
    												<input type="text" class="form-control" placeholder="اندازه کوچک" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text"><i class="la la-group"></i></span></div>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### اینپوت با آیکون

برای قرار دادن آیکون در داخل کنترل ورودی از مؤلفه ورودی نماد سفارشی استفاده کنید.
اینپوت با ایکون راست
در اینجا می توانید توضیحات بنویسید
اینپوت با ایکون چپ
در اینجا می توانید توضیحات بنویسید

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										اینپوت با آیکون
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">برای قرار دادن آیکون در داخل کنترل ورودی از مؤلفه ورودی نماد سفارشی استفاده کنید.</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>اینپوت با ایکون راست</label>
    											<div class="input-icon">
    												<input type="text" class="form-control" placeholder="جستجو..."/>
    												<span><i class="flaticon2-search-1 icon-md"></i></span>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>اینپوت با ایکون چپ</label>
    											<div class="input-icon input-icon-right">
    												<input type="text" class="form-control" placeholder="جستجو..."/>
    												<span><i class="flaticon2-search-1 icon-md"></i></span>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### اینپوت های همراه با چک باکس و رادیو باکس

می توانید در اینپوت چک باکس و رادیو باکس قرار دهید
افزوده چک باکس در راست
دلار
چک باکس در سمت چپ
دلار
افزوده چک باکس در راست
رادیو در سمت راست
دلار
رادیو باکس در چپ
دلار
رادیو در سمت راست

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										اینپوت های همراه با چک باکس و رادیو باکس
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													می توانید در اینپوت چک باکس و رادیو باکس قرار دهید
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده چک باکس در راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">
    														<label class="checkbox checkbox-inline checkbox-success">
    															<input type="checkbox" checked=""/>
    															<span></span>
    														</label>
    													</span>
    													<span class="input-group-text">دلار</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with checkbox"/>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>چک باکس در سمت چپ</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">دلار</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with checkbox"/>
    												<div class="input-group-append">
    													<span class="input-group-text">
    														<label class="checkbox checkbox-inline checkbox-primary">
    															<input type="checkbox" checked=""/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>چپ & افزوده چک باکس در راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">
    														<label class="checkbox checkbox-inline">
    															<input type="checkbox" checked="checked"/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with checkbox"/>
    												<div class="input-group-append">
    													<span class="input-group-text">
    														<label class="checkbox checkbox-inline">
    															<input type="checkbox"/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>رادیو در سمت راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">
    														<label class="radio radio-single radio-success">
    															<input type="radio" checked=""/>
    															<span></span>
    														</label>
    													</span>
    													<span class="input-group-text">دلار</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with radio"/>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>رادیو باکس در چپ</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">دلار</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with radio"/>
    												<div class="input-group-append">
    													<span class="input-group-text">
    														<label class="radio radio-single radio-primary">
    															<input type="radio" checked=""/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    											</div>
    										</div>
    										<div class="form-group mb-2">
    											<label>چپ & رادیو در سمت راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<span class="input-group-text">
    														<label class="radio radio-single">
    															<input type="radio"/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with radio"/>
    												<div class="input-group-append">
    													<span class="input-group-text">
    														<label class="radio radio-single">
    															<input type="radio"/>
    															<span></span>
    														</label>
    													</span>
    												</div>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### افزوده دکمه

اینپوت با دکمه `.input-group-prepend` or `.input-group-append` برای تراز و اندازه مناسب این به دلیل سبکهای پیش فرض مرورگر است که نمی توان از آن استفاده کرد.
افزوده شده در راست دکمه
افزوده شده در چپ دکمه
افزوده شده در چپ دکمه
افزوده شده در راست دکمه
افزوده شده در چپ دکمه
افزوده شده در چپ دکمه

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										افزوده دکمه
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													اینپوت با دکمه  <code>.input-group-prepend</code> or <code>.input-group-append</code> برای تراز و اندازه مناسب
    												این به دلیل سبکهای پیش فرض مرورگر است که نمی توان از آن استفاده کرد.
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در راست دکمه</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button class="btn btn-secondary" type="button">برو!</button>
    												</div>
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در چپ دکمه</label>
    											<div class="input-group">
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    												<div class="input-group-append">
    													<button class="btn btn-secondary" type="button">برو!</button>
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>راست & افزوده شده در چپ دکمه</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button class="btn btn-secondary" type="button">برو!</button>
    												</div>
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    												<div class="input-group-append">
    													<button class="btn btn-secondary" type="button">برو!</button>
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در راست دکمه</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button class="btn btn-primary" type="button">برو!</button>
    												</div>
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در چپ دکمه</label>
    											<div class="input-group">
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    												<div class="input-group-append">
    													<button class="btn btn-primary" type="button">برو!</button>
    												</div>
    											</div>
    										</div>
    										<div class="form-group mb-2">
    											<label>راست & افزوده شده در چپ دکمه</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button class="btn btn-success" type="button">برو!</button>
    												</div>
    												<input type="text" class="form-control" placeholder="جستجو ..."/>
    												<div class="input-group-append">
    													<button class="btn btn-warning" type="button">برو!</button>
    												</div>
    											</div>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### اینپوت با دکمه دراپ دان

فرم مثال زیر عناصر فرم جی اس معمول را نشان می دهد که از کلاس های اضافی سبک های به روز شده را از بوت استرپ دریافت می کنند.
دکمه دراپ دان در راست
در اینجا می توانید توضیحات بنویسید
دکمه دراپ دان چپ
در اینجا می توانید توضیحات بنویسید
دکمه دراپ دان چپ و راست
در اینجا می توانید توضیحات بنویسید

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										اینپوت با دکمه دراپ دان
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													فرم مثال زیر عناصر فرم جی اس معمول را نشان می دهد که از کلاس های اضافی سبک های به روز شده را از بوت استرپ دریافت می کنند.
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>دکمه دراپ دان در راست</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>دکمه دراپ دان چپ</label>
    											<div class="input-group">
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    												<div class="input-group-append">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group mb-2">
    											<label>راست & دکمه دراپ دان چپ</label>
    											<div class="input-group">
    												<div class="input-group-prepend">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    												<div class="input-group-append">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### استایل تک رنگ

فرم مثال زیر عناصر فرم جی اس معمول را نشان می دهد که از کلاس های اضافی سبک های به روز شده را از بوت استرپ دریافت می کنند.
افزوده شده در راست
در اینجا می توانید توضیحات بنویسید
افزوده شده در چپ
دکمه دراپ دان در راست
در اینجا می توانید توضیحات بنویسید
دکمه دراپ دان چپ
در اینجا می توانید توضیحات بنویسید
دکمه دراپ دان چپ و راست
در اینجا می توانید توضیحات بنویسید

    							<div class="card card-custom">
    								<div class="card-header">
    									<h3 class="card-title">
    										استایل تک رنگ
    									</h3>
    								</div>
    								<!--begin::Form-->
    								<form class="form">
    									<div class="card-body">
    										<div class="form-group">
    											<div class="alert alert-custom alert-default" role="alert">
    												<div class="alert-icon"><i class="flaticon-warning text-primary"></i></div>
    												<div class="alert-text">
    													فرم مثال زیر عناصر فرم جی اس معمول را نشان می دهد که از کلاس های اضافی سبک های به روز شده را از بوت استرپ دریافت می کنند.
    												</div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در راست</label>
    											<div class="input-group input-group-solid">
    												<div class="input-group-prepend"><span class="input-group-text"><i class="la la-exclamation-triangle icon-lg"></i></span></div>
    												<input type="text" class="form-control" placeholder="پست الکترونیک" />
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>افزوده شده در چپ</label>
    											<div class="input-group input-group-solid">
    												<input type="text" class="form-control" placeholder="نام کاربری" aria-describedby="basic-addon2"/>
    												<div class="input-group-append"><span class="input-group-text"><i class="la la-group icon-lg"></i></span></div>
    											</div>
    										</div>
    										<div class="form-group">
    											<label>دکمه دراپ دان در راست</label>
    											<div class="input-group input-group-solid">
    												<div class="input-group-prepend">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>دکمه دراپ دان چپ</label>
    											<div class="input-group input-group-solid">
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    												<div class="input-group-append">
    													<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu dropdown-menu-right">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    										<div class="form-group">
    											<label>راست & دکمه دراپ دان چپ</label>
    											<div class="input-group input-group-solid">
    												<div class="input-group-prepend">
    													<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    												<input type="text" class="form-control" aria-label="متن input with dropdown button"/>
    												<div class="input-group-append">
    													<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    													اکشن
    													</button>
    													<div class="dropdown-menu dropdown-menu-right">
    														<a class="dropdown-item" href="#">اکشن</a>
    														<a class="dropdown-item" href="#">اکشن های دیگر</a>
    														<a class="dropdown-item" href="#">سایر موارد</a>
    														<div role="separator" class="dropdown-divider"></div>
    														<a class="dropdown-item" href="#">جداکننده لینک</a>
    													</div>
    												</div>
    											</div>
    											<span class="form-text text-muted">در اینجا می توانید توضیحات بنویسید</span>
    										</div>
    									</div>
    									<div class="card-footer">
    										<button type="reset" class="btn btn-primary mr-2">ارسال</button>
    										<button type="reset" class="btn btn-secondary">لغو</button>
    									</div>
    								</form>
    								<!--end::Form-->
    							</div>

### پروفایل کاربر 12 پیام

محسن برومند
توسعه اپلیکیشن
jm@softplus.com خروج
پروفایل من
تنظیمات اکانت بروزرسانی
پیام های من
صندوق پیام ها و کارها
فعالیت های من
لاگ ها و اعلان ها
کارهای من
اخرین کارها و پروژه ها

##### آخرین اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%

#### سبد خرید

iBlender بهترین وسایل آشپزخانه در سال 2020
دلار 350 5
پاک کننده هوشمند ابزار هوشمند برای پخت و پز
650دلار 4
دوربین دوربین حرفه ای برای عکس
150دلار 3
چاپگر 4D ساخت اشیاء منحصر به فرد
دلار 1450 7
موشن ابزار انیمیشن ایده آل
650دلار 7

##### پیام های سیستم

نویسندگان برتر موفق ترین ها
+82دلار
نویسندگان محبوب موفق ترین ها
+280دلار
کاربران جدید موفق ترین ها
+4500دلار
فعال مشتریان موفق ترین ها
+4500دلار
تم پرفروش موفق ترین ها
+4500دلار

##### اعلان ها

اهداف دیگر موعد 2 روز
+28%
برای مردم خواهد بود موعد 2 روز
+50%
هدف این خواهد بود که ترغیب شود موعد 2 روز
-27%
بهترین محصول موعد 2 روز
+8%
5 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
2 موارد جدید ارسال شد
توسط محمد رضایی
فایل های ایجاد شده
گزارش ها بر اساس فروش
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است
3 هشدارهای دفاعی
هفته گذشته 40٪ هشدار کمتری دارد
میانگین 4 پست وبلاگ برای هر نویسنده
12 بار ارسال شده است
هفته گذشته 16 نویسنده پیوستند
طراح
2 مورد جدید ارسال شده است
توسط محمد رضایی
حجم دانلودها 2 گیگ
مفاهیم بنیادی
دلار2900 ارزش محصولات فروخته شده
جمع آوری 234 مورد
7 گزارش تولید شده توسط کاربر جدید
گزارش ها بر اساس فروش
میانگین زمان پاسخگویی 4.5 ساعت
فاستوست باری است

##### مراقبت از مشتری

فعال کردن اعلان ها:
فعال کردن ردیابی:
پرتال پشتیبانی

##### گزارشات

گزارش عمومیات:
فعال سازی خروچی گزارش
اجازه جمع آوری داده ها:

##### اعضا

فعال سازی عضویت اعضا
اجازه نظر دهی
فعال کردن پرتال مشتری
محسن برومند
فعال
محسن برومند 2 ساعت
چقدر احتمال دارید که شرکت ما را توصیه کنید به دوستان و خانواده خود؟
3 دقیقه شما
سلام در آنجا ، ما فقط می نویسیم تا به شما اطلاع دهیم که در مخزن گیت هاب مشترک شده اید.
محسن برومند 40 ثانیه
باشه ، فهمیدم
همین الان شما
برای همه مشکلات اعلان دریافت خواهید کرد ، درخواستها را بکشید!
محسن برومند 40 ثانیه
شما می توانید با کلیک بر روی این مخزن بلافاصله از حالت انتخاب خارج شوید:https://github.com
همین الان شما
آموزش رو دیدم.
محسن برومند 40 ثانیه
بیشترین دوره های تجاری خریداری شده در این فروش!
همین الان شما
شرکت BBQ برای جشن گرفتن دستاوردها و اهداف سه ماهه آخر. غذا و نوشیدنی تهیه شده

#### انتخاب نسخه ی نمایشی

##### نسخه ی نمایشی 1

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 2

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 3

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 4

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 5

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 6

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 7

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 8

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 9

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 10

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 11

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 12

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 13

پیش فرض نسخه راست چین

##### نسخه ی نمایشی 14

به زودی

##### نسخه ی نمایشی 15

به زودی

##### نسخه ی نمایشی 16

به زودی

##### نسخه ی نمایشی 17

به زودی

##### نسخه ی نمایشی 18

به زودی

##### نسخه ی نمایشی 19

به زودی

##### نسخه ی نمایشی 20

به زودی

##### نسخه ی نمایشی 21

به زودی

##### نسخه ی نمایشی 22

به زودی

##### نسخه ی نمایشی 23

به زودی

##### نسخه ی نمایشی 24

به زودی

##### نسخه ی نمایشی 25

به زودی

##### نسخه ی نمایشی 26

به زودی

##### نسخه ی نمایشی 27

به زودی

##### نسخه ی نمایشی 28

به زودی

##### نسخه ی نمایشی 29

به زودی

##### نسخه ی نمایشی 30

به زودی