آموزش ایجاد صفحه نمونه کارها با استفاده از CSS,Bootstrap
آموزش ایجاد صفحه نمونه کارها با استفاده از CSS,Bootstrap

آموزش ایجاد صفحه نمونه کارها با استفاده از CSS,Bootstrap

در این آموزش قصد داریم تا به شما نحوه ایجاد صفحه نمونه کار ها رو بدیم که در آن از کتابخانه bootstrap بیشترین استفاده را خواهیم برد.برای توضیحات بیشتر و دیدن آموزش به ادامه مطلب مراجعه فرمایید.

دریافت فایل  پیش نمایش

bootstrap چیست؟ Bootstrap مجموعه ای از ابزارهای رایگان برای ایجاد صفحات وب و نرم افزارهای تحت وب است که شامل دستورات HTML، CSS و توابع جاوا اسکریپت جهت تولید و نمایش فرم ها، دکمه ها، تب ها، ستون ها و سایر المان های مورد نیاز طراحی وب می باشد. بزرگترین مشکل طراحان وب و کدنویسان قدیمی، ایجاد ظاهری زیبا و مناسب است! بله دقیقا مشکل اساسی اینجاست. اصول کدنویسی و ایجاد زیربنا و ساختار مناسب برای یک سایت بسیار مهم و پیچیده است ولی نمایش صحیح خروجی کار و ایجاد یک فضای کاربرپسند نیز اهمیت بسیار بالایی خواهد داشت.
Bootstrap قصد دارد که خلاء میان طراحی و کدنویسی را از میان برداشته و کدنویسان را ترغیب به استفاده از طراحی های پیش فرض و استاندارد نماید. به همین منظور دستورات CSS و توابع jQuery مورد نیاز را برای شما فراهم کرده است تا شما بتوانید با استفاده از دستورات پیش فرض و رعایت اصول متناسب با طراحی Bootstrap زمان راه اندازی یک پروژه را تا حد زیادی کاهش داده و خروجی آن را متناسب با استانداردهای روز دنیا پیش ببرید.
اگر طراحی سایت را به آشپزی تشبیه کنیم، دستورات php همانند مواد اولیه در پخت یک غذا بوده و وظیفه تامین مواد غذایی لازم را برعهده دارد، کدهای HTML همانند دستورالعمل پخت غذا است که خروجی مورد نظر شما را از مواد اولیه ایجاد میکند. دستورات CSS شباهت زیادی به نحوه کشیدن غذا در ظرف و نحوه ارائه آن در سفره دارد! خوشمزه ترین غذای دنیا نیز اگر در ظرف پلاستیکی و بصورت نامناسب سرو شود ممکن نیست که رضایت افراد را جلب کند ولی ارائه مناسب و زیبای یک غذای ساده میتواند اشتهای سخت گیرترین افراد را نیز برانگیزد.
Bootstrap به شما در نحوه ارائه غذا و بهبود نمایش صفحات وب بسیار کمک میکند، مهمتر از هرچیز دیگر سرعت بالای کار با آن است که زمان راه اندازی و اتمام یک پروژه را حتی تا ۸۰ درصد کاهش میدهد.منبع  توضیحات بیشتر

خوب حالا به سرغ آموزش می رویم.ما ابتدا بخش های مهم را که در کد HTML نوشته ایم برایتان می آوریم.

<section id="email-subscribe">.......... </section>
.
.
<section id="features">.........</section>
.
.
.
<section id="work">............</section>
..
.
.
 <section id="below">...............</section>
.
.
.
.
.
<!-- JQUERY هسته   اسکریپت -->
 <script src="assets/js/jquery-1.11.1.js"></script>
 <!-- BOOTSTRAP اسکریپت  -->
 <script src="assets/js/bootstrap.js"></script>
 <!-- SCROLLING SCRIPTS پلاگین  -->
 <script src="assets/js/jquery.easing.min.js"></script>
  <!-- FANCYBOX پلاگین -->
   <script src="assets/js/source/jquery.fancybox.js"></script>
   <!-- ISOTOPE اسکریپت -->
   <script src="assets/js/jquery.isotope.js"></script>
   <!-- CUSTOM اسکریپت   -->
   <script src="assets/js/custom.js"></script>

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

خوب حالا به سراغ کدهای جاوا اسکریپت می رویم.ما برای راحتی توضیح دادن کدهای جاوااسکریپت آنها را در چند بخش برایتان توضیح خواهیم داد.

بخش اول

$("#postcontent").submit(function (e) {
        e.preventDefault();
        $.ajax({
            type: "POST",
            url: "subscribe.php",
            data: $("#postcontent").serialize(),
             success: function (response) {
			  $('[name="email"]').val('');
               // نمایش پیام هشدار
			   alert('اشتراک شما با موفقیت ایجاد شد');
            }
        });
        e.preventDefault();
    });
-------
 $('.fancybox-media').fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    helpers: {
     title: {
    type: 'inside'
    }
    }
 });

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

بخش دوم:

 $(window).load(function () {
        var $container = $('#work-div');
        $container.isotope({
            filter: '*',
            animationOptions: {
                duration: 750,
                easing: 'linear',
                queue: false
            }
        });
        $('.caegories a').click(function () {
            $('.caegories .active').removeClass('active');
            $(this).addClass('active');
            var selector = $(this).attr('data-filter');
            $container.isotope({
                filter: selector,
                animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                }
            });
            return false;
        });

    });

در این تکه کد ما فیلترهایی را به عکس انتخابی اعمال می کنیم که برای این کار از کتابخانه isotope استفاده کرده ایم.در واقع ما با انتخاب هر دسته بندی برای مثال HTML،تصاویر را مطابق با دسته انتخابی ما گروه بندی و فیلتر می کند و برای ما نمایش می دهد.

PHP

ما برای دریافت اطلاعات وارده از کاربران به تکه کد زیر نیاز داریم.

if($_POST) {
  
      //ایمیلی را که میخواهید هشدار ها و اطلاع رسانی ها را دریافت کنید،  وارد نمایید
		
		$emailTo = 'hello@yourmail.com';
    
          // کد زیر را تغییر ندهید

    	$subscriber_email = ($_POST['email']);
      
		    // کد ارسال ایمیل
			$subject = 'Hello, You Got Subscriber';
			$message = "You got a new subscriber!\n\nEmail: " . $subscriber_email;
			$headers = "From: ".$subscriber_email." <" . $subscriber_email . ">" . "\r\n" . "Reply E-mail: " . $subscriber_email;
			
			mail($emailTo, $subject, $message, $headers);
      
     
		}

به دلیل توضیح مکفی روی کدها از این بخش می گذریم.

 در آخر نیز ما به شما بخشی از کدهای مربوط به استایل ها را می آوریم.توضیح اینکه ما فقط بخشی از این کد ها را برای شما نمایش می دهیم و شما برای مشاهده تمام کدها باید به فایل style.css موجود در داخل فایل دانلود مراجعه فرمایید.

#work {
    background-color: #e2e2e2;
}

    #work .caegories a.active {
        background-color: #d92a2a;
        color: #fff;
        border-color: #d92a2a;
    }

.isotope .isotope-item {
    -webkit-transition-duration: 0.8s;
    -moz-transition-duration: 0.8s;
    transition-duration: 0.8s;
}

#work .work-wrapper {
    padding: 10px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    cursor: pointer;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    border: 1px solid #d92a2a;
}

    #work .work-wrapper:hover {
        background-color: transparent;
        border: 1px solid #d92a2a;
        opacity: .80; /* standard: ff gt 1.5, opera, safari */
        -ms-filter: "alpha(opacity=80)"; /* ie 8 */
        filter: alpha(opacity=80); /* ie lt 7 */
        -khtml-opacity: .80; /* safari 1.x */
        -moz-opacity: .80; /* ff lt 1.5, netscape */
    }

    #work .work-wrapper h4 {
        padding-top: 10px;
    }

تکه کد بالا مربوط به استایل نمونه کار ها می باشد که به دلیل سادگی نیازی به توضیح ندارند.

0
0


هرگونه انتشار مطالب اختصاصي و محصولات اين سايت بجز با درج لينک مستقيم شرعا حرام بوده و پيگرد قانوني دارد.
طبق ماده 12 فصل سوم قانون جرائم رايانه هرگونه کپي برداري ممنوع بوده و پيگرد قانوني دارد. براي اطلاعات بيشتر کليک کنيد.

درباره‌ی مدیر سایت

در اردیبهشت سالی از سال های خدا بدنیا آمدم.درس خواندم و مهندس شدم.ازآنجایی که علاقه شدیدی به برنامه نویسی و ترجمه وآموزش داشتم در راستای اهدافم این وبسایت رو راه اندازی کردم تا دین خود را به جامعه برنامه نویسی ادا کرده باشم.

۴ دیدگاه ها

  1. سلام ممنون از سایت خوبتون

    من میخوام عکس ها در هر ردیف چهارتا نمایش داده بشه
    ولی کدش رو پیدا نمیدکنم اگر کمک کنید ممنون میشم

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

      • برای اینکار میتوانید در بخش bootstrap.css از لاین ۱۶۱۹ تا ۲۲۴۰ بسته به اندازه مورد نظر بر حسب درصد بزرگنمایی یکی را انتخاب کرده و در کد HTML در بخش نمونه کار ها به کلاس مورد نظر اضافه نمایید.برای مثال:
        پیش فرض:col-xs-8 col-sm-8 col-md-8 col-lg-8 html

        مثلا: col-xs-2 col-sm-2 col-md-2 col-lg-2 html

        به عدد ها توجه کنید.
        سپس در استایل ها تغییرات لازم را اعمال کنید.

  2. سلام و عرض خسته نباشید
    من میخواستم نحوه کار با پلاگین isotope رو بدونم یه قالب دارم با بوت استرپ طراحی شده ولی نمیتونم از isotope توش استفاده کنم …..
    ممنون میشم یه آموزشی یا نمونه کاری از این پلاگین بهم بدید
    با تشکر از سایت خوبتون….

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

آدرس پست الکترونیک شما منتشر نخواهد شد.خانه های ضروری نشانه گذاری شده اند. *

*


× 8 = سی دو

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>