اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

0 دیدگاه

اندازه بندی عناصر ورودی بوت استرپ

سلام. در ادامه مطالب آموزشی بوت استرپ توی این مطلب آموزش اندازه بندی عناصر ورودی بوت استرپ رو خدمت دوستان ارائه می نماییم. لطفا با ما همراه باشید…

اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

با استفاده از کلاس هایی مانند .input-sm و .input-lg ارتفاع عناصر ورودی را در بوت استرپ تنظیم کنید.

مثال های زیر عناصر ورودی را با اندازه های مختلف در بوت استرپ را به شما دوستان عزیز نشان میدهد :

<form role="form">
  <div class="form-group">
    <label for="inputdefault">Default input</label>
    <input class="form-control" id="inputdefault" type="text">
  </div>
  <div class="form-group">
    <label for="inputlg">input-lg</label>
    <input class="form-control input-lg" id="inputlg" type="text">
  </div>
  <div class="form-group">
    <label for="inputsm">input-sm</label>
    <input class="form-control input-sm" id="inputsm" type="text">
  </div>
</form>

<label for="inputdefault">Default input</label>

</div>

<label for="inputlg">input-lg</label>

</div>

<label for="inputsm">input-sm</label>

</div>

</form>

میتوانید به سرعت برچسب ها و کنترل فرم های درون یک فرم افقی را با اضافه کردن کلاس <div class=”form-group”>به عنصر .form-group-* تنظیم کنید.

 <form class="form-horizontal" role="form">
  <div class="form-group form-group-lg">
    <label class="col-sm-2 control-label" for="lg">form-group-lg</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="lg">
    </div>
  </div>
  <div class="form-group form-group-sm">
    <label class="col-sm-2 control-label" for="sm">form-group-sm</label>
    <div class="col-sm-10">
      <input class="form-control" type="text" id="sm">
    </div>
  </div>
</form>

<label class="col-sm-2 control-label" for="lg">form-group-lg</label>

</div>

<label class="col-sm-2 control-label" for="sm">form-group-sm</label>

</div>

</form>

جهت مشاهده مثال دیگر کلیک نمایید

سایز بندی به ستون ها در بوت استرپ

مثال های زیر عنصر های ورودی را با عرض های مختف در بوت استرپ نشان میدهد. برای این کار از کلاس col-xs-* استفاده کنید

<div class="col-xs-2">
  <label for="ex1">col-xs-2</label>
  <input class="form-control" id="ex1" type="text">
</div>
<div class="col-xs-3">
  <label for="ex2">col-xs-3</label>
  <input class="form-control" id="ex2" type="text">
</div>
<div class="col-xs-4">
  <label for="ex3">col-xs-4</label>
  <input class="form-control" id="ex3" type="text">
</div>

</div>

</div>

</div>

متن کمکی و راهنما

برای اضافه کردن یک فیلد به عنوان پسورد و یا ستاره دار که کاراکتر های فیلد مورد نظر بصورت قابل مشاهده نباشد از کلاس.help-block استفاده کنید. این فیلد اغلب در فیلدهای وارد نمودن پسورد استفاده می شود

 <div class="form-group">
  <label for="pwd">Password:</label>
  <input type="password" class="form-control" id="pwd" placeholder="Enter password">
  <span class="help-block">This is some help text...</span>
</div>

<label for="pwd">Password:</label>

</div>

مشاهده مثال دیگر

برای تازه شدن دیر نیست

موفق و پیروز باشید

5/5 - (1 امتیاز)

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.

نظرات

برچسب ها: آموزش بوت استرپ, آموزش بوت استرپ به زبان فارسی, آموزش متوسطه بوت استرپ

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

پکیج آموزش صفر تا صد فتوشاپ به زبان فارسی – حرفه ای شوید

منبع : سورس باران
رمز فايل : www.sourcebaran.com
انتشار: ۱۱ مرداد ۱۳۹۵

اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

اندازه بندی عناصر ورودی بوت استرپ – آموزش بوت استرپ

سایز بندی به ستون ها در بوت استرپ

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط