bootstrap Archives - وب دیزاین https://wd7.ir/tag/bootstrap Web Design Mon, 15 Jan 2018 09:32:33 +0000 fa-IR hourly 1 https://wordpress.org/?v=6.8.5 نوار پیشرفته (Progress Bar) دایره‌ای https://wd7.ir/advanced-circuit-barprogress-bar.html https://wd7.ir/advanced-circuit-barprogress-bar.html#comments Fri, 01 Dec 2017 16:49:48 +0000 https://wd7.ir/?p=2019 با گذر زمان و پیشرفت امکانات و ابزارهای که برای کاربران ساخته‌شده بیشترین مهم‌ترین نکته مدنظر طراحان راحتی انتقال اطلاعات برای کاربران خود بوده‌اند؛ مثلاً گاهی می‌خواهید در سایت خود خیلی زیبایی، آسان، قابل‌درک و سریع به مشتریان خود درصد کار و میزان پیشرفت پروژه را انتقال دهید. پس‌نیاز به یک آیتم دارید که درصد […]

The post نوار پیشرفته (Progress Bar) دایره‌ای appeared first on وب دیزاین.

]]> با گذر زمان و پیشرفت امکانات و ابزارهای که برای کاربران ساخته‌شده بیشترین مهم‌ترین نکته مدنظر طراحان راحتی انتقال اطلاعات برای کاربران خود بوده‌اند؛ مثلاً گاهی می‌خواهید در سایت خود خیلی زیبایی، آسان، قابل‌درک و سریع به مشتریان خود درصد کار و میزان پیشرفت پروژه را انتقال دهید. پس‌نیاز به یک آیتم دارید که درصد را بیان کنید که BootStrap برای شما کلاس بسیار ساده‌ای از نوار پیشرفته که به‌صورت افقی عمل می‌کند به نام progress-bar را دارا می‌باشد. برای زیبای و مدرن بودن نوار پیشرفته با کمک پلاگین CircularLoader.Js می‌توان نوار پیشرفته دایره‌ای را ساخت. در قدم اول ما با نوار پیشرفته BootStrap آشنا می‌شویم.

بوت استرپ چندین نمونه نوار پیشرفته را به ما ارائه می‌دهد. نوار پیش‌فرض در BootStrap به شکل زیر است.

<div class="progress">
     <div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
       <span class="sr-only">70% Complete</span>
     </div>
</div>

 

نتیجه عکس زیر می باشد.

 

نکته: باید در نظر داشت که نوار پیشرفته در اکسپلورر 9 و ورژن های قبلی آن پشتیبانی نمی شود.

 

برای اینکه پیشرفت درصد کار خود را بر روی نوار بنویسد باید کلاسِ sr-only را حذف نمایید.

<p><div class="progress"><br>
   <div class="progress-bar" role="progressbar" aria-valuenow="70"<br>
     aria-valuemin="0" aria-valuemax="100" style="width:70%"><br>
      70%<br>
   </div><br>
</div></p>

 

نتیجه عکس زیر می باشد.

 

برای ایجاد انیمیشن بر روی نوارهای پیشرفت می‌توانید کلاس.active را اضافه کنید. در زیر یک نوار پیشرفت که به‌صورت انیمیشن درآمده است را مشاهده می‌کنید:

<div class="progress">
  <div class="progress-bar progress-bar-striped active" role="progressbar"
   aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:40%">
   40%
  </div>
</div>

نتیجه عکس زیر می باشد.

 

درباره CircularLoader.Js

CircularLoader.Js یک پلاگین جی کوئری با استفاده از HTML5 و جاوا اسکریپت ساخته‌شده و برای میله‌های پیشرفته‌های دایره‌ای که با درصد و یا بدون درصد مورداستفاده قرار می‌گیرد. این پلاگین کاملاً قابل تنظیم است و با تمام مرورگرهای سازگار با HTML5 کار می‌کند.

برای کار با این پلاگین در قدم اول آن را دانلود و آن را اتصال دهید به صفحه خود. از اینجا دانلود کنید.

<script src="/CircularLoader.js"></script>

و در html به‌صورت زیر divProgress را باید صدا کرد و کد نویسی را انجام داد:

<html>
   <head></head>
   <body>
     <div id="divProgress"></div>
   <body/>
</html>

در قدم بعد باید تابع را در قسمت جی کوئری راه‌اندازی کنیم:

$("#divProgress").circularloader({
  progressPercent: 35 
});

تنها پارامتر اجباری تابع  circularloader، پارامتر تعیین‌کننده درصد پیشرفت یا “progressPercent” است، سایر پارامترها، اختیاری است که در صورت سفارشی‌سازی می‌توان از آن‌ها استفاده کرد.

یکسری پارامترها هستند که می‌توان استفاده کرد و ما آن‌ها را معرفی می‌کنید.

$("#divProgress").circularloader({
  backgroundColor: "#ffffff",
  fontColor: "#000000",
  fontSize: "40px",
  radius: 70,
  progressBarBackground: "#cdcdcd",
  progressBarColor: "#aaaaaa",
  progressBarWidth: 25,
  progressPercent: 0,
  progressValue:0,
  showText: true,
  title: "Any Title"
}
  •  backgroundColor: رنگ پس‌زمینه (داخلی) نوار را مشخص می‌کند.
  •  fontColor: رنگ فونت را مشخص می‌کند.
  •  fontSize: اندازه فونت را مشخص می‌کند.
  •  radius: میزان انحنای گوشه‌ها را مشخص می‌کند.
  •  progressBarBackground: رنگ پس‌زمینه نوار پیشرفت را مشخص می‌کند.
  •  progressBarColor: رنگ نوار پیشرفت را مشخص می‌کند.
  •  progressPercent: در صد پیشرفت را مشخص می‌کند.
  •  progressValue: درصورتی‌که بخواهیم به‌جای درصد پیشرفت مقدار پیشرفت را به‌وسیله یک عدد نمایش دهیم، عدد موردنظر را برای این پارامتر تنظیم می‌کنیم.
  •  showText: نمایش یا عدم نمایش نوار پیشرفت را مشخص می‌کند.
  •  title: نشان دادن عنوان هدر برای نوار پیشرفت.

 

The post نوار پیشرفته (Progress Bar) دایره‌ای appeared first on وب دیزاین.

]]> https://wd7.ir/advanced-circuit-barprogress-bar.html/feed 1 سفارشی کردن ستون‌های سایت با توییتر بوت استرپ https://wd7.ir/customize-the-site-columns-with-twitter-bootstrap.html https://wd7.ir/customize-the-site-columns-with-twitter-bootstrap.html#respond Tue, 28 Nov 2017 00:32:09 +0000 https://wd7.ir/?p=2012 همان‌طور که با بوت استرپ آشنا هستید باید گفت که این توییتر بوت استرپ برای راحتی کار ما در واکنشگرای طراحی‌شده است و اول هم به طراحی موبایل‌ها توجه می‌کند و در موتورهای جستجو مطالب موردنظر باید مطالب باشد که سودمند و مفید باشند چون شناسایی سایت ما از طریق این مطالب صورت می‌گیرد پس […]

The post سفارشی کردن ستون‌های سایت با توییتر بوت استرپ appeared first on وب دیزاین.

]]> همان‌طور که با بوت استرپ آشنا هستید باید گفت که این توییتر بوت استرپ برای راحتی کار ما در واکنشگرای طراحی‌شده است و اول هم به طراحی موبایل‌ها توجه می‌کند و در موتورهای جستجو مطالب موردنظر باید مطالب باشد که سودمند و مفید باشند چون شناسایی سایت ما از طریق این مطالب صورت می‌گیرد پس باید ستون مطالب اصلی را در صدر ستون‌های دیگر داشته باشیم. در کد نویسی باید ترتیب را رعایت کنیم.

اما زمانی که صفحه‌نمایش از سایز موبایل فراتر برود ترتیب باید فرق کند و ستون مطالب اصلی باید در وسط قرار بگیرد. هدف ما سفارشی کردن ستون‌بندی‌های سایت ما می‌باشد. همان‌طور که در عکس‌ها زیر مشاهده می‌کنیم:

ترتیب قرارگیری در سایزهای مختلف و درخواستی خود:

توییتر بوت استرپ برای سفارش سازی ستون‌بندی‌ها دو کلاسcol-*-push-x و  col-*-pull-x را برای راحتی کار ما طراحی کرده‌اند و می‌توان از آن استفاده کرد.

معرفی کلاس‌های push و pull

با استفاده از push و pull موقعیت‌های ستون‌های طراحی‌شده را تغییر می‌دهیم، کاملاً برعکس offset عمل می‌کنند. وقتی ستون را push می‌دهیم به موقعیت ستون‌های کنار خود اثری نمی‌گذارد مثلاً اگر دوتا ستون داشته باشیم اگر ستون اول دارای کلاس push باشد ستون دوم در همان مکان باقی می‌ماند و به سمت راست (در بوت استرپ rtl به سمت چپ) فشرده نمی‌شوند، offset ستون‌های کنار خود را به سمت راست هل می‌دهد؛ اما pull ستون را به سمت چپ می‌برد؛ و تأثیری بر روی ستون‌های کناری خود نمی‌گذارد.

 

  • col-*-push-x: ستون را به تعداد  x  به سمت راست می‌کشد که مقدارش از 1 تا 12 می‌باشد. *از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.
  • col-*-pull-x: ستون را به تعداد x به سمت چپ می‌کشد که مقدارش از 1 تا 12 می‌باشد. * از جایی که ستون‌ها به‌طورمعمول نمایش داده می‌شوند که شامل sm, md,lg یا xs.

 

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

<div class="row">
    <div class="col-sm-5 col-sm-push-5">Content B</div>
    <div class="col-sm-5 col-sm-pull-5">Content A</div>
    <div class="col-sm-2">Content C</div>
</div>

 

The post سفارشی کردن ستون‌های سایت با توییتر بوت استرپ appeared first on وب دیزاین.

]]> https://wd7.ir/customize-the-site-columns-with-twitter-bootstrap.html/feed 0