CORK الگوی مدیریتی تمام ریسپانسیو

پایه ای اندازه ها چندگانه ورودی گروهی با عمل

@example.com

آدرس اینترنتی غرور شما

https://

.00

با متن

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon5">@</span>
  </div>
  <input type="text" class="form-control" placeholder="نام کاربری" aria-label="Username">
</div>

<div class="input-group mb-5">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon6">@example.com</span>
  </div>
</div>

<label for="basic-url">آدرس اینترنتی غرور شما</label>
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon7">https://</span>
  </div>
  <input type="text" class="form-control" id="basic-url" aria-describedby="basic-addon3" placeholder="example.com/users/">
</div>

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">$</span>
  </div>
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">.00</span>
  </div>
</div>

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">با متن</span>
  </div>
  <textarea class="form-control" aria-label="با متن"></textarea>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon1"><svg> ... </svg></span>
    </div>
    <input type="text" class="form-control" placeholder="اطلاعیه" aria-label="notification" aria-describedby="basic-addon1">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="اطلاعیه" aria-label="notification" aria-describedby="basic-addon2">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon2"><svg> ... </svg></span>
    </div>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <span class="input-group-text" id="basic-addon3"><svg class="spin"> ... </svg></span>
    </div>
    <input type="text" class="form-control" placeholder="اسپینرها" aria-label="spinners" aria-describedby="basic-addon3">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="اسپینرها" aria-label="spinners" aria-describedby="basic-addon4">
    <div class="input-group-append">
        <span class="input-group-text" id="basic-addon4"><svg class="spin"> ... </svg></span>
    </div>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0);">Action</a>
            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
            <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
        </div>
    </div>
    <input type="text" class="form-control"placeholder="کشویی" aria-label="dropdown">
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control"placeholder="کشویی" aria-label="dropdown">
    <div class="input-group-append">
        <button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><svg> ... </svg> </button>
        <div class="dropdown-menu">
            <a class="dropdown-item" href="javascript:void(0);">Action</a>
            <a class="dropdown-item" href="javascript:void(0);">Another action</a>
            <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
            <div role="separator" class="dropdown-divider"></div>
            <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
        </div>
    </div>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <div class="input-group-text">
        <div class="n-chk align-self-end">
            <label class="new-control new-checkbox checkbox-danger" style="height: 21px; margin-bottom: 0; margin-right: 0">
              <input type="checkbox" class="new-control-input" checked>
              <span class="new-control-indicator"></span>
            </label>
        </div>
    </div>
  </div>
  <input type="text" class="form-control" placeholder="چک باکس" aria-label="checkbox" >
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="چک باکس" aria-label="checkbox" aria-describedby="basic-addon1">
    <div class="input-group-append">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-checkbox checkbox-warning" style="height: 21px; margin-bottom: 0; margin-right: 0">
                  <input type="checkbox" class="new-control-input" checked>
                  <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
    </div>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-radio radio-info" style="height: 21px; margin-bottom: 0; margin-right: 0">
                    <input type="radio" class="new-control-input" name="custom-radio-1" checked>
                    <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="رادیو" aria-label="radio" >
</div>

=========
  Right
=========
<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="رادیو" aria-label="Radio">
    <div class="input-group-append">
        <div class="input-group-text">
            <div class="n-chk align-self-end">
                <label class="new-control new-radio radio-success" style="height: 21px; margin-bottom: 0; margin-right: 0">
                  <input type="radio" class="new-control-input" name="custom-radio-1" checked>
                  <span class="new-control-indicator"></span>
                </label>
            </div>
        </div>
    </div>
</div>

چپ

راست

=========
  LEFT
=========

<div class="input-group mb-4">
    <div class="input-group-prepend">
        <div class="input-group-text">
            <label class="switch s-primary mb-0">
                <input type="checkbox" checked="">
                <span class="slider"></span>
            </label>
        </div>
    </div>
    <input type="text" class="form-control" placeholder="سوییچ" aria-label="switch" >
</div>

=========
  RIGHT
=========

<div class="input-group mb-4">
    <input type="text" class="form-control" placeholder="سوییچ" aria-label="switch">
    <div class="input-group-append">
        <div class="input-group-text">
            <label class="switch s-danger mb-0">
                <input type="checkbox" checked="">
                <span class="slider"></span>
            </label>
        </div>
    </div>
</div>

اندازه

کوچک

پیشفرض

بزرگ

<div class="input-group input-group-sm mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
  </div>
  <input type="text" class="form-control" aria-label="Small" aria-describedby="inputGroup-sizing-sm">
</div>

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
  </div>
  <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>

<div class="input-group input-group-lg mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
  </div>
  <input type="text" class="form-control" aria-label="Large" aria-describedby="inputGroup-sizing-sm">
</div>

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

نام و نام خانوادگی

<div class="input-group mb-4">
  <div class="input-group-prepend">
    <span class="input-group-text">نام و نام خانوادگی</span>
  </div>
  <input type="text" class="form-control">
  <input type="text" class="form-control">
</div>

چپ

0.00

راست

0.00

=========
  LEFT
=========
<div class="input-group mb-4">
  <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>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)">
  <div class="input-group-append">
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </div>
</div>

ورودی گروهی با عمل

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Text input with dropdown button">
  <div class="input-group-append">
    <button class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
</div>

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button type="button" class="btn btn-info">Action</button>
    <button type="button" class="btn btn-outline-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <svg> ... </svg>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" aria-label="Text input with segmented dropdown button">
  <div class="input-group-append">
    <button type="button" class="btn btn-outline-info">Action</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <svg> ... </svg>
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="javascript:void(0);">Action</a>
      <a class="dropdown-item" href="javascript:void(0);">Another action</a>
      <a class="dropdown-item" href="javascript:void(0);">چیز دیگری در اینجا</a>
      <div role="separator" class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:void(0);">پیوند جدا شده</a>
    </div>
  </div>
</div>

چپ

راست

چپ

راست

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-primary" type="button">دکمه</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده">
  <div class="input-group-append">
    <button class="btn btn-primary" type="button">دکمه</button>
  </div>
</div>

=========
  LEFT
=========
<div class="input-group mb-4">
  <div class="input-group-prepend">
    <button class="btn btn-outline-primary" type="button">دکمه</button>
    <button class="btn btn-outline-primary" type="button">دکمه</button>
  </div>
  <input type="text" class="form-control" placeholder="" aria-label="">
</div>

=========
  RIGHT
=========
<div class="input-group mb-4">
  <input type="text" class="form-control" placeholder="نام کاربری گیرنده" aria-label="نام کاربری گیرنده">
  <div class="input-group-append">
    <button class="btn btn-outline-primary" type="button">دکمه</button>
    <button class="btn btn-outline-primary" type="button">دکمه</button>
  </div>
</div>

پیشفرض

نماد ساده

آیکون چرخشی

آیکون کشویی

چک باکس ها

رادیو ها

سوییچ

اندازه

اندازه

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

ورودی های متعدد

افزونه های متعدد

ورودی گروهی با عمل

دکمه هایی با کشویی

دکمه های تقسیم شده

دکمه های اضافی

محسن رضایی

هومن شکیبا

زهرا جوان

راه اندازی مجدد سرور

لایسنس به زودی منقضی می شود

Portfolio.pdf

پیشفرض

نماد ساده

آیکون چرخشی

آیکون کشویی

چک باکس ها

رادیو ها

سوییچ

اندازه

اندازه

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

ورودی های متعدد

افزونه های متعدد

ورودی گروهی با عمل

دکمه هایی با کشویی

دکمه های تقسیم شده

دکمه های اضافی