در خدمت شما هستیم با آموزش Bootstrap جلسه بیست و هفتم (Input Sizing)
آموزش Bootstrap جلسه بیست و هفتم (Input Sizing) از سری آموزش های تک قسمتی است
سلام برنامه در این جلسه درباره انواع سایز باکس ها و input ها بحث می کند
وقتی صحبت از سایز می آید منظور Width و height است
در این جلسه هم ، درباره عرض باکس ها و input ها و استاندارد های آن بحث می کنیم
و هم درباره ارتفاع آنها که آن هم اندازه ای استاندارد دارد
این سایز ها بر اساس رسپانسیو بودن صفحات اعمال می شوند و براساس رزولیشن تعیین می شوند
و ارتفاع نیز بر اساس کوچک یا بزرگ بودن المان ارائه می شود
Input Sizing
در ۲ جلسه قبلی به صورت کامل به input ها و form ها پرداختیم و حالت های مختلف آن ها را در بوت استرپ به شما توضیح دادیم یکی از مهمترین موارد که بوت استرپ را محبوب کرده امکان استفاده از کلاس های آماده است اگر شما بخواهید سایت خود را برای دستگاه های ختلف بهینه کنید اولین قدم این است که سایز های استاندارد دستگاه های مختلف را بشناسید و به صورت دستی آنها را تک به تک در css خود معرفی کنید و برای هرکدام استایل هایی مختلف طراحی کنید. اما در بوت استرپ تنها با قرار دادن کلاس های اندازه دستگاه ها میتوانید این کار را انجام دهید.
سایز input ها یکی از موارد مهمی است که در دستگاه های مختلف آن هارا بهینه میکند یکی از مهمترین کلاس ها برای این بهینه سازی کلاس input-lg و یا input-sm است که برای تنظیم ارتفاع Input ها و کلاس های col-lg-12 و یا col-sm-6 برای عرض یا همان width باکس ها استفاده میشود جای مقدار های گذاشته شده از ۱ تا ۱۲ میتوان مقدار دهی کرد برای درک بهتر موضوع میتوانید از کد زیر استفاده کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Input Sizing</h2>
<p>The form below shows input elements with different heights using .input-lg and .input-sm:</p>
<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>
<div class="form-group">
<label for="sel1">Default select list</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<label for="sel2">input-lg</label>
<select class="form-control input-lg" id="sel2">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="form-group">
<label for="sel3">input-sm</label>
<select class="form-control input-sm" id="sel3">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
</form>
</div>
</body>
</html>
همانطور که در کد بالا مشخص است با کلاس های input-lg و input-sm توانستیم سایز input ها را تغییر دهیم برای مشاهده این تغییرات کافیست از کد بالا خروجی Html بگیرید.
تغییر سایز گروهی
اگر input های شما شامل متن ،توضیحات ،آیکن ها و … هستند و شما قصد دارید آنها را برای دستگاه های مختلف بهینه کنید بهتر است با ادامه این آموزش بوت استرپ همراه باشید.
همانطور که بالاتر به شما گفتیم با استفاده از col ها میتوانید این تنظیمات را به وجود بیاورید حال برای حالت گرهی کافیست کلاس form-group-lg و یا حالت های دیگر را نیز به کد های خود اضافه کنید توجه داشته باشید که این کلاس را به سر دسته گروه میدهیم و به واسطه col ها الباقی را مرتب میکنیم برای اینکه موضوع واضح تر شود پیشنهاد میکنیم کد زیر را دنبال کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Input Sizing</h2>
<p>You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg or .form-group-sm to the div class="form-group" element:</p>
<form class="form-horizontal">
<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>
</div>
</body>
</html>
اگر قصد دارید یک حالت واحد را برای تمام باکس های خود اعمال کنید کافیست به جای کلاس form-group از کلاس input-group استفاده کنید با این روش تمامی المان های شما به یکباره سایزی واحد میگیرند. اگر میخواهید موضوع برای شما واضح تر شود کد زیر را دنبال کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Input Group Size</h1>
<p>The .input-group class is a container to enhance an input by adding an icon, text or a button in front or behind it as a "help text".</p>
<p>Use the .input-group-lg if you want a large input group:</p>
<form>
<div class="input-group input-group-lg">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
<br>
<p>Use the .input-group-sm if you want a small input group:</p>
<form>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</html>
سایز col ها
تا اینجای کار درباره سایز دهی به input ها و form ها و المان های همراه آنها صحبت کردیم حال میپردازیم به سایز دهی خود باکس های input ها در جلسه آموزش col ها گفتیم که اگر از آخرین حالت یعنی xs استفاده کنیم و یا حالت دیگر مثلا sm استفاده کنیم کلاس های قبل از آن هم همان مقدار را میگیرد. شما میتوانید به راحتی با تغییر عددی این col ها سایز مد نظر خود را ایجاد کنید برای درک بهتر این موضوع میتوانید از کد زیر کمک بگیرید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Column Sizing</h2>
<p>The form below shows input elements with different widths using different .col-xs-* classes:</p>
<form>
<div class="form-group row">
<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>
</form>
</div>
</body>
</html>
و اما آخرین مبحث input ها
نوشته توضیحات زیر input
اگر شما قصد دارید تویحاتی را در پایین هر Input قرار دهید پیشنهاد میکنیم روش زیر را دنبال کنید.
شما میتوانید با اضافه کردن کلاس help-block به پایین input های خود امکان نوشتن توضیحات برای هر input را ایجاد کنید. این توضیحات به input بالایی خود متصل شده و در دستگاه های مختلف بهم ریختگی ایجاد نمیکند برای اینکه موضوع واضح باشد از کد زیر کمک بگیرید:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Help text</h2>
<p>Use the .help-block class to add a block level help text in forms:</p>
<form>
<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 that breaks onto a new line and may extend more than one line.</span>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
می توانید دیگر قسمت ها را در لینک زیر ببینید
آموزش Bootstrap جلسه بیست و ششم (Inputs2)
آموزش Bootstrap جلسه بیست و هشتم (Media Object)
شما می توانید این آموزش را به صورت آنلاین از ویدیو زیر ببینید
و یا آن را در آپارات مشاهده کنید
آموزش Bootstrap 4 جلسه بیست و دوم (Inputs Group)
آموزش Bootstrap 4 جلسه دوم (start)
آموزش Bootstrap جلسه پایانی (Design Template)
آموزش Bootstrap جلسه سی و پنجم (Simple Template)
واقعا خیلی پیگیر هستین هیچ جا بخاطر یه Input این همه توضیح نمیده ممنون آماتور هارو خوب درک میکنید