0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

دکمه ها در بوت استرپ – قسمت اول

نویسنده مرضیه خیرخواه
امتیاز مطلب
تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
تعداد بازدید 253
تاریخ بروزرسانی ۵ مهر ۱۳۹۶

دکمه ها در بوت استرپ – آموزش بوت استرپ

در این مقاله تیم طراحی سایت وب یار آموزش دکمه ها در بوت استرپ را برای شما عزیزان در نظر گرفته است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ آشنا می شوید.
دکمه ها برای اهداف مختلفی مانند submit یا reset کردن یک فرم، نمایش دادن یا مخفی کردن یک مطلب در سایت و موارد دیگر استفاده می شوند. بنابراین دکمه ها یک بخش لازم در طراحی سایت هستند. در ادامه همراه ما باشید تا با دکمه ها در بوت استرپ آشنا شوید.

دکمه ها در bootstrap

همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد.

btn-default  : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است.

btn-primary  : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود.

btn-success  : این کلاس مشخص کننده ی یک عملیات موفقیت آمیز است.

btn-info  : از این کلاس می توان به عنوان یک گزینه برای دکمه ی پیش فرض استفاده کرد.

btn-warning  : این کلاس نشان می دهد که در این فعالیت باید احتیاط شود.

btn-danger  : استفاده از این کلاس نشان دهنده ی یک عملیات خطرناک یا منفی است.

btn-link : از این کلاس به این منظور استفاده می شود که شکل ظاهری دکمه به صورت لینک نمایش داده شود. اما همچنان ویژگی های دکمه را دارد.

قبل از همه ی این کلاس ها باید از کلاس btn استفاده شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس ها آشنا می شوید.

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

خروجی این کد به صورت زیر است.

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

روش های مختلف ایجاد دکمه

برای ایجاد دکمه علاوه بر تگ button، می توان از تگ های input و a هم استفاده کرد. به کدهای زیر توجه کنید.

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

اگر به کدها دقت کنید مشاهده می کنید که برای ایجاد دکمه می توان از تگ input ، هم از نوع submit و هم از نوع button استفاده کرد.

خروجی این کد در تصویر زیر نمایش داده شده است.

روش های مختلف ایجاد دکمه

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

بوت استرپ به شما اجازه می دهد تا با استفاده از کلاس های btn-md ، btn-sm ، btn-xs و btn-lg  سایز دکمه ها را تغییر دهید. این کلاس ها به ترتیب برای ایجاد دکمه ی خیلی کوچک، دکمه ی کوچک، متوسط و دکمه ی بزرگ استفاده می شوند. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است.

<button type="button" class="btn btn-info btn-xs">Xsmall</button>
<button type="button" class="btn btn-info btn-sm">Small</button>
<button type="button" class="btn btn-info btn-sm">Medium</button>
<button type="button" class="btn btn-info btn-lg">Large</button>

 

در تصویر زیر می توانید خروجی کد بالا را مشاهده کنید.

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

 

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

<button type="button" class="btn btn-success btn-block">Button</button>
<button type="button" class="btn btn-success btn-lg btn-block">Large Button</button>
<button type="button" class="btn btn-success btn-md btn-block">Medium Button</button>
<button type="button" class="btn btn-success btn-sm btn-block">Small Button</button>
<button type="button" class="btn btn-success btn-xs btn-block">Xsmall Button</button>

خروجی کد بالا

کلاس btn-block

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

حتماً تا کنون با دکمه های غیرفعال در سایت ها مواجه شده اید. برای مثال تا زمانی که اطلاعات یک مرحله را وارد نکرده اید، دکمه ی رفتن به مرحله ی بعد غیر فعال است. اگر علاقمند هستید که بدانید چطور این دکمه ها غیر فعال شده اند، پاسخ آن خیلی ساده است. کافی است از کلاس disabled برای غیر فعال کردن دکمه استفاده کنید. از کلاس active هم برای فعال کردن دکمه استفاده می شود.
در کد زیر از این کلاس ها استفاده شده است.

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

خروجی کد بالا

کلاس disabled و active

 

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

تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید
مطالب مرتبط
طراحی سایت چند فروشندگی آراد پیپر
مطالعه :

طراحی سایت چند فروشندگی آراد پیپر طراحی سایت چند فروشندگی آراد پیپر با رعایت اصول سئو در کدنویسی از نمونه کارهای حرفه ای طراحی سایت اصفهان و سئو سایت اصفهان وب یار است. این سایت در زمینه ی سایت فروشگاهی پخش کاغذ و لوازم التحریر، لوازم جانبی موبایل، کارت ویزیت، پایان نامه و نیز ترجمه فعالیت دارد. سایت فروشگاهی آراد پیپر برای مشتریان عزیزی که کسب و کارشان در حوزه های مختلف مرکز پخش کاغذ و لوازم التحریر، لوازم جانبی موبایل، کارت ویزیت، پایان نامه ، ترجمه و سایر حوزه های فروشگاهی می باشد بسیار مناسب است.   آدرس سایت جهت مشاهده تمامی امکانات داخلی و گرافیکی سایت aradpaper.com طراحی سایت چند فروشندگی آراد پیپر منجر به افزایش فروش و درآمد افراد در حوزه های مختلف کسب و کار می شود. در ادامه با هم امکانات سایت آراد پیپر که به تازگی توسط تیم طراحی سایت وب یار طراحی شده است را بررسی می کنیم. اگر شما هم نیاز به طراحی سایت و طراحی سایت فروشگاهی دارید بهتر است طراحی سایت اختصاصی فروشگاهی آراد پیپر را ببینید تا انتخاب آگاهانه تری در مورد انتخاب امکانات سایت خود داشته باشید؛ چرا که ممکن است در میان انتخاب امکانات سایت خود برخی از نیازهای سایت از خاطر شما دور مانده باشد.   ویژگی طراحی سایت چند فروشندگی آراد پیپر از ویژگی های بارز طراحی […]

wireframe-by-photoshop
مطالعه : 5 دقیقه

طراحی وایرفریم در فوتوشاپ     طراحان حرفه ای ترجیح می دهند از فوتوشاپ برای ترسیم وایرفریم استفاده کنند. هر چند ممکن است برای تازه کارها طراحی با فوتوشاپ مشکل باشد اما جذابیت کار با ابزارهای فوتوشاپ هرکسی را شیفته خود می کند پس مطمئن باشید با کسب مهارت لازم و رسم چند وایرفریم در فوتوشاپ، دیگر سراغ سایر نرم افزارهای طراحی وایرفریم نخواهید رفت؛ در ادامه با تیم طراحی سایت اصفهان وب یار همراه باشید تا شما عزیزان را با اصول طراحی وایرفریم در فوتوشاپ بیشتر آشنا کنیم. پیشنهاد می کنیم پست دیگر ما را که درباره معرفی وایرفریم است مطالعه بفرمائید.   چگونه در فوتوشاپ وایرفریم طراحی کنیم؟ قبل از شروع طراحی وایرفریم، باید از خودتان بپرسید کدام صفحه را مایلید طراحی کنید. چه چیزی آن را از سایر سایت های طراحی شده متفاوت می کند و وجود کدام عناصر در این صفحه ضروریست. حالا یک قلم بردارید و طرح اولیه خود را روی کاغذ رسم کنید تا ایده های ذهنی خود را به یک شکل قابل دیدن تبدیل کرده باشید. با این کار یک دید کلی از طرحی که می خواهید در فوتوشاپ ایجاد کنید بدست می آورید. در طراحی وایرفریم ها، سادگی و وضوح المان ها خیلی مهم است.   نکاتی که باید در طراحی وایرفریم رعایت کرد: 1- به جای تصاویر از اشکال هندسی مانند […]

سفارشات در ووکامرس
مطالعه : 5 دقیقه

سفارشات در ووکامرس order in woocommerce بخش سفارشات در ووکامرس یکی از بخش های اساسی هر فروشگاه اینترنتی می باشد که یادگیری آن برای هر طراح سایت و مدیر فروشگاه اینترنتی ضروری می باشد.سفارشات در ووکامرس یکی از بحش های اساسی است و باید به بررسی آن ها پرداخت.بررسی نکردن آن ها ریسک بزرگی است! در بعضی مواقع ممکن است فاصله بین سفارش کالا توسط مشتری و ارسال آن طولانی شود. در مطلب امروز شما را با تنظیمات بیشتر بخش سفارشات در ووکامرس آشنا می کنیم. تا انتهای مطلب با تیم طراحی سایت اصفهان وب یار همراه باشید. هنگامی که یک مشتری فرآیند خرید خود را به اتمام می رساند سفارشات در ووکامرس ساخته می شوند و تنها برای بخش مدیریت و ادمین فروشگاه قابل دیدن می باشد . بخش سفارشات فروشگاه اینترنتی شامل سفارشات ، کسانی که از ما خرید کرده اند ، اطلاعات آن ها و … می باشد. برای مثال تراکنش کاربر x تا چه مرحله ای پیش رفته است؟ کدام تراکنش ها موفقیت آمیز بوده و منجر به خرید توسط کاربران شده است؟ در واقع هدف از بررسی بخش سفارشات در ووکامرس به دست آوردن اطلاعات کاملی درمورد سفارشات می باشد تا به ما در تحلیل آمار سایت کمک کند. در شکل زیر بخش سفارشات در ووکامرس نمایش داده شده است.       اگر از […]

استاندارد رنگ ها
مطالعه : 8 دقیقه

کد رنگ و استاندارد های رنگ مادر و فرزند یکی از موارد اصلی برای طراحی سایت، طراحی فروشگاه اینترنتی و اپلیکیشن انتخاب ترکیب رنگ مناسب می باشد که از اهمیت بالایی برخوردار است و می تواند بر روی تصمیم کاربر اثر زیادی بگذارد. یکی از مشکلات اکثر طراحان سایت سرسری گرفتن این مرحله از طراحی است و آنقدر که لازم است زمان بر روی این موضوع نمی گذارند. در انتخاب رنگ و استاندارد های رنگ همیشه باید توازن بین رنگ ها را در نظر بگیرید. در این مطلب قصد داریم شما را با استاندارد های رنگ آشنا و در این زمینه راهنمایی کنیم تا بتوانید سایت های جذاب برای افزایش فروش و برندینگ شدنتان طراحی کنید. چند مدل رنگ دهی داریم؟ سه مدل رنگ دهی وجود دارد که در زیر به آن ها اشاره می کنیم. استفاده از نام رنگ مانند: red,blue,black و … استفاده از کد ترکیبی (مبنای دهدهی): در این روش از رنگ دهی از کد رنگ به صورت RGB استفاده می شود. که R برای شدت رنگ قرمز،G برای شدت رنگ سبز و B برای شدت رنگ آبی است. استفاده از کد رنگ ترکیبی (مبنای 16): این روش رنگ دهی که به دلیل سادگی و دقیق بودن آن بیشترین کاربرد را دارد از فرمت #rrggbb استفاده می شود که مانند روش دوم است با این تفاوت که […]

مفاهیم پایه اینترنت
مطالعه : 15 دقیقه

مفاهیم پایه ای اینترنت بیشتر کاربران مایل اند از اینترنت برای دریافت اطلاعاتی درباره موضوع مورد علاقه شان، انجام امور بانکی، بازی های آنلاین و خرید اینترنتی استفاده کنند، اما شاید بیشترشان اطلاعات اندکی از مفاهیم پایه ای اینترنت داشته باشند. با تیم طراحی سایت اصفهان وب یار همراه باشید تا به شما بگوییم اینترنت چیست و مفاهیم پایه ای اینترنت چه موضوعاتی را شامل می شود. آنچه در این مقاله خواهید خواند: .   اینترنت چیست؟ مرورگر چیست؟ لینک چیست؟ ایمیل چیست؟ آی پی چیست؟ دامنه چیست؟ زون چیست؟ سرور چیست؟ HTML و CSS چیست؟ طراحی و برنامه نویسی استاتیک چیست؟ طراحی و برنامه نویسی دینامیک چیست؟ .   1) اینترنت چیست؟ اینترنت که گاهی به سادگی « نت » خوانده می شود، یک سیستم جهانی از شبکه های کامپیوتری است؛ به عبارت دیگر، اینترنت، شبکه ای از شبکه هایی است که کاربران در صورت مجاز بودن می توانند از هر کامپیوتری که در این شبکه است اطلاعات مورد نظر خود را دریافت کنند، به اشتراک بگذارند و یا حتی با یکدیگر مکالمه داشته باشند!   تاریخچه اینترنت اینترنت در سال 1969 توسط آژانس پروژه های تحقیقاتی پیشرفته دولت آمریکا (ARPA)  به تصویب رسید و در ابتدا با نام ARPANet شناخته می شد. هدف اولیه از ایجاد اینترنت آن بود که کامپیوترهای تحقیقاتی دو دانشگاه مختلف بتوانند با یکدیگر […]

23نکته سئو
مطالعه : 5 دقیقه

23 نکته سئو در دنیای امروزی که همه چیز بر مبنای رسانه می باشد ، سایت و جایگاه سایت برای موتورهای جست و جو اهمیت زیادی دارد. سایت بدون سئو مانند انسانی است که در بیابانی رها شده و کسی صدای او را نمی شنود. بهینه سازی موتور جست و جو مجموعه ای از روش ها برای تغییر استراتژی وب سایت ها و پیدا کردن جایگاه سایت ها در گوگل و مشاهده بیشتر کاربران از سایت ها می باشد. سئو ی داخلی و خارجی از انواع سئو می باشد که در دوره آموزش سئو داخلی و سئو خارجی می توانید با آن ها آشنا شوید. مهمترین عوامل برای افزایش اهمیت سایت در موتور جست و جو ، راه های سئو و یادگیری نکته سئو می باشد. الگوریتم رتبه بندی گوگل معیار های زیادی دارد که برای رسیدن به آن معیار ها ما به 23 نکته سئو مهم برای محتوا گذاری اشاره می کنیم که بسیار با اهمیت هستند و می توانند شما را برای پیدا کردن راه در بیابان بزرگ اینترنت کمک کنند. 23 نکته سئو و محتوا گذاری اولین نکته سئو این است که هر مطلب حداقل 500کلمه داشته باشد و فرعی و اصلی بودن آن مشخص شود. برای اینکه سایت مان با یکسری از کلمات کلیدی سئو شود از الگوریتم لینک سازی استفاده می کنیم به این صورت […]

دیدگاه ها

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *