آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه پنجم

• admin
• >دسته بندی: آموزشی, برنامه نویسی, طراحی وب
• برچسب ها: آموزش, استرپ, برنامه نویسی, بوت, پنجم, جلسه, زبان, طراحی وب, فارسی, متنی, متوسطه, مقدماتی
• ۱۳۹۴/۱۰/۲۷

سلام دوستان عزیز، شب و روزتون خوش. مدتی نبودیم که از این بابت از تمامی دوستان و کاربران عزیز عذرخواهی می کنیم. توی این مطلب درخدمتتون هستیم با آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه پنجم که از وب سایت سورس باران مشاهده می نمایید. همونطور که گفته شده این دوره بصورت متنی می باشد و از منابع خارجی ترجمه شده . شروع دوره در ادامه مطلب…

 

 

 

کلاس well در بوت استرپ :

دور عنصر یک کادر گرد شده با زمینه خاکستری و مقداری Padding اضافه می کند.

کد :

<div class="well">Basic Well</div>

 

: Well اندازه

های بزرگ اندازه آن را تغییر دهید. Well برای .well-lg های کوچک و یا Well برای .well-sm با اضافه کردن کلاس

کد :

<div class="well well-sm">Small Well</div> <div class="well well-lg">Large Well</div>

.است (medium) ها به صورت پیش فرض متوسط Well اندازه

هشدارهای بوت استرپ :

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

این هشدارها توسط کلاس alert به همراه یکی از چهار کلاس متنی ساخته میشوند.

کلاس alert-danger و کلاس alert-warning  و کلاس alert-info و کلاس alert-success :

<div class="alert alert-success">   <strong>Success!</strong> Indicates a successful or positive action. </div>  <div class="alert alert-info">   <strong>Info!</strong> Indicates a neutral informative change or action. </div>  <div class="alert alert-warning">   <strong>Warning!</strong> Indicates a warning that might need attention. </div>  <div class="alert alert-danger">   <strong>Danger!</strong> Indicates a dangerous or potentially negative action. </div>

<div class="alert alert-success">   <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>   <strong>Success!</strong> Indicates a successful or positive action. </div>

 

هشدار های متجرک در بوت استرپ :

کلاس های fade و in به هنگام بسته شدن پیغام هشدار، به آن یک افکت وحو شدن اضافه می کند.

<div class="alert alert-success fade in">

مرجع کاملی از هشدار های بوت استرپ : برای دست یابی به مرجع کاملی از گزینه ها ، متد ها و رویداد های هشدار به bootstrap JS Alert Reference مراجعه کنید.

 

دکمه های بوت استرپ :

استایل دکمه ها : بوت استرپ هفت استایل دکمه ارائه میکند که در شکل زیر مشاهده می نمایید.

بوت استرپ کلاس های زیر را برای دست یابی به استایل دکمه های بالا ارائه میدهد :

• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link

در بالا دکمه هایی معرفی کردیم که در مثال زیر کد مورد نیاز برای هر دکمه را مشاهده میکنید :

<button type="button" class="btn btn-default">Default</button> <button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-success">Success</button> <button type="button" class="btn btn-info">Info</button> <button type="button" class="btn btn-warning">Warning</button> <button type="button" class="btn btn-danger">Danger</button> <button type="button" class="btn btn-link">Link</button>

جهت مشاهده آنلاین کلیک کنید

همچنین به شکل زیر هم میتونید دکمه های خودتون رو طراحی کنید :

<a href="#" class="btn btn-info" role="button">Link Button</a> <button type="button" class="btn btn-info">Button</button> <input type="button" class="btn btn-info" value="Input Button"> <input type="submit" class="btn btn-info" value="Submit Button">

جهت مشاهده آنلاین کلیک کنید

چرا در خصوصیت href یا لینک از # استفاده می کنیم؟ بخاطر اینکه هیچ پیج خاصی برای لینک کردن در اختیار نداریم ،و همچنین نمیخواهیم

با پیغام خطای “۴۰۴” مواجه شویم، از # به عنوان لینک استفاده میکنیم. با این وجود در موقعیت واقعی باید حتما از یک URL واقعی استفاده شود.

 

اندازه دکمه ها در بوت استرپ :

بوت استرپ چهار اندازه مختلف برای دکمه ها ارائه میدهد که در تصویر زیر مشاهده می نمایید:

کلاس های مختلفی که اندازه های مختلف را تعیین میکنند :

• .btn-lg
• .btn-md
• .btn-sm
• .btn-xs

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

<button type="button" class="btn btn-primary btn-lg">Large</button> <button type="button" class="btn btn-primary btn-md">Medium</button> <button type="button" class="btn btn-primary btn-sm">Small</button> <button type="button" class="btn btn-primary btn-xs">XSmall</button>

جهت مشاهده آنلاین کلیک کنید

دکمه های با عرض کامل در بوت استرپ : یک دکمه با عرض کامل، به اندازه ی عرض عنصر والد خود گسترده می شود.

 

 

برای ایجاد یک دکمه با عرض کامل از کلاس btn-block استفاده کنید که کدش در زیر ذکر شده :

<button type="button" class="btn btn-primary btn-block">Button 1</button>

 

دکمه های فعال/غیر فعال در بوت استرپ :

یک دکمه را میتوان ب حالت فعال (قابل کلیک کرد ن) یا غیرفعال(غیر قابل کلیک کردن) تنظیم کرد :

کلاس active دکمه را فعال و کلاس disabled دکمه را غیر فعال می کند.

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

<button type="button" class="btn btn-primary active">Active Primary</button> <button type="button" class="btn btn-primary disabled">Disabled Primary</button>

منبع کاملی از کلاس دکمه ها در بوت استرپ : Bootstrap Button Reference

 

موفق و پیروز باشید : دوست دار شما گروه برنامه نویسی سورس باران

 

The post آموزش متنی مقدماتی تا متوسطه بوت استرپ به زبان فارسی جلسه پنجم appeared first on آموزش برنامه نویسی.

مبنع این خبر (برای مشاهده متن کامل خبر لینک زیر را بزنید):
آموزش برنامه نویسی