input Groups در بوت استرپ

saeed410

saeed410

Member
در قسمت قبل با Button Groups در بوت استرپ آشنا شدیم. در این قسمت میخواهیم با گروه بندی کنترل های ورودی آشنا شویم. یکی از موارد مهم در طراحی سایت کنترل های ورودی در فرم ها هستند. بوت استرپ

کلاسهای زیادی برای استایل دهی به این کنترل ها طراحی کرده است که میتوانید در طراحی وب سایت خود از آن استفاده کنید.

با استفاده از input group میتوانید به راحتی متن ها یا دکمه ها را به اول یا آخر کنترلهای ورودی اضافه کنید. به عنوان مثال میتوانید علامت $ را به ورودی های از نوع پولی اضافه کنید یا @ را به نام کاربری توئیتر اضافه کنید. برای اضافه کردن یک محتوا به اول یا آخر کنترلهایی که دارای کلاس .form-control هستند کارهای زیر را انجام دهید:

  • یک Div ایجاد کنید و تمام کنترل ها را داخل آن قرار دهید. کلاس .input-group را به این div اختصاص دهید
  • برای اضافه کردن یک محتوا به اول یا آخر کنترل مورد نظر از یک تگ span استفاده کنید و کلاس input-group-addon را به آن اختصاص دهید.
  • میتوانید تگ span را قبل و بعد از کنترل مورد نظر قرار دهید.
برای درک بهتر چگونگی کار با input-group با چند مثال ادامم میدهیم:
[h=2]یک input group ساده در بوت استرپ:[/h] مثال زیر یک گروه بندی ساده را نشان میدهد :

[HTMLS]
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="twitterhandle">
</div>
<br>

<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
<br>
<div class="input-group">
<span class="input-group-addon">$</span>
<input type="text" class="form-control">
<span class="input-group-addon">.00</span>
</div>
</form>
</div>
​
[/HTMLS] تصویر دموی این کد به صورت زیر است :
basic-input-group-bootstrap-demo.JPG

[h=2]اندازه ها در input group:[/h] میتواند اندازه ورودی ها را با استفاده از کلاسهای از قبل آماده شده
[h=3]بوت استرپ[/h] تغییر دهید.این کلاسها عبارتند از : input-group-lg ، input-group-xs , input-group-sm . در کد زیر از این کلاسها استفاده کرده ایم:
[HTMLS]
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="input-group input-group-lg">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div><br>

<div class="input-group">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div><br>

<div class="input-group input-group-sm">
<span class="input-group-addon">@</span>
<input type="text" class="form-control" placeholder="Twitterhandle">
</div>
</form>
</div>
​
[/HTMLS] تصویر کد به صورت زیر است:
sizing-input-group-bootstrap-demo.JPG

[h=2]افزودن چکباکس و رادیو ها به کنترلهای ورودی در بوت استرپ:[/h] همچنین با استفاده از بوت استرپ میتوانید رادیو ها و چک باکس ها را به کنترلهای ورودی اضافه کنید.برای این کار یک تگ span ایجاد کنید و کلاس input-group-addon را به آن اختصاص دهید .سپس چکباکس یا رادیو ها را داخل این تگ ایجاد کنید . مثال زیر این قضیه را نشان میدهد:[HTMLS]

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="checkbox">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">
<input type="radio">
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>​
[/HTMLS] تصویر این کد به صورت زیر است :
CheckBoxAddon-input-group-bootstrap-demo.JPG

[h=2]افزودن دکمه ها به ورودی ها در بوت استرپ:[/h] در بوت استرپ امکاناتی برای اضافه کردن دکمه ها به ورودی های متنی وجود دارد. بجای استفاده از کلاس input-group-addon میتوانید از کلاس input-group-btn استفاده کنید.مثال:
[HTMLS]

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Go!
</button>
</span>
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
Go!
</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>​
[/HTMLS]
تصویر این کد:
ButtonAddon-input-group-bootstrap-demo.JPG

[h=2]دکمه های آبشاری در ورودی های متنی[/h] با قرار دادن دکمه ها در داخل کلاس input-group-btn میتوانید دکمه های بازشو(آبشاری) یا DropDown ایجاد کنید. مثال :
[HTMLS]
<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">
DropdownMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">
DropdownMenu
<span class="caret"></span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>

​
[/HTMLS] تصویر این کد به صورت زیر است :

ButtonDropDown-input-group-bootstrap-demo.JPG

[h=2]جداسازی دکمه ها :[/h] میتوانید دکمه های آبشاری را به صورتی طراحی کنید که Drop Down و دکمه از هم جدا باشند. در این روش با کلیک روی دکمه میتوانید یک action جدا داشته باشید.مثال :
[HTMLS]

<div style="padding: 100px 100px 10px;">
<form class="bs-example bs-example-form" role="form">
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default"
tabindex="-1">Dropdwon Menu
</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<input type="text" class="form-control">
</div><!-- /input-group -->
</div><!-- /.col-lg-6 --><br>
<div class="col-lg-6">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn">
<button type="button" class="btn btn-default"
tabindex="-1">Dropdwon Menu
</button>
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu pull-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div><!-- /.row -->
</form>
</div>​
[/HTMLS]
تصویر این کد به صورت زیر است:
SegmentedButtonDropDown-input-group-bootstrap-demo.JPG

در قسمت بعد با کامپوننت navigation یا ناوبری آشنا خواهیم شد.

در گروه: کامپوننت های لایه بندی
منبع:َ طراحی سایت
 
برای ارسال پاسخ شما باید وارد سیستم شوید.

آخرین مطالب مجیدآنلاین

جدیدترین ارسال ها

بالا