میرممد

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

سید محمد میرعالی

امیدوارم مطالب خوب و کاربردی رو بتونم در سایتم برای شما دوستان قرار بدم.

دسته بندی مطالب آمار سایت
  • کل مطالب : 13
  • کل نظرات : 0
  • افراد آنلاین : 1
  • تعداد اعضا : 0
  • آی پی امروز : 15
  • آی پی دیروز : 11
  • بازدید امروز : 121
  • باردید دیروز : 17
  • گوگل امروز : 1
  • گوگل دیروز : 0
  • بازدید هفته : 233
  • بازدید ماه : 436
  • بازدید سال : 22,945
  • بازدید کلی : 22,945
  • آموزش DocType در HTML 5


    در اين مطلب از سايت ميرممد با  DocType در HTML 5 آشنا خواهيم شد.

    در نسخه هاي قبلي HTML تعريف DocType به صورت زير بود :

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">‎
    ‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ‎‎"HTTP>
    /www.w3.org/TR/html4/loose.dtd">‎
    ‎<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" ‎‎"HTTP>
    /www.w3.org/TR/html4/frameset.dtd">‎
    ‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ‎‎"HTTP>
    /www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">‎
    ‎<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ‎‎"HTTP>
    /www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">‎

    ولي در HTML 5 به سادگي كد زير DocType تعريف ميشه :

    <!DOCTYPE html>

    يك نمونه كد HTML 5 همراه با تعريف DocType :

    <!DOCTYPE html>‎
    <html>‎
    <head> ‎
                        <title>HTML5 DocType </title> ‎
    </head>‎
    <body>
       ‎  <h1>HTML5 DocType </h1>   ‎
    </body>‎
    </html>‎

    ادامه مطلب
    بازدید : 36 یکشنبه 06 آبان 1397 : 7:52 نظرات ()

    صفحه بندی در Bootstrap 4


    در اين مطلب از سايت ميرممد با صفحه بندی در بوتسترپ نسخه چهار كار خواهيم كرد.نمونه کد pagination در بوتسترپ 4 :

    <ul class="pagination">
      <li class="page-item"><a class="page-link" href="#">Previous</a></li>
      <li class="page-item"><a class="page-link" href="#">1</a></li>
      <li class="page-item"><a class="page-link" href="#">2</a></li>
      <li class="page-item"><a class="page-link" href="#">3</a></li>
      <li class="page-item"><a class="page-link" href="#">Next</a></li>
    </ul>

    خروجی کد بالا :

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

    ادامه مطلب
    بازدید : 330 پنجشنبه 03 آبان 1397 : 12:17 نظرات ()

    آموزش کار با Progress Bar در Bootstrap 4


    در اين مطلب از سايت ميرممد با Progress Bar در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Progress Bar براي نمايش مقدار باقيمانده از يك فرايند استفاده ميشه.نمونه كد Progress Bar در بوتسترپ :

    <div class="progress">
      <div class="progress-bar" style="width:70%">70%</div>
    </div>

     

    خروجي كد بالا :

    70%

    براي تغيير اندازه درصد پيشرفت بايد مقدار width:70% را تغيير دهيم و براي تغيير متن درون Progress Bar بايد 70% را تغيير دهيم.Progress Bar داراي رنگ بندي هاي بوتسترپي نيز هست كه در ادامه توضيح ميدم.

    ادامه مطلب
    بازدید : 759 دوشنبه 30 مهر 1397 : 10:3 نظرات ()

    آموزش کار با Badge در Bootstrap 4


    در اين مطلب از سايت ميرممد با Badge در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Badge براي اضافه كردن اطلاعات اضافي به يك المنت استفاده ميشه.مثلا در سايت در بخش نظرات،تعداد نظرات جديد رو ميشه با كلاس Badge بوتسترپ نشون بديم.خب يك نمونه كد از Badge در بوتسترپ نسخه چهار :

    <h5>نظرات جديد <span class="badge badge-secondary">3</span></h5>
    <h6>نظرات جديد <span class="badge badge-secondary">8</span></h6>
    خروجي كد بالا :
    نظرات جديد 3
    نظرات جديد 8
    ادامه مطلب
    بازدید : 591 یکشنبه 29 مهر 1397 : 8:34 نظرات ()

    آموزش کار با Button Groups در Bootstrap 4


    در اين مطلب از سايت ميرممد با Button Groups در بوتسترپ نسخه چهار كار خواهيم كرد.برای استفاده از گروه دکمه ها در بوتسترپ 4 کافیه در تگ div از کلاس btn-group استفاده کنیم و در آن دکمه های خودمونو قرار بدیم.تکه کد استفاده از Button Groups در Bootstrap 4 :

    <div class="btn-group">
      <button type="button" class="btn btn-primary">دکمه یک</button>
      <button type="button" class="btn btn-primary">دکمه دو</button>
      <button type="button" class="btn btn-primary">دکمه سه</button>
    </div>

     

    خروجی کد بالا :

    ادامه مطلب
    بازدید : 196 شنبه 28 مهر 1397 : 21:33 نظرات ()

    آموزش کار با Button در Bootstrap 4


    در اين مطلب از سايت ميرممد با Button در بوتسترپ نسخه چهار كار خواهيم كرد.دکمه ها در بوتسترپ 4 شامل رنگ بندی های زیر میباشند :

    <button type="button" class="btn">Basic</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-dark">Dark</button>
    <button type="button" class="btn btn-light">Light</button>
    <button type="button" class="btn btn-link">Link</button>

     

    خروجی کد بالا به ترتیب :

    کلاس های دکمه ای که در بالا با رنگ سبز در کد مشخص شدند رو میتوان در المنت های a و Button و input به شکل زیر استفاده کرد :

    <a href="#" class="btn btn-info" role="button">Link Button</a>
    <button type="button" class="btn btn-info">Button</button>
    <input type="button" class="btn btn-info" value="Input Button">
    <input type="submit" class="btn btn-info" value="Submit Button">

     

    ادامه مطلب
    بازدید : 603 سه شنبه 24 مهر 1397 : 16:9 نظرات ()

    آموزش کار با Alerts در Bootstrap 4


    در اين مطلب از سايت ميرممد با Alerts در بوتسترپ نسخه چهار كار خواهيم كرد.كلاس Alerts وقتي به يك div داده ميشه ، یک پیغام زیبا به کاربر نشون داده میشه.تکه کد استفاده از Alerts در بوتسترپ چهار :

    <div class="alert alert-success">
      به سایت میر ممد خوش آمدید
    </div>

    خروجی کد بالا :

    به سایت میر ممد خوش آمدید
    ادامه مطلب
    بازدید : 572 دوشنبه 23 مهر 1397 : 21:53 نظرات ()

    آموزش کار با Jumbotron در Bootstrap 4


    در اين مطلب از سايت ميرممد با Jumbotron در بوتسترپ نسخه چهار كار خواهيم كرد.در واقع كلاس Jumbotron وقتي به يك div داده ميشه، يك حاشيه ي داخلي و يك بكگراند به اون div داده ميشه.تكه كد استفاده از كلاس Jumbotron در بوتسترپ 4 :

    <div class="jumbotron">
      <p>آموزش طراحي سايت در سايت ميرممد</p>
    </div>

    خروجي كد بالا :

    آموزش طراحي سايت در سايت ميرممد

    ادامه مطلب
    بازدید : 576 دوشنبه 23 مهر 1397 : 9:24 نظرات ()

    آموزش کار با جداول در Bootstrap 4


    در اين مطلب از سايت ميرممد با كلاس هاي جدول در Bootstrap 4 كار ميكنيم و يك سري تكه كد مربوط به جداول در بوتسترپ نسخه چهار رو براتون قرار ميدم.

    شما فقط کافیه کلاس Table رو به تگ جدولتون بدید مثل کد زیر :

    <table class="table">
        <thead>
          <tr>
            <th>Firstname</th>
            <th>Lastname</th>
            <th>Email</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>john@example.com</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Moe</td>
            <td>mary@example.com</td>
          </tr>
          <tr>
            <td>July</td>
            <td>Dooley</td>
            <td>july@example.com</td>
          </tr>
        </tbody>
      </table>

    خروجی کد بالا :


    FirstnameLastnameEmail
    John Doe john@example.com
    Mary Moe mary@example.com
    July Dooley july@example.com

    همونطور که میبینید یک ظاهر زیبایی به جدول شما میده فقط با اضافه کردن کلاس table به جدولتون.

    ادامه مطلب
    بازدید : 733 شنبه 21 مهر 1397 : 16:57 نظرات ()

    آموزش استفاده از Tooltip در Bootstrap 4


    در اين مطلب از سايت ميرممد شما رو با كلاس Tooltip در بوتسترپ چهار آشنا ميكنم.وقتي كلاس Tooltip رو به يك المنت ميديم اگر موس رو روي آن المنت ببريم يك پاپ آپ مسيج كوچيك كنار المنت باز ميشه و ميتونيد پيام خودتونو توش به كاربر نشون بديد.يك نمونه دكمه ميذارم در پايين تا منظورمو خوب متوجه بشيد :

    دكمه تولتيپ دار

    همونطور كه ميبينيد وقتي روي دكمه بريد به شما پيغام نشون ميده كه بش ميگن تولتيپ.

     

    ادامه مطلب
    بازدید : 369 سه شنبه 17 مهر 1397 : 13:16 نظرات ()