modal در بوت استرپ
مدال در بوت استرپ
مدال یک پنجره محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت modal نیاز به کدهای html ، css و java script دارید. ساخت مدال از صفر، کار بسیار سخت و پیچیده ای است ولی بوت استرپ (bootstrap) این کار را برای ما آسان کرده و لازم به کدنویسی های پیشرفته ای نداریم. با طراحی سایت اصفهان وب یار همراه باشید تا نحوه ی ایجاد modal در بوت استرپ را به شما آموزش دهیم.
ساخت modal در بوت استرپ
برای ایجاد مدال در بوت استرپ به دو فایل bootstrap.css و bootstrap.js نیاز دارید. شما می توانید این فایل ها را از سایت بوت استرپ دانلود نمایید و در کدهایتان، آن ها را فراخوانی کنید. فایل bootstrap.css را در پوشه ای به نام css و فایل bootstrap.js را در پوشه ای به نام js قرار دهید. نحوه ی فراخوانی این دو فایل را می توانید در کد زیر مشاهده نمایید. یک فایل index.html بسازید و قطعه کد زیر را در آن قرار دهید.
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1 ">
<title>bootstrap-18</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</body>
</html>
نتیجه ی قطعه کد بالا در تصویر زیر مشاهده می شود که با کلیک برروی دکمه open modal یک پنجره به صورت پاپ آپ باز می شود و با زدن علامت ضربدر و یا دکمه close و یا حتی با کلیک بر روی بک گراند مدال ، مدال بسته خواهد شد.
قسمت Trigger
برای باز شدن modal باید به یک لینک یا یک دکمه خصوصیت زیر را اختصاص دهید.
data-toggle="modal" data-target="#mymodal"
مقدار data-toggle نوع دکمه را مشخص می کند که از نوع مدال باشد و مقدار data-target هم شناسه یا آیدی مدال موردنظر است.
قسمت Modal
div مربوط به مدال موردنظر باید یک id داشته باشد که مقدار این id باید با مقدار data-target یکسان باشد. اگر بخواهیم در یک صفحه چندین مدال بسازیم باید برای هر مدال یک آیدی منحصر به فرد در نظر بگیریم تا با مشکل مواجه نشویم.
برای فعال کردن و ایجاد فوکوس روی مدال باید به div موردنظر کلاس modal را بدهیم، کلاس fade هم برای قرار دادن افکت بر روی باز و بسته شدن مدال است که می توانید آن را حذف نمایید.
قسمت Modal Content
خصوصیت data-dismiss=”modal” باعث می شود مدال مورد نظر بسته شود و کلاس close هم برای استایل دهی به دکمه استفاده می شود. کلاس های modal-header، modal-body و modal-footer به ترتیب برای استایل دهی به قسمت هدر مدال، بدنه ی مدال و فوتر آن استفاده می شوند. بقیه ی کلاس ها نیز برای استایل دهی قسمت های مختلف مدال استفاده می شود. درصورتی که بخواهید استایل مدال خود را سفارشی سازید باید یک فایل style.css بسازید و لینک آن را در ایندکس بعد از لینک bootstrap.css قرار دهید و کدهای خود را در style.css قرار دهید.
نتیجه گیری
در این بخش از آموزش بوت استرپ ، به نحوه ی ساخت modal در بوت استرپ پرداخته شد. اگر به یادگیری بوت استرپ علاقمند هستید، می توانید مقالات دکمه ها در بوت استرپ، تصاویر در بوت استرپ، هشدارها در بوت استرپ، جداول در بوت استرپ و استایل دهی به متن در بوت استرپ را نیز مطالعه کنید.
تیم طراحی سایت وب یار همچنان آموزش های بوت استرپ را ادامه خواهد داد. با پیوستن به کانال webyar_net@ می توانید از جدیدترین مقالات آموزشی تیم وب یار مطلع شوید.
Google analytics در این مطلب میخواهیم در مورد google analytics با شما صحبت کنیم. ابتدا تاریخچه google analytics سپس در مورد چگونگی ثبت نام در آن و مکانیزم کارکرد آن را بررسی می کنیم. تاریخچه: در مارس 2005 گوگل شرکت urchin را تحت مالکیت خود در آورد. کاربران اینترنت برای اولین بار در 11 نوامبر 2005 این سرویس گوگل را شناختند،سرویسی که تا قبل از آن که توسط گوگل خریداری شود به نام urchin و با قیمت 500 دلار در بازار عرضه می شد. اما گوگل هنگام رو نمایی از این سرویس اعلام کرد که این سرویس به صورت رایگان عرضه خواهد شد که این گفته باعث ایجاد مشکلات بسیاری در سرور های گوگل شد چرا که ارائه ی رایگان این سرویس خدمت بزرگی برای صاحبان وبسایت و کسب و کار ها بود . استقبال از این سرویس گوگل تا حدی زیاد بود که گوگل مجبور شد به مدت 10 ماه ثبت نام های این سرویس را ببندد. در زمان بسته شدن ثبت نام گوگل ماشین جدیدی به این سرویس اضافه کرد تا عملکرد google analytics بهبود پیدا کند.همان ط.ر که پیشبینی می شد باز شدن این سرویس پس از 10 ماه باعث حجوم کاربران بسیاری شد و این سرویس در عرض چند ماه همه گیر و محبوب شد. ثبت نام در google analytics : عکس زیر تمامی […]
در این مقاله میخواهیم 3 لیست مهم در HTML5 را به شما بگوییم. 3 لیست مهم در HTML5 لیست ها کاربردهای فراوانی در متون مختلف داشته و حتما تا به حال نمونه هایی از آن ها را در کتاب ها ، مجلات ، روزنامه ها و.. دیده اید. اما کاربرد لیست ها محدود به مطالب چاپی نمی شود و امروزه در انواع صفحات وب ، شبکه های اجتماعی و یا پیام رسان ها نیز دیده می شوند. با کمک لیست ها می توانید موضوعات مرتبط به هم را در یک دسته قرار داده و آن ها را گروه بندی کنید. HTML نیز به منظور ایجاد انواع لیست ها در صفحات وب تگ هایی مشخص کرده است. در HTML5 سه نوع لیست با کاربردهای متفاوت وجود دارد که شامل موارد زیر است : Unordered Lists Ordered Lists Description Lists در ادامه به کاربرد و نحوه ی نوشتن هر لیست می پردازیم : Unordered Lists در این لیست ها ترتیب آیتم ها اهمیت نداشته و تنها عناصر مرتبط به هم در یک لیست قرار می گیرند. به عنوان مثال به لیست زیر توجه کنید : انواع نوشیدنی های گرم قهوه چای نسکافه همان طور که مشاهده می کنید در این لیست ترتیب اهمیت نداشته و فرقی نمی کند چه آیتمی اول و یا اخر باشد. برای نوشتن چنین لیست هایی […]
پس چنانچه وقت کافی برای بروز رسانی سایت خود را ندارید. یا اطلاعاتتان در مورد سئو و ترفند‌های بروز رسانی سایت کافی نیست. می توانید بروز رسانی مطلب و پشتیبانی سایت خود را به تیم طراحی سایت و سئو سایت وب یار بسپارید .
تیم طراحی سایت وب یار با نیروهای آموزش دیده و حرفه ای در زمینه ی سئو و ترفند‌های بروز رسانی سایت، با صبر و حوصله ی فراوان پاسخگوی مشکلات شما خواهند بود و خدمات پشتیبانی سایت و بروزرسانی سایت را با بالاترین کیفیت ارائه می نماید.
طراحی آرم یا لوگو و ست اداری آیا تا حالا به چگونه مجسم شدن برند خودتون تو ذهن مشتریانتون فکر کرده اید؟ فکر می کنید وقتی که نام شرکت یا حوزه ی صنعتی شما در مکانی برده میشه دیگران چه تصویری از برند شما از ذهنشون به سرعت رد میشه؟ به نظر خودتون آرم یا لوگو شما به شکلی هست که بتونه ملکه ذهن دیگران بشه؟ اگر تو پاسخ به همه ی این سوالات شک داری بهتره با تیم طراحی آرم لوگو ست اداری اصفهان وب یار همراه بشی تا اطمینان خاطر پیدا کنی طراحی لوگو و آرم شما به نحوی هست که بتونه بیانگر تخصص شما و برجسته شدن شما در میان رقباتون بشه. طراحی آرم یا لوگو و ست اداری برای هر شرکت یا مؤسسه یا سازمان یک امر ضروری محسوب می شود. با داشتن یک آرم یا لوگوی منحصر به فرد به راحتی می توانید در میان رقبای خود بیشتر و بهتر بدرخشید. همچنین در میان مشتریان به وسیله آرم یا لوگوی خاص خود شناخته شده و برند می شوید و مشتریان ثابت بسیاری را بدست می آورید. وجود یک نشان زیبا و چشمگیر که در ست اداری شما نیز مشاهده شود احساس خوب همراه با نمایش قدرت شما را در ضمیر مشتریانتان بر می انگیزد. با توجه به اینکه هنوز برخی از مشتریان تفاوت […]
آموزش امنیت وردپرس امنیت در وردپرس از اهمیت بسیار بالایی برخوردار است و بطور جدی به آن پرداخته می‌شود اما درست مانند هر سیستم دیگری، در صورت عدم رعایت برخی نکات ایمنی ساده ممکن است با مشکلات امنیتی احتمالی برخورد کنیم. در این مطلب آموزش امنیت وردپرس به بررسی برخی از معمول‌ترین آسیب پذیری‌ها و راهکارهای بالا بردن امنیت سایت وردپرس می‌پردازیم. مقاله ی امنیت سایت راه حل نهایی برای تمامی دغدغه‌های امنیتی شما نیست. اگر نگرانی بخصوصی دارید، بهتر است با کسانی که به دانش آنها در زمینه‌ی امنیت کامپیوتر و وردپرس اطمینان دارید، نگرانی‌ها و سوالات خود را در میان بگذارید. تیم وب یار با خدمات و پشتیبانی سایت به صورت 24 ساعته ، امنیت خاطر را برای تمامی مشتریان خود به ارمغان می آورد. امنیت سایت چیست؟ اساساً وقتی صحبت از امنیت می‌شود، منظورمان سیستم‌های کاملاً امن نیستند. یافتن چنین چیزی عملاً غیر ممکن بنظر می‌رسد. یک سرور امن از حریم خصوصی، یکپارچگی و در دسترس بودن منابع تحت کنترل سرور محافظت و اطمینان حاصل می‌کند. ویژگی‌های یک هاست قابل اطمینان عبارتند از: مشتاقانه درمورد انتظارات و نگرانی‌های امنیتی شما وهمچنین ویژگی‌ها و پروسه‌های امنیتی که هاستینگ در اختیار شما خواهند گذاشت، با شما صحبت می‌کند. آخرین و با ثبات‌ترین نسخه‌های نرم‌افزار سرور را در اختیارتان می‌گذارد. روش‌های قابل اعتماد بازیابی اطلاعات و پشتیبان‌گیری (بک […]
دانلود لیست دفاترمهندسی اصفهان لیست کامل دفاتر مهندسی استان اصفهان بر اساس لیست اعلام شده توسط نظام مهندسی استان اصفهان به شرح زیر میباشد. این لیست دارای اطلاعاتی از قبیل( گزارش براساس شماره دفتر ,تاریخ تاسیس,تاریخ اعتبار,نام مسئول,آدرس کامل,شمار تلفن,وضعیت فعالیت) میباشد که شما با در اختیار داشتن کامل این اطلاعات مفید میتوانید از وضعیت دفاتر مهندسی استان اصفهان اطلاع پیدا کرده و جهت همکاری با آنها در پروژ ه ها اقدام کنید و همچنین این لیست برای بازریابان جهت ارتیاط با دفاتر مهندسی و اخذ و یا دادن سفارش به آن ها و سایر امور تبلیفاتی بیسیار مفید میباشد. این لیست از شماره دفتر ۱۰۰ تا شماره دفتر ۸۰۰(گزارش براساس شماره دفتر ,تاریخ تاسیس,تاریخ اعتبار,نام مسئول,آدرس کامل,شمار تلفن,وضعیت فعالیت) دانلود لیست لیست دفاتر مهندسی از شماره ۱۰۲ تا شماره ۲۰۰ لیست دفاتر مهندسی از شماره ۲۰۱ تا ۲۵۰ لیست دفاتر مهندسی از شماره ۲۵۱ تا۳۰۰ لیست دفاتر مهندسی از شماره ۳۰۱ تا ۴۰۰ لیست دفاتر مهندسی از شماره ۶۰۱ تا ۸۰۰ لیست دفاتر مهندسی از شماره ۴۰۱ تا ۵۰۰ این لیست بر اساس نظام مهندسی دفاتر استان اصفهان بدست آمده است. [zarinpalpaiddownloads id=”21″] در صورت وجود هر گونه مشکل در این لیست با ما تماس بگیرید. جهت طراحی و سئو وب سایت خود شما میتوانید از این کد تخفیف استفاده کنید :Y-1399-(%7)
چطور می تونیم با لود شدن صفحه این مدال رو اجرا کنیم؟
جاوااسکریپت رو باید چطوری بنیویسم؟>
از سایت w3schools استفاده نمایید