دکمه ها در بوت استرپ – قسمت دوم
دکمه های گروهی در بوت استرپ – آموزش بوت استرپ
تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، Justified Button Groups ، ایجاد منوی کشویی برای دکمه های گروهی در بوت استرپ و Split Button Dropdowns آشنا خواهید شد.
مباحث دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ در مقاله ی دکمه ها در بوت استرپ – قسمت اول ذکر شده است که می توانید با مطالعه ی آن اطلاعات خود را درباره ی دکمه ها در بوت استرپ تکمیل نمایید.
ایجاد دکمه های گروهی در بوت استرپ
شما می توانید در بوت استرپ دکمه ها را به صورت خطی گروه بندی کنید. برای این منظور کافی است از کلاس btn-group در تگ div استفاده کنید و دکمه ها را در این div قرار دهید. به کد زیر دقت کنید.
<div class="btn-group"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div>
خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید.
جالب است بدانید که شما می توانید برای این دکمه های گروهی در بوت استرپ سایز هم مشخص کنید. در واقع با اضافه کردن کلاس *-btn-group به تگ div می توانیم برای دکمه های گروهی یک سایز یکسان تعریف کنید. به جای * از عبارات xs ، sm ، md و lg استفاده می شود. با دقت به کد زیر با نحوه ی استفاده از این کلاس آشنا می شوید.
<div class="btn-group btn-group-xs"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div> <br><br> <div class="btn-group btn-group-sm"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div> <br><br> <div class="btn-group btn-group-md"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div> <br><br> <div class="btn-group btn-group-lg"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div>
خروجی به صورت زیر است.
ایجاد دکمه های گروهی عمودی
بوت استرپ به شما این امکان را می دهد که دکمه های گروهی را به صورت عمودی ایجاد کنید. برای این منظور کافی است از کلاس btn-group-vertical استفاده کنید. این کلاس را در یک تگ div نوشته و دکمه ها را در این تگ قرار دهید. با دقت به کد زیر می توانید دکمه های گروهی عمودی را ایجاد کنید.
<div class="btn-group-vertical"> <button type="button" class="btn btn-primary">ok</button> <button type="button" class="btn btn-primary">cancel</button> <button type="button" class="btn btn-primary">Apply</button> </div>
در این تصویر می توانید نتیجه ی کد بالا را ببینید.
کلاس btn-group-justified
برای اینکه دکمه های گروهی، تمام عرض صفحه را اشغال کنند باید از کلاس btn-group-justified در تگ div استفاده کنید. اگر برای ایجاد دکمه ها از تگ a استفاده کنید که نیاز به کد دیگری نیست. اما اگر برای ایجاد دکمه از button استفاده کنید، باید هر کدام از این دکمه ها را در یک تگ div با کلاس btn-group قرار دهید. به کد زیر دقت کنید.
<div class="btn-group btn-group-justified"> <a href="#" class="btn btn-primary">ok</a> <a href="#" class="btn btn-primary">cancel</a> <a href="#" class="btn btn-primary">Apply</a> </div> <br> <div class="btn-group btn-group-justified"> <button type="button" class="btn btn-success">ok</button> </div> <div class="btn-group"> <button type="button" class="btn btn-success">cancel</button> </div> <div class="btn-group"> <button type="button" class="btn btn-success">Apply</button> </div> </div>
در تصویر زیر می توانید نتیجه ی کدهای بالا را مشاهده کنید.
ایجاد منوی کشویی برای دکمه های گروهی
برای ایجاد منوی کشویی برای دکمه های گروهی باید دکمه ای را که می خواهید برای آن منوی کشویی بگذارید در یک تگ div جدا با کلاس btn-group بگذارید. سپس به دکمه ی مورد نظر کلاس dropdown-toggle و خصوصیت data-toggle=”dropdown” را اضافه کنید تا منو قابلیت باز شدن داشته باشد.
برای اضافه کردن آیتم های منو از تگ های ul و li استفاده کنید و به تگ ul کلاس dropdown-menu را بدهید. به کد زیر دقت کنید.
<div class="btn-group">
<button type="button" class="btn btn-primary">Html</button>
<button type="button" class="btn btn-primary">Css</button>
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Bootstrap <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">BS Button</a></li>
<li><a href="#">BS Button Groups</a></li>
</ul>
</div>
</div>
خروجی کد بالا در این تصویر نشان داده شده است.
برای تقسیم بندی دکمه ای که منوی کشویی دارد، کافی است قسمتی که مربوط به فلش باز کردن منو است را در یک تگ button جداگانه بنویسید. به کد زیر دقت کنید.
<div class="btn-group">
<button type="button" class="btn btn-primary">Bootstrap</button>
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">BS Button</a></li>
<li><a href="#">BS Button Groups</a></li>
</ul>
</div>
خروجی به صورت زیر است.
خب دوستان آموزش دکمه های گروهی در بوت استرپ به پایان رسید. اما تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. چنانچه به مبحث بوت استرپ علاقمند هستید می توانید مباحث زیر را مطالعه بفرمایید.
استایل دهی به متن در بوت استرپ
کلاس های well و jumbotron در بوت استرپ
دکمه ها در بوت استرپ – قسمت اول
برای آگاهی از جدیدترین آموزش های طراحی سایت وب یار در کانال @webyar_net عضو شوید.
هاست حرفه ای اصفهان یکی از ویژگی های مهم شرکت های طراحی سایت در اصفهان ارائه هاست حرفه ای اصفهان است. شما برای این که در فضای مجازی حضور داشته باشید علاوه بر طراحی سایت حرفه ای به خرید یک هاست حرفه ای هم نیاز دارید. در این مقاله قصد داریم تا شما را با ویژگی های یک هاست خوب آشنا کنیم تا بتوانید بهترین تصمیم را برای خرید هاست بگیرید. پس همراه تیم طراحی سایت و سئو سایت وب یار باشید. همان طور که واضح است با حضور در فضای مجازی کسب و کار شما 24 ساعته می شود و شما در تمامی ساعات شبانه روز می توانید محصولات و خدمات خود را به فروش برسانید. در صورتی که شما یک هاست حرفه ای و قدرتمند داشته باشید تا در تمامی ساعات دسترسی به سایت تان امکان پذیر باشد می توانید به صورت چشمگیر شاهد افزایش فروش خود باشید. لازم به ذکر است که تیم طراحی سایت وب یار با ارائه هاست حرفه ای اصفهان که از امنیت و up time بالا برخوردار است، طی سال های اخیر در افزایش فروش مشتریان خود نقش بسزایی داشته است. هاست چیست؟ هاست که در لغت به معنای میزبانی است، یک فضای مجازی روی سرور است که برای سایت در نظر گرفته شده و توانایی ذخیره اطلاعات سایت شما نظیر کدها، فایل […]
چگونگی ایجاد فرم بازخورد برای پست ها یا محصولات از طریق افزودن لینک ارجاع در افزونه فرم تماس 7 و گراویتی فرم شاید بخواهید بدانید کاربران بلا فاصله قبل از تکمیل فرم تماس شما، کدام یک از صفحات یا مقالات را دیده اند، تیم آموزش طراحی سایت اصفهان افزونه فرم تماس 7 را به شما پیشنهاد می دهد؛ با فرم تماس 7 می توانید آدرس این صفحات (لینک ارجاع) را از طریق ایمیل خود دریافت کنید. لینک ارجاع (Referer Page) آدرس صفحه ایست که کاربر، بلافاصله قبل از ورود به صفحه فعلی مشاهده کرده است. روش افزودن لینک ارجاع در افزونه فرم تماس 7 با ترفند فیلد مخفی 1) برای شروع شما باید این قطعه کد را درون فایل Functions.php در پایین ترین قسمت قرار دهید: function getRefererPage( $form_tag ) { if ( $form_tag[‘name’] == ‘referer-page’ ) { $form_tag[‘values’][] = htmlspecialchars($_SERVER[‘HTTP_REFERER’]); } return $form_tag; } if ( !is_admin() ) { add_filter( ‘wpcf7_form_tag’, ‘getRefererPage’ ); } 2) در قسمت پیشخوان (داشبورد) وردپرس به لیست فرم های تماس رفته و فرم خود را داخل ادیتور (ویرایشگر کد) باز کنید و این فیلد مخفی را در قسمت body اضافه کنید: form: [hidden referer-page default:get] 3) تب Mail را باز کرده و این فیلد را در قسمت Body مربوط به هشدار ایمیل (notification mail) و در جایی که می خواهید نتیجه نمایش […]
تنها استفاده از پست ها و صفحه ها برای ساخت هر وبسایتی با وردپرس کافی نیست. Toolset که یکی از افزونه های نمایش تمامی توابع وردپرسی است به شما این امکان را می دهد که وبسایت های رتبه بندی کننده، وبسایت های راهنما، وبسایت های دارای عضویت اشتراکی و یا وبسایت های فروشگاهی منحصر به فرد بسازید. Toolset چیست؟ مجموعه ای از افزونه هایی است که برای گسترش وردپرس استفاده می شود. Toolset به آن ها که برنامه نویسی نمی دانند کمک می کند سایت های وردپرسی بسازند. این گفته به نظر یک شعار است اما آن ها که تجربه حداقل یک بار استفاده از Toolset را دارند نظرشان متفاوت است. با Toolset چه می توان کرد؟ 1) نوع محتوایی که میخواهید در سایت قرار دهید را خودتان تعیین کنید سایت های مختلف به نوع محتوای متفاوت نیاز دارند؛ Toolset به شما این امکان را می دهد که دقیقاً همان نوع محتوایی را که میخواهید، به کار ببرید و بین آن ها ارتباط ایجاد نمایید. 2) قالب (Template) و View اختصاصی طراحی کنید افزونه نمایش تمامی توابع وردپرسی Toolset کار طراحی قالب ها، آرشیوها و لیست ها را برای انواع محتوا، آسان کرده است. شما می توانید با HTML و یا با استفاده از صفحه ساز های خودکار، قالب های خود را طراحی کنید. تقریباً در […]
افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ whats app وردپرس به شما این امکان را می دهد که تجربیات لذت‌بخش چت کردن در واتساپ را در سایت خود پیاده‌سازی کنید. استفاده از این افزونه یکی از بهترین روش‌های ارتباطی و ارتباط با مشتری است که به طور مستقیم کاربران سایت را پشتیبانی کرده و همچنین در ذهن مشتری ایجاد اعتماد و وفاداری نمایید. موقعیت های مختلف نمایش افزونه چت واتساپ با تیم پشتیبانی شما میتوانید در موقعیت مختلف سایت وردپرسی خود، از پشتیبان های آنلاین استفاده کنید. نمايش در ويجت های قالب: نمايش در صفحات محصول ساخته‌شده در ووکامرس: دکمه‌های سفارشی و شورت کدها: امکانات بی نظير افزونه چت واتساپ whats app وردپرس افزونه چت واتساپ حساب‌های چندگانه را پشتیبانی می‌کند: به شما اجازه می دهد که تلفن واتساپ تمام کارمندان خود را بصورت شکیل و در یک باکس درکنار هم بگذارید. کارمندان شما با هر پست یا سمتی که در شرکت شما دارند برای بازدیدکنندگان وبسایت قابل مشاهده هستند و مشتری با هر شخص یا بخشی که مایل است می‌تواند در واتساپ چت و گفتگو نماید. بازدیدکنندگان با تنظیمات سفارشی شما می‌توانند متوجه شوند که چه شخصی آنلاین و چه کسانی آفلاین هستند. حتی می‌توانند با برنامه‌ریزی شما در این پلاگین ببینند که مثلاً بخش پشتیبانی شما چه روزهایی و در چه ساعاتی […]
دانلود مگا منو سریع و سبک mega menu یک منو وردپرس مگا است که اجازه می دهد تا شما به راحتی منو را در پروژه تم خود را ادغام کنید. این افزونه به شما امکان می دهد منوهای مگا، منوهای زبانه و منوهای کاروئلاست را به صورت ساده و بومی تبدیل کنید و منوی موجود خود را به یک ابزار قدرتمند تبدیل کنید. سیاراین وردپرس مگا منو یک منو پاسخگو است، به این معنی که طرح مناسب تمام اندازه صفحه نمایش است. با این وجود، تفاوت با سایر گزینه ها این است که رویدادهای صفحه لمسی بطور بومی فعال شده و تجربه کاربر را در صفحه نمایش لمسی بطور قابل توجهی بهبود می بخشد. چیدمانما همچنین باید انواع طرح های در دسترس را که این منو مگا وردپرس را بر جایگزین های دیگر برجسته می کنند ذکر می کنیم. این اولین مگا منو است که همه در یک راه حل است، به عنوان شما می توانید یک منوی افقی یا عمودی را در دستگاه های دسکتاپ و منوی کشویی یا غیرفعال در تلفن همراه ایجاد کنید. کشیدن و رها کردنپنل مدیریت کشیدن و رها کردن یکی دیگر از ویژگی های کلیدی است که این مگامنای را برجسته می کند. از پانل مدیریت منو بومی می توانید تمام محتوای مگامنام خود را با استفاده از یک رابط کشیدن و رها کردن […]
استایل و زیبا سازی سبد فروش edd وردپرس به وسیله فایل زیر میتوانید افزونه قدرتمند easy download digital را زیبا کنین و استایل زیبایی به اون بدین و فروشتون را چند برابر کنین: فرم ارسال آسان دیجیتال فرم پرداخت بسیار آسان است! کنترل کامل از یک ظاهر طراحی شده با گزینه های مختلف و پیش نمایش زنده زمانی که شما را تغییر دهید. این افزونه نیاز به پلاگین دانلود Easy Digital Downloads دارد. Easy Digital Downloads یک راه حل کامل تجارت الکترونیک برای فروش محصولات دیجیتال در وردپرس است. شروع : این 6 مرحله ساده را برای ساخت فرم های زیبا دنبال کنید. مرحله # 1: → نصب / فعال کردن دانلود آسان دیجیتال. دریافت آسان دیجیتال دانلود مرحله 2: → ایجاد دانلودها و انتشار آنها. مرحله 3: → یک صفحه ایجاد کنید که در آن می توانید از کد کوتاه استفاده کنید [download number = “12” column = “4”]. مرحله 4: → به صفحه پرداخت که میخواهید سبک بروید بروید. مرحله 5: → حالا، این صفحه را مشاهده کنید و روی لینک «سفارشی کردن» در نوار مدیریت WordPress در بالای صفحه کلیک کنید. مرحله 6: → مشاهده و باز کردن Checkout Styler برای پانل EDD و سفارشی کردن صفحه پرداخت خود را. این همه! تعداد ستاره های خود را از این مطلب از چپ به راست انتخاب نمایید