bootstrap
مدال در بوت استرپ مدال یک پنجره محاوره ای است که به صورت پاپ آپ است و در بالای صفحه فعلی نمایش داده می شود. برای ساخت 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 –> […]
Carousel اسلایدری است که برای تصاویر, نوشته ها, ویدئو و انیمیشن های متحرک به کار می رود. پوسته ی اصلی اسلاید شو ها تصاویر می باشند. در صفحه تنها می توان از یک Carousel استفاده کرد. با تیم طراحی سایت وب یار همراه باشید تا با نحوه ی ایجاد یک Carousel در Bootstrap آشنا شوید. مثال زیر نشان می دهد که چگونه می توان یک Carousel ساده را با استفاده از کد های Bootstrap ایجاد کرد. <div id=”myCarousel” class=”carousel slide” data-ride=”carousel”> <!– Indicators –> <ol class=”carousel-indicators”> <li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li> <li data-target=”#myCarousel” data-slide-to=”1″></li> <li data-target=”#myCarousel” data-slide-to=”2″></li> </ol> <!– Wrapper for slides –> <div class=”carousel-inner”> <div class=”item active”> <img src=”la.jpg” alt=”Los Angeles”> </div> <div class=”item”> <img src=”chicago.jpg” alt=”Chicago”> </div> <div class=”item”> <img src=”ny.jpg” alt=”New York”> </div> </div> <!– Left and right controls –> <a class=”left carousel-control” href=”#myCarousel” data-slide=”prev”> <span class=”glyphicon glyphicon-chevron-left”></span> <span class=”sr-only”>Previous</span> </a> <a class=”right carousel-control” href=”#myCarousel” data-slide=”next”> <span class=”glyphicon glyphicon-chevron-right”></span> <span class=”sr-only”>Next</span> </a> </div> اسلایدشو برای عملکرد مناسب کنترل های خود نیاز به یک شناسه (در این مورد id=”myCarousel”) دارد. <div> خارجی در این کد ” class=”carousel مشخص می کند که این div حاوی Carousel می باشد. کلاس slide افکت های transition و animation را اضافه می کند که باعت ایجاد حالت اسلایدی برای عکس ها در هنگام نمایش آیتم های بعدی می شود. ویژگی data-ride=”carousel” به […]
دکمه های گروهی در بوت استرپ – آموزش بوت استرپ تیم طراحی سایت وب یار در این مقاله به آموزش دکمه ها در بوت استرپ می پردازد. در این آموزش شما با دکمه های گروهی در بوت استرپ، تنظیم سایز دکمه های گروهی، ایجاد دکمه های گروهی عمودی، 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> خروجی کد بالا را می توانید در تصویر زیر مشاهده کنید. جالب است بدانید که شما می توانید برای این […]
دکمه ها در بوت استرپ – آموزش بوت استرپ در این مقاله تیم طراحی سایت وب یار آموزش دکمه ها در بوت استرپ را برای شما عزیزان در نظر گرفته است. در این آموزش شما با دکمه ها در بوت استرپ، روش های مختلف ایجاد دکمه، سایز دکمه ها در بوت استرپ، ایجاد دکمه با عرض کامل و دکمه های فعال و غیر فعال در بوت استرپ آشنا می شوید. دکمه ها برای اهداف مختلفی مانند submit یا reset کردن یک فرم، نمایش دادن یا مخفی کردن یک مطلب در سایت و موارد دیگر استفاده می شوند. بنابراین دکمه ها یک بخش لازم در طراحی سایت هستند. در ادامه همراه ما باشید تا با دکمه ها در بوت استرپ آشنا شوید. دکمه ها در bootstrap همانطور که می دانید تگ button برای ایجاد دکمه استفاده می شود. حال برای این که استایلی را که بوت استرپ برای دکمه ها در نظر گرفته است، به تگ button اضافه کنیم، کافی است از کلاس های بوت استرپ برای دکمه ها استفاده کنیم. این کلاس ها به شرح زیر می باشد. btn-default : برای ایجاد یک دکمه ی پیش فرض به رنگ خاکستری است. btn-primary : برای مشخص کردن دکمه ی اصلی از این کلاس استفاده می شود. btn-success : این کلاس مشخص کننده ی یک عملیات موفقیت آمیز است. btn-info : از […]
هشدارها در بوت استرپ در این مقاله آموزش بوت استرپ را با مبحث هشدارها در بوت استرپ ادامه می دهیم. در این آموزش شما با انواع هشدارها در بوت استرپ، بستن هشدارها در بوت استرپ و کلاس alert-link آشنا خواهید شد. هشدارها در بوت استرپ برای نمایش اعلان به کاربر استفاده می شوند. در واقع هر کدام از هشدارها یک باکس رنگی متفاوت را ایجاد می کنند که با مضمون پیام همخوانی دارد. در ادامه با انواع هشدارها در بوت استرپ آشنا خواهید شد. انواع هشدارها در بوت استرپ برای ایجاد هشدارها در بوت استرپ از کلاس alert در تگ div استفاده می شود. این هشدارها می توانند مشخص کننده ی یک عملیات موفقیت آمیز، یک عمل خنثی، اطلاعات هشداردهنده و یا عملیات خطرناک باشند که با نوشتن کلاس های زیر در ادامه ی کلاس alert می توانید نوع هشدار را برای کاربر مشخص کنید. alert-success: این هشدار نشان دهنده ی یک عمل مثبت یا موفقیت آمیز است. alert-info: این هشدار یک سری اطلاعات مفید را در اختیار کاربران قرار می دهد. alert-warning: این جعبه ی هشدار، یک هشدار به کاربر می دهد. alert-danger: این هشدار مشخص کننده ی یک اطلاعات منفی یا خطرناک است. در کد زیر می توانید نحوه ی استفاده از این کلاس ها را مشاهده کنید. <div class=”container”> <div class=”alert alert-success”> This alert box could indicate […]
مقدمه – آموزش بوت استرپ با سلام به دوستان وب یاری عزیز، این جلسه آموزش بوت استرپ را با آموزش کلاس هایwell و jumbotron ادامه می دهیم. همچنین این جلسه با ایجاد header برای صفحه در بوت استرپ آشنا خواهید شد. پس در ادامه همراه ما باشید. کلاس well در بوت استرپ با استفاده از کلاس well می توان یک کادر با گوشه های گرد و پس زمینه ی خاکستری رنگ در اطراف یک عنصر ایجاد کرد. برای استفاده شی well کافی است کلاس well را به یک div اضافه کنید. همچنین این کلاس مقداری padding دارد. لازم به ذکر است که به طور پیش فرض اندازه ی شی well در حالت متوسط قرار دارد که با استفاده از کلاس های well-sm و well-lg می توان این سایز را تغییر داد. کلاس well-sm برای کوچکتر نشان دادن شی well استفاده می شود. کلاس well-lg برای بزرگتر نشان دادن سایز well در بوت استرپ به کار برده می شود. در کد زیر نحوه ی استفاده از این کلاس ها نشان داده شده است. <div class=”well”>well class in Bootstrap</div> <div class=”well well-sm”>well-sm class in Bootstrap</div> <div class=”well well-lg”>well-lg class in Bootstrap</div> خروجی این کد را می توانید در تصویر زیر مشاهده کنید. کلاس jumbotron در بوت استرپ برای جلب توجه کاربران به یک سری از اطلاعات از کلاس jumbotron استفاده […]