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

0 دیدگاه

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

آموزش استرپ:

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

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

کد :

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

1	<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>

1 2	<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>

<strong>Success!</strong> Indicates a successful or positive action.

</div>

<strong>Info!</strong> Indicates a neutral informative change or action.

</div>

<strong>Warning!</strong> Indicates a warning that might need attention.

</div>

<strong>Danger!</strong> Indicates a dangerous or potentially negative action.

</div>

[alert color=”green” icon=””]برای بستن یک پیغام هشدار class=”close” و data-dismiss=”alert” را به یک لینک و یا دکمه اضافه کنید.[/alert]

<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>

<strong>Success!</strong> Indicates a successful or positive action.

</div>

[alert color=”green” icon=””]

:aria-* attribute و × توضیح خصوصیت

برای بهبود دسترسی کسانی که از صفحه خوان ها استفاده میکنند باید به هنگام ایجاد یک دکمه خروج خاصیت aria-label=”close را نیز اضافه کنند.

[/alert]

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

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

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

1	<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>

<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-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</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">

<a href="#" class="btn btn-info" role="button">Link Button</a>

<button type="button" class="btn btn-info">Button</button>

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

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

با پیغام خطای “404” مواجه شویم، از # به عنوان لینک استفاده میکنیم. با این وجود در موقعیت واقعی باید حتما از یک 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>

<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>

1	<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>

1 2	<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

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

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

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

نظرات

برچسب ها: آموزش بوت استرپ

صابر بوستانی

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

دوره صفر تا صد آموزش بین المللی لینوکس

انتشار: ۲۷ دی ۱۳۹۴

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

آموزش استرپ:

صابر بوستانی

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

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

نظرات

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

لغو پاسخ

مطالب مرتبط