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@ می توانید از جدیدترین مقالات آموزشی تیم وب یار مطلع شوید.
طراحی سایت ریسپانسیو مفهوم طراحی سایت Responsive یا طراحی سایت ریسپانسیو با توجه به اینکه امروزه فناوری اطلاعات و اینترنت بخش بزرگی از زندگی روزمره را در برگرفته است و می بایست طیف گسترده ی دستگاه هایی که با استفاده از آنها می توان به اینترنت دسترسی داشت را در نظر گرفت، مطرح گردید. بنابراین انعطاف پذیری سایت، یا طراحی سایت Responsive یکی از مهمترین شاخص های یک طراحی سایت با کیفیت است. و البته عامل پیشرفت کسب و کار اینترنتی می گردد. در این مقاله قصد داریم بهتر و دقیق تر به این موضوع بپردازیم. طراحی سایت واکنش گرا (Responsive) چیست؟ طراحی سایت ریسپانسیو یا واکنش گرا (Responsive) به سایتی گفته می شود که با توجه به دستگاهی که کاربر برای مشاهده سایت استفاده می‌کند واکنش نشان می‌دهد. بنابراین سایت واکنش گرا (Responsive) بدین معنا است که اگر با تبلت، گوشی یا هر وسیله دیگر با هر اندازه که باشد به یک سایت واکنش گرا مراجعه کنید، طول و عرض سایت هم اندازه با دستگاه شما خواهد شد. در ادامه به اهمیت طراحی سایت واکنش گرا می پردازیم. اهمیت طراحی سایت واکنش گرا(Responsive) یک طراحی سایت Responsive می تواند بسیار به رشد و کیفیت سایت شما کمک کند. باتوجه به آمارهای اخیر بسیاری از کاربران متصل به اینترنت از گوشی یا تبلت خود استفاده می‌کنند، که ایران از […]
در این مقاله قصد داریم به بررسی وبلاگ و تاریخچه ایجاد آن بپردازیم. اگر هنوز تفاوت وب سایت و وبلاگ را نمیدانید و یا دوست دارید وبلاگ نویس شوید پیشنهاد می کنم تا پایان با ما همراه باشید. وبلاگ اصطلاح وبلاگ (weblog) در سال 1997 توسط جورن بارگر ابداع شد که به معنای ثبت وقایع روزانه می باشد. وبلاگ ، وب سایتی شامل مجموعه ای از مطالب است که به ترتیب زمانی معکوس مرتب شده اند و اغلب با اطلاعات جدید در مورد موضوعات خاص به طور مرتب به روز می شوند. به طور کلی ، وبلاگ ها به یک یا چند موضوع یا مضمون اختصاص داده می شوند ، که معمولاً مورد توجه موضوعی قرار می گیرند.وبلاگ که به بلاگ یا وب‌نوشت نیز معروف است می تواند شامل یادداشت های شخصی ، اخبار ، مقالات علمی و موضوعاتی از این قبیل باشد. به کسی که محتوای وبلاگ را مینویسد بلاگر (blogger) یا وبلاگ نویس می گویند. جالب است بدانید اولین وب نوشت در ایران به سال ۱۳۸۰ برمی‌گردد. سلمان جریری اولین محتوا وبلاگ خود را در ۱۶ شهریور ۱۳۸۰ نوشت و پس از آن وبلاگ نویسی تا امروز ادامه دارد. در واقع می توان از او به عنوان اولین وبلاگ نویس ایرانی یاد کرد. تفاوت وبلاگ و وب سایت چیست ؟ وبلاگ را می‌توان نوعی وبسایت […]
اگر پس از مدتی کلنجار رفتن با خود درباره ی داشتن یا نداشتن وب سایت به این نتیجه رسیده اید که با توجه به شرایط امروزی، کسب و کار شما به وب سایت نیاز دارد و اکنون به دنبال شرکت طراحی سایت هستید پیشنهاد می کنم ادامه ی این مقاله را از دست ندهید. داشتن یا نداشتن وب سایت ؟ مساله این است! شاید 10 سال پیش کسب و کار سنتی رونق خوبی داشت اما امروزه که بیشتر مردم با تلفن های همراه خود زندگی می کنند و اینترنت را جزیی از الزامات زندگی روزمره می دانند نمی توان از اثرات کسب و کار آنلاین و مجازی چشم پوشی کرد. امروزه تنها با یک جستجو ساده در گوگل و کلیک بر روی گزینه خرید سایت افرادی کسب درآمد می کنند. چرا شما جزو این دسته از افراد نباشید؟ فارغ از مساله ی رشد و گسترش اینترنت ، داشتن وب سایت مزایای دیگری نیز دارد . زمانی که شما وب سایت دارید یعنی در هرروز هفته و هر ساعتی در دسترس هستید و می توانید به کسب درآمد بپردازید. داشتن وب سایت شما را محدود به محل زندگی خود نمی کند و شما می توانید حتی از شهرهای دیگر نیز مشتری داشته باشید. کدام شرکت طراحی سایت را انتخاب کنم؟ با یک جستجو ساده در گوگل شما با انبوهی از […]
در دنیای امروزی که تنها با یک جستجو ساده در گوگل هزاران منبع و اطلاعات یافت می شود داشتن وب سایت برای هر کسب و کاری ضروری است. داشتن وب سایت شما را از محدودیت های زمان و مکان دور کرده و می تواند باعث رشد و پیشرفت شغلی تان شود. از طرفی با شیوع ویروس کرونا در جهان و از رونق افتادن کسب و کارها ، کسب و کار اینترنتی همچنان پابرجا بوده و حتی رونق بیشتری پیدا کردند. اگر مشغول مطالعه این مقاله هستید و تاکنون به داشتن وب سایت فکر نکرده اید نگران نباشید ! ما شما را به یک مشاوره رایگان تلفنی دعوت می کنیم تا بهتر بتوانید تصمیم بگیرید. محتوا پادشاه است ! فرض می کنیم شما صاحب یک وب سایت هستید و قبلا تمام این مراحل را پشت سر گذاشته اید. حالا سوال اینجاست آیا صرف داشتن یک وب سایت می تواند باعث پیشرفت کسب و کار شود؟ البته که پاسح منفی است. وب سایت بدون محتوا مانند ظرفی بدون غذا است. شاید شنیده باشید که می گویند محتوا پادشاه است پس نباید قلمرویی این پادشاه را فراموش کرد. محتوا بهترین پل ارتباطی بین سایت شما و مخاطبان است. اگر محتوایی جذاب و کاربردی داشته باشید کاربران مدت بیشتری را در سایت شما گذرانده و حتی ممکن است به مشتریان ثابت شما تبدیل […]
بسیاری از وب‌سایت‌ها ساختار گمراه‌کننده‌ای دارند. لینک دادن محتواها به یکدیگر از هیچ قاعده و قانونی تبعیت نمی‌کند، کاربر را گیج و سردرگم و به مسیر اشتباهی راهنمایی می‌کند. این می‌تواند برای سئوی سایت شما بسیار بد باشد. امروز شما را با استراتژی بهبود ساختار وبسایت آشنا می‌کنیم تا بتوانید جایگاه سایت‌تان را در موتورهای جستجو ارتقا دهید. و از طریق آن بتوانیم به افزایش درآمدتان کمک کنیم. با ما همراه باشید. مسیر کاربر(User Flow) مسیر کاربر و ساختار وبسایت ارتباط تنگاتنگی دارند. ساختار وب سایت شما مانند نقشه‌ی معماری یک ساختمان است.این ساختار یک طرح کلی از چگونگی پیوند دادن پست‌ها و صفحات سایت‌تان برای شما فرآهم می‌آورد. با استفاده از مفهومی معروف به خوشه‌بندی محتوا می‌توان دید که چگونه ساختار وبسایت تان روی سئوی آن موثر است. در ادامه درباره خوشه‌بندی محتوا توضیح خواهیم داد. از طرف دیگر مسیر کاربر مربوط به نحوه و چگونگی جابجایی کاربران در سایت‌تان است و یکی از عوامل مهم و تأثیرگذار روی سئو است. ساختار وبسایت سهم بزرگی در این مهم دارد. از دیگر عوامل مؤثر،می‌توان به کیفیت محتواها و لینک‌های‌تان اشاره کرد. بهترین ابزار برای تجزیه و تحلیل سایت قبل از اعمال هر گونه تغییر اساسی در ساختار وبسایت تان باید نحوه استفاده کاربران از سایت‌تان را بررسی کنید. دو برنامه‌ی کاربردی و معروف وجود دارد که میتوانید برای این کار […]
طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور
چطور می تونیم با لود شدن صفحه این مدال رو اجرا کنیم؟
جاوااسکریپت رو باید چطوری بنیویسم؟>
از سایت w3schools استفاده نمایید