آموزش Bootstrap--کاربرد کلاس collapse در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت نهم آموزش در زیر قرار داده شده است.

کاربرد کلاس collapse. در بوت استرپ                                            قسمت نهم

قبل از شروع آموزش از شما عزیزان میخوام برای درک بهتر مطالب وارد محیط visual studio شده و کد های آموزش داده شده را نوشته و خروجی را مشاهده کنید

کلاس collacpse. :

زمانی که شما متنی با محتوای زیاد دارید میتوانید با استفاده از این کلاس متن خود را مخفی کنید بدین صورت که با کلیک بر روی تگ مورد نظر متن شما قابل مشاهده خواهد شد که برای این کار می توانیم از تگ a یا تگ button استفاده کنیم

ما در اینجا با استفاده از یک تگ <a></a> متن مخفی شده خود را در زمان کلیک کاربر نمایش می دهیم

ابتدا برای المان لینک  خود "data-toggle="collapse را مینویسیم سپس ID تگی که متنمان در آن قرار دارد را به button  خود اختصاص میدهیم به این صورت :

data-target="#id"

سپس کلاس .collapse را به تگ حاوی متن خود می دهیم

برای تگ a به جای قرار دادن ID در data-target آن را در خصوصیت href تگ a قرار می دهیم

استفده از تگ a :

<a href="#demo" data-toggle="collapse">Collapsible</a>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

استفاده از button :

<button class=" btn btn-info" data-toggle="collapse" data-target="#demo">Simple collapsible</button>

<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>

اجرای کد بالا به صورت زیر می باشد

 

بعد از کلیک :

 

نکته : متن ما به صورت پیش فرض مخفی می باشد اگر بخواهیم متن در ابتدا نمایش داده شود سپس با کلیک مخفی شود از کلاس in. استفاده میکنیم

<div id="demo" class="collapse in">
Lorem ipsum dolor text....
</div>

میتوانیم از کلاس collapse در پنل هایمان نیز استفاده کنیم به این صورت که pane-body را درون تگی که به آن کلاس panel-collapse را داده ایم قرار میدهیم

نکته : پنل ها در قسمت های قبلی آموزش داده شده اند

 مثال زیر یک پنل collapse شده را نشان می دهد

<div class="container">

  <h2>Collapsible Panel</h2>

  <div class="panel-group">

    <div class="panel panel-default">

      <div class="panel-heading">

        <h4 class="panel-title">

          <a data-toggle="collapse" href="#collapse1">Collapsible panel</a>

        </h4>

      </div>

      <div id="collapse1" class="panel-collapse collapse">

        <div class="panel-body">Panel Body</div>

        <div class="panel-footer">Panel Footer</div>

      </div>

    </div>

  </div>

</div>

نتیجه اجرای کد بالا به شکل زیر می باشد :

 

 

مثالی دیگر با استفاده از کلاس list و panel و : collapse

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
        Collapsible Group 1</a>
      </h4>
    </div>
    <div id="collapse1" class="panel-collapse collapse in">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
        Collapsible Group 2</a>
      </h4>
    </div>
    <div id="collapse2" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
        Collapsible Group 3</a>
      </h4>
    </div>
    <div id="collapse3" class="panel-collapse collapse">
      <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
      minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.</div>
    </div>
  </div>
</div>

نتیجه اجرای کد بالا :

 

برای درک بهتر کد , کد را بنویسید و اجرای آن را مشاهده کنید

 پایان قسمت نهم

 ادامه آموزش در قسمت دهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

منبع : http://www.w3schools.com 

آموزش Bootstrap--کار با پنل ها در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت هشتم آموزش در زیر قرار داده شده است.

کار با پنل ها در بوت استرپ                                       قسمت هشتم

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

پنل بوت استرپ شامل باکسی است که دارای بخش header برای نوشتن عنوان , بخش Body برای نوشتن محتویاتی که درون پنل قرار میگیرد و بخش footer می باشد

کد زیر یک پنل است که فقط قسمت body یا بدنه را دارد

<div class="panel panel-default">
  <div class="panel-body">A Basic Panel</div>
</div>

نتیجه  کد بالا به صورت زیر می باشد :

 

کد زیر پنلی است که دارای footer,header می باشد

<div class="container">

  <h2>Panel Footer</h2>

  <div class="panel panel-default">

    <div class="panel-heading">Panel Heading</div>

    <div class="panel-body">Panel Content</div>

    <div class="panel-footer">Panel Footer</div>

  </div>

</div>

نتیجه  کد بالا به صورت زیر می باشد :

 

همچنین می توانیم چند پنل را در یک گروه قرار دهیم

مثال زیر یک گروه بندی از پنل ها را نشان می دهد

<div class="container">

  <div class="panel-group">

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

    <div class="panel panel-default">

      <div class="panel-heading">Panel Header</div>

      <div class="panel-body">Panel Content</div>

    </div>

  </div>

</div>

نتیجه  کد بالا به صورت زیر می باشد :

 

همچنین می توانیم با استفاده از کلاس های متی موجود در بوت استرپ به پنل هامون رنگ بدهیم

 (.panel-default, .panel-primary, .panel-success, .panel-info, .panel-warning, or .panel-danger)

 

پایان قسمت هشتم

 ادامه آموزش در قسمت نهم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

آموزش Bootstrap-- کار با فرم ها در بوت استرپ

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام bootstrap را به شما عزیزان آموزش دهد. لذا قسمت هفتم آموزش در زیر قرار داده شده است.

 کار با فرم ها در بوت استرپ                                                    قسمت هفتم   

برای استایل دادن به المان های <input>, <textarea>  و<select>  به شکل

بوت استرپی باید کلاس form-control.  را به المان هایمان اضافه کنیم که به صورت

width:100 % میباشد در این صورت المان های ما نیز به صورت width:100%  می شود

فرم ها در بوت استرپ به 3 صورت میباشند :

• Vertical form (this is default)
• Horizontal form
• Inline form

قرار دادن <"form role="form> به بهبود قابلیت دسترسی برای 
کاربرانی که از سایت استفاده می کنند کمک می کند

کلاس form-group. برای ایجاد فاصله های مطلوب بین 
کنترل هایمان به کار می رود

ایجاد یک فرم به صورت پیش فرض عمودی
 (Vertical form (this is default :

<form role="form">

  <div class="form-group">

    <label for="email">Email address:</label>

    <input type="email" class="form-control" id="email">

  </div>

  <div class="form-group">

    <label for="pwd">Password:</label>

    <input type="password" class="form-control" id="pwd">

  </div>

  <div class="checkbox">

    <label><input type="checkbox"> Remember me</label>

  </div>

  <button type="submit" class="btn btn-default">Submit</button>

</form>

اجرای کد بالا به صورت زیر می باشد

ایجاد یک فرم به صورت خطی Inline form :

<form class="form-inline" role="form">
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" class="form-control" id="email">
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    <input type="password" class="form-control" id="pwd">
  </div>
  <div class="checkbox">
    <label><input type="checkbox"> Remember me</label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

اجرای کد بالا به صورت زیر می باشد

 

ایجاد یک فرم به صورت افقی Horizontal form :

form class="form-horizontal" role="form">
  <div class="form-group">
    <label class="control-label col-sm-2" for="email">Email:</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="email" placeholder="Enter email">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="pwd">Password:</label>
    <div class="col-sm-10"> 
      <input type="password" class="form-control" id="pwd" placeholder="Enter password">
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label><input type="checkbox"> Remember me</label>
      </div>
    </div>
  </div>
  <div class="form-group"> 
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default">Submit</button>
    </div>
  </div>
</form>

اجرای کد بالا به صورت زیر می باشد

 ادامه آموزش در قسمت هشتم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

 پایان قسمت هفتم

منبع: http://www.w3schools.com/

اضافه کردن View درMVC-- آموزش گام به گام ام وی سی

کانون تبلیغاتی افرا گرافیک در نظر دارد به صورت گام به گام MVC5 را به شما عزیزان آموزش دهد. لذا قسمت سوم آموزش در زیر قرار داده شده است.

در این بخش کلاس HelloWorldcontroller را به صورتی تغییر خواهیم داد که با استفاده از فایل های الگو فرآیند پاسخ های HTML به یک کاربر تسهیل شود.

شما با استفاده از موتور Razor view یک فایل الگو خواهید ساخت.الگو های ساخته شده توسط Razor پسوند cshtml خواهند داشت و یکی از بهترین راه های ساخت خروجی HTML با استفاده از #C را فراهم می کنند.Razor تعداد کاراکترها و ضربه به کلیدهای مورد نیاز برای یک الگوی view را به حداقل می رساند و سبب روان و سریعتر شدن جریان کد نویسی می شود.

در حال حاضر متد index یک پیام از نوع رشته که در حقیقت یک hard-code در کلاس controller است برمی گرداند. متد index را تغییر دهید تا همانند کد زیر یک view object برگرداند:

public ActionResult Index()



{returnView();}

در متد index از یک الگوی view برای ساخت یک پاسخ HTML به مرورگر استفاده می شود. متدهای controller (که به متدهای action نیز معروف هستند) به عنوان نمونه متد index بالا به جای انواع اولیه مانند رشته، ActionResult برمی گردانند.

بر روی پوشه ی views\Helloworld راست کلیک کنید و بر روی add کلیک کنید سپس بر روی MVC 5 View Page with(Layout Razor) کلیک کنید.

  

درکادر Specify Name for Item کلمه Index را ok کنید.

 

در کادر select a Layout page گزینه پیش فرض-Layout.cshtml را انتخاب و بر روی آن Ok کنید.

 

در کادر بالا پوشه ی Views\shared در قسمت سمت چپ انتخاب شده است. اگر یک فایل custom Layout در یک پوشه ی دیگر دارید، می توانید آن را نیز انتخاب کنید. درمورد فایل های Layout در بخش های دیگر توضیحات بیشتری خواهیم داد.

اکنون فایل MvcMovie\views\HelloWorld\Index. cshtml ساخته شده است.

 

بخش های زیر را اضافه کنید.

@{

    Layout = "~/Views/Shared/_Layout.cshtml";

}

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2><p>Hello from our View Template!</p>

روی فایل کلیک راست کنید و view in browser

 

همچنین می توانید بر روی فایل index.cshtml راست کلیک کنید و قسمت View in page inspector را انتخاب کنید.

روش دیگر اجرای برنامه و باز کردن  HelloWorldcontroller(http://locaohost:xxxx/HelloWorldcontroller) است. متد index چندان کارساز نخواهد بود ، در این روش بلافاصله عبارت ()return view را دریافت خواهید کرد، یعنی حتما باید از یک فایل قالب برای ارائه پاسخ به مرورگر استفاده کنید. بدلیل اینکه دقیقا نام فایل view را تعیین نکرده اید، خود ASP.NET MVC به صورت پیش فرض از فایل index.cshtml view در پوشه ی \views\HelloWorldاستفاده می کند. در تصویر زیر عبارت Hello from our view Template استفاده شده است.

 

اگر با دقت نگاه کنید متوجه می شوید که در ستون عنوان مرورگر عبارتIndex My ASP.NET Appli را نشان می دهد و در لینک بزرگی که در بالای صفحه است نام برنامه نوشته شده است. در صورتی که اندازه ی پنجره ی مرورگر شما کوچک باشد باید بر روی سه نوار افقی که در قسمت بالا سمت راست می بینید کلیک کنید تا بتوانید لینک های صفحه ی اصلی ، درباره ی ما ، تماس با ما، ثبت نام و ورود را ببینید.

تغییر نما و طرح صفحات

نخست می خواهید نام برنامه را که در بالای صفحه نوشته تغییر دهید. این متن در هر صفحه ای وجود دارد‌. اگرچه فقط در یک قسمت پروژه از این نام استفاده می کنید در همه ی صفحات نمایش داده خواهد شد.به قسمت /views/shared folder in solution Explorer بروید و فایل Layout.cshtml را باز کنید‌.

این فایل یک صفحه ی Layout نامیده می شود و در پوشه ی اشتراکی قرار دارد که همه ی صفحات از آن استفاده می کنند

 

قالب هایLayout امکان نگه داری لایه های HTML مربوط به سایت شما را در یک مکان فراهم می کنند و سپس آن را در صفحات چندگانه به کار می برند. خط @Render Body()@ را پیدا کنید. RenderBody جایی است که همه ی صفحات view در آن نگه داری می شوند.

محتویات عنوان را با استفاده از علائم زیر تغییر دهید. 

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8"/>

<metaname="viewport"content="width=device-width, initial-scale=1.0">



<title>@ViewBag.Title - Movie App</title>

    @Styles.Render("~/Content/css")

    @Scripts.Render("~/bundles/modernizr")

</head>

<body>

<divclass="navbar navbar-inverse navbar-fixed-top">

<divclass="container">

<divclass="navbar-header">

<buttontype="button"class="navbar-toggle"data-toggle="collapse"data-target=".navbar-collapse">

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

<spanclass="icon-bar">

</span>

</button>

                @Html.ActionLink("MVC Movie", "Index", "Movies", null, new { @class = "navbar-brand" })

            </div>

<divclass="navbar-collapse collapse">

<ulclass="nav navbar-nav">

<li>@Html.ActionLink("Home", "Index", "Home")

</li>

<li>@Html.ActionLink("About", "About", "Home")

</li>

<li>@Html.ActionLink("Contact", "Contact", "Home")

</li>

</ul>

                @Html.Partial("_LoginPartial")

            </div>

</div>

</div>

<divclass="container body-content">

        @RenderBody()

        <hr/>

<footer>

<p>&copy; @DateTime.Now.Year - My ASP.NET Application

</p>

</footer>

</div>

    @Scripts.Render("~/bundles/jquery")

    @Scripts.Render("~/bundles/bootstrap")

    @RenderSection("scripts", required: false)

</body>



</html>

برنامه را اجرا کنید و حالا دقت کنید "MVC Movie" را ببینید بر روی لینک about کلیک کنید، حالا صفحه "MVC Movie" را نشان می دهد. ما قالبLayout را تغییر دادیم و همه ی صفحات سایت عنوان جدید را نشان دادند.

 

وقتی اولین بار فایل Views\HelloWorld\Index.cshtml را ساختیم شامل کد زیر بود:

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

 اکنون بیایید عنوان Index view را تغییر دهیم . قسمت MvcMovie\Views\HelloWorld\Index.chtmp را باز کنید. دو قسمت است که باید تغییر دهید: اول متنی که در عنوان مرورگر ظاهر شده است، و بعد از آن header دوم (h2) با کمی تغییر آنها متوجه خواهید شد که کدام قسمت کد کدام قسمت برنامه را تغییر می دهد.

@{
    ViewBag.Title = "Movie List";
}

<h2>My Movie List</h2>
<p>Hello from our View Template!</p>

برای نشان دادن عنوان HTML, کد بالا سبب ایجاد یک کد مخصوص اشیا ViewBag می شود(که در قلب Index.chtml view) قرار دارند. اگر به source code قالب layout نگاهی بیندازید، متوجه خواهید شد که قالب از این مقدار در قسمت title و به عنوان بخشی از قسمت head متعلق به HTML استفاده می کند که قبلا هم تغییر داده شده است.

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Movie App</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>

با استفاده از این روش viewbag می توانید پارامترهای دیگر را بین قالب view و فایل layout خود حرکت دهید.

برنامه را اجرا کنید و به آدرس http://localost:xx/Heloworld بروید‌.توجه کنید که عنوان مرورگر ، یعنی قسمت heading اول، و heading دوم تغییر کرده باشند.(اگر تغییری در مرورگر نمی بینید، احتمالا به محتوای ذخیره نگاه می کنید‌. دکمه ی Ctrl+F5 را در مرورگر خود فشار دهید تا سرور مجبور شود پاسخ دهد). عنوان مرورگر با viewBag ساخته شده است. عنوانی که در قالب Index.cshtml view تنظیم کردیم و Movieapp به فایل Layout اضافه شدند.

همچنین توجه کنید که محتوای قال Index.cshtml با قالب -Layout.cshtml view ادغام شده است و یک HTML واحد به مرورگر فرستاده شده است.قالب Layout امکان ایجاد تغییرات کلی را در همه ی صفحات برنامه ی شما فراهم می کند.

 

یک قسمت از عنوان (در این قسمت کلمه ی Hello باز قالب view) به صورت سخت کد درآمده است. برنامه ی MVC یک ( V(view یک C هم برای Controller دارید اما برای model هنوز حرفM وجود ندارد. بعدا در مورد ساخت پایگاه داده ها و دریافت مدل های داده ای از آن بیشتر صحبت خواهیم کرد.

 ادامه آموزش در قسمت چهارم و از طریق مطالب آموزشی سایت افراگرافیک - www.afragraphic.ir خواهید دید.

لیست قیمت چاپ تراکت

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

 قیمت چاپ تراکت بر اساس نوع کاغذ ، تعداد رنگ ، ابعاد ، تیراژ محاسبه می شود.

انواع تراکت های تبلیغاتی افرا گرافیک: تحریر و گلاسه A5.A4.A3

1000 عدد
نوع جنس            قیمت دورو       قیمت یکرو       سایز               

گلاسه 135 گرم      A6           48000           64000
گلاسه 135 گرم      A5           86000           93000
گلاسه 135 گرم      A4          132000         147000
تحریر 80 گرم          A6           63000           62000
تحریر 80 گرم          A5           75000           83000
تحریر 80 گرم          A4          120000         146000
گلاسه 135 گرم      A3          264000         324000
تحریر 80 گرم          A3          210000         282000

2000 عدد

نوع جنس            قیمت دورو       قیمت یکرو       سایز               

گلاسه 135 گرم     A6            53000            69000
گلاسه 135 گرم     A5            90000          110000
گلاسه 135 گرم     A4          170000          191000
تحریر 80 گرم         A6           56000            66000
تحریر 80 گرم         A5           80000            98000
تحریر 80 گرم         A4         130000          165000
گلاسه 135 گرم     A3         478000          598000
تحریر 80 گرم         A3         265000          355000

5000 عدد

نوع جنس            قیمت دورو       قیمت یکرو       سایز               

گلاسه 135 گرم    A5          184000           195000
گلاسه 135 گرم    A4          338000           366000
تحریر 80 گرم        A6           78000             89000
تحریر 80 گرم        A5         130000           150000 
تحریر 80 گرم        A4         234000           270000
گلاسه 135 گرم    A3         626000           692000
تحریر 80 گرم        A3         490000           576000

برای دریافت هزینه های جدید و یا ارسال نمونه کار و محاسبه هزینه های چاپی دیگر به سایت افراگرافیک - www.afragraphic.ir مراجعه نمایید. ویا با شماره های 66912056-66120698 تماس حاصل نمایید.