ورود به حساب ثبت نام جدید فراموشی کلمه عبور
برای ورود به حساب کاربری خود، نام کاربری و کلمه عبورتان را در زیر وارد کرده و روی “ ورود به حساب” کلیک کنید.





اگر فرم ثبت نام برای شما نمایش داده نمیشود، اینجا را کلیک کنید.









اگر فرم بازیابی کلمه عبور برای شما نمایش داده نمیشود، اینجا را کلیک کنید.





نمایش نتایج: از 1 به 2 از 2
  1. #1
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    5

    آشنایی با فریم ورک طراحی قالب Bootstrap

    فریمورک فرانت اند برازنده، قابل یادگیری و استفاده آسان، و قدرتمند برای طراحی سریع تر و آسان تر صفحات وب. ساختن یک وبسایت از پایه کار سختی است. حتی بعضی افراد که توانایی کد زدن به زبان های وب مثل JavaScript, HTML وCSS را دارند در طی ساخت یک وبسایت به مشکل بر میخورند. خوشبختانه تعدادی از توسعه* دهنده* ها و طراحان تویتر (Twitter) از این مشکل اطلاع دارند و فریمورکی به نام Bootstrap را راه اندازی کردند که زندگی را برای طراحان وب و توسعه دهندگان آسان تر کنند.در این مقاله نگاهی به Bootstrap میندازیم و چند تا از قابلیت های آن را امتحان میکنیم تا بفهمیم این فریمورک چطوری به کارمون سرعت میده.


    استفاده کردن از Bootstrap

    Bootstrap فریمورک بسیار قدرتمندی است برای توسعه دهندگان فرانت اند، و قابلیت های مختلفی همراه دارد که ما به آنها نیاز داریم برای ساخت سریع تر و آسان تر یک وبسایت کامل بدون اینکه نیاز داشته باشیم از صفر خودمان بسازیمش.
    برخی از قابلیت های موجود در Bootstrap عبارتند از:
    • شبکه (Grid) برای صفحه آرایی واکنش گرا (Responsive)
    • CSS پایه برای فن چاپ (Typography)، دکمه ها (Buttons)، فرم ها (Forms)، جدول ها (Tables) و تصاویر.
    • اجزا تشکیل دهنده محیط کاربری مانند پیمایش (Navigation)، میله پیشرفت کردن (Progress Bar)، هشدار ها (Alerts)، نوار پیمایش (Breadcrumbs) و… با سبک های ثابت و مدرن .
    • plugin های jQuery برای ساختن تجربه محاوره ای (Interactive) در وبسایت .
    حال ما فرض میکنیم شما Bootstrap رو دانلود کردین ( از twitter.github.com/bootstrap/index.html) و همه ی اسِت های (Assets) لازم که شامل جاوا اسکریپت (JavaScript) و CSS آماده هستند به صورت زیر؛
    1 <link rel="stylesheet" href="css/bootstrap.css">
    2 <script src="js/bootstrap.min.js" type="text/javascript"></script>

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




    CSS اصلی: دکمه ها (Buttons)

    Bootstrap سی اس اس پایه دارد که حاوی استایل هایی (styles) برای برخی از اجزای ابتدایی HTML شامل <button> است. Button یکی از اجزا معمولی است که در یک وبسایت بکار میرود و در Bootstrap استایل مربوط به آن توسط کلاس (class) به نام btn اعمال میشود؛

    1 <button type="button" class="btn">Default Button</button>

    نتیجه ی این مارک آپ بصورت زیر نمایش داده شده که استایل پیش فرض محسوب میشود؛


    همچنین ما میتوانیم با اضافه کردن کلاس های بیشتر نقش دکمه رو تعریف کنیم؛

    1 <button type="button" class="btn btn-success">Button</button>
    2 <button type="button" class="btn btn-warning">Button</button>
    3 <button type="button" class="btn btn-danger">Button</button>

    متناسب با نقش آن هر دکمه یک رنگ متفاوتی میگیرد:



    استایل Bootstrap با LESS ساخته شده. که استفاده آن را بجای CSS معمولی به شما توصیه میکنیم؛ کهبدین صورت استایل ها قابل تنظیم کردن بیشتری پیدا می کنند.
    به عنوان مثال رنگ دکمه موفقیت (Success Button) به دیزاین شما زیاد نمی خورد؛ ما به راحتی میتوان متغیر هایی که در فایل variables.less موجود است را تغییر بدهیم، مثلا بدین صورت؛


    1 @btnSuccessBackground: #bce895; //#62c462;
    2 @btnSuccessBackgroundHighlight: #a0cd78; //#51a351;

    چون بقیه آرگومان ها (Arguments) مانند سایه ها (Shadows) و گرادینت (Gradients) از قبل تنظیم شدند، استایل ها بصورت اتوماتیک هماهنگ میشوند


    فردا شب منتظر قسمت بعدی آموزش باشید.....
    [برای نمایش لینک باید عضو شوید. ]
    آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
  2. #2
    academyIT
    كاربر عادي
    تاریخ عضویت
    2015 Nov
    نوشته ها
    122
    0
    5

    Lightbulb آشنایی با فریم ورک طراحی قالب Bootstrap (قسمت دوم)

    اجزای تشکیل دهنده ی محیط کاربری
    Bootstrap همچنان برخی کامپوننت های (Components) که قابل استفاده مجدد را دارند فراهم میکند برای پیمایش (Navigation)، صفحه گذاری (Pagination)، میله پیشرفت (Progress Bar)، دکمه هاو خیلی اجزای بیشتر. اضافه کردن این اجزا به آسانی استایل سازی دکمه ها در بخش قبلی است، و در این مثال، ما ارتقا میدهیم آن دکمه ها را و در یک گروهی از دکمه بدین صورت قرار میدهیم؛

    1 <div class="btn-group">
    2 <button type="button" class="btn btn-success">Button</button>
    3 <button type="button" class="btn btn-warning">Button</button>
    4 <button type="button" class="btn btn-danger">Button</button>
    5 </div>

    متوجه شدید آیا که دکمه ها الان درون یک <div> قرار دارند که کلاس آن btn-group است؟


    ما همچنین میتوانیم یک کلاس اضافه تر کنیم که این دکمه ها بصورت عمودی قرار بگیرند:

    1 <div class="btn-group btn-group-vertical">
    2 <button type="button" class="btn btn-success">Button</button>
    3 <button type="button" class="btn btn-warning">Button</button>
    4 <button type="button" class="btn btn-danger">Button</button>
    5 </div>


    پلاگین های jQuery

    من هنوز بخاطر میاورم زمانی که من ابتدا یک وبسایت استاتیک (Static) ساختم بهد از سایتی به سایت دیگر تو اینترنت برای پیدا کردن یک پلاگیم مناسب برای اضافه کردن یک ویژگی interactive باید جست و جو میکردم. با استفاده از Bootstrap شما نیازی به این کار ندارین بخاطر اینکه پلاگین های jQuery که همراه آن است مانند: Accordion, Modal, Tooltip, Popup, Tab و خیلی پلاگین دیکر راه حل مناسبی برای این مشکل اند.
    در مثال زیر ما پلاگین Tooltip را بکار میگیریم.

    1 <p id="container">Jujubes icing oat cake
    2 <a href="#" rel="tooltip" title="a Lolipop Tiramissu?">lollipop tiramisu</a>.
    3 Tiramisu sesame snaps croissant chupa chups chupa chups chocolate cake candy sugar plum
    4 jelly beans. Lollipop pudding jelly sweet jujubes cookie pudding. Oat cake topping gummi
    5 bears oat cake. Muffin jelly-o cake sesame snaps ice cream cotton candy.</p>


    توجه کنید که ما یک link بامشخصات rel و title اضافه کردیم. این لینکی است که یک پیغام را نشون میده هنگامی که ماوس روی آن هاور (hover) میکند. برای فعال سازی آن اسکریپت زیر را اضافه میکنیم :

    1 $('#container').tooltip({
    2 selector: "a[rel=tooltip]"
    3 });

    این اسکریپت هر لینکی که تحت آی دی #container است را هدف میگیره باrel=tooltop؛


    همان طور که میبینید روش اضافه کردن Tooltip با پلاگین های bootstrap کاملا مستقیم است و بر خلاف زمان های گذشته (که بعضی اوقات ما دچار تداخل و خطا میشدیم در حین استفاده کردن از پلاگین های متعدد)، این پلاگین ها - Tooltip, Popup, Tabs و … - همگی با هم بدون مشکل فعالیت میکنند.


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


    نتیجه گیری
    در Bootstrap قابلیت های بسیار بیشتری وجود دارد که ما همه ی آنها را بررسی نکردیم. که ما در مقاله بعدی به باقی این قابلیت ها می پردازیم و به صورت قدم به قدم شما را در ساختن یک وبسایت واقعی راهنمایی می کنیم. در زیر ما ۱۰ وبسایتی که به صورت بسیار خوب از Bootstrap به عنوان پیکره اصلی سایت خود استفاده کردند انتخاب کردیم برای الهام شما.
    Ozwald Boateng
    Red Antler
    The Studio Dreams
    Madeira Cloud
    Open Cooks•
    BreweryDB
    Source: [برای نمایش لینک باید عضو شوید. ]
    [برای نمایش لینک باید عضو شوید. ]
    آکادمی آی تی مرجع آموزش در زمینه های مختلف آی تی از جمله : آموزش طراحی سایت ،آموزش شبکه و ...

    [برای نمایش لینک باید عضو شوید. ]


    [برای نمایش لینک باید عضو شوید. ]
نمایش نتایج: از 1 به 2 از 2

اطلاعات موضوع

کاربرانی که در حال مشاهده این موضوع هستند

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

کلمات کلیدی این موضوع

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •  

Content Relevant URLs by vBSEO 3.6.0 RC 2